zoukankan      html  css  js  c++  java
  • jquery 常用选择器 回顾 ajax() parent() parents() children() siblings() find() eq() has() filter() next()

    1. $.ajax()

    ajax 本身是异步操作,当需要将 异步 改为 同步时:

    async: false
    

    2.parent()  父级元素  和  parents() 祖先元素 的区别

    parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
    parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

    例如:

    <div id='div1'>
      <div id='div2'>
    	  <p></p>
      </div>
      <div id='div3' class='a'>
    	  <p></p>
      </div>
      <div id='div4'>
    	  <p></p>
      </div>
    </div>

    $('p').parent()  取到的是div2,div3,div4
    $('p').parent('.a')  取到的是div3
    $('p').parent().parent()  取到的是div1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。
    $('p').parents()  取到的是div1,div2,div3,div4
    $('p').parents('.a')  取到的是div3

    3.children()  子级元素

    children(":eq()")  与  children().eq()

    $('ul').children(":eq(0)").css('color' , 'red');
    与
    $('ul').children().eq(0).css('color' , 'red');
    相同

    3.siblings()  同胞元素

    $this.parent().siblings().eq(1).text();
    当前操作元素父元素的第一个同胞元素的内容
    $("给定元素").siblings(".selected")
    

    其作用是筛选给定的同胞同类元素(不包括给定元素本身)

    例如:

    //显示选项卡对应的内容并隐藏未被选中的内容
    $("#content li:eq(" + index + ")").show().siblings().hide();
    

    4.find()  查找

    找到的是 所有的后代元素,即是子孙元素 

    $('div').find('ul').eq(2).css('color' , 'red');

    小结:

    find()查找的是后代,子代,子子代,而且参数必须填写
    children()本身查找的就是子代,里面的参数选填

    5.eq()

    .eq():eq() 的区别

    $("p").eq(1).css("color","red");
    与
    $("p:eq(1)").css("color","red");
    相同

    6.has()

    例如:

    $("li").has("span").css("color","green");
    

    匹配含有span元素的li元素,并将其中的字体颜色设置为绿色。

    7.filter()

    .filter()  方法 过滤的是集合本身

    filter()   方法将匹配元素集合缩减为匹配指定选择器的元素。

    例如:

    $('p').find('.tag');  
    $('p').filter('.tag');  
    

    (1)第一行语句是在p标签下面的子元素去找是否有类为tag的元素.返回的元素若不为空一定是p标签下面的子元素
    (2)第二行语句是找p标签中是否有tag类的元素.返回的元素一定是在$('p')这些P标签里面(即 找到所有 类名为tag的 P 标签

    8.next()

    next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。

    例如:

    $("p").next(".selected").css("background", "yellow");
    

    查找每个段落的下一个同胞元素,仅选中类名为 "selected" 的段落

    .

  • 相关阅读:
    Zabbix的前台SQL注射漏洞利用
    LeetCode OJ--Permutation Sequence *
    LeetCode OJ--Next Permutation *
    LeetCode OJ--Permutations II
    LeetCode OJ--Permutations *
    小算法-计算下一个排列
    LeetCode OJ--Gas Station**
    LeetCode OJ--Insert Interval **
    LeetCode OJ--Search Insert Position
    Ruby自动化测试(操作符的坑)
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8059093.html
Copyright © 2011-2022 走看看