首页 > 代码库 > JQUREY DOM 操作详解

JQUREY DOM 操作详解

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() 方法返回不匹配标准的所有元素。

JQUREY DOM 操作详解