- 论坛徽章:
- 0
|
|
jquery selector
1、 All Selector (“*”)：匹配所有元素。如:
$(“*”).css(“border”,”3px solid red”);将所有<body>内的任何元素都进行CSS化。
$("#test").find("*").css("border","3px solid red"). //将id为test内的所有元素CSS化
2、:animated Selector,匹配动画的元素，如：
- <script> $("#run").click(function(){ $("div:animated").toggleClass("colored");//为动画的div转换css样式 }); function animateIt() { $("#mover").slideToggle("slow"); //为id为mover的div添加动画效果 } animateIt(); </script>
- <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> <input name="milk man" />
会自动匹配第一个input框
4、jQuery('[attribute*="value"]')：匹配属性值中含有value的元素，如3所示例子中
$('input[name*="man"]')自动匹配第1、2、3、5个Input框
5、jQuery('[attribute~="value"]')：匹配独立的一个属性值value，value以一个独立的单词存在，前后用空格与其他字符分开，如3所示例中
$('input[name~="man"]')自动匹配第5个input框。
6、jQuery([attribute$="value"])：匹配以value结尾的属性值元素。 如3所示例中
$('input[name="man"]'),自动匹配第2、5个input元素
7、jQuery([attribute^="value"])：匹配以value开始的属性值元素。 如3所示例中
$('input[name^="man"]'),自动匹配第1个input元素
8、jQuery([attribute="value"])：匹配属性值等于value的元素。 如3所示例中
$('input[name="man"]'),没有匹配的。
9、jQuery([attribute!="value"])：匹配属性值不等于value的或者元素中没有该属性,如3所示例中
$('input[name!="newmilk"]'):匹配第1、2、3、5个input元素
10、:button selector:找出所有button元素或者是type=button的元素，如$(":button")
11、:checkbox selector ：找出所有type=checkbox的元素，如：- $("form input:checkbox"),$(":checkbox") 等价于$("*:checkbox")
- <ul class="topnav"> <li>Item 1</li> <li>Item 2 <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul> </li> <li>Item 3</li> </ul> <!-- 找出class=topanav的ul下的子元素li,并将其样式化 --><script>$("ul.topnav > li").css("border", "3px doublered");</script>
14、:contains(text) selector ,jQuery(':contains(text)'):文本包含text的元素，如：- <div>hahah</div><div>ccc</div><script>$("div:contains('ccc')").text("dd")</script>
|
|
免费注册
发表于 2011-06-23 13:59