jQuery 知识总结

如何获取元素

jQuery 获取元素就是将一个选择表达式放进构造函数 jQuery()（简写为 $）。

选择表达式有两种类型：

CSS 选择器

$(document) //选择整个文档对象  

$('#tofuId') //选择 ID 为 tofuId 的网页元素  

$('div.tofuClass') // 选择 class 为 tofuClass 的 div 元素  

$('input[name=tofu]') // 选择 name 属性等于 tofu 的 input 元素

jQuery 特有的表达式

$('a:first') //选择网页中第一个 a 元素  

$('tr:odd') //选择表格的奇数行  

$('#tofuForm :input') // 选择表单中的 input 元素 

$('div:visible') //选择可见的 div 元素  

$('div:gt(2)') // 选择所有的 div 元素，除了前三个

$('div:animated') // 选择当前处于动画状态的 div 元素

jQuery 的链式操作是怎样的

链式操作是 jQuery 最重要的设计思想之一，每一步的 jQuery 操作返回的都是一个 jQuery 对象，所以在获取到元素之后可以对它进行一系列操作，并且所有操作可以连在一起。例如，下面的这几个操作：

$('div') // 找到 div 元素

$('div').find('h3') // 选择其中的 h3 元素

$('div').eq(2) // 选择第3个 h3 元素

$('div').html('Hello') // 将它的内容改为 Hello

可以以链条的形式写在一起：

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

jQuery 还提供了.end()方法，可以让结果集后退一步：

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

如何创建元素

把新元素直接传入 jQuery 的构造函数就可以创建新元素：

$('<p>Hello MapoTofu</p>')

$('<li class="new">new list item</li>')

$('ul').append('<li>list item</li>')

如何移动元素

jQuery 提供两种方式操作元素的移动：

获取要移动的元素，移动到另一个目标元素的某个相对位置：

$('div').insertAfter($('p')) // 把 div 元素移动 p 元素后面

$('div').insertBefore($('p')) // 把 div 元素移动 p 元素前面

$('p').appendTo($('div')) // 把 p 元素移动 div 元素内部的末尾

$('p').prependTo($('div')) // 把 p 元素移动 div 元素内部的首位

获取目标元素，将要移动的元素移动到目标元素的某个相对位置：

$('p').after($('div')) // 把 p 元素加到 div 元素前面

$('p').before($('div')) // 把 p 元素加到 div 元素后面

$('div').append($('p')) // 在 div 元素内部的末尾加上 p 元素

$('div').prepend($('p')) // 在 div 元素内部的首位加上 p 元素

如何获取和修改元素的值

jQuery 使用同一个函数来完成取值（getter）和赋值（setter）。

函数的参数将决定是取值还是赋值：

当没有参数时表示取值：$('h1').html()
当有参数时，表示对该元素进行赋值：$('h1').html('Hello MapoTofu')

常见的函数有：

.html() // 取出或设置html内容

.text() // 取出或设置text内容

.attr() // 取出或设置某个属性的值

.width() // 取出或设置某个元素的宽度

.height() // 取出或设置某个元素的高度

.val() // 取出某个表单元素的值