jQuery

jQuery是目前使用最广泛的javascript函数库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

选择并获取网页元素

使用jQuery的第一步即为找到某个网页元素，通过选择表达式放入构造函数jQuery()，也即我们常看到的$(statement)

选择整个文档对象

$(document)

选择id

$('#id')

选择class

$('div.className')

选择name相关元素

// 选择所有的name属性等于'test'的input元素 
$("input[name='test']") 
// 选择所有的name属性不等于'test'的input元素 
$("input[name!='test']") 
// 选择所有的name属性以'name'开头的input元素 
$("input[name^='name']") 
// 选择所有的name属性以'test'结尾的input元素 
$("input[name$='test']") 
// 选择所有的name属性包含'test'的input元素 
$("input[name*='test']")
// 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以test结尾的元素 
$("input[id][name$='test']") 
// 查找的是name为test的表单。
$(":input[name='test']")

jQuery特有表达式

选择第一个元素

$('div:first')

选择表格的奇数行

$('tr:odd')

选择表单中的input元素

$('#form1 :input')

选择可见的div

$('div:visible')

选择除了前三个之外的所有div

$('div:gt(2)')

选择当前处于动画状态的div元素

$('div:animated')

过滤器缩小选择结果

has()

选择包含p元素的div： $('div').has('p')

not()

选择不包含某class的div：$('div').not('className')

filter

选择特定class div：$('div').filter('className')

first()

选择第一个div： $('div').first()

eq()

选择第五个元素（从0开始）：$('div').eq(4)

DOM tree上的移动方法

next()

选择后一个元素： $('div').next('p');

parent()

选择父元素： $('div').parent();

children

选择子元素： $('div').children();

siblings()

选择同级元素： $('div').siblings();

closest()

选择最近元素： $('div').closest('form');

链式操作

选中网页元素后，通过jQuery进行的每一步操作都会返回一个jQuery对象，因而不同的操作可以连载一起，以链条形式呈现。

例如：$('div').parent().siblings();

end() 退后一步

$('div')
    .parent()
    .children() 
    .end() // 退回到parent()
    .siblings();

创建新元素

新元素直接传入jQuery的构造函数

$('<p class="test">Hello</p>');
$('ul').append('<li>list item</li>');

复制元素

选中元素并使用.clone()

删除元素

删除元素使用.remove()和.detach()。

两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

移动元素

// 在现存元素的外部，从后面插入元素
$('div').insertAfter($('p'));
$('p').after($('div'));
// 在现存元素的外部，从前面插入元素
$('div').insertBefore($('p'));
$('p').before($('div'));
//在现存元素的内部，从后面插入元素
$('div').appendTo($('p'));
$('p').append($('div'))
// 在现存元素的内部，从前面插入元素
$('div').prependTo($('p'));
$('p').prepend($('div'));

第一种方法会返回div，第二种会返回p。

元素的取值与赋值

//取出或设置html内容
.html() 
// 取出或设置text内容
.text() 
// 取出或设置某个属性的值
.attr() 
// 取出或设置某个元素的宽度
.width() 
// 取出或设置某个元素的高度
.height() 
// 取出某个表单元素的值
.val()

e.g.

// 对<h1>赋值Hello
$('h1').html('Hello');

参考资料：

笔记 - jQuery入门