基本選擇者:
#id 根據Id匹配一個元素🎀『
element tor1,selector2 並集,傳回兩個選擇器所符合的元素
層次選擇器:
ancestor descendant 根據祖先配對所有的後代元素
parent>child 子 +next 將下一個兄弟元素相當於next()方法
prev~siblings 匹配後面的兄弟元素相當於nextAll()方法 siblings()方法為匹配所有的兄弟元素相當於nextAll()方法 siblings()方法為匹配所有的兄弟元素:簡單地選擇 匹配第一個元素
:last或last() 匹配最後一個元素
:not(selector) 匹配非selector能匹配到的元素
:even 匹配索引值為偶數的元素,索引號從0開始
:odd 匹配索引值為奇數的元素,索引號從0開始
:eq(index) :gt(index) 匹配索引號大於給定索引值的元素,索引號從0開始
:lt(index) 匹配索引號小於給定索引值的元素,索引號從0開始
:header 匹配所有的標題元素 h1 h2 h3 h4 h5 h6
:animated 匹配所有正在執行動畫的元素
內容過濾選擇器:
:contains(text) 匹配包含給定文本的元素
:empty 匹配包含給定文本的元素『元素
:has(selector) 匹配後代中含有selector能符合上元素的元素
:parent 匹配含有子元素或文本的元素🎀hden 符合不可見元素,或type="hidden"的元素含有css樣式:display:"none";的元素,無論CSS是內聯,導入,連結式
:visible 取得所有的可見元素『 匹配含有給定屬性的元素
[attribute=value] 符合含有屬性=value的元素
[attribute!=value] 『 符合含有屬性但符合!是以value開始的元素
[attribute $=value] 匹配屬性值是以value結束的元素
[attribute*=value] 🀋選擇器的交集
子元素過濾選擇器:
:nth-child(eq|even|odd|index) 取得所有父元素特定位置的子元素
🎀 子元素:last 取得所有父元素下最後一個子元素 :only-child 〜 〜〜〜〜 元素。器: :enabled 取得表單中所有可用的元素 : disabled 取得表單中所有不可用的元素 :checked 〜 〜〜 取得表單中所有被選取的option的元素表單選擇者: :input :text 取得所有的單行文字方塊>『『 〜 〜 〜 〜 〜 〜 〜 〜 〜 〜 、 、 、 、 、、、》 、》》》 、》、、、、、、》 、、、]取得所有的密碼框元素 : radio 取得所有的單選按鈕 :checkbox 『〔 〜 〜type 的選框
:submit 取得所有的投稿按鈕
:image 皮
:reset 取得所有重置按鈕
:button 獲取所有的按鈕
:file 獲取所有的文件上傳框
1、基本選擇器
(1 )、#id 根據Id匹配一個元素
$("#div1").css("background-color","red"); //匹配id为"div1"的元素 <div id="div1">我是一个DIV</div> //会选中该div元素
(2)、element 根據給定的元素名稱匹配元素
$("p").css("background-color","red"); //匹配页面所有的p元素 <p>我是一个P</p>
)
(4)、* 配對所有的元素 $("*").css("background-color","red");🀀㟀〜 〕〜號與分隔號、㟀傳回每個選擇器所符合的元素 $(".div1,#span1").css("background-color","red");2、層次選擇器 (1)、Pstors 根據祖先元素匹配所有的後代元素,返回的是匹配到的後代元素,並用空格分開。
$(".important").removeClass(); //匹配所有class="important"元素 <p class="important">我是一个p元素</p>(2)、parent > child 依照父元素配對所有的子元素傳回所有的子元素以大於號">"分隔
rrrefee
匹配緊接在prev元素後的相鄰的下一個元素 以加號"+"分隔。 相當於.next()方法$("#div1 span").css("color","red"); <div id="div1"> <span>我是span1</span> ***会被选中,是#div1的后代span <div> <span>我是span3</span> ***会被选中,也是#div1的后代span </div> </div> <span>我是span2</span> ***不会被选中,不是#div1的后代(4)、prev ~ sibings 『 相當於nextAll()方法
$("#div1 > span").css("color","red"); <div id="div1"> <span>我是span1</span> ***会被选中,是#div1的子元素span <div> <span>我是span3</span> ***不会被选中,是#div1的后代元素,但不是直接子元素 </div> </div> <span>我是span2</span> ***不会被选中,不是#div1的子元素(5)、選取所有的兄弟元素siblings() 方法
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").next().css("color","red"); <div> <p>我是第一个P</p> ***不会被选中,是class为p1的上一个了 <p class="p1">我是第二个P</p> ***prev本身并不会被选中 <p>我是第三个P</p> ***会被选中,是class为p1的下一个相邻元素 <p>我是第四个P</p> ***不会被选中,不是class为p1的下一个,是下二个了 </div>
🀜3、簡單過濾或選擇器選中符合條件的第一個元素
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").nextAll("p").css("color","red"); <div> <p>我是第一个P</p> ***不会被选中,是class为p1前面的元素 <p class="p1">我是第二个P</p> ***prev本身并不会被选中 <p>我是第三个P</p> ***会被选中,是class为p1后面的P兄弟元素 <p>我是第四个P</p> ***会被选中,也是class为p1后面的P兄弟元素 </div>
(2)、last()或:last 符合條件的最後一個元素
$(".p1").sibings("p").css("color","red"); <div> <p>我是第一个P</p> ***会被选中,是class为p1的P兄弟元素 <p class="p1">我是第二个P</p> ***prev本身并不会被选中 <p>我是第三个P</p> ***会被选中,是class为p1的P兄弟元素 <p>我是第四个P</p> ***会被选中,也是class为p1的P兄弟元素 </div>
『被selector選取的元素
$("#div1 > p:first").css("color","red") //此行代码相当于 $("#div1 > p").first().css("color","red"); <div id="div1"> <p>我是第一个P</p> ***会被选中,是id为#div1下的第一个P元素 <p>我是第二个P</p> ***不会被选中,是第二个P元素了 <p>我是第三个P</p> ***不会被选中,是第三个P元素了 </div>
抱歉5)、odd 取得指定索引值為奇數的元素(1、3、5、7、9......),注意索引號碼是從1開始的
$("#div1 > p:last").css("color","red"); //此行代码相当于 $("#div1 > p").last().css("color","red"); <div id="div1"> <p>我是第一个P</p> ***不会被选中,是第一个 <p>我是第二个P</p> ***不会被选中,是第二个 <p>我是第三个P</p> ***会被选中,id为#div1下的最后一个P元素 </div>
(index) 選取指定索引值的元素,索引值從0開始
$("#div1 > p:not('.p1')").css("color","red"); <div id="div1"> <p>我是第一个P</p> ***会被选中 <p class="p1">我是第二个P</p> ***不会被选中,因为符合了:not里的条件 class="p1" <p>我是第三个P</p> ***会被选中 </div>(7)、gt(index) 〦〟
(8)、lt(index) 取得所有索引值小於index的元素,索引號從0開始
$("#div1 > p:even").css("color","red"); <div id="div1"> <p>我是第一个P</p> ***会被选中,索引号0 <p>我是第二个P</p> ***不会被选中,索引号1 <p>我是第三个P</p> ***会被选中,索引号2 <p>我是第四个P</p> ***不会被选中,索引号3 <p>我是第五个P</p> ***会被选中,索引号4 </div>4、h5 、h6
$("#div1 > p:odd").css("color","red"); <div id="div1"> <p>我是第一个P</p> ***不会被选中,索引号0 <p>我是第二个P</p> ***会被选中,索引号1 <p>我是第三个P</p> ***不会被选中,索引号2 <p>我是第四个P</p> ***会被选中,索引号3 <p>我是第五个P</p> ***不会被选中,索引号4 </div>(10)、animated 正在執行動畫效果的元素4、內容過濾選擇器 ee
(2)、:empty 獲取不包含子元素或文本的空元素
$("#div1 > p:eq(1)").css("color","red"); <div id="div1"> <p>我是第一个P</p> ***不会被选中,索引号为0 <p>我是第二个P</p> ***不会被选中,索引号为1 <p>我是第三个P</p> ***不会被选中,索引号为2 <p>我是第四个P</p> ***不会被选中,索引号为3 </div>
(3)、:has(元素,只要是後代含有都算)
$("#div1 > p:gt(1)").css("color","red"); <div id="div1"> <p>我是第一个P</p> ***不会被选中,索引号为0 <p>我是第二个P</p> ***不会被选中,索引号为1 <p>我是第三个P</p> ***会被选中,索引号为2大于1了 <p>我是第四个P</p> ***会被选中,索引号为3大于1了 </div>
(4)、:parent 含有子元素或文字元素的元素
$("#div1 > p:lt(1)").css("color","red"); <div id="div1"> <p>我是第一个P</p> ***会被选中,索引号为0,小于1 <p>我是第二个P</p> ***不会被选中,索引号为1,不小于1 <p>我是第三个P</p> ***不会被选中,索引号为2大于1了 <p>我是第四个P</p> ***不会被选中,索引号为3大于1了 </div>
. :hidden 選取所有不可見元素
$("#div1 > :header").css("color","red"); <div id="div1"> <p>我是一个P</p> ***不会被选中,不是标题类型元素 <span>我是一个span</span> ***不会被选中,不是标题类型元素 <h1>我是一个h1</h1> ***会被选中,h1是标题类型元素 <h6>我是一个h6</h6> ***会被选中,h6是标题类型元素 </div>
取得包含給定屬性的元素
$("p:contains('三')").css("background-color","red"); <div> <p>我是第一个P</p> ***不会被选中 <p>我是第二个P</p> ***不会被选中 <p>我是第三个P</p> ***会被选中,文本里包含了"三" </div>
(2)、[attribute=value] 取得屬性值等於value的元素
$(:empty).text("我是空元素"); <div> <div><span></span></div> ***div不会被选中,因为有<span></span>子元素。<span></span>会被选中,因为没有子元素也没有文本元素 <p></p> ***会被选中,没有子元素,也没有文本元素 <span>我是一个span</span> ***不会被选中,有文本元素 </div>
『值不等於value的元素
$("div:has('span')").css("background-color","red"); <div> ***此div会被选中,因为他的有孙子span 我是最外层div <div><p>我是一个P</p></div> ***此div不会被选中,因为不含有后代span <div><span>我是一个span</span></div> ***此div会被选中,含有后代span </div>
(4)、[attribute^=value] 取得屬性值以value開始的元素
$(":parent").text("不含子元素或文本元素"); <div>我是一个div</div> ***不会被选中,因为含有文本元素 <div><span>我是一个span</span></div> ***不会被选中,含有子元素。 <div></div> ***会被选中,不含子元素也不含有文本元素
『
(6)、[attribute*=value] 获取属性值包含value值元素
$("div[class*=div]").css("font-size","30px"); <div class="div1">我是div1</div> ***会被选中,属性值包含div <div class="1div">我是1div</div> ***会被选中,属性值包含div <div class="1div1">我是1div1</div> ***会被选中,属性值包含div <div class="abc">我是abc</div> ***会被选中,属性值包含div
(7)、[selector][selector][selector] 获取属性交集元素
$("div:[class][title=title1]").css("background-color","red"); <div class="div1" title="title1">我是div1,title1</div> ***会被选中,有class属性且title属性等于title1 <div class="div1" title=title2>我是div1,title2</div> ***不会被选中,虽然有class属性,但是title属性不等于title2 <div class="div3">我是div3</div> ***不会被选中,没有title属性
7、子元素过滤选择器
(1):nth-child(eq|even|odd|index) 获取每个父元素下的特定位置元素,索引号从1开始
$("div>p:nth-child(1)").css("background-color","red"); //选中每一个父元素下的div下的第一个直接P元素 <div> <p>我是第一个P</p> *** 会被选中,是div下的第一个子P元素 <p>我是第二个P</p> *** 不会被选中,是第二个了 </div> <div> <P>我是第三个P</P> *** 会被选中,是div下的第一个子P元素 <P>我是第四个P</P> *** 不会被选中,是第二个了 </div>
(2):first-child 选中每个父元素下的第一个
$("p:first-child").css("background-color","red"); //选中每一个父元素下的第一个P元素 <div> <p>我是第一个P</p> *** 会被选中,是div下的第一个子P元素 <p>我是第二个P</p> *** 不会被选中,是第二个了 </div> <ul> <li> <P>我是第三个P</P> *** 会被选中,是div下的第一个子P元素 <P>我是第四个P</P> *** 不会被选中,是第二个了 </li> </ul>
(3)、:last-child 选中每一个父元素下的最后一个元素
$("p:last-child").css("background-color","red"); //选中每一个父元素下的第一个P元素 <div> <p>我是第一个P</p> *** 不会被选中,不是某父元素的最后一个子P元素 <p>我是第二个P</p> *** 会被选中,是div元素下的最后一个子P元素 </div> <ul> <li> <P>我是第三个P</P> *** 不会被选中,不是某父元素下的最后一个子P元素 <P>我是第四个P</P> *** 会被选中,是div元素下的最后一个P元素 </li> </ul>
(4)、:only-child 获取每个父元素下唯一仅有的一个子元素
$("p:only-child").css("background-color","red"); <div> <p>我是第一个P</p> ***不会被选中,不是某父元素下的唯一一个P元素 <p>我是第二个P</p> ***不会被选中,不是某父元素下的唯一一个P元素 </div> <div> <span>我是一个span</span> ***不会被选中,不是某父元素下的唯一一个P元素 <p>我是第三个P</p> ***不会被选中,不是某父元素下的唯一一个span元素 </div> <div> <p>我是一个P</p> ***会被选中,是div下的唯一一个P元素 </div>
8、表单对象属性过滤选择器
(1)、:enabled 获取表单中所有属性为可用的元素
$("input:enabled").val("jQuery表单对象属性过滤选择器"); <div> <input type="text" value="我是一个可用的input" /> ***会被选中,是一个可用的表单元素 <input type="text" value="我是一个不可用的input" disabled="disabled" /> ***不会被选中,是不可用的表单元素 </div>
(2)、:disabled 获取表单中属性不可用的元素
$("input:enabled").val("jQuery表单对象属性过滤选择器"); <div> <input type="text" value="我是一个可用的input" /> ***不会被选中,是一个可用的表单元素 <input type="text" value="我是一个不可用的input" disabled="disabled" /> ***会被选中,是不可用的表单元素 //注意,jQuery能够操作不可用 的表单元素 </div>
(3)、:checked 获取表单中被选中的元素 从属性能够知道用户选中了哪个
$("input:checked").val("jQuery"); <div> <input type="checkbox" checked="checked" value="1">选中 <input type="checkbox" value="0">未选中 </div>
(4)、:selected 获取表单中被选中的元素 此属性能够知道用户选择了哪个
alert($("input:selected").text("")); //获取所有被选中的option元素 <div> <selected> <option value="0" selected="selected">option1</option> ***会被选中 <option value="1">option2</option> ***不会被选中,因为本option不是选中的。 </selected> </div>
9、表单选择器
(1)、:input 获取所有的input、textarea、select
$(":input").val("jQuery"); <div> <textarea>我是一个兵</textarea> ***会被选中 <input text="button" value="" /> ***会被选中 <p>我是一个P</p> ***不会被选中 </div>
(2)、:text 获取所有的单行文本框,也就是ec1428ba487b0fd5d7fe857f9d4b2faa元素
$(":text").val("jQuery"); <div> <input type="text" value="我是一个input" /> ***会被选中,是单行文本框 <input type="button" value="确定" /> ***不会被选中,不是单行文本框 <textarea>我是一个textarea</textarea> ***不会被选中,不是单行文本框 </div>
(3)、:password 获取所有的密码框 也就是c1316d16b1c962d004723ea50186d536元素
$(":password").hide(3000); <div> <input type="password" /> ***会被选中,是密码框 <input type="text" value="我是一个文本框" /> ***不会被选中,是文本框 </div>
(4)、:radio 获取所有的单选按钮
$(":radio").hide(3000); <div> <input type="radio" />我是一个radio ***单选按钮会被选中,但是后面的文字不会 <input type="text" />我是一个文本框 ***不会被选中 </div>
(5)、:checkbox 获取所有的复选框
$(":checkbox").hide(3000); <div> <input type="checkbox" />我是一个checkbox ***复选框会被选中,文本不会 <input type="text" />我是一个文本框 ***不会被选中,不是复选框 </div>
(6)、:submit 获取所有的提交按钮
$(":submit").hide(3000); <div> <input type="submit" value="提交"> ***会被选中,是提交按钮 <input type="text" value="我是一个文本框"> ***不会被选中,不是提交按钮 </div>
(7)、:image 获取所有的图像域
$(":image").attr("title","我是一个图片按钮"); <div> <input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" /> ***会被选中 <input type="text" value="我是一个文本框" /> ***不会被选中,不是图片按钮 </div>
(8)、:reset 获取所有重置按钮
$(":reset").hide(3000); <div> <input type="reset" value="重置"> ***会被选中,是重置按钮 <input type="text" value="我是一个文本框"> ***不会被选中,不是重置按钮 </div>
(9)、:button 获取所有的按钮
$(":button").hide(3000); <div> <input type="button" value="确认" /> ***会被选中,是按钮元素 <input type="text" value="我是一个文本框" /> ***不会被选中,不是按钮元素 </div>
(10)、:file 获取所有的文件域
$(":file").hide(3000); <div> <input type="file" title="file" /> <input type="text" value="我是一个文本框" /> </div>