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

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

一、层次选择器:

本文来自小莫扎特博客www.plusminustsuchi.com 提供

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

本文来自小莫扎特博客www.plusminustsuchi.com 提供

------------------------------------------ 本文来自小莫扎特博客www.plusminustsuchi.com 提供

二、层次选择器方法

本文来自小莫扎特博客www.plusminustsuchi.com 提供

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

本文来自小莫扎特博客www.plusminustsuchi.com 提供

------------------------------------------- 本文来自小莫扎特博客www.plusminustsuchi.com 提供

三、属性选择器: 本文来自小莫扎特博客www.plusminustsuchi.com 提供

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

本文来自小莫扎特博客www.plusminustsuchi.com 提供

四、基本过滤器 本文来自小莫扎特博客www.plusminustsuchi.com 提供

第一个: :first
最后一个: :last
选取class不是red的li元素 :not(.red)
选择偶数 :even
选择奇数 :odd
选择等于 :eq(2)
选择大于 :gt(2)
选择小于 :lt(2)
选择标题元素 :header
选择动画元素 :animated
选择被焦点元素 :focus 本文来自小莫扎特博客www.plusminustsuchi.com 提供

五、内容过滤器 和 方法 本文来自小莫扎特博客www.plusminustsuchi.com 提供

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

本文来自小莫扎特博客www.plusminustsuchi.com 提供

含有class=red的元素方法 $("ul").has('.red')
选择当前元素的父元素 $('li').parent()
选择当前元素的父元素及祖先元素 $('li').parents()
选择li遇到div父元素停止 $('li').parentsUntil('div') 本文来自小莫扎特博客www.plusminustsuchi.com 提供

六、可见性过滤器 本文来自小莫扎特博客www.plusminustsuchi.com 提供

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

本文来自小莫扎特博客www.plusminustsuchi.com 提供

七、子元素过滤器 本文来自小莫扎特博客www.plusminustsuchi.com 提供

获取每个父元素的第一个子元素 :first-child
获取每个父元素的最后一个子元素 :last-child
获取只有一个子元素的元素 :only-child
获取每个自定义子元素的元素 :nth-child(n)
每个父元素奇数 li 元素 $('li:nth-child(odd)')
每个父元素偶数 li 元素 $('li:nth-child(even)') 本文来自小莫扎特博客www.plusminustsuchi.com 提供

八、其实选择器方法

本文来自小莫扎特博客www.plusminustsuchi.com 提供

检测 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');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

九、表单常规选择器 本文来自小莫扎特博客www.plusminustsuchi.com 提供

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

本文来自小莫扎特博客www.plusminustsuchi.com 提供

十、表单选择器

本文来自小莫扎特博客www.plusminustsuchi.com 提供

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

本文来自小莫扎特博客www.plusminustsuchi.com 提供


$(':button).size(); //获取普通按钮元素
$(':hidden).size(); //获取隐藏字段元素

本文来自小莫扎特博客www.plusminustsuchi.com 提供

十一、表单过滤器 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$(':enabled').size(); //获取可用元素
$(':disabled).size(); //获取不可用元素
$(':checked).size(); //获取单选、复选框中被选中的元素
$(':selected).size(); //获取下拉列表中被选中的元素 本文来自小莫扎特博客www.plusminustsuchi.com 提供

内容版权声明:以上内容均为转载,如有侵犯原作者请联系删除!