jQuery 基本用法

获取元素

$(document)  // 获取整个文档
$('#id') // 获取对应 id 的元素
$('.class')  // 获取对应 class 的元素
$('div')  // 获取对应标签的元素

链式操作

链式操作就是选中网页元素后,对它进行一系列的操作,并且所有操作可以连接在一起,以链条的形式写出来,如

$('#app').find('div').eq(1).html('hello jQuery')

分解出来是这样的

$('#app')      // 获取 id 为 app 的元素
  .find('div')  // 找到其中的 div 元素
  .eq(1)        // 找到第 2 个 div 元素
  .html('hello jQuery')    // 将它的内容改为 hello jQuery

创建元素

$(`<p>hello</p>`)  // 这里的元素在 JS 线程中
$('#app').append('<p>hello</p>')  // 创建 1 个 元素,将这个元素添加到 #app 对应元素的子元素中

移动元素

移动元素的方法有两种,一种是移动到一个元素的前面,另一种是移动到一个元素的后面。

$('.header').after('.main')  // 移动到一个元素的前面
$('.header').insertAfter('.main')  // 移动到一个元素的后面

修改元素属性

.attr( attributeName, value)  // 传入两个参数
$('.header').attr('class', 'footer') 
.attr( attributes )  // 传入一个对象
$('.header').attr( {'class' : 'footer'} )  

资料来源:阮一峰的《jQuery设计思想》, jQuery 中文文档