jquery 筛选元素的常用方法

Posted 2021-04-08 phpzheng

上一篇文章，和大家分享了 jquery 的概念和基本的选择器，这篇文章，将和大家分享我认为常用的筛选元素的方法。

过滤选择器

//获取第一个li
$("li:first") 

//获取最后一个li
$("li:last")

//获取下标等于 4 的li(第五个 li 元素)
$("li:eq(4)")

属性过滤选择器

//所有含有 id 属性的 div 元素
$("div[id]")

// id属性值为123的div 元素
$("div[id='123']") 

// id属性值不等于123的div 元素       
$("div[id!='123']")

//查找 name='man' 的 input 元素
$("input[name='man']")

状态过滤选择器

// 匹配可用的 input
$("input:enabled")  

// 匹配不可用的 input  
$("input:disabled")   

// 匹配选中的 input
$("input:checked") 

// 匹配选中的 option   
$("option:selected")  

表单选择器

//匹配所有 input, textarea, select 和 button 元素
$(":input")

//所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同     
$(":text")

//所有密码框   
$(":password")

//所有单选按钮
$(":radio")

//所有复选框 
$(":checkbox")

//所有提交按钮
$(":submit")

//所有button按钮
$(":button")

get([num])

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

html 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:
$("img").get(0);

结果:
[ <img src="test1.jpg"/> ]

index([selector|element])

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

HTML 代码:
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

jQuery 代码:
//传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index(document.getElementById('bar')); 

//传递一个jQuery对象
$('li').index($('#bar')); 

//传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('li').index($('li:gt(0)')); 

//传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index('li'); 

//不传递参数，返回这个元素在同辈中的索引位置。  
$('#bar').index(); 

eq(index|-index)
获取第N个元素

HTML 代码:
<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:
$("p").eq(1)

结果:
[ <p> So is this</p> ]

first()
获取第一个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$('li').first()

结果:
[ <li>list item 1</li> ]

last()
获取最后个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$('li').last()结果:
[ <li>list item 5</li> ][ <li>list item 5</li> ]

选择一个元素的方式，真的是太多了。对于筛选元素的介绍，本来打算用一篇文章写完，但是由于筛选功能是 jquery 最基础的知识点，所以我还是决定分两篇文章给大家介绍，希望大家可以把这篇文章的内容仔细阅读并吸收。