层次选择器:
$('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
Select all visible elements
Child element filter selector:
The difference between first-child and first: first can only select the first element, while first-child can select the first element of each child element.
last-child:
only-child: Matches elements with only one child element in the current parent element.
nth-child: Compare eq() to understand that eq() value matches one, nth-child() matches one child element for each parent element.
nth-child(index), index starts from 1
nth-child(even)
nth-child(odd)
nth-child(3n), select elements that are multiples of 3
nth-child(3n 1) satisfies the element that is a multiple of 3 1
Note:
1. The object selected through the jQuery selector itself is a jQuery object, and the selector has the function of implicit iteration, for example:
$('p').click(function(){
alert(this.innerText);
});
The click event is annotated for all p.
2. No matter how many elements are selected by the selector, an element returned is a collection object. If the corresponding element is not found, the length value of this collection object is 0. If an element is selected, the length element is The index value of the selected element. Therefore, this attribute is also used to determine whether the element exists. For example:
Iif($('#div').length>0)//Determine whether the element exists
3. In the event, this is still an object representing the element that currently triggers the event, but this here is a DOM object instead of a jQuery object. If you need to execute methods or properties in jQuery, you should convert this to a jQuery object
The conversion method is: $(this);