JQuery获取html元素方法详解

程序员文章站 2022-07-07 18:14:51

...

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代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实例</title>
</head>
<body>
<ul class="level-1">
  <li class="item-i fist-li">I</li>
  <li class="item-ii">
    II
    <ul class="level-2">
      <li class="item-a fist-li">A</li>
      <li class="item-b">B</li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<ul class="level-3">
  <li class="item-1 fist-li">1</li>
  <li class="item-2">2</li>
  <li class="item-3">3</li>
</ul>
<ul class="level-4">
  <li class="item-one fist-li">1</li>
</ul>
<!--[if !IE]><!-->  
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
<!--<![endif]-->  
<!--[if lte IE 9]>  
  <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>  
<![endif]-->
</body>
</html>

1.2.2获取父级元素
1.2.2.1 parent([expr])方法
作用：获取一个包含着所有匹配元素的唯一父元素的元素集合。
实例：

<script>
  $(".fist-li").parent();
  $(".fist-li").parent(".level-2");
</script>

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

<script>
  $(".item-a").parents();
  $(".item-a").parents(".level-1");
</script>

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

<script>
  $(".item-a").closest(".item-a");
  $(".item-a").closest(".level-1");
</script>

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

<script>
  $(".item-a").next();
  // next方法不允许传入参数(可以传入查找元素的下一个同级元素的选择器，但没有意义)，否则，就会返回一个空的jquery对象。
  $(".item-a").next(".item-b");
</script>

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

<script>
  $(".item-a").nextAll();
  // nextAll方法允许传入参数，但传入的参数只能是指定元素后边所有同级元素中的某一元素的选择器，否则，就会返回一个空的jquery对象。
  $(".item-a").nextAll(".item-b");
</script>

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

<script>
  $(".item-c").prev();
  //同next()方法
  $(".item-c").prev(".item-b");
</script>

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

<script>
  $(".item-c").prevAll();
  //同nextAll()方法
  $(".item-c").prevAll(".item-b");
</script>

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

<script>
  $(".item-b").siblings();
  $(".item-b").siblings(".item-a");
</script>

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

<script>
  $(".item-a").nextAll().addBack();
</script>

1.2.4获取子元素
1.2.4.1 children()方法
作用：获取匹配元素集合中每个元素的所有子元素（仅儿子辈）。
实例：

<script>
  $(".level-1").children();
  $(".level-1").children(".item-ii");
</script>

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

<script>
  //选择器表达式对于find()方法是必需的参数。如果需要返回所有后代元素可以传递通配选择器“*”。
  $(".level-1").find("*");
  $(".level-1").find(".item-b");
</script>

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()方法
作用：返回下面的所有内容，包括节点和文本。
实例：

<script>
  $(".level-1").contents();
  $(".level-1").contents(".item-i");
</script>

1.2.4.5拓展——contents()和children()的区别
两者最大的区别就在于前者包括文本，即使是空白文本，也会被作为一个 jQuery对象返回，而后者则只会返回节点。
1.2.5查找元素
1.2.5.1 filter()方法
作用：从一系列匹配的元素中筛选想要的元素。
实例一：在一系列的匹配元素中，获得filter()选择器匹配的元素。

<script>
  $("ul").filter(".level-2");
</script>

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

<script>
  $('ul').filter(function(index){
    //参数index代表了匹配元素的索引，此索引是从0开始的。
    if(index==1 || index==2){ return true; }
  });
</script>

或者

<script>
  $('ul').filter(function(index) {
    return $("li", this).length == 1;
  });
</script>

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

JQuery获取html元素方法详解

jquery删除指定的html标签并保留标签内文本内容的方法

jquery表单插件form使用方法详解

jquery实现input框获取焦点的方法

jQuery实现标签子元素的添加和赋值方法

JQuery异步获取返回值中文乱码的解决方法

详解：怎么让一个HTML元素的区域铺满全屏？

百度音乐永久VIP会员免费获取方法图文详解(亲测有效)

百度音乐永久VIP会员免费获取方法图文详解(亲测有效)

jQuery异步获取json数据方法汇总

Jquery获取和修改img的src值的方法