在jQuery出世以来,它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点,它已经被微软官方认可加入VS IDE中拥有强大的智能提示,并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本。
1:首先是JavaScript的DOM 和 jQuery包装集的区分
1.1:在JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有:
1: document.getElementById("ID"):根据ID获取DOM对象。
2:document.getElementsByName("name"):根据HTML标记name属性获取一个DOM数组。
3:document.getElementsByTagName("Tag"):根据HTML的Tag获取一个DOM数组。
1.2:jQuery相对DOM则提供了许多可用的方法和属性。
jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式,它的书写方式和css3.0相似 id用#,class(css)用.,HTMl Tag则直接书写。关于jquery的选择器在下面讲述,这里不急。
1.3:JavaScript的DOM对象转可以化为jQuery包装集:通过$(element)赴会就为jQuery包装集。
2:jQuery最强大的就是提供了一个万能的属性选择器。
选择表达式 |
说明 |
举例 |
#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 |
匹配所有正在执行动画效果的元素 |
暂无例子 |
3.3:内容选择器
选择表达式 |
说明 |
举例 |
:contains(text) |
匹配包含给定文本的元素,只要里面出现即可 |
$("p:contains('段落')") |
:empty |
匹配所有不包含子元素或者文本的空元素 |
$("div:empty") |
:has(selector) |
匹配含有选择器所匹配的元素的元素 |
$("div:has('p')") |
:parent |
匹配含有子元素或者文本的元素 |
$("div:parent") |
4.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)' は 1 つの要素のみに一致しますが、この要素はすべての親要素の子要素に一致します。 :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 を検索します |
||||||||||||||||||
:子のみ |
要素が親要素の唯一の子要素である場合、その要素が一致します 親要素に他の要素が含まれている場合、その要素は一致しません。 |
$("ul li:only-child")//ul |
セレクター |
説明 |
例 |
:非表示 |
は、すべての非表示要素に一致します。入力要素の type 属性が「hidden」の場合、 | にも一致します。
$("div:hidden") |
:表示 |
表示されているすべての要素と一致します |
$("div:visible")//一致する要素 |