jq的一些基本選擇器
阿新 • • 發佈：2019-02-01
【基本選擇器】(*****)
Ø id選擇器
* 用法:$(“#id”)
Ø 類選擇器
* 用法:$(“.類名”)
Ø 元素選擇器
* 用法:$(“元素名稱”)
Ø 萬用字元選擇器
* 用法:$(“*”)
Ø 並列選擇器
* 用法:$(“選擇器,選擇器,選擇器”)
$(function(){
$("#but1").click(function(){
// alert("aaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("*").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#two,span,.mini").css("background","#bbffaa");
});
});
【層級選擇器】：
Ø 後代選擇器：使用空格 所有後代包含孫子及以下的元素
Ø 子元素選擇器：使用> 第一層的元素（兒子）
Ø 下一個元素:使用+ 下一個同輩元素
Ø 兄弟元素:使用~ 後面所有的同輩元素
<script>
$(function(){
// 後代選擇器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一層div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查詢下一個同輩的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
【基本過濾選擇器】
<script>
$(function(){
$("#but1").click(function(){
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
【內容選擇器】
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
【屬性選擇器】
【表單選擇器】
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
【表單屬性選擇器】
* attr();
* 使用方法一：$(“”).attr(“src”);
* 使用方法二：$(“”).attr(“src”,”test.jpg”);
* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
* toggle(); --單擊事件的切換
* hover(); --滑鼠懸停的切換
Ø id選擇器
* 用法:$(“#id”)
Ø 類選擇器
* 用法:$(“.類名”)
Ø 元素選擇器
* 用法:$(“元素名稱”)
Ø 萬用字元選擇器
* 用法:$(“*”)
Ø 並列選擇器
* 用法:$(“選擇器,選擇器,選擇器”)
$(function(){
$("#but1").click(function(){
// alert("aaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("*").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#two,span,.mini").css("background","#bbffaa");
});
});
【層級選擇器】：
Ø 後代選擇器：使用空格 所有後代包含孫子及以下的元素
Ø 子元素選擇器：使用> 第一層的元素（兒子）
Ø 下一個元素:使用+ 下一個同輩元素
Ø 兄弟元素:使用~ 後面所有的同輩元素
<script>
$(function(){
// 後代選擇器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一層div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查詢下一個同輩的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
【基本過濾選擇器】
<script>
$(function(){
$("#but1").click(function(){
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
【內容選擇器】
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
【屬性選擇器】
【表單選擇器】
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
【表單屬性選擇器】
* attr();
* 使用方法一：$(“”).attr(“src”);
* 使用方法二：$(“”).attr(“src”,”test.jpg”);
* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
* toggle(); --單擊事件的切換
* hover(); --滑鼠懸停的切換