jQuery 검토 강력한 JQuery Selector_jquery-JS 튜토리얼-php.cn

jQuery 검토 강력한 JQuery Selector_jquery

WBOY

풀어 주다： 2016-05-16 18:28:53

원래의

887명이 탐색했습니다.

在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最强大的就是提供了一个万能的属性选择器。

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") 查找第1,3,5个div
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	$("div:odd") 查找第2,4个div
:not(selector)	去除所有与给定选择器匹配的元素 selector为表达式,可以是属性里面的一个值	$("input:not(:checked)") 查找所有未选中的input 元素[注 :checked为自定义筛选选择器,后面会讲到]
:header	匹配如 h1, h2, h3之类的标题元素	$(":header").css("background", "#EEE"); 添加样式
:animated	匹配所有正在执行动画效果的元素	暂无例子

3.3：内容选择器

选择表达式	说明	举例
:contains(text)	匹配包含给定文本的元素,只要里面出现即可	$("p:contains('段落')") 找带有段落字样的p元素
: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)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even)//偶数行 :nth-child(odd)//奇数行 :nth-child(3n) :nth-child(2)//索引为2的 :nth-child(3n 1) :nth-child(3n 2)	$("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

설명

예

:첫번째 자식

选择器	说明	举例
:hidden	匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到	$("div:hidden")
:visible	匹配所有的可见元素	$("div:visible")//元素来匹配 $(".divH:visible")//根据class来匹配

첫 번째 하위 요소 일치

$("ul li:first-child")//각 ul에서 첫 번째 li 찾기

:마지막 자식

마지막 하위 요소와 일치

$("ul li:last-child")//각 ul에서 마지막 li 찾기

:n번째-자식(색인/짝수/홀수/방정식)

상위 요소 아래의 N번째 하위 요소 또는 홀수-짝수 요소와 일치

':eq(index)' 는 하나의 요소만 일치하는 반면, 이 요소는 모든 상위 요소에 대한 하위 요소와 일치합니다. :nth-child는 1부터 시작하고 :eq()는 0부터 시작합니다!

다음을 사용할 수 있습니다:
n번째-자식(짝수)//짝수 행

:n번째-자식(홀수)//홀수 행
:nth-child(3n) :nth-child(2)//인덱스 2
:nth-child(3n 1)
:nth-child(3n 2)

$("ul li:nth-child(2)")//각 ul에서 두 번째 li 찾기

:n번째-자식(색인/짝수/홀수/방정식)

상위 요소 아래의 N번째 하위 요소 또는 홀수 요소와 일치

$("ul li:nth-child(2)")//각 ul에서 두 번째 li 찾기

:유일자

요소가 상위 요소의 유일한 하위 요소인 경우 일치됩니다.

상위 요소에 다른 요소가 포함되어 있으면 일치하지 않습니다.

$("ul li:only-child")//ul의 유일한 하위 요소인 li 찾기

4.5: 가시성 선택기 에도 일치합니다.

선택기	설명	예
:숨김	는 모든 보이지 않는 요소와 일치합니다. 입력 요소의 유형 속성이 "hidden"인 경우	$("div:hidden")
:표시	표시되는 모든 요소 일치	$("div:visible")//일치할 요소 $(".divH:visible")//일치할 클래스

더 많은 예제를 살펴볼 필요는 없습니다. 누구나 jQuery에 대한 지식이 있어야 합니다. 하하...