黑马程序员技术交流社区

标题: 【石家庄校区】笔记JavaScript-pro [打印本页]

---

作者: xcxiao1992    时间: 2017-11-19 17:27
标题: 【石家庄校区】笔记JavaScript-pro



【JS中的Window对象的定时的操作】
* 设置定时的方法


* 清除定时的方法





【CSS的显示和隐藏的属性】
* display
    * block：显示元素：
    * none：隐藏元素：

JS中的BOM对象:


Ø Window


* alert(); --弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm(); --弹出一个确认窗口
* prompt(); --弹出一个可输入的对话框
* open(); --打开一个新窗口

Ø Navigator ：包含的是浏览器的信息.


Ø Screen:用来获得屏幕信息:


Ø History:浏览器的历史对象:


Ø Location:包含URL信息的对象



【JS的输出】
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
【JS的事件】
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.

JS的事件的总结：
* onload :
* onclick :
* onsubmit :
* onfocus :
* onblur :
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.

键盘操作事件:
* onkeydown :
* onkeyup :
* onkeypress:

鼠标操作事件：
* onmousemove：
* onmouseout：
* onmouseover：
* onmousedown
* onmouseup

【使用JS获得表格的行数】
* 获得到控制的表格元素:
    * var tab1 = document.getElementById(“tab1”);
    * var len = tab1.rows.length;

}

表格中的tbody和thead标签
function changeColor(){
// 获得操作的表格的控制权:
var tab1 = document.getElementById("tab1");
// 获得tbody中的所有的行.
var len = tab1.tBodies[0].rows.length;
for(var i = 0;i< len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows.style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}



JS中的DOM对象：
【DOM的概述】
Ø 什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
Ø DOM的使用：
知道document，element，attribute中的属性和方法
【DOM的常用的操作】
Ø 获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
Ø 创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
Ø 添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
Ø 删除节点：
* element.removeChild(); -- 删除元素
【使用DOM完成对ul中添加一个li元素】
function addElement(){
var city = document.getElementById("city");
// 创建一个元素:
var liEl = document.createElement("li");
// 创建一个文本节点:
var text = document.createTextNode("深圳");
// 添加子节点:
liEl.appendChild(text);
city.appendChild(liEl);
}

【JS中创建数组】


【JS的事件】
下拉的列表的改变的事件.onchange.



JS的内置对象:



Ø Array:


Ø Boolean:


Ø Date:


* http://www.baidu.com?time=new Date().getTime();
Ø Math对象:


Ø String对象:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
JS的全局函数：


* parseInt();
    * parseInt(“11”);
* parseFloat();
    * parseFloat(“32.09”);

* 编码和解码的方法：
// 解码
* decodeURI();
* decodeURIComponent();

// 编码
* encodeURI();
* encodeURIComponent();

eval函数：
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);
JavaScript:
* JavaScript:基本使用:
   * ECMAScript:
       * 变量：弱变量类型: var i;
       * 数据类型:原始类型和引用类型.
       * 语句
       * 运算符
       * 对象:
           * String,Boolean,Date,Math,Number,正则...
       * 全局函数:eval(),encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent(),parseInt(),parseFloat()
   * BOM:浏览器对象.
       * window:
       * Navigator:
       * Screen:
       * History:
       * Location:
   * DOM：文档对象.
       * 获得元素:
           * document.getElementById(),document.getElementsByName(),document.getElementsByTagName();
       * 添加元素:
           * element.appendChild(),element,insertBefore();
       * 删除元素:
           * element.removeChild();
       * 创建元素:
           * document.createElement(),document.createTextNode();
       * 修改元素值:
           * innerHTML属性:

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2