本文是初学 jQuery API 的一些记录。
本文参考了 阮一峰的博客 、jQuery中文文档 及互联网上的公开内容
获取元素
通过使用执行 jQuery()
函数,我们可以得到一个 jQuery 对象,这个对象可以对选定的元素集合进行操作。jQuery()
也可以写作 $()
。
他接受以下几种常用的参数(但不限于此):
- CSS 选择器(selector),比如
$('#myId')
$('input[name=first]')
等。 - DOM 元素(组)(element / elementArray)
- jQuery 对象
- HTML 字符串,比如
<div></div>
。jQuery 会根据它创建一个新的 DOM 元素,然后再创建一个 jQuery 对象。我们可以用一些方法使得他展现在页面上,具体例子比如:$( "<p id='test'>My <em>new</em> text</p>" ).appendTo( "body" )
我们可以通过对结果进行进一步操作,来缩小范围
$('div').find('p')
,选择div
中的p
元素$('div').next('p')
,选择div
后面紧邻的p
元素$('div').prev('p')
,选择div
前面紧邻的p
元素$('div').parent()
, 选择div
的父元素$('div').children()
,选择div
的所有子元素$('div').siblings()
,选择div
的兄弟元素
等等。
链式操作
由于在 jQuery 中,每一个操作(方法)都将会返回一个 jQuery 对象,因此我们可以把下一个操作紧接着写在后面,具体表现为:
$('div').find('p').remove()
当我们使用 .find()
方法后,操作的元素就不再是 div
,而是 div p
,比如上面操作表示 div p
将被移除。此时若我们想返回上一层操作,只需要使用 end()
方法。
$('div').find('p').end()
DOM 操作
常用的 DOM 操作有这些:
addClass()
:为选定的元素添加 class 名after()
:在选定的元素同级的后面增加新元素before()
:在选定的元素同级的前面增加新元素append()
:在选定元素内部的末尾添加新元素appendTo()
:将选定元素插入到某个元素内部的末尾(也就是成为其子元素)attr()
:获取选定的第一个元素的属性值clone()
:创建一个深拷贝副本css()
:获取选定的第一个元素的某个 CSS 属性值;或者为每一个选定的元素添加一个 CSS 属性empty()
:从 DOM 中移除选定元素的所有子节点html()
:获取选定的第一个元素的 HTML 内容;或者为每一个选定的元素添加 HTML 内容remove()
:删除匹配元素,同时删除事件wrap()
:为每一个选定元素的外层包上一个 HTML 元素wrapAll()
:在所有选定元素的外层包上一层 HTML 元素