JQuery 选择器

1.基本选择器
通过元素的ID,class(CSS)和name来查找DOM元素；
#id,#.class,*(所有元素),

{selector1,selector2}集合//有无空格都可以

 

 

 

 

 

 

 

 

 

$("#one").css("background", "red");

 

 

$(".mini" ).css( "background" , "yellow");

$(

"div").css("background", "blue");

$(

"*").css("background", "green");

$(

"span, #two").css("background", "white");

2.层次选择器
通过元素之间的层次关系来获取元素，比如descendant, child, next, siblings.
#("ancestor descendant")//当前元素的所有后代元素，集合
#("ancestor > child") //当前元素的所有子元素，集合
#("prev + next") //当前元素之后的下一个元素，一个元素
#("prev ~ siblings")//当前元素之后的兄弟元素，集合 //有无空格都可以

 

 

 

 

 

 

 

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

$(

"body>div").css("background", "yellow");

$(

".one+div").css("background", "blue");

$(

"#two~div").css("background", "green");

3. 过滤选择器,和CSS类似，以:开头。

// :和后面的内容没有空格， 并且和被选择的元素之间也不能有空格

//div: first, 不正确； //div :fist也不正确

//div:first 正确
1）基本过滤器
:first, :last,:not,:even,:odd, :eq(index), :gt(index), :lt(index),
:header（选择网页中的H1,H2,H3), :animated

2) 内容过滤器:包括的子元素或者文本内容
:conatains(text);//文本内容
 :empty; :has(selector); : parent//子元素

3)可见性过滤器
:hidden
:visible

4)属性过滤器
[attribute]; [arribute=value]; [attrribute!=value];
[attribute^=value]; //?Value开头
[attribute$=value]; //?Value截止
[attribute*=value];//??Value包含
[selector 1] [selector2]....//??&&组合关系
5).子元素过滤器//区分父元素和子元素
6).表单过滤器/表单Select, checkbox
:enabled; :disabled; :checked; :selected

 

4.表单选择器//方便用灵活选择和操作表单

//有空格，注意和过滤器区别

//#form1 :text正确

//#form1:text不正确
:input;// 选择所有的<input>, <textarea> <select>, <button>

注意下面二者的区别: #form1 :input 应该大于等于 #form1 input

 

var $AllInputs = $("#form1 :input");

 

var $inputs = $("#form1 input");

:text; //<text>; // :password; :radio; :checkbox; :submit; :image; :reset; :button; :file; :hidden;

 

 

 

 

 

 

 

var

 

$alltext = $("#form1 :text");

 

 

var $allpassword = $( "#form1 :password" );

 

 

var $allradio = $( "#form1 :radio" );

 

 

var $allcheckbox = $( "#form1 :checkbox" );

 

 

var $allsubmit = $( "#form1 :submit" );

 

 

var $allimage = $( "#form1 :image" );

 

 

var $allreset = $( "#form1 :reset" );

 

 

var $allbutton = $( "#form1 :button" ); // <input type=button /> <button ></button>

 

5.注意事项：
1)特殊字符，"#", ".", "(", "]",需要添加转义字符"//"