本文是初学 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 元素