获取元素

直接获取

css选择器

$( [css选择器]: string )

例子

<div class="father">father
 <p>child</p>
</div>

$('.parent p') // 选中p标签

原生dom元素

$( [element节点]: Element )

例子

const demo = document.getElementById('demo')
$(demo) // 选中id为demo的标签

null / undefined

$(null)
$(undefined)

函数

$( funciton )

• 会变为立即执行函数

例子

$(function () {
	console.log('hello world')
})
// hello world

筛选

:first

• 一组元素里的第一个

例子

<div>1</div>
<div>2</div>

$('div:first') // 选中 <div>1</div>

eq()

• 一组元素里的第n个，从0开始

例子

<div>1</div>
<div>2</div>

$('div:eq(1)') // 选中 <div>2</div>

或

$('div').eq(1) // 选中 <div>2</div>

slice(a, b)

• 选中 [a, b) 中的所有节点

例子

<div>1</div>
<div>2</div>
<div>3</div>

$('div').slice(0, 2) // 选中 [ <div>1</div>, <div>2</div> ]

:odd / ：even

• :odd —— 选中一组元素中下标为奇数的，元素下标从0开始
• :even —— 选中一组元素中下标为偶数的，元素下标从0开始

例子

<div>1</div>
<div>2</div>

1. :odd

$('div:odd') //  选中 <div>2</div>

2. :even

$('div:even') //  选中 <div>1</div>

filter()

• 筛选符合条件的

例子

<div>1</div>
<div class="demo">2</div>

1. 普通筛选

$('div').filter('.demo') //  选中 <div class="demo">2</div>

2. 函数筛选
   • 与数组函数filter差不多，但参数 index 和 item 位置相反

$('div').filter((index, item) => item.className ===  'demo')

not()

• 筛选不符合条件的，与 filter() 相反

例子

<div>1</div>
<div class="demo">2</div>

1. 普通筛选

$('div').not('.demo') //  选中 [ <div>1</div> ]

2. 函数筛选

$('div').not((index, item) => item.className ===  'demo') // 选中除第2个div外的div

has()

• 选取所有包含一个或多个元素在其内的元素

例子

<div>1</div>
<div>
 2
	<div class="demo">3</div>
</div>

$('div').has('.demo') // 选中 text 为 2、3 的两个div
// text 为 2 的 div 包含 .demo 的子元素
// text 为 3 的 div 有 .demo

find()

• 选中后代中所有满足条件的元素

例子

<div>
	1
 <div class="demo">2</div>
</div>

$('div').find('.demo') // 选中 <div class="demo">2</div>

prev()

• 选中兄弟节点中的前一个

例子

<div>1</div>
<div>2</div>

$('div:eq(1)').prev() // 选中 <div>1</div>

next()

• 选中兄弟节点中的后一个

例子

<div>1</div>
<div>2</div>

$('div:eq(0)').next() // 选中 <div>2</div>

prevAll()

• 选中其前面的所有兄弟节点

例子

<div>1</div>
<div>2</div>

$('div:eq(1)').prevAll() // 选中 [ <div>1</div> ]

nextAll()

• 选中其后面的所有兄弟节点

例子

<div>1</div>
<div>2</div>

$('div:eq(0)').prevAll() // 选中 [ <div>2</div> ]

slblings()

• 选中除其外所有的兄弟节点

例子

<div>1</div>
<div>2</div>
<div>3</div>

$('div:eq(1)').slblings() // 选中 [ <div>1</div>, <div>3</div> ]

parent()

• 选中其直接父元素

例子

<div>
	<p></p>
</div>

$('p').parent() // 选中 <div></div>

offsetParent()

• 选中其定位的父元素

例子

<div style="position: relative">
	<p style="position: absolute"></p>
</div>

$('p').offsetParent() // 选中 <div style="position: relative"></div>

parents()

• 选中其满足筛选条件的所有父元素

例子

<div id="1">
 <div id="2">
     <p></p>
 </div>
</div>

1. 不传参，则选中所有父元素

$('p').parents() // [ div#2, div#1, body, html ]

2. 传参，则选中全部指定的父元素

$('p').parents('div') // [ div#2, div#1 ]

closest()

• 从自身开始查找，选中最近的满足筛选条件的dom

例子

<div>
 <p></p>
</div>

$('p').closest('p') // 选中 <p></p>
$('p').closest('div') // 选中 <div></div>