Jquery

基本选择器

<script>

$(function(){

     $("#btn1").click(function(){

     $("#adc").css("background","black")

     //选择id为adc的元素

     })

$(function(){

     $("#btn2").click(function(){

     $(".sup").css("background","red")

     //选择class为sup的所有元素

     })

     })

$(function(){

     $("#btn3").click(function(){

     $("div").css("background","yellow")

     //选择元素名为div的所有元素

     })

     })

$(function(){

     $("#btn4").click(function(){

     $("*").css("background","orange")

     //选择所有元素

     })

     })

$(function(){

     $("#btn5").click(function(){

     $("span,#tank").css("background","#FBA60A")

     //选择所有的span元素 id为tank的所有元素

     })

     })

<script/>

 

层次选择器

<script>

$(function(){

$("#btn1").click(function(){

$("body div").css("background","red")

         })

          

         })//选择 body内的所有div元素

 

$(function(){

$("#btn1").click(function(){

$("body>div").css("background","red")

         })

          

         })//在body内,选择子元素是div的。

 

$(function(){

$("#btn1").click(function(){

$(".adc+div").css("background","red")

         })

          

         })//选择 所有class为adc 的下一个div元素.

 

$(function(){

$("#btn1").click(function(){

$("#tank~div").css("background", "red")

})

})//选择 id为tank的元素 后面的所有div兄弟元素

<script/>

基本选择过滤器

<script>
$(function(){
$("#btn1").click(function(){
$("div:first").css("background","red")
})//选择第一个div元素.

$("#btn2").click(function(){
$("div:last").css("background","red")
})//选择最后一个div元素.

$("#btn3").click(function(){
$("div:not(:.adc)").css("background","red")
})//选择class不为adc的 所有div元素

$("#btn4").click(function(){
$("div:even").css("background","red")
})//选择索引值为偶数 的div元素.

$("#btn5").click(function(){
$("div:odd").css("background","red")
})//选择索引值为奇数数 的div元素.

$("#btn6").click(function(){
$("div:eq(3)").css("background","red")
})//选择索引值等于3的元素.

$("#btn7").click(function(){
$("div:gt(3)").css("background","red")
})//选择索引值大于3的元素.

$("#btn8").click(function(){
$("div:lt(3)").css("background","red")
})//选择索引值小于3的元素.

$("#btn9").click(function(){
$(":header").css("background","red")
})//选择所有的标题元素.

$("#btn10").click(function(){
$(":animated").css("background","red")
})//选择当前正在执行动画的所有元素

})
</script>

内容过滤选择器

<script>
$(function(){
$("#btn1").click(function(){
$("div:contains(di)").css("background","red")
})//选取含有文本“di”的div元素

$("#btn2").click(function(){
$("div:empty").css("background","red")
})//选取不包含子元素(或者文本元素)的div空元素.

$("#btn3").click(function(){
$("div:has(.sup)").css("background","red")
})//选取含有class为sup元素 的div元素.

$("#btn4").click(function(){
$("div:parent").css("background","red")
})//选取含有子元素(或者文本元素)的div元素.
})
</script>