jQuery选择器大全 不断更新
10
2013-01-01
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
基本选择器
// 选择id值为maoid的元素,id值是唯一的所以返回单个元素。 $("#maoid") // 选择所有的div标签元素,返回div元素数组 $("div") // 选择使用 maoclass 类的css的所有元素 $(".maoclass") // 选取所有元素。 $("*") // 选取多个元素。 $("#maoid, div, .maoclass")
层次选择器
// 选取 div 里的所有 span 元素 $("div span") // 选取 div 元素下元素名是 span 的子元素 $("div >span") // 选取 id 为 one 的元素的下一个 div 同辈元素 $("#one +div") $("#one").next("div") // 选取 id 为 one 的元素的元素后面的所有 div 同辈元素 $("#one~div") $("#one").nextAll("div") // 获取 id 为 one 的元素的所有 div 同辈元素(不管前后) $("#one").siblings("div") // 获取 id 为 one 的元素的前面紧邻的同辈 div 元素 $("#one").prev("div") // 获取元素范围大小顺序依次为: $("#one").siblings("div") > $("#one~div") > $("#one +div") $("#one").siblings("div") > $("#one").nextAll("div") > $("#one").next("div")
基本过滤选择器
// 选取所有 div 元素中第1个 div 元素 $("div:first") // 选取所有 div 元素中最后一个 div 元素 $("div:last") // 选取 class 不是 maoClass 的 input 元素 $("input:not(.maoClass)") // 选取索引是偶数的 input 元素(索引从0开始) $("input:even") // 选取索引是基数的 input 元素(索引从0开始) $("input:odd") // 选取索引等于2的 input 元素 $("input:eq(2)") // 选取索引大于4的 input 元素 $("input:gt(4)") // 选取索引小于4的 input 元素 $("input:lt(4)") // 过滤掉所有标题元素,例如:h1、h2、h3等 $(":header") // 选取正在执行动画的 div 元素 $("div:animated") // 选取当前获取焦点的元素 $(":focus")
内容过滤选择器
// 选取所有 div 中含有'Name'文本的元素 $("div:contains('Name')") // 选取不包含子元素(包括文本元素)的 div 空元素 $("div:empty") // 选取所有含有 p 元素的 div 元素 $("div:has(p)") // 选取拥有子元素的(包括文本元素)div元素 $("div:parent")
可见性过滤选择器
// 选取所有不可见的 div 元素 $("div:hidden") // 选取所有可见的 div 元素 $("div:visible")
属性过滤选择器
// 选取所有拥有属性 id 的元素 $("div[id]") // 选取所有的 name 属性等于 'mao' 的 input 元素 $("input[name='mao']") // 选取所有的 name 属性不等于 'mao' 的 input 元素 $("input[name!='mao']") // 选取所有的 name 属性以 'mao' 开头的 input 元素 $("input[name^='mao']") // 选取所有的 name 属性以 'mao' 结尾的 input 元素 $("input[name$='mao']") // 选取所有的 name 属性包含 'mao' 的 input 元素 $("input[name*='mao']") // 选取属性 title 等于 'mao' 或以 'mao' 为前缀(该字符串后跟一个连字符'-')的 div 元素 $("div[title|='mao']") // 选取属性 title 用空格分隔的值中包含字符 'mao' 的 div 元素 $("div[title~='mao']") // 选取拥有属性 id,并且属性 title 以 'mao' 结束的 div 元素 $("div[id][title$='mao']")
子元素过滤选择器
// 选取 class 为 'mao' 的 div 父元素下的第 2 个子元素 $("div .mao:nth-child(2)") // 选取每个 div 中的第1个 span 元素 $("div span:first-child") // 选取每个 div 中的最后一个 span 元素 $("div span:last-child") // 在 div 中选取是唯一子元素的 button 元素 $("div button:only-child")
表单对象属性过滤选择器
// 选取id为'mao'的表单内所有可用元素 $("#mao :enabled") // 选取id为'mao'的表单内所有不可用元素 $("#mao :disabled") // 选取所有被选中的 input 元素 $("input :checked") // 选取所有的 select 的子元素中被选中的元素 $("select option:selected")
表单选择器
// 选取所有 input , textarea , select 和 button 元素 $(":input") // 选取所有的单行文本框 $(":text") // 选取所有的密码框 $(":password") // 选取所有单的选框 $(":radio") // 选取所有的多选框 $(":checkbox") // 选取所有的提交按钮 $(":submit") // 选取所有的图像按钮 $(":image") // 选取所有的重置按钮 $(":reset") // 选取所有的按钮 $(":button") // 选取所有的上传域 $(":file") // 选取所有不可见元素 $(":hidden")
组合选择器
// 获取 含有 name 属性的元素,且 name 元素的值不以“___”开头 $(':not(*[name^="___"])[name]');
本文由 猫斯基 原创发布。
著作权均归用户本人所有。独家文章转载,请联系本站管理员。获得授权后,须注明本文地址! 本文地址:https://www.maosiji.com/jquery-xuanzeqi.html