jQuery 的基本用法,简单来说就是“选择某个元素,然后对其进行操作”。
一、选择元素
使用 jQuery 的第一步,就是用构造函数 jQuery()
(简写为$),选中特定的元素。
jQuery 接受多种形式的参数,可以是 CSS 选择器,也可以是 jQuery 特有的表达式:
//CSS 选择器
$(document) //选择整个文档对象
$('#xxx') //选择 id 为 xxx 的网页元素
$('div.xxx') //选择 class 为 xxx 的 div 元素
//jQuery 特有的表达式
$('a:first') //选择网页中第一个 a 元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') //选择表单中的 input 元素
$('div:visible') //选择可见的 div 元素
$('div:gt(1)') //选择所有的 div 元素,除了前两个
$('div:animated') //选择当前处于动画状态的 div 元素
jQuery 还提供了许多强大的过滤器,可以对结果集进行筛选,缩小选择结果。
$('div').has('p') //选择包含 p 元素的 div 元素
$('div').not('.myclass') //选择 class 不等于 myclass 的 div 元素
$('div').filter('.myclass') //选择 class 等于 myclass 的 div 元素
$('div').first() //选择第1个 div 元素
$('div').eq(5) //选择第6个 div 元素
二、链式操作
jQuery 在选择一个元素之后,并不会返回该元素,而是返回一个对象,这个对象包含了操作该元素的方法,并且多数方法仍会返回一个 jQuery 实例对象。这就表示,在最终选中某个元素之后,就可以对它进行一系列的操作,并且这些操作可以连在一起,以链条的形式写出来,如:
$('div').find('h3').eq(2).addClass('red').end();
分解开,就是下面这样:
$('div') //找到 div 元素
.find('h3') //选择其中所有的 h3 元素
.eq(2) //选中第三个 h3 元素
.addClass('red') //给 class 上加个 red
.end(); //回到选中所有的 h3 元素
三、创建元素
创建元素的方法很简单,只要把新元素传进 jQuery 的构造函数就可以了:
$('<p>Hello World</p>')
$('<div class="hello">你好</div>')
四、移动元素
jQuery 提供了两种方法来移动元素的位置。一种是直接移动元素,另一种方法是移动其他元素。
比如,把一个 div 元素移动到 p 元素的后面:
$('div').insertAfter($('p')); //把 div 元素插入到 p 元素的后面
$('p').after($('div')); //把 p 元素加到 div 元素的前面
两种方法的效果是相同的。区别是返回的对象不同,前者返回 div 元素的 jQuery 对象;后者返回 p 元素的 jQuery 对象。
类似的方法有四对:
.insertAfter()和.after() //插入到...后面和在后面插入...
.insertBefore()和.before() //插入到...前面和在前面插入...
.appendTo()和.append() //插入到...中和在自己内部插入...(从最后一个元素后插入)
.prependTo()和.prepend() //插入到...中和在自己内部插入...(从第一个元素前插入)
五、取值和赋值
jQuery 支持用同一函数对元素进行取值和赋值操作。到底是取值还是赋值,由传入的参数决定,不传就是取值,传参就是赋值。
常用的取值和赋值方法有:
.html() //取出或设置html内容
.text() //取出或设置文本内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出某个表单元素的值
若选中的结果有多个元素,赋值时会对所有元素进行赋值;取值时只取第一个元素的值(.text()除外,它取出元素中所有的 text 内容)