第四章使用jQuery操作DOM

一.DOM操作

在jQuery中的DOM操作主要可分为样式操作、文本和value属性值操作、节点操作；

节点操作又包含属性操作、节点遍历和CSS-DOM操作。

其中最核心的部分是节点操作和节点遍历。

二.样式操作

1.设置和获取样式

设置样式的语法： $(selector).css(name,value);//设置单个属性值

$(selector).css({name:value,…..nameN:valueN});//设置多个属性值

获取样式的语法：$(selector).css(name);//获取属性name的值

2.追加和移除样式

增加样式：

$(selector).addClass(className);//增加单个样式

$(selector).addClass(className1，className2…..);//增加多个样式

移除样式：

$(selector).removeClass(className);//移除单个样式

$(selector).removeClass(className1，className2….);//移除多个样式

3.切换样式

语法： $(selector).toggleClass(className);//切换样式

其中，参数className为样式的名称，其功能是当元素中包含有名称为className的CSS类样式时，删除该类样式，否则增加一个该名称的类样式。（如果有则删除，没有则增加）。

4.判断是否含有指定的样式

语法： $(selector).hasClass(className);

参数className是类名，该名称是必选的。返回值为布尔类型，如果有则为true

三.内容操作

1.HTML代码操作

新增页面内容：html([content]);

获取页面内容：html();

其中content是可选项目，表示要添加的内容。无参数时，表示获取被选元素的文本内容。

2.标签内容操作

在jQuery中，可以使用text()方法获取设置元素的文本内容，不含HTML 标签

设置文本：text([content]);

获取文本：text();//获取第一个被选元素的文本

text()方法支持xml文档，而html()方法不支持xml文档。

3.属性值操作

获取元素value属性值的方法val();

语法：val([value]); //设置元素的属性值

Val();//获取第一个被选元素的value属性的值

四.节点与属性操作

1.节点操作

1.查找节点

$(selector);

2.创建节点元素

语法：$(selector) 或者 $(element) 或者 $(html)

例：

var $newnode=$(“<li></li>”);

var $newnode=$(“<li>我是一个li</li>”);

var $newnode=$(“<li title=’last’>我是一个li </li>”);

3.插入节点

内部插入的方法
方法	描述
append(content)	$(A).append(B)表示将B追加到A中如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中如：$newNode1. prependTo ("ul");

外部插入的方法
方法	描述
after(content)	$(A).after (B)表示将B插入到A之后如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前如：$newNode1.insertBefore("ul");

4.删除节点

将jquery对应的dom节点直接删除

$("#bj").remove();

jquery对象的所有的empty()方法，清空jquery对象对应的Dom对象的所有子节点；

$("#game").empty();

5.替换节点

$("#bj").replaceWith($("<li>test</li>"));

$("<li>TEST</li>").replaceAll($("#city li:last"));

6.复制节点

语法：$(selector).clone([includeEvents]);

其中参数includeEvents为可选值，为布尔值true或false。表示是否复制元素的所有处理事件，为true时复制事件，为false时不复制事件。

2.属性操作

1.获取与设置元素属性

语法：$(selector).attr([name]);//获取属性值

或者：$(selector).attr({[name1:value1],[name2:value2]…[nameN:valueN]});//设置多个属性值

例：设置图片的宽高属性

$(“.contain img”).attr({width:”200”,height:”80”});

2.删除元素属性

语法：$(selector).removeAttr(name);

其中参数为元素属性的名称。例：删除图片的宽度属性

$(“contain img”).removeAttr(“width”);

五.节点遍历

1.遍历子元素

语法：$(selector).children([expr]);

其参数expr为可选，用于过滤子元素的表达式。

例：查找div(id=”id”)下面的li元素

S(“#id”).children(“li”);

2.遍历同辈元素

方法	描述
next([expr])	用于获取紧邻匹配元素之后的元素，如：$("li:eq(1)").next().css("background-color","#F06");
prev([expr])	用于获取紧邻匹配元素之前的元素，如：$("li:eq(1)").prev().css("background-color","#F06");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素，如：$("li:eq(1)").siblings().css("background-color","#F06");

3.遍历前辈元素

jQuery中可以遍历前辈元素，方法如下：

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

4遍历其他方法

jQuery中还有很多其他的遍历方法，如each()、end()、find()、filter()、eq()、first()、last()等。

1） each()方法

语法：$(selector).each(function(index,element));

其中，参数index表示选择器的index位置，element表示当前的元素，当返回值为false时可用于及早停止循环。

例：使用each()方法输出列表内容

$(document).ready(function(){

$("img").click(function(){

$("li").each(function(){

var str=$(this).text()+"<br>";

$("section").append(str);

})

});

2） end()方法

语法：.end();

end()方法结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态。

例：

$(document).ready(function(){

//用过滤选择器给h2设置背景颜色和字体颜色

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

//匹配元素集合中的第一个元素

$(".gameList li").first().css("background","#b8e7f9").end().last().

css("background","#d3f4b5");

//li 最后一个没有边框

$(".gameList li:last").css("border","none");

});

六.CSS-DOM操作

方法	描述
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。此方法仅对可见元素有效
offsetParent()	返回最近的以定位祖先元素。定位元素指元素的CSS position属性值被设置为relative,absolute或fixed的元素
Position()	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选，设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选，设置或返回匹配元素相对滚动条顶部的偏移