jQuery系列之操作select标签

每次看完东西基本就忘了，现在决定写一下博客来记录，不知道效果咋样。

一、jQuery操作选择器

1.基本选择器

　　关于基本选择器，我就不用太多说了，包括了ID、类、标签等选择器。

2.层次选择器

　　我觉得掌握层次选择器需要了解dom元素的树形结构，这样你才能准确的抓住你想要操作的dom元素。

　　下面介绍一下层次选择器：

　　a. $("ancestor descendant")，表示选取ancestor元素中的所有descendant元素，ancestor表示上代的一起，descendant表示后代的意思。

　　　 举例，$("div span")，表示选选取<div>中所有<span>元素。

　　b. $("parent>child"),这种选择器和上种有一点相似，不同的的是这个表示的是选取parent元素下的child子元素，上种是选取的后代元素，这个需要我们去区分。

　　　 举例，$("div>span")，表示选取<div>下的子元素<span>。

　　c. $("prev+next")，表示选取perv元素的下一个同辈元素，记住是同辈元素。此选择器可以用next()方法代替。

　　    举例，$(".div+span")，表示选取类名为.div的下一个<span>元素，也可以使用$(".div").next()表达。

　　d. $("prev~siblings")，表示选取prev元素之后的所有siblings元素。此选择器可以用nextAll()方法代替。

　　　 举例，$("#prev~div")，表示选取id为prev之后的所有div元素，当然，也是同辈的。也可以使用$("#prev").nextAll()代替。

　　特别说明一下，$("#prev~div")选择器只能选取#prev之后的同辈div，$("#prev").siblings("div")则不管前后都会被选取。

3.过滤性选择器

　　过滤性选择器主要是通过过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，选择器都以一个冒号(:)开头，按照不同的过滤规则，此类选择器还分为，基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤。

　　a.基本过滤选择器

　　：first，选取第一个元素，例如，$("div:first")，表示选择div中的第一个div元素。

　　：last，选取最后一个元素，方法与上。

　　：not(selector)，去除匹配到的元素，例如，$("input:not(.myclass)")，选择input中类名不是myclass的元素。

　　：even，选取索引是偶数的所有元素，索引从0开始算，例如，$("input:even")，选择input索引值为偶数的元素。

　　：odd，选取索引是奇数的所有元素，方法与上。

　　：eq[index]，选取索引值为给定值的元素，例如，$("input:eq[1]")，选择索引值为1的input元素。

　　：gt[index]，选取索引值为大于给定值的元素，不包括给定值。

　　：It[index]，选取索引小于给定值得元素，不包括给定值。

　　：header，选取页面上的所有标题元素，如h1,h2等......

　　：animated，选取正在执行动画的元素。

　　b.内容过滤选择器

　　：contains(text)，选取含有文本内容为“text”的元素，例如 $("div:contains('test')")。

　　：empty，选取不包含子元素或者文本的空元素，例如$("div:empty")

　　：has(selector)，选取含有选择器所匹配的元素的元素，例如$("div:has(p)")选择含有p元素的div

　　：parent，选取含有子元素的元素，例如$("div:parent")

　　c.可见性过虑选择器

　　此类选择器就两种，:hidden和:visible表示选择隐藏或者可见的元素。

　　例如$(":hidden")、$("div:hidden")、$(":visible")、$("div:visible")

　　d.属性过滤选择器

　　[attribute]，选取拥有此属性的元素，例如，$("div[id]")选取拥有id属性的元素。

　　[attribute=value]，选取属性值等于value的元素，例如，$("div[id=test]")。

　　[attribute!=value]，选取属性值不等于value的元素。

　　[attribute^=value]，选取属性值以value开始的元素。

　　[attribute$=value]，选取属性值以value结束的元素。

　　[attribute*=value]，选取属性值还有value的元素。

　　[selector1][selector2][selectorN]，复合属性选择器，例如$("div[id][title^=test]")，表示选取包含id属性并且title以test开头的div元素。

　　e.子元素过滤选择器

　　打字好累。。。。

　　我决定快速概括。。

　　：nth-child(index/even/odd/eq)，这里的index是以1开头的哦。

　　：first-child、：last-child、：only-child

　　从字面可以理解它们的意思。

　　f.表单对象属性过滤器

　　：enable，选取可用元素，例如$("#form1:enable")，选取表单form1中的所有可用元素。

　　：disable、：checked、：selected同理。

　　g.表单选择器

　　这个是jQuery为了灵活操作表单特意加的。

　　只要是表单元素都可以使用“：”+“元素表示”，例如，$(":input")、$(":select")

 

ok,jQuery选择器大概就是这样，其实这些东西jQuery的API上都有，而且很方便，以后不记得了，可以用API查找。