jQuery基础
jQuery中选择器的通用语法如下：
$(selector) 或者：jQuery(selector)
1.$("#id") id选择器，相当于javascript中的 document.getElementById("id")
2.$(".someClass") 类别选择器，选择CSS类别为"someClass"的所有节点元素
3.$("p:odd") 选择所有位于奇数行的<p>标记，从0开始计数
4.$("p:nth-child(odd)") 选择所有位于奇数行的<p>标记，从1开始计数
5.$("li > a") 子选择器，返回<li>标记的所有子元素<a>，不包括孙标记
6.$("a[href$=pdf]") 选择所有的超链接，并且这些超链接是以"pdf"结尾的。
jQuery中的ready() 方法很好的解决了window.onload函数的需要页面加载之后才能使用，和频繁被使用页面冲突的问题。它能够自动将其中的函数在页面加载完成后运行，并且同一个页面中可以使用多个ready()方法，而且不相互冲突。
$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
也可以简写为以下形式：
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
一、属性选择器
属性选择器的语法是在标记的后面用中括号[]添加相关的属性。
$("a[title]") ，选择设置了title属性的标记。
$("a[href='a.html']")，href属性值等于a.html的超链接
$("a[href^=http://]")，属性值以htt://开头的
$("a[href$=html]")，属性值以html结尾的超链接
$("a[href*=html]"),属性值包含html的超链接
$("li:has(a)")，包含了超链接的所有<li>标记
二、包含选择器
| 选 择 器 | 说 明 |
| * | 所有标记 |
| E | 所有名称为E的标记 |
| EF | 所有名称为F的标记，并且是E标记的子标记（包括孙、重孙等） |
| E>F | 所有名称为F的标记，并且是E标记的子标记（不包括孙标记） |
| E+F | 所有名称为F的标记，并且该标记紧接着前面的E标记 |
| E～F | 所有名称为F的标记，并且该标记前面有一个E标记 |
| E:has(F) | 所有名称为E的标记，并且该标记包含F标记 |
| E.C | 所有名称为E的标记，属性类别为C，如果去掉E，就是属性选择器.C |
| E#I | 所有名称为E的标记，id为I，如果去掉E，就是id选择器#I |
| E[A] | 所有名称为E的标记，并且设置了属性A |
| E[A=V] | 所有名称为E的标记，并且属性A的值等于V |
| E[A^=V] | 所有名称为E的标记，并且属性A的值以V开头 |
| E[A$=V] | 所有名称为E的标记，并且属性A的值以V结尾 |
| E[A*=V] | 所有名称为E的标记，并且属性A的值中包含V |
三、位置选择器
| 选 择 器 | 说 明 |
| :first | 第1个元素，例如div p:first选中页面中所有p元素的第1个，且该p元素是div的子元素 |
| :last | 最后一个元素，例如div p:last选中页面中所有p元素的最后一个，且该p元素中div的子元素 |
| :first-child | 第一个子元素，例如ul:first-child选中所有ul元素，且该ul元素是其父元素的第一个子元素 |
| :last-child | 最后一个子元素，例如ul:last-child选中所有ul元素，且该ul元素是其父元素的最后一个子元素 |
| :only-child | 所有没有兄弟的元素，例如p:only-child选中所有p元素，如果该p元素是其父元素的惟一子元素 |
| :nth-child(n) | 第n个子元素，例如li:nth-child(2)选中所有li元素，且该li元素是其父元素的第2个子元素（从1开始计数） |
| :nth-child(odd|even) | 所有奇数号或者偶数号子元素，例如li:nth-child(odd)选中所有li元素，且这些li元素为其父元素的第奇数个元素（从1开始计数） |
| :nth-child(nX+Y) | 利用公式来计算子元素的位置，例如li:nth-child(5n+1)选中所有li元素，且这些li元素为其父元素的第5n+1个元素（1,6,11,16……） |
| ：odd或者even | 对于整个页面而言的奇数号或偶数号元素，例如p:even为页面中所有排在偶数的p元素（从0开始计数） |
| :eq(n) | 页面中第n个元素，例如p:eq(4)为页面中的第5个元素 |
| :gt(n) | 页面中第n个元素之后的所有元素（不包括第n个本身），例如 p:gt(0)为页面中第1个p元素之后的所有p元素 |
| :lt(n) | 页面中的第n个元素之前的所有元素（不包括第n个元素本身），例如p:lt(2)为页面中第3个p元素之前的所有p元素 |
四、过滤选择器
| :animated | 所有处于动画中的元素 |
| :button | 所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]、<button>标记 |
| :checkbox | 所有复选框，等同于input[type=checkbox] |
| :contains(foo) | 选择所有包含了文本"foo"的元素 |
| :disabled | 页面中被禁用了的元素 |
| :enabled | 页面中没有被禁用的元素 |
| :file | 上传文件的元素，等同于input[type=file] |
| :header | 选中所有标题元素，例如<h1>~<h6> |
| :hidden | 页面中被隐藏的元素 |
| :image | 图片提交按钮，等同于input[type=image] |
| :input | 表单元素，包括<input>、<select>、<textarea>、<button> |
| :not(filter) | 反向选择 |
| :parent | 选择所有拥有子元素（包括文本）的元素，空元素将被排除 |
| :password | 密码文本框，等同于input[type=password] |
| :radio | 单选按钮，等同于input[type=radio] |
| :reset | 重置按钮，包括input[type=reset]和button[type=reset] |
| :selected | 下拉菜单中被选中的项 |
| :submit | 提交按钮，包括input[type=submit]和button[type=submit] |
| :text | 文本输入框，等同于input[type=text] |
| :visible | 页面中的所有可见元素 |
以下为这些基础选择器的代码实例（测试环境IE9）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>反向过滤</title>
<style type="text/css">
<!--
form{
font-size:12px;
margin:0px; padding:0px;
}
input.btn{
border:1px solid #005079;
color:#005079;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
p{
padding:5px; margin:0px;
}
.myClass{
background-color:#ffbff4;
text-decoration:underline;
border:1px solid #0000FF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.myClassPro{
/* 设定某个CSS类别 */
background-color:#d0baba;
color:#5f0000;
text-decoration:underline;
}
.myClassLocal{
/* 设定某个CSS类别 */
background-color:#c0ebff;
text-decoration:underline;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
//1.基本选择器
function base(){
var oElements = $("h2 a");
for(var i = 0; i < oElements.length; i++){
oElements[i].innerHTML = i.toString();
}
}
//2.功能函数前缀
function fun(){
var str = " 1234567890";
str = $.trim(str);
alert(str.length);
}
//3.创建DOM元素
function creatDOM(){
var strHtml = $("<p>啊～～～～～～～～～</p>");
strHtml.insertAfter("#aaa");
}
//4.自定义添加“$”
$.fn.disable = function(){
//扩展jQuery,表单元素统一disable
return this.each(function(){
if(typeof this.disabled != "undefined") this.disabled = true;
});
}
$.fn.enable = function(){
//扩展jQuery，表单元素统一 enable
return this.each(function(){
if(typeof this.disabled != "undefined") this.disabled = false;
});
}
function swapInput(name,button){
if(button.value == "Disable"){
//如果按钮值为Disable，则调用disable()方法
$("input[name="+name+"]").disable();
button.value = "Enable";
}else{
//如果按钮值为Enable，则调用disable()方法
$("input[name="+name+"]").disable();
button.value = "Disable";
}
}
//5.属性选择器
function property(){
$("input[type]").addClass("myClassPro");
}
//6.包含选择器
function containProperty(){
$("ul li ul li:has(a)").addClass("myClassPro");
}
//7.位置选择器
function local(){
$("p:even").addClass("myClassLocal");//从0计数
//$("p:nth-child").addClass("myClassPro");//从1计数
}
//8.过滤选择器
function pass(oCheckBox){
//使用:checked过滤出被用户选中的
$("input[name="+oCheckBox+"]:checked").addClass("myClass");
}
//9.反向过滤的迭代使用选择器
function notFilter(){
$(":input:not(:checkbox):not(:radio)").addClass("myClass");
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
<h2><a href="#" >正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
<br><input type="button" value="1.基本选择器" onclick="base()" class="btn">
<br>
<br><input type="button" value="2.功能函数前缀" onclick="fun()" class="btn">
<br>
<br><input type="button" value="3.创建DOM元素" onclick="creatDOM()" class="btn">
<br>
<br><input type="button" value="5.属性选择器" onclick="property()" class="btn">
<br>
<br><input type="button" value="6.包含选择器" onclick="containProperty()" class="btn">
<br>
<br><input type="button" value="7.位置选择器" onclick="local()" class="btn">
<ul>
<li><a href="http://picasaweb.google.com/isaacshun">isaac photo</a>
<ul>
<li>10-6.html</li>
<li><a href="10-7.html" id="aaa">10-7.html</a></li>
<li><a href="10-8.html" title="圆角矩形">10-8.html</a></li>
<li><a href="10-9.html">10-9.html</a></li>
<li><a href="Pageisaac.html" title="制作中...">isaac</a></li>
</ul>
</li>
</ul>
<p id="aaa"><label for="name">姓名:</label> <input type="text" name="name" id="name"></p>
<p><label for="passwd">密码:</label> <input type="password" name="passwd" id="passwd"></p>
<p><label for="color">最喜欢的颜色:</label>
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>性别:
<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></p>
<p>你喜欢做些什么:<br>
<input type="button" name="btnSwap" id="btnSwap" value="Disable" class="btn" onclick="swapInput('hobby',this)"><br>
<input type="checkbox" name="hobby" id="book" value="book"><label for="book">看书</label>
<input type="checkbox" name="hobby" id="net" value="net"><label for="net">上网</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡觉</label></p>
<br>
<br><input type="button" value="8.过滤选择器" onclick="pass('hobby')" class="btn">
<p><label for="comments">我要留言:</label><br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
<input type="reset" name="btnReset" id="btnReset" value="Reset"></p>
<br><input type="button" value="9.反向过滤的迭代使用选择器" onclick="notFilter()" class="btn">
</form>
</body>
</html>
五.jquery链
filter()筛选元素可以接受两种元素，一是接受通用方法，二是接受返回值为布尔值的函数。在filter()的参数中，不能使用直接的等于匹配（=），只能使用前匹配（^=）、后匹配（&=）、任意匹配（*=）。
在jQuery链中，后面的操作都是以前面的操作结果为对象的。如果希望操作对象为上一步的对象，则可以使用end()方法。
通过andSelf()将前面两个对象进行组合后共同处理。
以下为实例（IE9）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>filter()方法</title>
<style type="text/css">
<!--
div{
margin:5px; padding:5px;
height:40px; width:40px;
float:left;
}
.myClass1{
background:#fcff9f;
}
.myClass2{
border:2px solid #000000;
}
.myClass3{
background:#ffde00;
}
.myClass4{
border:1px solid #0000FF;
}
.myBackground{
background:#ffde00;
}
.myBorder{
border:2px solid #0000FF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
//1.通用表达式
function common(){
$("div").addClass("myClass1").filter("[class*=middle]").addClass("myClass2");
}
//2.函数方法，函数必须返回布尔值
function functionparm(){
$("div").addClass("myClass1").filter(function(index){
return index == 0 || $(this).attr("id") == "fifth";
}).addClass("myClass2");
}
//3.find
function findFunction(){
$("p").find("span").addClass("myClass3");
}
//4.jquery链，上一步操作对象end()
function end(){
$("p").find("span").addClass("myClass3").end().addClass("myClass4");
}
//5.andSelf()，将两个对象进行组合后共同处理
function andSelf(){
$("#aaa").find("p").addClass("myBackground").andSelf().addClass("myBorder");
}
</script>
</head>
<body>
<div id="first"></div>
<div class="middle" id="second"></div>
<div class="middle" id="third"></div>
<div class="middle" id="fourth"></div>
<div class="middle" id="fifth"></div>
<div id="six"></div>
<br><br><br><br><br><br><br>
<table>
<tr>
<td>
<input type="button" value="1.通用表达式" onclick="common();">
<input type="button" value="2.函数方法" onclick="functionparm();">
<input type="button" value="3.find" onclick="findFunction();">
<input type="button" value="4.end" onclick="end();">
<input type="button" value="5.andSelf" onclick="andSelf();">
</td>
</tr>
</table>
<p><span>Hello</span>, how are you?</p>
<span>very nice,</span> thank you.
<div id="aaa">
<p>第一段</p>
<p>第二段</p>
</div>
</body>
</body>
</html>