第三章 DOM操作
3.1DOM操作的分类
一般来说,DOM操作分为3个方面,DOM Core(核心),HTML-DOM和CSS-DOM
3.2.1查找节点
1.查找元素节点
2.查找属性节点
利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。
attr()方法的参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字。
3.2.2创建节点
1.创建元素节点
//创建两个节点
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
//添加到ul中
$("ul").append($li_1);
$("ul").append($li_2);
2.创建文本节点
//创建两个节点
var $li_1=$("<li>香蕉</li>");
var $li_2=$("<li>桔子</li>");
//添加到ul中
$("ul").append($li_1);
$("ul").append($li_2);
3.创建属性节点
与创建文本节点类似
3.2.3插入节点
3.2.3删除节点
remove()和empty()
empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。
3.2.5复制节点
clone()方法来完成。
3.2.6替换节点
replaceWith()和replaceAll().
3.2.7包裹节点
wrap()方法 ,wrapAll(), wrapInner()
3.2.8属性操作
removeAttr():删除元素属性。
//删除<p>元素的title属性
$("p").removeAttr("title");
获取属性:var $para=$("p");
var p_txt=$para.attr("title");
设置属性:
$("p").attr("title","值的内容"); //设置单个属性值
3.2.9样式操作
1.获取样式和设置样式
都是用attr()方法来完成
2.追加样式。
addClass()方法
3.移除样式
removeClass()方法
4.切换样式
toggle()
toggleClass():样式上的重复切换
5.判断是否含有某个样式
hasClass()
3.2.10设置和获取HTML,文本和值
1.html()方法 :用来读取或者设置某个元素中的HTML内容。
2.text()方法: 用来读取或者设置某个元素中的文本内容。
3.val()方法:可以用来设置和获取元素的值。
$("p").attr("title":"your title","name:":"test");
this指向当前的文本框,this.defaultValue就是当前文本框的默认值。
val()方法有另外一个用处,就是它能使select(下拉列表框),checkbox(多选框),radio(单选框)相应的
选项被选中。
val()方法是从最后一个选项往前读取。
也可以用attr()方法来实现同样的功能。
3.2.11遍历节点
children():取得匹配元素的子元素集合。
next():用于匹配元素后面紧邻的同辈元素。
prev():用于匹配元素前面紧邻的同辈元素。
siblings():用于匹配元素前后所有的同辈元素。
closest():它用来取得最近的匹配元素。
3.2.12 CSS-DOM操作
直接利用css()方法获取元素的样式属性
$("p").css("color");
直接利用css()方法设置某个元素
$("p").css("color","red");
$("p").css({"fontSize":"30px","backgroundColor":"#888888"});
设置透明度
$("p").css("opacity","0.5");
获取高度两种方法
$(element).css("heigth");
$("p").heigth();
heigth()方法也能用来设置元素的高度。
第四章 jQuery事件和动画
4.1 jQuery中的事件
4.1.1加载DOM
在常规的JavaScript代码中,通常使用wiondow.onload方法,而在jQuery中,使用的是
$(document).ready()方法。
$(document).ready(function(){
//
})
简写:
$(fuuction(){
//
})
4.1.2事件绑定
bind(type [,data],fn);
bind()方法有3个参数
第1个参数是事件类型
第2个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。