jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选取<p>元素。
$("p.intro")选取所有class="intro"的<p>元素。
$("p#demo")选取所有id="demo"的<p>元素。
示例代码：
jquery部分
$(document).ready(function(){//页面加载完成后执行
tagName();
//idName();
//className();
});
functiontagName(){
$('p').addClass('heighlight');
}
functionidName(){
$('#div').addClass('heighlight2');
}
functionclassName(){
$('p.pClass').addClass('heighlight2');
}
html部分
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<scripttype="text/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript"src="js/select.js"></script>
<linkrel="stylesheet"href="css/select.css"/>
</head>
<body>
<divid="div">
<p>thisismyname!!</p>
<pclass="pClass">classisimport!</p>
<ahref="#">youcai!!</a>
</div>
</body>
</html>
css部分
.heighlight{
background-color:blue;
}
.heighlight2{
background-color:red;
}
.alt{
background-color:#ccc;
}
jQuery属性选择器
Query使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jquery部分，其他部分同上。
$(document).ready(function(){
attribute();
});
functionattribute(){
$('[href="#"]').addClass('heighlight');
}
jQueryCSS选择器
.addClass()或者是.css()
$(document).ready(function(){
cssName();
});
functioncssName(){
$('p').css("background-color","pink");
}
jQuery 自定义选择符
$(document).ready(function(){
custom();
});
functioncustom(){
$('tr:odd').addClass('alt');
}
附表
选择器
实例
选取
*
$("*")
所有元素
#id
$("#lastname")
id="lastname"的元素
.class
$(".intro")
所有class="intro"的元素
element
$("p")
所有<p>元素
.class.class
$(".intro.demo")
所有class="intro"且class="demo"的元素
:first
$("p:first")
第一个<p>元素
:last
$("p:last")
最后一个<p>元素
:even
$("tr:even")
所有偶数<tr>元素
:odd
$("tr:odd")
所有奇数<tr>元素
:eq(index)
$("ulli:eq(3)")
列表中的第四个元素（index从0开始）
:gt(no)
$("ulli:gt(3)")
列出index大于3的元素
:lt(no)
$("ulli:lt(3)")
列出index小于3的元素
:not(selector)
$("input:not(:empty)")
所有不为空的input元素
:header
$(":header")
所有标题元素<h1>-<h6>
:animated
所有动画元素
:contains(text)
$(":contains('W3School')")
包含指定字符串的所有元素
:empty
$(":empty")
无子（元素）节点的所有元素
:hidden
$("p:hidden")
所有隐藏的<p>元素
:visible
$("table:visible")
所有可见的表格
s1,s2,s3
$("th,td,.intro")
所有带有匹配选择的元素
[attribute]
$("[href]")
所有带有href属性的元素
[attribute=value]
$("[href='#']")
所有href属性的值等于"#"的元素
[attribute!=value]
$("[href!='#']")
所有href属性的值不等于"#"的元素
[attribute$=value]
$("[href$='.jpg']")
所有href属性的值包含以".jpg"结尾的元素
:input
$(":input")
所有<input>元素
:text
$(":text")
所有type="text"的<input>元素
:password
$(":password")
所有type="password"的<input>元素
:radio
$(":radio")
所有type="radio"的<input>元素
:checkbox
$(":checkbox")
所有type="checkbox"的<input>元素
:submit
$(":submit")
所有type="submit"的<input>元素
:reset
$(":reset")
所有type="reset"的<input>元素
:button
$(":button")
所有type="button"的<input>元素
:image
$(":image")
所有type="image"的<input>元素
:file
$(":file")
所有type="file"的<input>元素
:enabled
$(":enabled")
所有激活的input元素
:disabled
$(":disabled")
所有禁用的input元素
:selected
$(":selected")
所有被选取的input元素
:checked
$(":checked")
所有被选中的input元素
