增删改查

获取元素

$('#xxx') //返回值为api对象
$('#xxx').find('.red) //选择器，查找#xxx.red元素
$('#xxx').parent() //父节点
$('#xxx').children() //子节点
$('#xxx').siblings() //兄弟节点
$('#xxx').index() //索引
$('#xxx').prev() //上一节点
$('#xxx').next() //下一节点
$('#xxx').each(fn) //遍历并对每个元素执行fn

创建元素

$('#xxx') //获取#xxx
$('#xxx').append('<div>1</div>") //添加至末端（小儿子）
$('#xxx').append($('<div>1</div>')) //为区别jQuery对象和DOM对象，可在前面加上$符号
$('#xxx').prepend(div或$div) //添加大儿子
$('#xxx').after($div) //添加弟弟
$('#xxx').before($div) //添加哥哥

删除元素

$div.remove() //移除元素
$div.empty() //删除元素的属性

移动元素

$('div1').appendTo('div2') //把div1移动至div2元素内部，插入至最后
$('div1').prependTo('div2') //把div1移动至div2元素内部，插入至最前
$('div1').insertAfter('div2') //把div1移动至div2元素后
$('div1').insertBefore('div2') //把div1移动至div2元素前

$('div2').append('div1') //把div1移动至div2元素内部，插入至最后
$('div2').prepend('div1') //把div1移动至div2元素内部，插入至最前
$('div2').after('div1') //把div1移动至div2元素后
$('div2').before('div1') //把div1移动至div2元素前

由于返回值为api对象，故前四项返回div1元素，后四项返回div2元素

修改元素属性

$div.text() //读写文本内容
$div.html() //读写HTML内容
$div.attr('title',?) //读写属性
$div.css({color.'red'}) //或 $div.style //读写style
$div.addClass('blue') 
$div.removeClass('blue')
$div.hasClass('blue')
$div.on('click',fn)
$div.off('click',fn)

链式操作

调用api的值并返回api。

选中element后可以对它进行一系列操作，所有操作可以连接在一起并以链条的形式写出来：

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

即：

$('div') //找到div元素
 .find('h3') //选择其中的h3元素
 .eq(2) //选择第3个h3元素
 .html('Hello'); //将它的内容改为Hello

设计模式

• jQuery是一种特殊的、不用new的构造函数
• 重载：支持多种参数，如$(selectorOrArrayOrTemplate)
• 用闭包隐藏细节：函数访问外部变量
• getter/seeter：可读也可写，如$div.text()
• 别名：$.fn是$.prototype的别名
• 适配器：针对不同设备（浏览器）使用不同代码

其他

• 默认用$符号代替jQuery：window.$ = window.jQUery
• 使用原型：$.prototype
• $.fn = $.prototype