🌞

jQuery 初见

本文是初学 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 元素
updatedupdated2020-01-282020-01-28