jQ2 强大的选择器

作用: 用来选择标签的

 

jQuery中的选择器借鉴了CSS中选择器的思想，CSS中选择器选择出标签以后只能给标签加样式，而jQuery中的选择器选择出标签(或元素)后可以做任意操作。

 

通过修改div的背景颜色看效果

 

一.基本选择器(basic 5个)

1.id选择器 #id       

  

根据给定的id匹配一个元素        返回单个元素

 

$("#myDiv")选取id为myDiv的元素

 

演示代码:

 

var $obj = $("#myDiv");

$obj.css("background-color","burlywood");

console.dir($obj);

2.标签选择器element

 

返回集合元素

 

$("p")选取所有的<p>元素

 

 

3.类选择器 .class

 根据给定的类名匹配元素           集合元素

 

$(".test")选取所有class为test的元素

 

4.通配符选择器  *  

 

匹配所有元素 集合元素

 

$("*")选取所有的元素

 

5组合选择器  .select1,select2,….selectN   

 

将每一个选择器匹配       集合元素

 

$("div,span,p.myClass")选取所有<div>、<span>和拥有class为myClass的<p>标签的一组元素

 

 

最常用的是id选择器和类选择器

 

二.层次选择器()level 4个   

1.子级(子代选择器和后代选择器)

子代选择器: 儿子结点

$("parent>child") 选取parent元素下的child(子代元素)

 

返回集合元素

$("div>span")

 

选取div下的儿子结点span

 

后代选择器: 儿子和孙子结点

 

$("ancestor descendant")        选取ancestor元素里的所有descendant(后代)元素

返回集合元素

 

$("div span")

 

选取div里的所有的span元素

 

2.同级(下一个和下面所有、上一个和上面所有同级兄弟)

$('prev+next') 选取紧接在prev元素后的next元素  返回集合元素

 

$('.one+div')选取class属性为one的下一个<div>元素

 

与$(".one").next("div")等价

$('prev~siblings') 选取prev元素之后的所有siblings元素   返回集合元素

 

 

$('#two~div')选取id值为two的后面的所有<div>兄弟元素,  

与$("#two").nextAll("div")等价

$("#prev").siblings("div") 选取和id值为prev的元素同级的div元素  

 

 

上一个 prev()   上面所有  prevAll();  

三.过滤选择器(filter 6个)

1基本过滤 10个

2.内容过滤 4个

3.可见性过滤 2个

4.属性过滤     7个

5.子元素过滤   4个

6.表单对象属性过滤 4个

 

四.表单选择器(form)

使用表单选择器 可以快速选出表单中的表单域

 

 

 

练习:表格隔行换色jQuery实现等

表格隔行换色(面试题)

 

$("#table1 tbody tr:even").css("background","red");//偶数行

$("#table1 tbody tr:odd").css("background","green");//奇数行

 

 

演示代码:

 

$(function(){

    

     //页面加载完毕后 隔行换色

    

     $("#table1 tr:even").css("backgroundColor","#BAD0EF");

    

     //表格头 黑底白字

     var $object = $("tr:first");

     $object.css("backgroundColor","#000000");

     $object.css("color","#ffffff");

});

 

 

 

1.判断有多少选择框被选中(包括单选框和复选框)

 

 

var $obj = $("input:checked");

    console.info($obj);

 

2. 查找被选中的爱好 复选框

 

var $obj = $("input[name='hobby']:checked");

console.info($obj);

 

 

$(".test  :hidden").length  层次选择器

$(".test:hidden") 可见性过滤

 

 

补充: each()方法

 

需求: 打印每一个li中的内容

 

body中的代码

 

<ul>

<li>Coffee</li>

<li>Milk</li>

<li>Soda</li>

</ul>

 

 

$(function(){

document.write($("li").text() + "<br/>");

});

 

CoffeeMilkSoda

 

我们想要的想过是每打印一个li的内容后换行

 

$(“li”) 是获得所有的li,如果想遍历每一个li需要使用each()方法

 

$(function(){

$("li").each(function(){

document.writeln($(this).text() + “<br/>”);

});

});

 

Coffee
Milk
Soda