jQuery 核心用法总结

116 阅读2分钟

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 内容)