• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(一):非常好用的jquery选择器

    JQuery学习记录(一):非常好用的jquery选择器

    作者: 分类:JS应用 点击: 231 次
    wordpress CMS主题:ssmay主题

      在网页开发中,我们可能会经常用到CSS的选择器,非常实用,如:CSS属性选择器 input[type='submit'],一下子就在表单众多的input元素中找到submit提交按钮。今天,我们介绍的不是CSS的选择,而是jquery框架的选择器,这些选择器在我们的JS的开发中可是非常好用的哦。所以,先记录下来,以备后用。

      一、层次选择器:

      后代元素: $("div li")
      子元素: $("div > li")
      下一元素: $("div + li")
      下面所有同级元素: $("div ~ li")

      ------------------------------------------

      二、层次选择器方法

      后代元素: find()
      子元素: children()
      下一元素: next()
      下面所有同级元素: nextAll()
      同级上一个元素 prev()
      同级所有上面的元素 prevAll()
      同级上非指定元素 prevUntil()
      同级下非指定元素 nextUntil()
      同级上下所有元素 siblings()

      -------------------------------------------

      三、属性选择器:

      等于属性值 $("a[title=value]")
      属性值开头匹配 $("a[title^=value]")
      属性值结尾匹配 $("a[title$=value]")
      不等于属性值 $("a[title!=value]")
      属性值是以空格分割的列表 $("a[title~=value]")
      属性值包含 $("a[title*=value]")
      选定具有多个属性且属性值匹配 $("a[name][title=value]")

      四、基本过滤器

      第一个: :first
      最后一个: :last
      选取class不是red的li元素 :not(.red)
      选择偶数 :even
      选择奇数 :odd
      选择等于 :eq(2)
      选择大于 :gt(2)
      选择小于 :lt(2)
      选择标题元素 :header
      选择动画元素 :animated
      选择被焦点元素 :focus

      五、内容过滤器 和 方法

      含有gaogao文本的元素 :contains('gaogao')
      不包含子元素或空文本的元素 :empty
      含有class=red的元素 :has(.red)
      含有子元素或文本的元素 :parent

      含有class=red的元素方法 $("ul").has('.red')
      选择当前元素的父元素 $('li').parent()
      选择当前元素的父元素及祖先元素 $('li').parents()
      选择li遇到div父元素停止 $('li').parentsUntil('div')

      六、可见性过滤器

      选取所有不可见元素 :hidden
      选取所有可见元素 :visible

      七、子元素过滤器

      获取每个父元素的第一个子元素 :first-child
      获取每个父元素的最后一个子元素 :last-child
      获取只有一个子元素的元素 :only-child
      获取每个自定义子元素的元素 :nth-child(n)
      每个父元素奇数 li 元素 $('li:nth-child(odd)')
      每个父元素偶数 li 元素 $('li:nth-child(even)')

      八、其实选择器方法

      检测 class 是否为 red $('.red').is('li');
      检测第2个li元素class是否为red $('li').eq(2).hasClass('red');
      选择从 start 到 end 位置的元素,
      前三个变成红色 $('li').slice(0,2).css('color', 'red');
      获取当前元素前一次状态 $("div").find("p").end().get(0);
      选择 li 的 class 为 red 的元素 $('li').filter('.red').css('background','#ccc');

      九、表单常规选择器

      元素名定位,默认获取第一个 $('input').val();
      元素名定位,获取第二个 $('input').eq(1).val();
      选择 type 为 password 的字段 $('input[type=password]').val();
      选择 name 为 user 的字段 $('input[name=user]').val();

      十、表单选择器

      $(':input').size(); //获取所有表单字段元素
      $(':text).size(); //获取单行文本框元素
      $(':password').size(); //获取密码栏元素
      $(':radio).size(); //获取单选框元素
      $(':checkbox).size(); //获取复选框元素
      $(':submit).size(); //获取提交按钮元素
      $(':reset).size(); //获取重置按钮元素
      $(':image).size(); //获取图片按钮元素
      $(':file).size(); //获取文件按钮元素
      $(':button).size(); //获取普通按钮元素
      $(':hidden).size(); //获取隐藏字段元素

      十一、表单过滤器

      $(':enabled').size(); //获取可用元素
      $(':disabled).size(); //获取不可用元素
      $(':checked).size(); //获取单选、复选框中被选中的元素
      $(':selected).size(); //获取下拉列表中被选中的元素



      QQ二维码

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201807276220.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.