Jquery----------选择器的使用



Jquery选择器

1.      
jQuery核心函数
jQuery也可写$,通常情况下$可能会与其他框架中的对象冲突（php有$的用法），所以如果所用的框架没有$的用法，jQuery可用$代替

（1）$(document).ready()
一般缩写为$(),参数为回调函数,文档就绪时触发,要优先于onload触发

①     
$(document).ready(function () {});

②     
$( function () {});

（2）jQuery(elements)
将一个或多个dom对象转换为jQuery对象

$(document.getElementById("txtName"))
        
（3）根据提供的原始
HTML 标记字符串，动态创建由 jQuery
对象包装的 DOM
元素。

①     
$("<input type='checkbox'>").appendTo("body")

②     
$("<input>", { type:
'textfield' }).appendTo("body")
        
（4）检索器（多个检索条件同时满足时，检索表达式直接连接；满足其中某个时，检索表达式用",
"连接。如[name="text"].divClass结果为样式为divClass且name为text的元素）
        
以下结合例子分析检索器的用法（为了简单叙述，检索结果用ID代替Dom元素）
                  
Demo，有这样一段html代码，id从0-8，有div元素及span元素:
           
<div
id="0" class="divClass">
               
<span
id="1" title="this is a span">
                   
<div
id="2">value2</div>
               
</span>
           
</div>
           
<span
id="3">3value</span>
           
<div
id="4">
               
<div
id="5"></div>
               
<div
id="8"></div>
               
<span
id="6"></span>
               
<div
id="7"></div>
           
</div>
                  
普通检索

①   
 $("#id"):
根据给定的ID匹配一个元素。

和js的document.getElementById("")功能差不多，但也有区别：$获取到的是i指定id的jQuery对象，后者获取到的是dom对象
但$("#3")[0]与document.getElementById("3")指的都是id为3的dom对象

$("#3")获取的结果即为
3

②   
$("dom元素名")：根据给定的元素名匹配所有元素

和js的document.getElementByTagName
("")功能类似

$("span")获取的结果即为
1、3

③   
 $(".class样式名"):
根据给定的样式匹配元素。

$(".divClass")获取的结果即为
0

④   
 $("*")
：匹配所有元素。结果为
0、1、2、3、4、5、6、7、8

层级

①   
 $("div div"):
在给定的祖先元素下匹配所有的后代元素。

结果为
2、5、7、8

②   
$(" div>div ")：在给定的父元素下匹配所有的子元素啊

结果为
5、7、8

③   
$("div+div"):匹配所有紧接在
div 元素后的
div 元素。

结果为8

④   
$("div~div")
：匹配
div 元素之后的所有
div (同级)
元素。

结果为
4、7、8

简单（该组检索表达式中，用到索引的都不考虑是否同级，索引依据出现的先后顺序）

①   
$("div:first")
匹配找到的第一个元素

结果为0

如果将例子该为：
           
<span
id="1" title="this is a span">
               
<div
id="2">value2</div>
           
</span>
           
<div
id="0" class="divClass">               

           
</div>
                           
则修改后的例子结果为
2

②   
$("div:last")
匹配找到的最后一个元素

结果为
7

③   
$(" div:not(:first)") //返回除第一个div以外的所有div

not的用法：如$("div>:not(span)");该例子表示不含有span节点的div节点集合，因为0和4都包含span节点，所以结果为5,7,8

④   
$(" div:even")
匹配所有索引值为偶数的元素，从 0
开始计数

结果为0、4、8

⑤   
$(" div:odd")
匹配所有索引值为奇数的元素，从 0
开始计数

结果为
2、5、7

⑥   
$(" div:eq(3)")
匹配一个给定索引值的元素
eq: equal

结果为5

⑦   
$(" div:gt(3)")
匹配所有大于给定索引值的元素
gt:greater than

结果为8、7

⑧   
$(" div:lt(3)")
匹配所有小于给定索引值的元素 lt:less than

结果为0、2、4

内容：

①   
$("div:contains('value')")
匹配包含给定文本的元素

结果为0、2
  innerText.indexOf("value")>=0及[title*="value"]类似，区别在于，*=只能检索属性，contains检索元素包含的所有文本,注意检索的范围为元素的文本

②   
$("div:has(div)")
匹配所有包含 p
元素的 div
元素

查找方式类似于层次查找的"div div"，区别在于，"div
div"结果是子节点，has结果是父节点，例子结果为0、4

$("div:has(span[title$='span'])~div>div");选择器也可以像xpath一样方便

上述例子可翻译为：含有span子元素且子span节点的title属性文本为"span"结尾的div元素之后（同级）的div元素的div子元素

猛一看，罗里吧嗦的描述那么长，感觉用处不是很大，其实页面html内容庞大的情况下，查找符合某些条件的集合会很方便

③   
$("div:empty")
查找所有不包含子元素或者文本的空元素

结果：5、8、7
                  
可见性

①   
$("input:visible")
查找所有可见的input元素

②   
$("tr:hidden")
匹配所有的不可见元素，input
元素的 type
属性为 "hidden"
的话也会被匹配到

