层次选择器:
$('div p');//选取div下的所有的p元素
$('div>p').css('border','1px solid red');//只选取div下的直接子元素
//相邻的元素
$('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的
所有p兄弟元素
$('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素
$('div +p').css('border','1px solid red');与$('div').next('p')等价//这种写法表示div后
只找紧挨着的第一个兄弟元素,并且该元素是p。
获得兄弟元素的方法:
next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素(上一个)
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素
基本过滤选择器:
$('p:first')与$('p').first()是等价的。获取所有p元素中的第一个P元素
$('p:last')与$('p').last()
$('p:eq(2)')在所有的p元素中找到索引为2的元素
$('p:even')选取所有奇数的p标签
$('p:odd')选取所有偶数的p标签
$('p:not(.tst)').css();选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称
$('p:gt(1)')选取所有索引值大于1的p元素
$('p:lt(3)')选取所有索引值小于3的p元素。
$(':header')选取页面上所有的h1-h6的元素。(如果这样写的话,中间绝对不能有空格。)
属性过滤选择器:
$("div[id]")选取有id属性的
$("div[title=test]")选取title属性为“test”的
进行封装,用$("input[name=abc]")
$("div[title!=test]")选取title属性不为“test”的
还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等,条件还
可以复合。【[属性1=a][属性2=b]…】(*)
表单对象属性选择器(过滤器):
$("#form1 :enabled")选取id为form1的表单内所有启用的元素
$("#form1 :disabled")选取id为form1的表单内所有禁用的元素
$(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
$("select :selected")选取所有选中的选项元素(下拉列表)
表单滤选择器:
$('#form1:enabled');//这个表示能够启用的且id为form1的标签
$('#form1 :enabled');//这个表示能够启用的且id为form1下的所有启用的元素。
$('input:checked')
$('input:disabled')
$ ('select:selected')
$(“:input")选取所有、
$("input")只获得
$(":text")选取所有单行文本框,等价于
$("input[type=text]"),$(‘input[type=text]'),$(‘:text');
$(“:password”)选取所有密码框。
内容过滤选择器:
:contains(text):过滤出包含给定文本的元素。
:empty包含没有子元素的或者是内容为空的元素。
:has(selecttor)
:parent 获得有子元素的元素。
可见性过滤器:
:hidden
选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)
1.表单元素type=“hidden”
2.设置css的display:none
3.高度和宽度明确设置为0的元素。
4.父元素时隐藏的,所以子元素也是隐藏的
visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本
jQuery不太一样,1.3.2之前)
:visible
보이는 요소 모두 선택
하위 요소 필터 선택기:
first-child와 first의 차이점: first는 첫 번째 요소만 선택할 수 있는 반면, first-child는 각 하위 요소의 첫 번째 요소를 선택할 수 있습니다.
막내:
only-child: 현재 상위 요소의 하위 요소가 하나만 있는 요소와 일치합니다.
nth-child: eq() 값이 1과 일치하고 nth-child()가 각 상위 요소에 대해 하나의 하위 요소와 일치한다는 것을 이해하려면 eq()를 비교하세요.
n번째 자식(index), index는 1부터 시작
n번째(짝수)
n번째(홀수)
n번째 자식(3n), 3의 배수인 요소 선택
nth-child(3n 1)은 3 1의 배수인 요소를 만족합니다
참고:
1. jQuery 선택기를 통해 선택된 객체 자체는 jQuery 객체이며, 선택기는 암시적 반복 기능을 가지고 있습니다. 예를 들면 다음과 같습니다.
$('p').click(function(){
경고(this.innerText);
});
모든 p에 대해 클릭 이벤트가 주석 처리됩니다.
2. 셀렉터가 아무리 많은 요소를 선택하더라도 반환되는 요소는 컬렉션 개체입니다. 해당 요소를 찾을 수 없으면 이 컬렉션 개체의 길이 값은 0입니다. 요소를 선택하면 길이가 0이 됩니다. 요소는 선택한 요소의 인덱스 값입니다. 따라서 이 속성은 요소가 존재하는지 여부를 확인하는 데에도 사용됩니다. 예:
Iif($('#div').length>0)//요소가 존재하는지 확인
3. 이벤트에서는 여전히 현재 이벤트를 트리거하는 요소를 나타내는 객체이지만 여기서는 jQuery 객체가 아닌 DOM 객체입니다. jQuery에서 메소드나 속성을 실행해야 하는 경우 이를 jQuery 객체로 변환해야 합니다
변환 방법은 $(this);