基本选择器
-
id $("#test")选取id为test的元素
- .class $(".test")选取所有class为test的元素
- element $("p")选取所有的<p>元素
$("*")选取所有的元素
- selector1,selector2,...,selectorN $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一级组元素
层次选择器
-
$("ancestor desendant") 选取ancestor元素里的所有descendant(后代)元素
示例：$("div span")选取<div>里的所有<span>元素 -
$("parent>child) 选取parent元素下的子元素
示例：$("div>span")选取<div>元素下元素名是<span>的子元素 -
$("prev+next") 选取进阶在prev元素后的next元素
示例：$(".one+div")选取class为one的下一个<div>同辈元素 -
$("prev~siblings") 选取prev元素之后的所有siblings元素
示例：$("#two~div")选取id为two的元素后面的所有<div>同辈元素
基本过滤选择器
-
:first 选取第一个元素
示例：$("div:first")选取所有<div>元素中第1个<div>元素 -
:last 选取最后一个元素
示例:$("div:last")选取所有<div>元素中最后一个<div>元素 -
:not(selector) 取出所有与给定选择器匹配的元素
示例:$("input:not(.myClass)")选取class不是myClass的<input>元素 -
:even 选取索引是偶数的所有元素，索引从0开始
示例:$("input:even")选取索引是偶数的<input>元素 -
:odd 选取索引是奇数的所有元素，索引从0开始
示例:$("input:odd")选取索引是奇数的<input>元素 -
:eq(index) 选取索引等于index的元素(index从0开始)
示例:$("input:eq(1)")选取索引等于1的<input>元素 -
:gt(index) 选取索引大于index的元素(index从0开始)
示例:$("input:not(.myClass)")选取class不是myClass的<input>元素 -
:lt(index) 选取索引小于index的元素(index从0开始)
示例:$("input:even")选取索引是偶数的<input>元素
内容过滤选择器
-
:contains(text) 选取含有文本内容为"text"的元素
示例:$(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素 -
:empty 选取不包含子元素或者文本的空元素
示例：$(‘div:empty’)选取不包含子元素和文本的<div>空元素 -
has(selector) 选取含有选择器所匹配的元素的元素
示例：$(‘div:has(p)’)选取含有<p>元素的<div>元素 -
parent 选取含有子元素或者文本的元素
示例：$(“div:parent”)选取拥有子元素或文本元素的<div>元素
属性过滤选择器
-
[attr] 选取拥有此属性的元素
示例：$(“div[id]”)选取拥有属性id的元素 -
[attr=value] 选取属性的职位value的元素
示例：$(“div[title=test]”)选取属性title为”test”的<div>元素 [attr!=value] 选取属性的值不等于value的元素
-
[attr^=value] 选取属性的值以value开始的元素
示例：$(“div[title^=test]”)选取属性title以”test”开始的<div>元素 -
[attr$value] 选取属性的值以value结束的元素
示例：$(“div[title$=test]”)选取属性title以”test”结束的<div>元素 -
[attr*=value] 选取属性的值含有value的元素
示例：$(“div[title*=test]”)选取属性title含有”test”的<div>元素 -
[attr1][attr2][attrN] 选择满足所有属性选择器的元素
示例：$(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素
子元素过滤选择器
-
:nth-child 选取每个父元素下的第index个或者奇偶元素。index从1开始
示例:$(‘div:nth-child(1)’) 选取所有div中的，是其父标签的第一个子标签的div；$(‘div:eq(0)’);选取第一个div； -
:first-child 选取每个父元素的第一个元素
示例：$(“ul li: first-child”)选取每个<ul>中第一个<li>元素$(‘div:first’)选择所有div标签中的第一个。 :last-child 选取每个父元素的最后一个子元素
-
:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。
示例：$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素
表单属性选择器
-
:enabled 选取所有可用元素
示例：$(‘input:enabled’)选取所有可用的input元素 -
:disabled 选取所有不可用元素
示例：$(‘input:disabled’);选取所有不可用的input元素 -
:checked 选中所有被选中的元素(单选框、多选框)
示例：$(‘input:checked’);选取所有被选中的input元素 -
:selected 选中所有被选中的元素(下拉列表)
示例：$(‘select option:selected’);选取所有被选中的option元素
JQuery常用方法
-
click 当点击$()选中的所有标签时，执行click中的函数
$("#test").click(function(){ alert("hello world"); }); -
hover 当鼠标滑入$()选中的所有标签时，执行hover中的第一个函数，当鼠标滑出时，执行第二个函数。
$("#test").hover(function(){ alert("鼠标进入"); },function(){ alert("鼠标离开"); }); -
jQuery链式操作
传统写法
var div = document.getElementById("test");
div.style.color = "red";
div.style.width = "20px";JQ链式写法
$("test").css("color","red").css("width","20px");
