Jquery 3-4章
第三章
1.DOM操作
访问节点使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、getElementsByTagName()
根据层次关系访问节点
节点属性
| 属性名称 | 描述 |
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
| 属性名称 | 描述 |
| firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
2.操作节点
操作节点的属性getAttribute("属性名")
setAttribute("属性名","属性值")
创建和插入节点
| 名称 | 描述 |
| createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
| A.appendChild( B) | 把B节点追加至A节点的末尾 |
| insertBefore( A,B ) | 把A节点插入到B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
| 名称 | 描述 |
| removeChild( node) | 删除指定的节点 |
| replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
style属性
// 语法
// HTML元素.style.样式属性＝"值"
// 示例
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
className属性
// 语法
// HTML元素.className="样式名称"
// 示例
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
.cartOver{color：red;}
.cartListOut{color：bule;}
获取元素的样式
//语法：
//HTML元素.style.样式属性;
// 示例
alert(document.getElementById("cartList").display);
//语法：
//document.defaultView.getComputedStyle(元素,null).属性;
// 示例
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
//语法：
//HTML元素. currentStyle.样式属性;
// 示例
alert(document.getElementById("cartList").currentStyle.display);
3.获取元素属性
//语法
document.documentElement.属性;
元素属性应用
| 属性 | 描述 |
| offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
| offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的宽度 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| scrollTop | 返回匹配元素的滚动条的垂直位置 |
| scrollLeft | 返回匹配元素的滚动条的水平位置 |
| clientWidth | 返回元素的可见宽度 |
| clientHeight | 返回元素的可见高度 |
第四章
1.对象
对象是包含相关属性和方法的集合体属性
方法
自定义对象
基于Object对象的方式创建对象
//语法
// var 对象名称=new Object( );
// 示例
var flower=new Object();
flower.name="长春花";
flower.genera="夹竹桃科 长春花属";
flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
flower.uses="观赏或用药等";
flower.showName=function(){ alert(this.name); }
flower.showName();
内置对象
常见的内置对象
String（字符串）对象
Date（日期）对象
Array（数组）对象
Boolean（逻辑）对象
Math（算数）对象
RegExp对象
2.构造函数
构造函数始终都应该以一个大写字母开头创建及使用构造函数创建对象示例
function Flower(name,genera,area,uses){
this.name=name;
…….
this.showName=function(){
alert(this.name);
}
}
var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")
flower1.showName();
3.原型对象
每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象prototype就是通过调用构造函数而创建的那个对象实例的原型对象
4.继承
原型链一个原型对象是另一个原型对象的实例
相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链
对象继承
借用构造函数
// 语法
apply([thisOjb[,argArray]])
应用某一对象的一个方法，用另一个对象替换当前对象
// 语法
call([thisObj[,arg1[,arg2[, [,argN]]]]])
调用一个对象的一个方法，以另一个对象替换当前对象
组合继承
有时也叫做伪经典继承
将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承