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() // 取出某个表单元素的值