属性检索

①   
$("div[id]")
查找所有含有 id
属性的 div
元素

②   
$("input[name='newsletter']")
查找所有 name
属性是 newsletter
的 input
元素

③   
$("input[name!='newsletter']")
查找所有 name
属性不是 newsletter
的 input
元素

④   
$("input[name^='news']")
查找所有 name
以 'news'
开始的 input
元素

⑤   
$("input[name$='letter']")
查找所有 name
以 'letter'
结尾的 input
元素

⑥   
$("input[name*='man']")
查找所有 name
包含 'man'
的 input
元素

⑦   
$("input[id][name$='man']")
找到所有含有 id
属性，并且它的 name
属性是以 man
结尾的

子元素

①   
nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2)
匹配其父元素下的第N个子或奇偶元素

②   
$("div:first-child")
查找属于父节点的第一个子节点的div元素

结果为 0、2、5

③   
$("div:last-child")  
查找属于父节点的最后子节点的div元素

结果为2、4、7

④   
$("div:only-child")  
查找属于父节点的唯一子节点的div元素

表单

①   
$(":input")
查找所有的input元素 

$(":input")与$("input")的区别：

//:input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素

②   
$("text")   
匹配所有的单行文本框

③   
$(":password")
匹配所有密码框

④   
$("radio")  
匹配所有单选按钮

⑤   
$("checkbox")
匹配所有复选框

⑥   
$("submit")  
匹配所有提交按钮

⑦   
$("image")   
匹配所有图像域

⑧   
$("button")  
匹配所有按钮

⑨   
$("file")    
匹配所有文件域

⑩   
$("hidden")
匹配所有不可见元素，或者type为hidden的元素

表单对象属性

①   
$("input:checked")
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

②   
$("input:enabled")
匹配所有可用元素

③   
$("input:disabled")
匹配所有不可用元素

④   
$("select option:selected")
匹配所有选中的option元素

（5）属性操作

①     
操作样式(class)

方法名addClass,removeClass,toggleClass

特殊用法toggleClass：如果存在（不存在）就删除（添加）一个样式

当方法传递两个参数的时候，第二个参数为布尔表达式，布尔表达式为true时添加样式，布尔表达式为false时删除样式，如：

var b =
true;
           
    $("input").click(function () {
           
             //情况一：$(this).toggleClass("ccc");
               
     //情况二：
                                    
b = !b;
               
     $(this).toggleClass("ccc", b);
           
    });

②     
样式操作2（style）

方法名css，参数分为3种情况

Ø 
传递一个参数，且为string类型，这样会返回该样式值，如

$("input").css("background-color")

Ø 
传递两个参数，分别为key\value，为dom元素样式赋值，如

$("input").css("color","blue")

Ø 
传递一个参数，为json对象，会对json的键逐一赋值，如

$("input").css({color:"blue",background:"red"})

③     
操作属性

属性操作方法名：attr，removeAttr

方法attr参数有4种情况：

Ø 
只传属性名，返回该jQuery元素的属性值（注意如果查找到多个元素，则返回第一个元素的属性），如$("input").attr("title")返回的是第一个input的title

Ø 
传递两个参数，且第二个参数为值时，为dom元素属性赋值，如

$("input").attr("title",
"这是一个文本框")

Ø 
传递两个参数，且第二个参数为function，为dom元素属性赋函数计算值，如

$("input").attr("title",
function () { return
"这是一个文本框"})

Ø 
传递一个参数，且为json对象时，会对json的键逐一赋值，如

$("input").attr({ title:
"this the title",value:"this the value" })

④     
属性操作：html
文本
值 width height

这三类操作一致

获取内容为$("input").html/text/val/height/width()

设置时为$(" input ").html/text/val/height/width ("内容")

$("input").val
等于input.attr("value")
        
（6）筛选
                  
过滤

①   
$("div").eq(1)
获取第N个元素，这个元素的位置是从0算起

查询结果为 2

②   
$("#0").hasClass("divClass")检查当前的元素是否含有某个特定的类，如果有，则返回true

结果为
true

③   
$("div ").filter(".divClass ")
筛选出与指定表达式匹配的元素集合

检索与$("div.divClass")结果一致
为 0

④   
is(expr)
用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

如$("div").is(".divClass")
结果与$("div.divClass").length>0一样
为true

⑤   
$(" div").not( $("#0"))
删除与指定表达式匹配的元素

检索与$("div:not(#0)")一致，为2
4 5 8 7

查找

①   
$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

结果1 5 8 6 7，如改为$("span").children()
则结果为2

②   
$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

检索与$("div span")一致，为8

③   
$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

检索与$("div+*")一致，结果为3
8 6

④   
$("div").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

结果为0 8

⑤   
$("div ").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合

结果为 Body、1、4

⑥   
$("div ").parents;找到每个span元素的所有祖先元素

结果为Body、1、4、0、HTML
5个标签，即需要查询父节点的父节点，一直递归到最顶级节点

⑦   
$("div ").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

结果为0、3、4、5、8、6、7