一、jQuery 如何获取元素
jQuery的基本设计思想，是“先获取某个网页的元素，然后对其进行某种操作”。
使用jQuery获取元素，一般是将选择器放进构造函数jQuery()（简写成$()），即jQuery(选择器)获取对应的元素。
如常见的一些选择器
$(document) // 选择整个文档对象
$('#myID').find('.red') // 选择所有ID为myID里的.red网页元素
$.('div').('.myClass') // 选择所有的class值为myClass的div元素
$('.red').each(fn) // 遍历所有.red元素并对每个元素执行函数fn
二、jQuery 如何创建元素
jQuery创建新元素，只要把新元素直接传入jQuery()即可：
$('<p>Hello</p>')
$('<div class="new1">new1 div</div>')
$('ul').append('<li>list item</li>')
三、jQuery 如何移动元素
它提供了两组方法移动元素。一组是直接移动参考元素，另一组是移动其他元素，使得参考元素达到期望的位置。
假设我们获取了一个div元素，需要把它移动到p元素后面。
$('div').insertAfter($('p')) // 把div元素移动到p元素后面
$('p').after($('div')) // // 把p元素移动到div元素前面
两种方法看似效果相同，但实际上他们有个重大差别。即返回的元素不一样。第一种方法返回div元素，第二种返回p元素。需要根据需求去选择使用哪一种方法。
和上述两组一对的移动方法相同的，还有其他四对移动方法：
.inserAfter()和.after() // 在参考元素的外部，从后面插入元素
.inserBefore()和.before() // 在参考元素的外部，从前面插入元素
.appendTo()和.append() // 在参考元素的内部，从后面插入元素
.prependTo()和.prepend() // 在参考元素的内部，从前面插入元素
四、jQuery 如何修改元素
1、最常见的修改网页元素需求是，对它们取值和赋值。jQuery的设计模式就是使用同一个函数，来完成取值(getter)和赋值(setter)。到底是取值还是赋值，由参数决定
$('h1').html() // html()没有参数，表示获取h1的值
$('h1').html('Hello') // html()有参数Hello，表示对h1进行赋值
常见的取值和赋值函数：
.html() // 获取或设置html内容
.text() // 获取或设置text内容
.attr() // 获取或设置某个属性的值
.width() // 获取或设置某个元素的宽度
2、还有几个重要的修改元素的方法。(复制，删除和清空)
.clone() // 复制元素
.remove() // 删除元素。此法不保留被删除元素
.detach() // 删除元素。此法保留被删除元素，可重新插入文档使用
.empty() // 清空元素内容。但不删除该元素
五、jQuery 的链式操作
即在最终获取元素以后，可以对他进行一系列操作，并且所有的操作可以连接在一起，以链条的形式写出来。比如：
$('div').find('.red').eq(0).html('Hello')
可拆分写成这样：
$('div') // 获取所有div元素
.find('.red') // 找到class值为red的div元素
.eq(0) // 获取第一个class值为red的div元素
.html('Hello') // 将它的内容改为Hello
它的原理在于每一步jQuery函数操作，返回的都是一个可操作的jQuery对象（简称为Api），所以不同的操作可以连在一起。
另外，jQuery还提供了.end()方法，可以使结果集后退一步
$('div')
.find('.red')
.eq(0)
.html('Hello')
.end() // 退回到获取所有class值为red的div元素那一步
.eq(1) // 选中上步获取的div元素中的第二个
.html('World') // 将它的内容改为World
参考资料
阮一峰 《jQuery设计思想》
©转载声明
