20150303+JQuery选择器-02

三、文档处理

插入 删除 复制 替换 包裹 查找

1、插入操作——内部插入

jQuery <div> jQuery hello jQuery</div> l append(content) ：将content内容插入到元素的尾部 l appendTo(content) ：将匹配到的元素插入到content元素尾部 l prepend(content) ：将content内容插入到元素的头部 l prependTo(content) ：将匹配到内容插入到content元素的头部 demo07_nc.html

2、插入操作——外部插入

Linux <div> hello </div> Linux l after(content) ：在元素的尾部插入content内容 l before(content) ：在元素的头部插入content内容 l insertAfter(content) ：将匹配到的内容插入到content元素的尾部 l insertBefore(content) ：将匹配到的内容插入到content元素的头部 demo08_wc.html

3、删除操作

<div>content</div> l empty() ：清空元素内容（但不清楚元素本身） l remove() ：清空整个元素（包括元素及内容） demo09_del.html

4、复制（克隆）操作

l clone() ：克隆元素（但不包含事件） l clone(true) ：克隆元素（包含元素本身绑定的事件） demo10_clone.html

案例05：实时购物车 anli05.html

运行效果：

5、替换操作

html()：实现对元素的内容替换 replaceWith() ：实现对元素本身进行替换 demo11_replace.html

还可以采用以下方式进行元素替换：

在jQuery我们采用采用$来标识变量为jQuery对象，如$li

6、包裹操作

<strong><span>文本信息</span></strong> l wrap() ：对每个元素进行包裹 l wrapAll() ：对整个匹配元素进行统一包裹操作 l wrapInner() ：对元素的内容进行包裹 demo12_wrap.html

7、查找操作

l eq(index) ：通过元素的索引匹配元素，默认索引从0开始 l filter(expr) ：通过class进行元素过滤匹配元素 l not(expr) ：匹配不是指定选择器元素 l children([expr]) ：匹配所有子元素，里面可以加标识(子元素) l find(expr) ：通过后代选择器查找元素(后代元素) l next([expr]) ：查找下一个元素（相邻的） l prev([expr]) ：查找上一个元素（相邻的） l parent([expr]) ：查找当前元素的父元素 demo13_find.html

综合案例：表格编辑器

anli07.html

运行效果：

四、jQuery插件扩展

在jQuery中，有些情况下，常用的方法或功能在jQuery中并没有进行封装，我们可以采用jQuery提供的接口实现对jQuery的扩展操作。 基本语法： jQuery.fn.extend(object) ： 参数说明： 要求参数是一个json对象 名/值对 要扩展的函数名称：函数的处理程序 语法： jQuery.fn.extend({ fn1:function(){}, fn2:function(){}, ...... }); 由于jquery.js框架文件中存在以下代码

我们还可以使用如下方式进行扩展： $.fn.extend({ fn1:function(){}, fn2:function(){}, ...... }); demo14_extend.html

案例7：全选、全不选、反选功能实现 插件实现：

绑定过程

html代码：

运行效果：

五、瀑布流布局（百度图片、花瓣网）

Wookmark.js 瀑布流布局