jquery 选择器基本上在这里了。。。
All Selector (“*”)
:animated Selector
属性选择器
:button Selector按钮选择器 $(“:button”).css({background:”yellow”, border:”3px red solid”});
:checkbox Selector 多选框选择器 $(“form input:checkbox”)
:checked Selector 已经选择，下面这个函数可以用来检查，有几个已经选择的input
———————————————-
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script></pre>
<form><input type=”checkbox” name=”newsletter” value=”Hourly” checked=”checked” /> <input type=”checkbox” name=”newsletter” value=”Daily” /> <input type=”checkbox” name=”newsletter” value=”Weekly” /> <input type=”checkbox” name=”newsletter” value=”Monthly” checked=”checked” /> <input type=”checkbox” name=”newsletter” value=”Yearly” /></form>
<div></div>
<pre><script type=”text/javascript”>// <![CDATA[
function countChecked() {
var n = $(“input:checked”).length;
$(“div”).text(n + (n <= 1 ? ” is” : ” are”) + ” checked!”);
}
countChecked();函数执行
$(“:checkbox”).click(countChecked);计数// ]]></script>
—————————————————————-
Child Selector (“parent > child”) 子级标签 $(“ul.topnav > li”)
Class Selector (“.class”) $(“.myClass”)
:contains() Selector 内容包含 $(“div:contains(‘John’)”) 包含john的div
Descendant Selector (“ancestor descendant”) 就像css一样的吧。中间一个空格 $(“form input”) 选择form下的所有input
:disabled Selector $(“input:disabled”) disabled属性 <input name=”email” disabled=”disabled” />
Element Selector (“element”) $(“div”).css(“border”,”9px solid red”);所有的div
:empty Selector 所有没有内容的td $(“td:empty”).text(“Was empty!”)
:enabled Selector $(“input:enabled”)和 :disabled Selector相反
:eq() Selector 第几个元素 li:eq(2) 第二个li ，下面例子 是 :eq() :nth-child() 和.each() 的区别。
——————————————————
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<ul>
<li>List 1, item 1</li>
<li>List 1, item 2</li>//$”backgroundColor”, “#ff0″//”fontStyle”, “italic”//”color”, “red”
<li>List 1, item 3</li>
</ul>
<ul>
<li>List 2, item 1</li>
<li>List 2, item 2</li>//”fontStyle”, “italic”//”color”, “red”
<li>List 2, item 3</li>
</ul><script>
// applies yellow background color to a single <li>
$(“ul.nav li:eq(1)”).css( “backgroundColor”, “#ff0” );// applies italics to text of the second <li> within each <ul>
$(“ul.nav”).each(function(index) {
$(this).find(“li:eq(1)”).css( “fontStyle”, “italic” );
});// applies red text color to descendants of <ul>
// for each <li> that is the second child of its parent
$(“ul.nav li:nth-child(2)”).css( “color”, “red” );
</script></body>
</html>
——————————————–
:even Selector//偶数选择
:file Selector <input type=”file” />
:first-child Selector
$(“div span:first-child”)
.css(“text-decoration”, “underline”)
.hover(function () {
$(this).addClass(“sogreen”);
}, function () {
$(this).removeClass(“sogreen”);
});
div下第一个span加上下划线，并且鼠标移动变化class
:first Selector 第一个元素
:focus selector 焦点选择器
$( “#content” ).delegate( “*”, “focus blur”, function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( “focused”, elem.is( “:focus” ) );
}, 0);
});
上面这段有点深奥，看不太明白哦。
:gt() Selector $(“td:gt(1)”) 从第二个td开始 。$(“td:gt(0)”)是第一个td。 $(“td:gt(4)”)大于5 也就是 5，6，7
Has Attribute Selector [name] http://api.jquery.com/has-attribute-selector/
:has() Selector $(“div:has(p)”) 包含p的div
:header Selector 选中所有标题的要素,如h1,h2,h3等等。
:hidden Selector 所有隐藏元素
var hiddenEls = $(“body”).find(“:hidden”).not(“script”);
$(“span:first”).text(“Found ” + hiddenEls.length + ” hidden elements total.”);
$(“div:hidden”).show(3000);
$(“span:last”).text(“Found ” + $(“input:hidden”).length + ” hidden inputs.”);
这里的not script 也不知道什么意思。。
ID Selector (“#id”) id选择器
:image Selector <input type=”image”>
:input Selector input选择器
:last-child Selector $(“div span:last-child”)
div中最后一个span
:last Selector 最后一个元素
:lt() Selector $(“td:lt(4)”) 小于 4的td 也就是 0，1，2，3
Multiple Attribute Selector [name=”value”][name2=”value2″] 复合选择器？$(‘input[id][name$=”man”]’) 包含id 包含结尾是man的
Multiple Selector (“selector1, selector2, selectorN”) 和css一样的格式 $(“div,span,p.myClass”)
Next Adjacent Selector (“prev + next”)
<label>Name:</label>
<input name=”name” />
$(“label + input”) 上一个和下一个元素。 同一级别
Next Siblings Selector (“prev ~ siblings”)
$(“#prev ~ div”)
<span id=”prev”>span#prev</span>
<div>div sibling</div> //这个是
<div>div sibling <div id=”small”>div niece//这个不是</div></div> //这个是
<span>span sibling (not div)</span>
<div>div sibling</div> //这个是
#prev下的所有div 要是同一级别的！！
————————————————–
:not() Selector这个不用我说了吧。。就是否定选择
$(“input:not(:checked) + span”) input不包含 选中的 下一个元素是span的
<input type=”checkbox” name=”b” />
<span>lcm</span>
:nth-child() Selector //$(“ul li:nth-child(2)”) 所有ul下的第二个li
: odd Selector 奇数选择。 如1，3，5……
: only-child Selector 字面意思，只有一个孩子，$(“div button:only-child”) div下 只有一个button的 div
:parent Selector //父元素
:password Selector//<input type=”password” />
:radio Selector//单选按钮$(“form input:radio”)
:reset Selector//重置按钮
:selected Selector 被选中的！！
———————————–
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<select name=”garden” multiple=”multiple”><option>Flowers</option>
<option selected=”selected”>Shrubs</option>
<option>Trees</option>
<option selected=”selected”>Bushes</option><option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<script>$(“select”).change(function () {
var str = “”;
$(“select option:selected”).each(function () {
str += $(this).text() + ” “;
});
$(“div”).text(str);
})
.trigger(‘change’);
</script></body>
</html>
—————————————————–
:submit Selector//提交按钮
:text Selector//<input type=”text” />
:visible Selector//可见的