jQuery的选择器有基本选择器,层次选择器,过滤选择器,表单选择器。
一、基本选择器
示例 | 含义 |
$("#test") | 选取id为test的元素 |
$(".test") | 选取所有class为test的元素 |
$("p") | 选取所有的<p>元素 |
$("*") | 选取所有的元素 |
$("div,span,p.myClass") | 选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素 |
二、层次选择器
示例 | 含义 |
$("div span") | 选取<div>里的所有<span>元素 |
$("div>span") | 选取<div>元素下元素名是<span>的子元素 |
$(".one+div") | 选取class为one的下一个<div>同辈元素 |
$("#two~div") | 选取id为two的元素后面的所有<div>同辈元素 |
三、过滤选择器
1、基本过滤选择器
示例 | 含义 |
$("div:first") | 选取所有<div>元素中第一个<div>元素 |
$("div:last") | 选取所有<div>元素中最后一个<div>元素 |
$("input:not(.myClass)") | 选取class不是myClass的<input>元素 |
$("input:even") | 选取索引是偶数的<input>元素 |
$("input:odd") | 选取索引是奇数的<input>元素 |
$("input:eq(1)") | 选取索引等于1的<input>元素 |
$("input:gt(1)") | 选取索引大于1的<input>元素 |
$("input:lt(1)") | 选取索引小于1的<input>元素 |
$(":header") | 选取网页中所有的<h1>、<h2>、<h3>…… |
$("div:animated") | 选取正在执行动画的<div>元素 |
$(":focus") | 选取当前获取焦点的元素 |
2、内容过滤选择器
示例 | 含义 |
$("div:contains('我')") | 选取含有文本“我”的<div>元素 |
$("div:empty") | 选取不包含子元素(包括文本元素)的<div>元素 |
$("div:has(p)") | 选取含有<p>元素的<div>元素 |
$("div:parent") | 选取含有子元素(包括文本元素)的<div>元素 |
3、可见性过滤选择器
示例 | 含义 |
$(":hidden") | 选取所有不可见的元素 |
$("input:visible") | 选取所有可见的<div>元素 |
4、属性过滤选择器
示例 | 含义 |
$("div[id]") | 选取拥有id属性的<div>元素 |
$("div[title=test]") | 选取title属性为test的<div>元素 |
$("div[title!=test]") | 选取title属性不等于test的<div>元素(注意没有属性title的<div>元素也会被选取) |
$("div[title^=test]") | 选取属性title以“test”开始的<div>元素 |
$("div[title$=test]") | 选取属性title以“test”结束的<div>元素 |
$("div[title*=test]") | 选取属性title含有“test”的<div>元素 |
$("div[title|=test]") | 选取属性title等于“en”或以“en”为前缀的<div>元素 |
$("div[title~=test]") | 选取属性title用空格分隔的值中包含字符uk的元素 |
$("div[id][title$=test]") | 选取拥有id属性,并且属性title以“test”结束的<div>元素 |
5、子元素过滤选择器
示例 | 含义 |
:nth-child(index/even/odd/equation) | eq(index)只匹配一个元素,:nth-child将为每一个父元素匹配子元素。索引是从1开始的,而:eq(index)是从0开始的 |
:first-child | $("ul li:first-child")选取每个<ul>中第一个<li>元素 |
:last-child | $("ul li:last-child")选取每个<ul>中最后一个<li>元素 |
:only-child | $("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素 |
6、表单对象属性过滤选择器
示例 | 含义 |
$("form1 :enabled") | 选取id为“form1”的表单内的所有可用元素 |
$("form2 :disabled") | 选取id为“form2”的表单内的所有不可用元素 |
$("input:checked") | 选取所有被选中的<input>元素 |
$("select option:selected") | 选取所有被选中的选项元素 |
四、表单选择器
示例 | 含义 |
$(":input") | 选取所有<input>、<textarea>、<select>和<button>元素 |
$(":text") | 选取所有的单行文本框 |
$(":password") | 选取所有的密码框 |
$(":radio") | 选取所有的单选框 |
$(":checkbox") | 选取所有的复选框 |
$(":submit") | 选取所有的提交按钮 |
$(":p_w_picpath") | 选取所有的图像按钮 |
$(":reset") | 选区所有的重置按钮 |
$(":button") | 选区所有的按钮 |
$(":file") | 选区所有的上传域 |
$(":hidden") | 选区所有不可见元素 |
转载于:https://blog.51cto.com/wjkvipgood/1378640