jQuery 简明教程

181 阅读2分钟

jQuery 如何获取元素

jQuery 的设计思想和主要用法是:选中网页中的某个元素,再对选中元素进行某种操作

选择表达式可以是 CSS选择器

$(document) // 选择整个文档对象
$('#myId') // 选择 ID 为 myId 的网页元素
$('div.myClass') // 选择 class 为 myClass 的 div 元素
$('input[name=first]') // 选择 name 属性等于 first 的 input 元素

也可以是 jQuery 特有的表达式

$('a:first') // 选择网页中第一个 a 元素
$('tr:odd') // 选择表格的奇数行
$('#myForm:input') // 选择表单中的 input 元素
$('div:visible') // 选择可见的 div 元素
$('div:gt(2)') // 选择所有的 div 元素,除了前三个
$('div:animated') // 选择当前处于动画状态的 div 元素

jQuery 的链式操作

jQuery 设计时候,实现了链式操作。
选中网页元素后,可以对其进行一系列操作,并且所有操作以链条形式连在一起。

$('div').find('h3').eq(2).html('Hello')

// 分解开来是下面这样:

$('div') // 找到 div 元素
  .find('h3') // 选择其中的 h3 元素
  .eq(2) // 选择第 3 个 h3 元素
  .html('Hello') // 将它的内容改为 Hello

链式操作原理:每一步的 jQuery 操作,返回的都是一个 jQuery 对象,所以不同操作可以链在一起。

jQuery 还提供了 .end() 方法,使得结果集可以后退一步

$('div')
  .find('h3')
  .eq(2)
  .html('Hello')
  .end() // 退回到选中所有的 h3 元素的那一步
  .eq(0) // 选中第一个 h3 元素
  .html('World') // 将它的内容改为 World

jQuery 如何创建元素

只要把新元素直接传入 jQuery 的构造函数就可以

$('<p>Hello</p>')
$('<li class="new">new list item</li>')
$('ul').append('<li>list item</li>')

jQuery 如何移动元素

一种方法是直接移动元素,另一种方法是移动其他元素,使得目标元素达到我们想要的位置

假设我们选中一个 div 元素,把它移到 p 元素后面

第一种方法 .insertAfter()

$('div').insertAfter($('p'))

第二种方法 .after()

$('p').after($('div'))

不同点是,第一种方法返回 div 元素,第二种方法返回 p 元素

// 在现存元素的外部,从后面插入元素
.insertAfter()
.after()

// 在现存元素的外部,从前面插入元素
.insertBefore()
.before()

// 在现存元素的内部,从后面插入元素
.appendTo()
.append()

// 在现存元素的内部,从前面插入元素
.prependTo()
.prepend()

jQuery 元素的取值赋值

$('h1').html() // html() 没有参数,表示取出 h1 的值
$('h1').html('Hello') // html() 有参数 Hello,表示对 h1 进行赋值

常见的取值和赋值函数:

.html() // 取出或设置 html 内容
.text() // 取出或设置 text 内容
.attr() // 取出或设置某个属性的值
.width() // 取出或设置某个元素的宽度
.height() // 取出或设置某个元素的高度
.val() // 取出某个表单元素的值