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 瀑布流布局
posted on 2016-05-07 22:19?山山未遲 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/lifushan/p/5469363.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的20150303+JQuery选择器-02的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Redis开发与运维学习笔记
- 下一篇： 基于分布式光纤传感的高压电力线路异常监测