1、首先是JavaScript的DOM 和 jQuery包装集的区分
1.1、在JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有：
document.getElementById("ID")：根据ID获取DOM对象。
document.getElementsByName("name")：根据HTML标记name属性获取一个DOM数组。
document.getElementsByTagName("Tag")：根据HTML的Tag获取一个DOM数组。
1.2、jQuery相对DOM则提供了许多可用的方法和属性。
jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式，它的书写方式和css3.0相似 id用#，class（css）用.，HTMl Tag则直接书写。
1.3、JavaScript的DOM对象转可以化为jQuery包装集：通过$(element)赴会就为jQuery包装集。
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
2、jQuery提供了一个万能的属性选择器。
2.1基本选择器
|
选择表达式 |
说明 |
举例 |
|
#id |
根据给定的id匹配一个元素用# |
$("#testDiv2") 获取id为testDiv2的元素 |
|
.class |
根据给定的类匹配元素(也就是取class的值)用. |
$(".myDiv") 获取class为myDiv的一组元素 |
|
element |
根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等) |
$("div") 获取所有的div元素 |
|
selector1,selector2,selectorN |
将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开 |
$("#testDiv2,p") $("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素 |
|
* |
选择所有的元素 |
$("*") |
2.2简单选择器
|
选择表达式 |
说明 |
举例 |
|
:first |
匹配找到的第一个元素 |
$("div:first") |
|
:last |
匹配找到的最后一个元素 |
$("div:last") |
|
:eq(index) |
匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始 |
$("div:eq(1)") |
|
:gt(index) |
匹配所有大于给定索引值的元素 |
$("div:gt(0)") 查找第1个以后的元素 |
|
:lt(index) |
匹配所有小于给定索引值的元素 |
$("div:lt(2)") 查找第一行和第二行的元素 |
|
:even |
匹配所有索引值为偶数的元素，从0 开始计数 |
$("div:even") |
|
:odd |
匹配所有索引值为奇数的元素，从0 开始计数 |
$("div:odd") |
|
:not(selector) |
去除所有与给定选择器匹配的元素 |
$("input:not(:checked)") |
|
:header |
匹配如 h1, h2, h3之类的标题元素 |
$(":header").css("background", "#EEE"); |
|
:animated |
匹配所有正在执行动画效果的元素 |
暂无例子 |
2.3内容选择器
|
选择表达式 |
说明 |
举例 |
|
:contains(text) |
匹配包含给定文本的元素,只要里面出现即可 |
$("p:contains('段落')") |
|
:empty |
匹配所有不包含子元素或者文本的空元素 |
$("div:empty") |
|
:has(selector) |
匹配含有选择器所匹配的元素的元素 |
$("div:has('p')") |
|
:parent |
匹配含有子元素或者文本的元素 |
$("div:parent") |
2.4子元素选择器
|
选择器 |
说明 |
举例 |
|
:first-child |
匹配第一个子元素 |
$("ul li:first-child")//在每个 ul 中查找第一个 li |
|
:last-child |
匹配最后一个子元素 |
$("ul li:last-child")//在每个 ul 中查找最后一个 li |
|
:nth-child(index/even/odd/equation) |
匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 可以使用: |
$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li |
|
:nth-child(index/even/odd/equation) |
匹配其父元素下的第N个子或奇偶元素 |
$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li |
|
:only-child |
如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。 |
$("ul li:only-child")//在 ul 中查找是唯一子元素的 li |
2.5：可见性选择器
|
选择器 |
说明 |
举例 |
|
:hidden |
匹配所有的不可见元素，input 元素的 type属性为 "hidden" 的话也会被匹配到 |
$("div:hidden") |
|
:visible |
匹配所有的可见元素 |
$("div:visible")//元素来匹配 |