jQuery 功能简介
jQuery 的基本思想是选取元素再对其操作,操作时特点是可以进行链式操作。
通过设置别名,可以将 jQuery 简写成 $。
获取元素
$(选择器) 用于获取元素
选择器的规则详见 选择器
举例一些常用获取元素的表达式
$('#myId')选择 id 为 myId 的网页元素$('div.myClass')选择 class 为 myClass 的 div 元素$('input[name=first]')选择 name 属性等于 first 的 input 元素$('a: first')选择网页中第一个 a 元素$('tr: odd')选择表格的奇数行-
$('#myForm: input')选择表单中的 input 元素类似的有
$('#myForm: submit'),$('#myForm: text'),$('#myForm: selected'),$('#myForm: password'),$('#myForm: radio').... $('div: visibile')选择可见的 div 元素$('div: gt(2)')选择所有的 div 元素,除了前三个(索引值大于等于2)$('div: animated')选择当前处于动画状态的 div 元素
链式操作
因为每一步的 jQuery 操作都是返回 jQuery 对象,所以可以将不同的操作依次连着写,即链式操作。
如 $('div').find('h3').eq(2).html('Hello'),最终实现的结果是找到div元素中的第三个h3元素,将其内容改成 Hello
jQuery 还提供了 end() 方法,能使获取的元素回退到上一次的结果,如
$('div') // 选择的是 div 元素
.find('h3') // 选择的是 div 元素中的 h3 元素
.eq(2) // 选择的是 div 元素中第三个 h3 元素
.html('Hello')
.end() // 回退到上一次结果,即选择的是 div 元素中的 h3 元素
.eq(0) // 选择的是div 元素中第一个 h3 元素
.html('World')
创建元素
创建元素只要把元素内容传入 jQuery 构造函数即可,如 $('<p>Hello</p>')
移动元素
移动可分为两类,一类是于外部移动后成为对方的兄弟,另一种是于内部移动后成为对方的子女。
执行完移动操作后不改变选中的元素
-
外部移动
-
$('div').insertAfter($('p'))将 div 元素移动到 p 元素后面div 是 p 的弟弟,执行完这次操作后选择的元素是 div
-
$('p').after($('div'))使 p 元素的后面是 div 元素,即将 p 元素移到 div 元素前面div 是 p 的弟弟,执行完这次操作后选择的元素是 p
-
$('div').insertBefore($('p'))将 div 元素移动到 p 元素前面div 是 p 的哥哥,执行完这次操作后选择的元素是 div
-
$('p').before($('div'))使 p 元素的前面是 div 元素,即将 p 元素移到 div 元素后面div 是 p 的哥哥,执行完这次操作后选择的元素是 p
-
-
内部移动
-
$('div').appendTo($('p'))将 div 元素移动到 p 元素最后一个子元素后面div 是 p 的小儿子,执行完这次操作后选择的元素是 div
-
$('p').append($('div'))给 p 元素添加一个尾部子元素 div,即将 div 元素移动到 p 元素最后一个子元素后面div 是 p 的小儿子,执行完这次操作后选择的元素是 p
-
$('div').prependTo($('p'))将 div 元素移动到 p 元素第一个子元素前面div 是 p 的大儿子,执行完这次操作后选择的元素是 div
-
$('p').prepend($('div'))给 p 元素添加一个头部子元素 div,即将 div 元素移动到 p 元素第一个子元素前面div 是 p 的大儿子,执行完这次操作后选择的元素是 p
-
查看或修改元素属性
jQuery 使用同一个函数来实现查看或修改,通过传入参数的不同来决定。
$('h1').html() // html() 没有传入参数,表示查看 h1 的值
$('h1').html('Hello') // html() 有参数,表示修改 h1 的值为 'Hello'
$("em").attr("title"); // attr() 只有参数 attributeName 'title' 表示查看 em 元素 title 标签的值
$("em").attr("title", "World"); // attr() 有参数 attributeName 'title' 及 value 'World' 表示修改 em 元素 title 标签的值为'World'
常见的取值赋值函数有
-
.html()查看或修改 html 内容 -
.text()查看或修改 text 内容 -
.attr()查看或修改某个属性的值 -
.width() / .height()查看或修改某个元素的宽度/高度 -
.val()查看或修改某个表单元素的值
注意如果选中的元素集包括多个元素,那么赋值的时候会对其中所有元素赋值;取值的时候只取其中第一个的值。(.text() 除外,它取出所有元素的 text 内容)