Jqurey DOM 操作详解

一、获取

1、获取内容----.text()  .html()   .value()

• text() - 设置或返回所选元素的文本内容                         格式：$(选择器).text();
• html() - 设置或返回所选元素的内容（包括 HTML 标记）    格式：$(选择器).html();
• val() - 设置或返回表单字段的值                                   格式：$(选择器).val()

2、获取属性----------attr()

格式：$("选择器").attr("属性名")

二、设置

1、设置内容

.text()         格式：$("选择器").text("要设置的内容")

.html()         格式：$("选择器").html("要设置的内容")

.val()         格式：$("选择器").val("要设置的内容")

2、设置属性

（1） .attr()            格式：$("选择器").attr("属性名","属性值")

（2）attr() 方法也允许您同时设置多个属性。$("button").click(function() {$("选择器).attr({"属性名" : "属性值","属性名" : "属性值"})})

（3）attr()方法也允许回调函数，$("选择器").attr("属性名",function(){回调函数})

三、添加

• append() - 在被选元素的结尾插入内容--------内部添加
• prepend() - 在被选元素的开头插入内容--------内部添加
• after() - 在被选元素之后插入内容--------------外部添加
• before() - 在被选元素之前插入内容-------------外部添加

格式：括号内部添加的是字符串

四、删除

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

格式：$("选择器").empty()

格式：$("选择器").remove()

过滤删除 $("选择器").remove("子选择器")

五、CSS类

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

格式：前三个括号内部放的是Class的名字

css("样式名","样式值")，可以添加多个样式css({"样式名":"样式值","样式名":"样式值",........})

六、尺寸

jQuery 提供多个处理尺寸的重要方法：

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

七、JQUERY 遍历

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

jQuery 提供了多种遍历 DOM 的方法。

遍历方法中最大的种类是树遍历（tree-traversal）。

1、祖先

祖先是父、祖父或曾祖父等等。

通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先

• parent()--------parent() 方法返回被选元素的直接父元素。
• parents()------parents() 方法返回被选元素的所有祖先元素，它是一个集合
• parentsUntil()----------parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素，也是一个集合

2、后代

后代是子、孙、曾孙等等。

• children()---------children() 方法返回被选元素的所有直接子元素。可以进行过滤选择.children("p.1")返回class名为1的p元素
• find()-------------find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。find("选择器")

3、同胞

同胞拥有相同的父元素。

• siblings()--------------siblings() 方法返回被选元素的所有同胞元素。
• next()-----------------next() 方法返回被选元素的下一个同胞元素。
• nextAll()--------------nextAll() 方法返回被选元素的所有跟随的同胞元素。
• nextUntil()------------nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
• prev()----------------返回被选元素的上一个同胞元素
• prevAll()--------------返回被选元素的所有前面的同胞元素。
• prevUntil()------------返回介于两个给定参数之间的所有前面的同胞元素

4、元素过滤

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。