jQuery学习笔记二——jQuery选择器

1.CSS选择器
标签选择器 td
id选择器 #id 唯一
类选择器 div.note
群组选择器 td,p,div.a
后代选择器 #links a
通配选择符 *
2.jQuey选择器的优势
1.简洁的写法

$("#ID")//这段jquery代码与下面的DOM语法等价document.getElementById("ID")$("tagName")//这段jquery代码与下面的DOM语法等价document.getElementsByTagName("tagName")

2.支持CSS1到CSS3选择器
3.完善的处理机制

document.getElementById("tt").style.color ="red";//倘若网页中没有ID为tt的标签元素，浏览器就会报错因此得改写为：

if(document.getElementById("tt")){//必须判断元素是否存在    document.getElementById("tt").style.color ="red";}

而是用jQuery语句就不需要

$('#tt').css("color","red");//无需判断$('#tt')是否存在

这是因为$(‘#tt’)获取的永远是对象，那么我们需要检查某个元素在网页上是否存在该怎么办呢？

方法一：根据获取元素的长度来判断

if($("#tt").length > 0){//方法一：根据获取元素的长度来判断}

方法二：转化成DOM对象来判断

if($("#tt")[0]){}//或if($("#tt").get(0)){}

3.JQuery选择器

例子一：给网页中所有

元素添加onclick事件
javascript解决方法

var items = document.getElementsByTagName("p");//获取网页中所有的p元素for(var i=0; i<items.length ; i++){//由于获取的是数组对象，因此需要把它循环出来    items[i].onclick = function(){//给每个对象添加onclick事件    }}

jQuery解决方法

$('p').click(){}

例子二：使一个特定的表格隔行变色

获取表格
获取表格下面的tbody元素
获取tbody元素下获取tr元素
循环输出tr元素
对tr元素的索引值除以2并去模，然后更具奇偶设置不同的背景色
javascript解决方法

var item = document.getElementById("tb");var tbody = item.getElementsByTagName("tbody")[0];var trs = tbody.getElementsByTagName("tr");for(var i=0; i< trs.length ; i++){    if(i % 2 == 0){    trs[i].style.backgroundColor = "#888";}}

jquery解决方法

$('#td tbody tr:even').css('backgroundColor','#888');

例子三：对多选框进行操作，输出选择的多选框的个数
JavaScript解决方法

var btn = document.getElementById("btn");btn.onclick = function(){    var arrays = new Array();    var items = document.getElementsByName("check");    for(i=0; i < items.length ; i++){        if(items[i].checked){            arrays.push(items[i].value);        }    }    alert(arrays.length);}

jquery解决方法

$('#btn').click(function(){    var length = $("input[name='check']:checked").length;    //先使用属性选择器，然后用表单对象属性过滤，最后获取Jquery对象的长度    alert(length);})

通过以上常用代码可以看出，是用jQuery解决比JavaScript解决要好得多，那么接下来我们继续学习

二、Jquery选择器的分类
1.基本选择器

id选择器 $("#ID") 类选择器 $(".test")元素选择器 $("P")通配符   $("*")合并选择器 $("div,span,p.myClass")只有id选择器返回单个元素

2.层次选择器

选取ancestory元素里的所有后代元素 $("ancestor descendant")选取parent元素在的child(子)元素，$("parent > child")选取紧接在prev元素后的next元素 $("prev + next")  等价于 $('prev').next('next')选取prev元素之后的所有siblings元素 $("prev ~ sublings") 等价于 $('prev').nextAll('sublings')

3.过滤选择器
基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器
基本过滤选择器

:first 选取第一个元素 $("div:first") 选取所有div元素中第一个div元素:last 选取最后一个元素:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(.myClass)")选取class不是myClass的input元素:even 选取索引时偶数的所有元素，索引从0开始:odd 选取索引时奇数的所有元素，索引从0开始:eq(index) 选取索引等于index的元素(index从0开始):gt(index) 选取索引大于index的元素(index从0开始):lt(index) 选取索引小于index的元素(index从0开始):header 选取所有的标题元素，例如h1，h2等:animated 选取当前正在执行动画的所有元素

内容过滤器

:contains(text) 选取含有文本内容为“text”的元素:empty 选取不包含子元素或者文本的空元素:has(selector) 选取含有选择器所匹配的元素的元素 :parent 选取含有子元素或者文本的元素

可见性过滤选择器 ：是根据元素可见和不可见来选择相应的元素

:hidden 选取所有不可见的元素:visible 选取所有可见的元素

属性过滤选择器

[attribute] 选取拥有此属性的元素[attribute=value] 等于[attribute!=value] 不等于[attribute^=value] 以value开头[attribute$=value] 以value结尾[attribute*=value] 包含value[selector1][selector2] 可以复合，满足多个条件

子元素过滤选择器

:nth-child(index/even/odd/equation)  选取每个父元素下的第index个子元素或者奇偶元素。index从1算起:first-child 选取每个父元素的第1个子元素  例如：$("ul li:first-child"); 选取每个ul中第一个li元素:last-child 选取每个父元素的最后1个子元素:only-child 如果某个元素是它父元素中唯一的子元素，那么将会匹配。如果父元素中含有其他元素，则不匹配:nth-child(even) 能选取每个父元素下的索引值是偶数的元素:nth-child(odd) 能选取每个父元素下的索引值是奇数的元素:nth-child(3) 能选取每个父元素下的索引值是3的元素:nth-child(3n) 能选取每个父元素下的索引值是3的倍数的元素:nth-child(3n+1) 能选取每个父元素下的索引值是3n+1的元素

表单对象属性过滤选择器

:enabled 选取所有可用元素:disabled 选取所有不可用元素:checked 选取所有被选择的元素 (单选框，复选框):selected 选取所有被选中的选项元素  下拉列表

示例：

$("#form1 input:enabled").val("这里变化了");  //改变表单内可用input元素的值$("#form1 input:disabled").val("这里变化了"); //改变表单内不可用input元素的值$("input:checked").length;//获取多选框选中的个数$("select :selected").text(); //获取下拉框选中的内容

表单选择器

:input 选取所有的input、textarea、select、button元素:text 选取所有的单行文本框:password 选取所有的密码框:radio 选取所有的单选框:checkbox 选取所有的多选框:submit 选取所有的提交按钮:image 选取所有的图像按钮:reset 选取所有的重置按钮:button 选取所有的按钮:file  选取所有的上传域:hidden 选取所有不可见元素

5选择器重的一些注意事项
选择器重含有特殊符号.,#,(,]等符号的注意事项
解决方法:对特殊符号使用转义符进行转义

<div id="id#b">bb</div>$('#id#b')  //错误方式$('#id\\#b') //正确方式

2.属性选择器的引号问题
1.3.1版本彻底放弃了1.1.0版本遗留下的@符号，
不能再属性前添加@符号

$('div[@title="test"]'); //1.3.1中会出错$('div[title="test"]');//正确

3.选择器重含有空格的注意事项

$('.test :hideen');//选取class为test的元素里面的隐藏元素$('.test:hideen');//选取隐藏的class为test的元素

其他选择器
1.MoreSelectors for jQuery

这是一个jQuery的插件，用于增加更多的选择器，例如.color可以匹配颜色，:colIndex可以匹配表格中的列，:focus可以匹配获取焦点的元素等等
插件地址:http://plugins.jquery.com/project/moreSelectors
2.Basic XPath

在1.2以后的版本中取消了默认对Xpath选择器的支持，改为通过插件来实现
插件地址：http://plugins.jquery.com/project/xpath

其他使用CSS选择器的方法
1.document.getElementsBySelector()

document.getElementsBySelector('div#main p a.external')

发布地址：http://simonwillison.net/2003/Mar/25/getElementsBySelector/

2.cssQuery()
这是Dean Edwards编写的一款利用CSS选择器查找元素的脚本。jQuery源自于此

语法结构如下

elements = cssQuery(selector [,from]);

官方网站：http://dean.edwards.name/my/cssQuery/
3.querySelectorAll()
这不是一个脚本库，而是W3C在SelectorsAPI草案中提到的方法，
http://www.w3.org/TR/selectors-api/