第四章 使用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({”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]) |
参数可选，设置或返回匹配元素相对滚动条顶部的偏移 |