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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。