JQuery获取html元素方法详解

阅读更多
JQuery获取html元素方法详解

1.1 JQuery选择器
语法:
        jquery(selector, [context]);
        selector参数,选择器。
        content参数,将selector选择器限定在context这个环境中。
        默认情况下,即不传第二个参数,选择器从文档根部对DOM进行搜索($()将在当前的HTML document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。
实例:
$("div.foo").click(function() {  
    $("span", this).addClass("bar");  
}); 

        由于我们已经将 span 选择器限定到this这个环境中,只有被点击元素中的 span 会得到附加的class。
1.2 JQuery获取html的方法
1.2.1实例html代码



  
  实例


  • I
  • II
    • A
    • B
    • C
  • III
  • 1
  • 2
  • 3
  • 1

1.2.2获取父级元素
1.2.2.1 parent([expr])方法

作用:获取一个包含着所有匹配元素的唯一父元素的元素集合。
实例:

1.2.2.2 parents([expr])方法
作用:获取一个包含着所有匹配元素的祖先元素的元素集合(不限于父元素 )。
实例:

1.2.2.3 closest([expr])方法
作用:从当前元素开始沿 DOM 树向上,获取匹配选择器的第一个祖先元素。
注意:
        closest方法会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jquery对象。
        closest方法是必须要传入一个选择器表达式参数,否则,就会返回一个空的jquery对象。

实例:

1.2.2.4扩展——closest与parents的区别
        前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找。
        前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤。
        前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
1.2.3 获取同级元素
1.2.3.1 next([expr])方法

作用:获取指定元素的下一个同级元素。
实例:

1.2.3.2 nextAll([expr])方法
作用:获取指定元素后边的所有同级元素。
实例:

1.2.3.3 prev()方法
作用:获取指定元素的上一个同级元素。
实例:

1.2.3.4 prevAll()方法
作用:获取指定元素的前边所有的同级元素。
实例:

1.2.3.5 siblings()方法
作用:获取指定元素的兄弟姐妹节点,不分前后。
实例:

1.2.3.6 andSelf()【addBack()】方法
作用:将之前匹配的元素加入到当前匹配的元素中。
注意:jQuery 1.2 新增该函数,但从1.8 开始被标记为已过时。从jQuery 1.8开始,请使用addBack()函数替代该函数。
实例:

1.2.4获取子元素
1.2.4.1 children()方法

作用:获取匹配元素集合中每个元素的所有子元素(仅儿子辈)。
实例:

1.2.4.2 find()方法
作用:获取匹配元素集合中每个元素的后代(只要符合,不管是儿子辈,孙子辈都可以)。
注意:只在后代中遍历,不包括自己。
实例:

1.2.4.3拓展——children()和find()的异同
相同点:
        两者都是用来获得element的子elements的。
        两者都不会返回text node。
不同点:
        前者获得的仅仅是元素一下级的子元素,即:immediate children;后者获得所有下级元素,即:descendants of these elements in the DOM tree 。
        前者的参数selector 是可选的,用来过滤子元素;后者的参数selector方法是必选的。
        后者事实上可以通过使用jQuery( selector, context )来实现,即$('li.item-ii').find('li')等同于$('li', 'li.item-ii')。
1.2.4.4 contents()方法
作用:返回下面的所有内容,包括节点和文本。
实例:

1.2.4.5拓展——contents()和children()的区别
        两者最大的区别就在于前者包括文本,即使是空白文本,也会被作为一个 jQuery对象返回,而后者则只会返回节点 。
1.2.5查找元素
1.2.5.1 filter()方法

作用:从一系列匹配的元素中筛选想要的元素。
实例一:在一系列的匹配元素中,获得filter()选择器匹配的元素。

实例二:从一系列的匹配元素中,获得通过function测试的元素。

或者

1.2.5.2拓展——filter ()和find()的区别
        两者完全不一样。前者是从初始的jQuery对象集合中筛选出一部分,而后者的返回结果,不会有初始集合中的内容,比如$("p").find("span"),是从元素开始找,等同于$("p span")。

你可能感兴趣的:(jquery,html)