一、选择器是什么
有了jQuery的选择器，我们几乎可以获取页面上任意一个或一组对象
二、Dom对象和jQuery包装集
1.Dom对象
JavaScript中获取Dom对象的方式
<div id="divMsg">Hello World</div>
<script>
var div = document.getElementById("divMsg");
console.log(div);
var divs = document.getElementsByTagName("div");
console.log(divs);
</script>
输出的结果
2.jQuery包装集
可以理解为是Dom对象的扩展，在jQuery的世界中所有的对象，都被封装成一个jQuery包装集，包装集是一个集合
<div id="divMsg">Hello World</div>
<script>
$(function () {
var div = $("#divMsg");
console.log(div);
var divs = $("div");
console.log(divs);
})
</script>
输出的结果
3.Dom对象与jQuery对象的转换
(1)Dom转jQuery包装集
<div id="divMsg">Hello World</div>
<script>
//第一步：获取Dom元素对象
var div = document.getElementById("divMsg");
//第二步：使用$()来转换
var $div = $(div);
console.log($div);
</script>
(2)jQuery包装集转Dom对象
注：通过索引器返回的不再是jQuery包装集，而是一个Dom对象
<div id="divMsg">Hello World</div>
<script>
//第一步：通过索引器从包装集获取一个元素
var div = $("#divMsg")[0];
console.log(div);
</script>
三、选择器的分类
1.jQuery选择器按照功能主要分为“选择”和“过滤”。并且可以配合使用，可以同时使用组合成一个选择器字符串。主要的区别是：“过滤”作用的选择器是指定条件从前面匹配的内容中筛选，“过滤”选择器也可以单独使用，表示从全部“*”中帅选。比如
$(":[title]") 等同于 $("*:[title]") 而“选择”功能的选择器则不会有默认的范围，因为作用是“选择”而不是“过滤”；
2.基础选择器Basics
1 $("#divId") 选取ID为divId的元素
2 $("a") 选取所有<a>元素
3 $(".bgRed") 选取class为bgRed的元素
4 $("*") 选取所有元素
5 $("#divId, a.bgRed") 选取ID为divId的元素，和class为.bgRed的<a>元素
3.层次选择器
1 $(".bgRed div") 选取class为bgRed的元素中的所有<div>元素
2 $(".myList>li") 选取class为myList元素中的直接子节点<li>对象
3 $("#hibiscus+img") 选取在id为hibiscus元素后面的img对象
4 $("#someDiv~[title]") 选取id为someDiv的对象后面所有带有title属性的元素
4.基本过滤器Basic Filters
1 $("tr:first") 选取第一个<tr>元素
2 $("tr:last") 选取最后一个<tr>元素
3 $("input:not(:checked)") 选取未选中的 <input> 元素
4 $("tr:odd") 选取偶数位置的<tr>元素
5 $("tr:eq(1)") 选取第2个<tr>元素(索引从0开始)
6 $("tr:gt(0)") 选取索引大于等于1的<tr>元素
7 $("tr:lt(2)") 选取索引小于2的<tr>元素
8 $(":header") 选取页面所有的标题
5.内容过滤器Content Filters
1 $("div:contains('Kimisme')") 选取包含 "Kimisme" 的 <div>元素
2 $("td:empty") 选取不包含子元素或者文本的<td>元素
3 $("div:has(p)") 选取含有<p>元素的<div>元素
4 $("td:parent") 选取含有子元素或者文本的 <td> 元素
6.可见性过滤器 Visibility Filters
1 $("tr:hidden") 选取不可见的 <tr> 元素:
2 $("tr:visible") 选取可见的 <tr> 元素:
7.属性过滤器 Attribute Filters
1 $("div[id]") 选取含有 id 属性的 <div> 元素
2 $("input[name='newsletter']") 选取 name 属性是 newsletter 的 <input> 元素
3 $("input[name!='newsletter']") 选取 name 属性不是 newsletter 的 <input> 元素
4 $("input[name^='news']") 选取 name 属性以news开头的 <input> 元素
5 $("input[name$='letter']") 选取 name 以 letter 结尾的 <input> 元素:
6 $("input[name*='man']") 选取 name 包含 man 的 <input> 元素
7 $("input[id][name$='man']") 选取含有 id 属性，并且它的 name 属性是以 man 结尾的<input>元素
8.子元素过滤器 Child Filters
1 $("ul li:nth-child(2)") 在 <ul> 元素中查找第2个 <li> 元素
2 $("ul li:first-child") 在 <ul> 元素中查找第1个 <li> 元素
3 $("ul li:last-child") 在 <ul> 元素中查找最后一个 <li> 元素
4 $("ul li:only-child") 在 <ul> 元素中查找是唯一子元素的 <li> 元素
9.表单选择器Forms
1 $(":input") 选取所有的<input>元素
2 $(":text") 选取所有type=”text”的文本框
3 $(":password") 选取所有密码框
4 $(":radio") 选取所有单选按钮
5 $(":checkbox") 选取所有复选框
6 $(":submit") 选取所有提交按钮
7 $(":image") 选取所有图像域
8 $(":reset") 选取所有重置按钮
9 $(":button") 选取所有按钮
10 $(":file") 选取所有文件域
10.表单过滤器Form Filters
1 $("input:enabled") 选取所有可用的input元素:
2 $("input:disabled") 选取所有不可用的input元素:
3 $("input:checked") 选取所有选中的复选框元素:
4 $("select option:selected") 选取所有选中的<select>元素:
四、参考文章
http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html
五、备注
样式发不出来还是不行，还是要用table，有空再改