上次笔记，我写了jQuery是什么？为什么要使用jQuery？这次笔记写一写使用jQuery选择器。jQuery想要操作HTML元素，就必须能够选中它，然后在对该元素进行想要进行的操作。
本节知识脑图：
一、快速入门程序
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>单击我，我就会消失。</p>
</body>
</html>
1.$() 是 jQuery 的缩写， 它能在DOM中搜索与指定选择器匹配的元素，创建并返回一个引用该元素的jQuery对象。这里千万记住它返回的是jQuery对象，不是dom对象。记住它有什么好处呢？至少你得知道它俩的方法你不能混用吧。
2.$(document) 是 jQuery 的常用对象，代表的是 HTML 文档对象，也就是 dom 对象。它是目前为止我见过的，唯一一个不用加引号的选择器。感觉就像是把document对象转化成了jQuery对象，然后才能用jQuery对应的方法。
3.$(this) 是一个 jQuery 对象，表示引用当前的 HTML 元素。从代码就可以看出，给 p 标签加了事件， 一旦我们触发了这个事件， 那么当前的 this 对象就是指你触发事件的事件源，也就是 p 元素，在通过 $() 转换成对应的 jQuery 对象，调用 jquery 的 hide() 方法。
二、讲透 dom 对象和 jQuery 对象。
1.dom 对象转换成 jQuery 对象
var jqObj = $(domObj);
2.jQuery 对象转换成 dom 对象
var domObj = $(“p”)[0];
var domObj = $(“p”).get(0);
3.检测是 dom 对象还是 jQuery 对象
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div><p>包含p元素的div元素</p></div>
<div>不包含p元素的div元素</div>
<script>
function isDOM(obj){
if(typeof HTMLElement==='object'){
return obj instanceof HTMLElement;
}else{
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName==='string';
}
}
$(document).ready(function(){
$("div:has(p)").css({ background:'yellow', color:'blue' });
var jq = $("div:has(p)").get(0);
if(jq instanceof jQuery){
alert("是jQuery对象");
}
if(isDOM(jq)){
alert("是dom对象");
}
});
</script>
</body>
</html>
注意：从这几个练习，我们不难发现jQuery对象像一个数组，而且取出来的单个元素又是dom对象，所以我推测jQuery对象就是一个dom数组类型
三、jQuery的选择器（要先选择出对象才能管理和操作）
1.基础选择器
a.id选择器
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
alert("hello");
//$("#button1").css("border","3px solid red");
//$(this).css("border","3px solid red");
//$(this)[0].css("border","3px solid red");
$(this)[0].style.color = "red";
$(this)[1].style.color = "red";
});
});
</script>
</head>
<body>
<button id="button1">单击我</button>
<button id="button1">单击我</button>
</body>
</html>
解释一下：第一个注释没有报错，是最正常的调用方式。第二个注释括号里面的内容换成了this,我在一中解释过了，也没有问题。第三个注释我想做的是用 dom 对象的方法设置 HTML 元素的属性，所以加[0]转换成了dom对象，它打点调用的是jQuery的方法，所以会报错，截图是第一张。第四个是第三个的正确调用方法调用的是dom的style属性。第五句话我想要尝试 id 不能重复命名的效果，结果是如果存在两个相同的，以第一个为准，无法通过id设置第二个按钮的任何样式。第五句话报错，因为不存在[1]
运行结果：
b.标签名选择器
<html>
<body>
<a href="http://jquery.com/">jQuery</a>
<a href="#">jQuery</a>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("Hello jQuery");
//这句话是重点
event.preventDefault();
$("a")[0].style.color="red";
$("a")[1].style.color="black";
});
});
</script>
</body>
</html>
运行结果：
c.类别选择器
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$(".myClass").css("border","3px solid red");
$(".myClass")[1].style.color="red";
});
</script>
</head>
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>
</html>
运行结果：
d.选择所有
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
/*
注意dom树，head是不显示边框的从html开始走右分支 红6个
*/
$(document).ready(function(){
$("*").css("border","3px solid red");
});
</script>
<style>
div,span {
width: 150px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</body>
</html>
运行结果：
e.同时选择多个
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("div, span").css("border","3px solid red");
});
</script>
<style>
div,span {
width: 150px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</body>
</html>
运行结果：
2.层次选择器
a.祖先 后代选择器
<!DOCTYPE HTML>
<html>
<head>
<script src=" jquery.js"></script>
<script>
$(document).ready(function(){
$("form input").css("border", "2px dotted green");
});
</script>
<style>
form { border:2px red solid;}
</style>
</head>
<body>
<form>
<p>被p标签<br>
用户名： <input name="txtUserName" type="text" value="" /> <br>包裹 </p>
密码： <input name="txtUserPass" type="password" /> <br>
</form>
b表单外的文本框: <input name="none" />
</body>
</html>
运行结果：
b.父>子选择器
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#main > *").css("border", "3px double red");
});
</script>
<style>
body { font-size:14px; }
span#main { display:block; background:yellow; height:110px; }
button { display:block; float:left; margin:2px;
font-size:14px; }
div { width:90px; height:90px; margin:5px; float:left;
background:#bbf; font-weight:bold; }
div.mini { width:30px; height:30px; background:green; }
</style>
</head>
<body>
<span id="main">
<div></div>
<button>Child</button>
<div class="mini"></div>
<div>
<div class="mini"></div>
<div class="mini"></div>
</div>
<div><button>Grand</button></div>
<div><span>A Span <em>in</em> child</span></div>
<span>A Span in main</span>
</span>
</body>
</html>
运行结果：
可以看到两者的区别，祖先后代，是把它所有的后代元素，不管是儿子还是孙子都选中，而父子选择器只是选择它的儿子，要想选择孙子继续用“>”连下去
c.前+后选择器
<!DOCTYPE html>
<html>
<!--只有紧接着的才可以-->
<head>
<script src="jquery.js"></script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<script>
$("label + input").css("border", "2px dotted green")
</script>
</body>
</html>
运行结果：
d.前~兄弟选择器
<!DOCTYPE html>
<html>
<head>
<!--没有紧挨着的也选中-->
<style>
div,span {
display:block;
width:80px;
height:80px;
margin:5px;
background:#bbffaa;
float:left;
font-size:14px;
}
div#small {
width:60px;
height:25px;
font-size:12px;
background:#fab;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>div (doesn't match since before #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>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>
运行结果：
四、jQuery的过滤器（选择更加明确的元素）
a.基本过滤器
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<table border="0">
<tr><td>第 1 行</td><td>第 1 行</td></tr>
<tr><td>第 2 行</td><td>第 2 行</td></tr>
<tr><td>第 3 行</td><td>第 3 行</td></tr>
</table>
<script>
$(document).ready(function(){
$("tr:first").css("font-style", "italic");
$("tr:last").css("font-style", "italic");
$("tr:even").css("color", "red");
$("tr:odd").css("color", "blue");
});
</script>
</body>
</html>
运行结果：
注：这里的even是偶数的意思，它的偶数指的是索引值为偶数。odd同样
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<table border="0">
<tr><td>第 1 行</td><td>第 1 行</td></tr>
<tr><td>第 2 行</td><td>第 2 行</td></tr>
<tr><td>第 3 行</td><td>第 3 行</td></tr>
</table>
<script>
$(document).ready(function(){
//等于1自然是第一行
$("tr:eq(1)").css("font-style", "italic");
//小于1自然是第1行
$("tr:lt(1)").css("color", "red");
//大于1自然是第3行
$("tr:gt(1)").css("color", "blue");
});
</script>
</body>
</html>
运行结果：
b.内容过滤器
(1).：contains()选择包含指定文本的元素
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div>HTML4</div>
<div>HTML5</div>
<div>CSS3</div>
<div>jQuery</div>
<script>
$(document).ready(function(){
$("div:contains(HTML)").css({ background:'yellow', color:'blue' });
});
</script>
</body>
</html>
运行结果：
(2).：empty()选择不包含子元素且指定文本为空的元素
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("td:empty()").css("background","grey" )
});
</script>
</head>
<body>
<div><p>kkkk</p></div>
<div>dfsa</div>
<table id="employees" width="200" border="1">
<tr><th>ID</th><th>姓名</th><th>性别</th><th>年龄</th><th>学历</th></tr>
<tr>
<td>001</td>
<td>张三</td>
<td></td>
<td></td>
<td>大专</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>男</td>
<td>30</td>
<td></td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td><p></p></td>
<td>25</td>
<td>本科</td>
</tr>
</table>
</body>
</html>
运行结果：
注：可以看到包含子元素但是文本为空的选不中，而且这个empty就应该不带参数的用。
(3).：has()匹配包含指定子元素的元素
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div><p>包含p元素的div元素</p></div>
<div>不包含p元素的div元素</div>
<div>1</div>
<script>
$(document).ready(function(){
$("div:has(p)").css({ background:'yellow', color:'blue' });
});
</script>
</body>
</html>
运行结果：
(4).：parent()与empty的作用正好相反，可以匹配至少一个子元素或者文本，可以看到两者的条件是互补的（带参数和不带参数一样）。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div><p>包含p元素的div元素</p></div>
<div>不包含p元素的div元素</div>
<div>1</div>
<script>
$(document).ready(function(){
$("div:parent()").css({ background:'yellow', color:'blue' });
});
</script>
</body>
</html>
运行结果：
c.属性过滤器
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div>no id</div>
<div id="id1">id1</div>
<div id="id2">id2</div>
<div>no id</div>
<script>
$(document).ready(function(){
$('div[id]').css("border", "2px dotted green");
$('div[id=id1]').css("border", "2px dotted red");
});
</script>
</body>
</html>
注：属性过滤器有很多，用到时候自己找。比如什么以指定值开头啊，以指定值结尾啊，不等于指定值等等，我感觉没必要记，但一定要知道。
d、子元素过滤器
1.：nth-child(index/even/odd/equation)
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("ul li:nth-child(even)").css("border", "2px solid red");
});
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
运行结果:
注：这里的even就是指偶数，不是指索引值。此处不存在索引值一说。:first-child是选择第一个子元素，相应的：last-child是选择最后一个子元素。没必要记，但一定要知道有。
参考：《jQuery程序设计教程》