css选择器

 

         jQuery的选择器就是基于css选择器的规范的，所以掌握了css选择器,jQuery的选择器就搞定了啦。其实document对象也支持了css选择如document.querySelector，但并不是所有浏览器都支持的。

 

一  上下文

 

       选择必须得有上下文，不然选择就无从谈起。原生的dom选择操作有选择函数的调用者作为选择的上下文。如：

//上下文是文档对象
var oForm = document.getElementById("form1");
//上下文oForm元素
var oInputs = oForm.getElementsByTagName("input");

 

       在使用jQuery中上下文可以是作为待查找的 DOM 元素集、文档或 jQuery 对象，一般都是忽略这个参数。默认为document.

$("#radio_id1","#div_id2");
$("#radio_id1",document);
$("#radio_id1",$("#div_id2"));
$("#radio_id1");

       jQuery的每次选择都作为下次任何操作的上下文，而它的上下文就是一些匹配结果的DOM集合。以后的操作都是针对这个上下文。需要清楚的是jQuery返回的还是jQuery对象而不是DOM对象。

 

二  4种元素 选择器

 

       4种元素选择器是最基本的选择器，如下:

序号	选择器	含义
1.	*	通用元素选择器，匹配任何元素
2.	E	标签选择器，匹配所有使用E标签的元素
3.	.info	class选择器，匹配所有class属性中包含info的元素
4.	#footer	id选择器，匹配所有id属性等于footer的元素

     id选择器返回的永远只有一个元素。

 

三  层次 选择器

 

        正是引入了层次选择器才使选择变的如此简单。层次选择器将上次选择的结果作为上下文根据用户给出的层次关系进行进一步筛选。关系如下：

1. 祖孙关系

2. 父子关系

3. 之后兄弟关系

4. 并列关系

//祖孙关系，匹配所有div下面的id为form1的元素
$("div #form1");
//之后兄弟关系, 匹配所有紧随id为div_id1的元素之后的同级并且标签tag为input的元素
$("#div_id1 + table");
//父子关系，只匹配id为div_id1的元素的儿子元素中的input
$("#div_id1 > input");
//并列关系
$("#div_id1 , #div_id2");
//混合写法，每次选择作为下次的上下文
$("#div_id1 , #div_id2 form > input");

 

三 属性筛选器

 

      上面都是通过基本选择器进行选择，而属性可以对上下文进行筛选。有如下几种形式：

//具有title属性
$("input[title]");
//title属性的值为123
$("input[title='123']");
//title属性的值不为123，没有title属性的也算
$("input[title!='123']");
//以123开头
$("input[title^='123']");
//以123结尾
$("input[title$='123']");
//包含123
$("input[title*='123']");

 

四   ：筛选器

 

      ：筛选器类似于属性筛选器，有些也可以用属性筛选器代替。有些更像一个函数操作比如位置筛选。

 

有些属性可以取true,false值，这样一般就可以用：筛选器了

$("option:selected");
$("input:disabled");
$(".radiocls:checked");

 

     还有些位置选择器,这些操作更像个函数筛选器，位置从0开始计算

//第一个tr			
$("tr:first");
//最后一个tr			
$("tr:last");
//第2个tr
$("tr:eq(1)");
//第3个tr之前的tr
$("tr:lt(2)");
//第3个tr之后的tr
$("tr:gt(2)");
//奇数
$("tr:odd");
//偶数
$("tr:even");

 

当然还有一些选择规则啦，但是常用的也就这么几个了。附一个学习时实现上诉功能的firefox基本可以用的