jQuery常用选择器全收录(基本选择器,层级选择器,筛选选择器,内容选择器,可见性选择器,属性选择器,子元素选择器,表单选择器,表单对象选择器)

1.基本选择器

// ID 选择器
$("#div1").css('border', '2px solid red')

// class 类选择器
$('.item').css('border', '2px solid red')

// 标签名选择器
$('li').css('border','3px solid green')

// 全局选择器
$('*').css('border', '1px solid purple')

// 元素选择器 element   .eq(数字) 选择第几个
var a = $("input").eq(0) == $("input:eq(0)")
var a = $("input:eq(0)")

// 组合选择器
$('li.item').css('border', '2px solid blue')

// 多个选择器
$('li,p').css('border', '2px solid yellow')

注意： 不存在选择优先级

2.层级选择器

// 祖先选择器
var a  = $('ul li') // 所有的后辈 li 节点

// 父子选择器
var a = $('ul > li') // 父子选择器,只能选择子集 li ,孙子及以下拿不到

// 兄弟选择器 // 找到所有与表单同辈的 input 元素
var a = $('form ~ input')

// 匹配所有跟在 label 紧后面的 input 元素 // 只选择紧跟着的第一个
var a = $('label + input')

3.筛选选择器

$('li:first')  // 获取 li 标签下的第一个元素

$('li:last')   // 获取 li 标签下的最后一个元素

$('li:eq(0)')  // 从0开始计数,查找第一行(选择下标等于0的)

$('li:eq(1)')  // 从0开始计数,查找第二行(选择下标等于1的)

$('li:gt(2)')  // 从0开始计数,查找大于0的,也就是第二行,第三行...(选择下标大于2的)

$('li:lt(3)')  // 从0开始计数,选择下标小于3的

$('*:not(li)') // 除了 li 以外的所有标签

$('li:not([class])') // 选中没有 class 属性的 li 标签

$('li:not([class="66"])') // 选中class 属性不是 66 的 li 标签

$('li:contains("11")') // 包含 11 内容的li

$('li:empty') // 匹配没有内容的 li

$('ul:has(p)') // 获取包含 p 标签的 ul标签,拿的是 ul

$('li:even') // 匹配所有索引值为偶数的元素，从 0 开始计数

$('li:odd') // 匹配所有索引值为奇数的元素，从 0 开始计数

// h1~h6标签元素
$(':header').css('border','2px solid red')

4.内容选择器

$("div:contains('John')") // 查找所有包含 "John" 的 div 元素
// 这个也是， 子元素中有.current 也行

$("td:empty") // 查找所有不包含子元素或者文本的空元素

$("div:has(p)") // 查找所有包含 p 元素的 div 元素

$("td:parent") // 查找所有含有子元素或者文本的 td 元素

5.可见性选择器

$('div:hidden') // 获取所有隐藏的div

$('div:visible') // 获取所有显示的div

6.属性选择器

$("div[id]") // 查找所有含有 id 属性的 div 元素

$("input[name='newsletter']") // 查找所有 name 属性是 newsletter 的 input 元素

$("input[name!='newsletter']") // 查找所有 name 属性不是 newsletter 的 input 元素

$("input[name^='news']") // 查找所有 name 以 'news' 开始的 input 元素

$("input[name$='letter']") // 查找所有 name 以 'letter' 结尾的 input 元素

$('input[id^="a"][name$="b"') // 选中所有含有 id 属性的 input 并且 id 属性值是以 a 开头 name属性值是以 b 结尾

$("input[name*='man']") // 查找所有 name 包含 'man' 的 input 元素

$("input[id][name$='man']") // 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

7.子元素选择器

$("ul li:first-child") // 在每个 ul 中查找第一个 li

$("span:first-of-type") // 查找作为父元素下的第一个 span 标签

$("ul li:last-child") // 在每个 ul 中查找最后一个 li

$("span:last-of-type") // 查找作为父元素下的最后一个 span 标签

$("ul li:nth-child(2)") // 在每个 ul 查找第 2 个li.从1开始数,不是从0开始的下标

$("ul li:nth-last-child(2)") // 在每个匹配的 ul 中查找倒数第二个 li

$("ul li:only-child") // 在 ul 中查找是唯一子元素的 li

8.表单选择器

$(':input') // 查找所有的input元素

$(':text') // 查找所有文本框(也就是 input 里的 type 属性值等于 text 的)

$(':password') // 查找所有密码框(也就是 input 里的 type 属性值等于 password 的)

$(':radio') // 查找所有单选按钮(也就是 input 里的 type 属性值等于 radio 的)

$(':checkbox') // 查找所有复选框(也就是 input 里的 type 属性值等于 checkbox 的)

$(':submit') // 查找所有提交按钮(也就是 input 里的 type 属性值等于 submit的)

$(":image") // 匹配所有图像域(也就是 input 里的 type 属性值等于 image 的)

$(':reset') // 查找所有重置按钮(也就是 input 里的 type 属性值等于 reset 的)

$(':button') // 查找所有按钮(也就是 input 里的 type 属性值等于 button 的)

$(":file") // 查找所有文件域(也就是 input 里的 type 属性值等于 file 的)

9.表单对象选择器

$("input:enabled") // 查找所有可用的 input 元素

$("input:disabled") // 查找所有不可用的input元素

$("input:checked") // 查找所有选中的复选框元素

$("select option:selected") // 查找所有选中的选项元素

仅个人学习总结,感谢访问!本篇完结.欢迎访问其他文章.