ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jquery でよく使用されるセレクターの紹介
层次选择器:
$('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: 現在の親要素内に子要素が 1 つだけある要素と一致します。
nth-child: eq() を比較して、eq() の値が 1 つと一致し、nth-child() が各親要素に対して 1 つの子要素と一致することを理解します。
n 番目の子(インデックス)、インデックスは 1 から始まります
n番目の子供(偶数)
n番目の子(奇数)
nth-child(3n)、3 の倍数の要素を選択します
nth-child(3n 1) は 3 1 の倍数である要素を満たします
注:
1. jQuery セレクターを通じて選択されたオブジェクト自体は jQuery オブジェクトであり、セレクターには暗黙的な反復の機能があります。例:
$('p').click(function(){
アラート(this.innerText);
});
クリック イベントにはすべての p に対して注釈が付けられます。
2. セレクターによって選択された要素の数に関係なく、返される要素はコレクション オブジェクトです。対応する要素が見つからない場合、このコレクション オブジェクトの長さの値は 0 です。要素が選択されている場合、長さは 0 になります。 element は選択した要素のインデックス値です。したがって、この属性は、要素が存在するかどうかを判断するためにも使用されます。例:
Iif($('#div').length>0)//要素が存在するかどうかを判定します
3. イベントでは、これは現在イベントをトリガーしている要素を表すオブジェクトですが、ここでは jQuery オブジェクトではなく DOM オブジェクトです。 jQuery でメソッドまたはプロパティを実行する必要がある場合は、これを jQuery オブジェクトに変換する必要があります
変換方法は次のとおりです: $(this);