Java程序员从笨鸟到菜鸟之（八十七）跟我学jquery（三）jquery动态创建元素和常用函数示例
在上面兩篇博客中列舉了太多的API相信大家看著眼暈.?不過這些基礎還必須要講,?基礎要扎實.其實對于這些列表大家可以跳過,?等以后用到時再回頭看或者查詢官方的API說明.在本博客中就給大家講解一下這些頭暈的API?主要講解動態創建元素操作jQuery包裝集的各個函數
一．動態創建元素
（這塊轉至網絡，具體地址不詳，以前找到的資料））
1.錯誤的編程方法
我們經常使用JavaScript動態的創建元素,?有很多程序員通過直接更改某一個容器的HTML內容.比如:
[html]?view plaincopy print?
上面的示例中我通過修改testDiv的內容,在頁面上動態的添加了一個div元素.?但是請牢記,這是錯誤的做法!
錯誤的原因:
(1)?在頁面加載時改變了頁面的結構.?在IE6中如果網絡變慢或者頁面內容太大就會出現"終止操作"的錯誤.?也就是說"永遠不要在頁面加載時改變頁面的Dom模型".
(2)?使用修改HTML內容添加元素,?不符合Dom標準.?在實際工作中也碰到過使用這種方法修改內容后,?某些瀏覽器中并不能立刻顯示添加的元素,?因為不同瀏覽器的顯示引擎是不同的.?但是如果我們使用Dom的CreateElement創建對象,?在所有的瀏覽器中幾乎都可以.?但是在jQuery中如果傳入的而是一個完整的HTML字符串,?內部也是使用innerHTML.?所以也不是完全否定innerHTML函數的使用.
所以從現在開始請摒棄這種舊知識,?使用下面介紹的正確方法編程.
2.創建新的元素
下面介紹兩種正確的創建元素的方式.
(1)使用HTML?DOM創建元素
什么是?DOM？
通過?JavaScript，您可以重構整個?HTML?文檔。您可以添加、移除、改變或重排頁面上的項目。
要改變頁面的某個東西，JavaScript?就需要對?HTML?文檔中所有元素進行訪問的入口。這個入口，連同對?HTML?元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
在?1998?年，W3C?發布了第一級的?DOM?規范。這個規范允許訪問和操作?HTML?頁面中的每一個單獨的元素。
所有的瀏覽器都執行了這個標準，因此，DOM?的兼容性問題也幾乎難覓蹤影了。
DOM?可被?JavaScript?用來讀取、改變?HTML、XHTML?以及?XML?文檔。
DOM?被分為不同的部分（核心、XML及HTML）和級別（DOM?Level?1/2/3）：
Core?DOM
定義了一套標準的針對任何結構化文檔的對象
XML?DOM
定義了一套標準的針對?XML?文檔的對象
HTML?DOM
定義了一套標準的針對?HTML?文檔的對象。
關于使用HTML?DOM創建元素本文不做詳細介紹,?下面舉一個簡單的例子:
??
[html]?view plaincopy print?
通過使用?document.createElement?方法我們可以創建Dom元素,?然后通過appendChild方法為添加到指定對象上.
(2)?使用jQuery函數創建元素
在jQuery中創建對象更加簡單,?比如創建一個Div元素:
$("<div?style=\"border:solid?1px?#FF0000\">動態創建的div</div>")
我們主要使用jQuery核心類庫中的一個方法:
jQuery(?html,?ownerDocument?)
Returns:?jQuery
根據HTML原始字符串動態創建Dom元素.
其中html參數是一個HTML字符串,?在jQuery1.3.2中對此函數做了改進:
當HTML字符串是沒有屬性的元素是,?內部使用document.createElement創建元素,?比如:
//jQuery內部使用document.createElement創建元素:
$("<div/>").css("border","solid?1px?#FF0000").html("動態創建的div").appendTo(testDiv);
否則使用innerHTML方法創建元素:
//jQuery內部使用innerHTML創建元素:
$("<div?style=\"border:solid?1px?#FF0000\">動態創建的div</div>").appendTo(testDiv);
3.將元素添加到對象上
我們可以使用上面兩種方式創建一個而元素,?但是上面已經提到一定不要在頁面加載時就改變頁面的DOM結構,?比如添加一個元素.?正確的做法是在頁面加載完畢后添加或刪除元素.
傳統上,?使用window.onload完成上述目的:
//DOM加載完畢后添加元素
//傳統方法
window.onload?=?function()?{?testDiv.innerHTML?=?"<div?style=\"border:solid?1px?#FF0000\">動態創建的div</div>";?}
雖然能夠在DOM完整加載后,?在添加新的元素,?但是不幸的是瀏覽器執行window.onload函數不僅僅是在構建完DOM樹之后,?也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.?所以如果某個圖片或者其他資源加載很長時間,?訪問者就會看到一個不完整的頁面,?甚至在圖片加載之前就執行了需要依賴動態添加的元素的腳本而導致腳本錯誤.
解決辦法就是等DOM被解析后,?在圖像和外部資源加載之前執行我們的函數.在jQuery中讓這一實現變得可行:
[javascript]?view plaincopy print?
或者使用簡便語法:
[javascript]?view plaincopy print?
使用$()將我們的函數包裝起來即可.?而且可以在一個頁面綁定多個函數,?如果使用傳統的window.onload則只能調用一個函數.
所以請大家將修改DOM的函數使用此方法調用.?另外還要注意document.createElement和innerHTML的區別.?如果可以請盡量使用document.createElement和$("<div/>")的形式創建對象.
二．Query包裝集的各個函數
1.文檔加載完成執行函數
?$(document).ready(function(){
?alert("開始了");
?});
2.添加/刪除CSS類
?$("#some-id").addClass("NewClassName");
?$("#some-id").removeClass("ClassNameToBeRemoved");
3.選擇符 ：利用了CSS和Xpath（XML?Path?Language）選擇符的能力，以及jQuery獨有的選擇符
?3.1常用的：
?1.根據標簽名：?$('p')?選擇文檔中的所有段落
?2.?根據ID：?$("#some-id")
?3.類：?$('.some-class')
?3.2使用CSS選擇符：
?$("#some-id?>?li")?選擇特定id下的所有子li元素
?$("#some-id?li:not(.horizontal)")?偽類選擇，特定id下所有沒有.horizontal?類的li元素
?3.3使用XPath選擇符：
?屬性選擇：$("a[@title]")?選擇所有帶title屬性的鏈接
?$("div[ol]")?選擇包含一個ol元素的所有div元素
?$('a[@href^="mailto:%22]')?選擇所有帶href屬性[@href]且該屬性值以mailto開頭^="mailto"（^標識字符串開始，$標識字符串結尾，*表示字符串中任意位置）
?$('a[@href$=".pdf"]')?選擇帶有href屬性且該屬性值以.pdf結尾的所有鏈接
?$('a[@href*="mysite.com"]')?選擇mysite.com出現在href任意位置(包含mysite.com)的所有鏈接
?3.4JQuery自定義選擇符（過濾器，從已選擇的結果集中過濾出符合某一條件的所有元素），與CSS的偽類選擇符相似，使用“:”開頭
?1.$('div.horizontal:eq(1)')?選擇帶有類horizontal的div集合中的第2個項
?$('div:nth-child(1)')?選擇作為其父元素第1個子元素的所有div
?2.自定義選擇符:odd和:even選擇奇偶行
?$('tr:odd').addClass('odd');?//過濾選擇結果集中的奇數元素
?$('tr:even').addClass('even');?//過濾選擇結果集中的偶數元素
?3.自定義選擇符:contains()
?$('td:contains("Henry")')?選擇包含Henry字符串的所有表格
?3.5JQuery選擇函數
?1.$('#some-id').parent()?選擇特定元素的父元素
?2.$('#some-id').next()?選擇特定元素最近的下一個同級元素
?3.$('#some-id').siblings()?選擇特定元素的所有同級元素
?4.$('#some-id').find('.some-class')?選擇特定元素下所有包含特定類的元素
?5.$('#some-id').find('td').not(':contains("Henry")')?選擇特定元素下表格內容不包含Henry的所有元素
?5.$('#some-id').find('td').not(':contains("Henry")').end()?.end()表示回到最后一次.find()的元素處
?3.6訪問DOM元素，使用get()方法從選擇后的JQuery對象中獲得，去掉JQuery的包裝
?var?myTag?=?$('#some-id').get(0).tagName;
?var?myTag?=?$('#some-id')[0].tagName;?//與上面的等效
4.事件（都是給某一元素綁定事件）
?4.1綁定事件
?$("#some-id").bind("click",?function(){?})
?$("#some-id").unbind("click",?bindedFunctionName);?//移除已綁定的事件，前提是綁定的函數有名稱（不是匿名函數）
?$("#some-id").click(function(){?})
?4.2復合函數綁定事件
?$("#some-id").toggle(function(){?}?,function(){?});?//交替執行
?$(“#some-id”).toggleClass("hidden");?//?添加/刪除類交替進行
?$("#some-id").hover(function(){?},?function(){?});?//鼠標進入元素時執行第一個函數，離開元素時執行第二個函數
?$("#some-id").one("click",?functionName);?//只需觸發一次，隨后便立即解除綁定
?4.3模仿用戶觸發某一事件
?$("#some-id").trigger("click");?//觸發特定元素的click事件
5.為元素添加效果
?5.1讀取或設置CSS樣式屬性
?$("#some-id").css("property")?//讀取樣式值
?$('#some-id').css('property',?'value')?//設置一個樣式值
?$('#some-id').css({property1:?'value1',?property2:?'value2'})?//設置多個樣式屬性
?5.2改變字體大小
?$(document).ready({
?$('#button-id').click(function(){
?var?currentSize?=?$('#text-id').css('fontSize');?//獲取字體大小，如30px
?var?num?=?parseFloat(currentSize,?10);?//將值轉為浮點數，.parseFloat(?,?)為javascript內置函數，這里是轉為10進制的浮點數
?var?unit?=?currentSize.slice(-2);?//獲取單位名稱，如px，.slice()是javascript內置函數，獲取字符串指從定位置開始的子字符串，-2表示倒數兩個字符
?num?*=?1.5;
?$('text-id').css('fontSize',?num?+?unit);?//設置字體大小樣式
?});
?});
?5.3隱藏和顯示
?$('#some-id').show();?//無效果，會自動記錄原來的display屬性值（如：block,?inline），再回復display值
?$('#some-id').hide();?//無效果，等效于：$('#some-id').css('display',?'none');?隱藏元素，不保留物理位置
?大小、透明度逐漸變化的顯示或隱藏
?$('#some-id').show('slow');?//指定顯示速度，在指定時間內元素的高、寬、不透明度逐漸增加到屬性值，有：slow是0.6秒，normal是0.4秒，fast是0.2秒，或者直接填入毫秒數
?$('#some-id').hide(800);?//與.show()指定速度顯示一樣，指定時間內高、寬、不透明度逐漸減小到0
?淡入淡出
?$('some-id').fadeIn('slow');?//指定時間內不透明度屬性值由0增加到1
?$('some-id').fadeOut('slow');?//指定時間內不透明度值由1減小到0
?5.4構建具有動畫效果的show
?主要調用.animate()方法，其有4個參數：包含樣式屬性及值的映射；可選的速度參數；可選的緩動類型；可選的回調函數；
?1.并發顯示多個效果
?$('#some-id').animate({height:?'show',?width:?'show',?opacity:?'show'},?'slow',?function(){?alert('動畫顯示元素');});
?$('div?.button').animate({left:600,?height:44},?'slow');?//水平位置從0移動到600，高度由0增加到44
?2.排隊顯示多個效果，級聯多個.animate()，一個效果顯示完了再顯示下一個效果
?$('#some-id').animate({left:600},?'slow').animate({height:?44},?'slow');
6。DOM操作
?6.1屬性操作
?$('#some-id').attr('property');?//獲取屬性
?$('#some-id').attr('property','value');?//設置屬性
?$('#some-id').attr({'property1':?'value1',?'property2':?'value2'});?//設置多個屬性
?修改一個段落中所有鏈接，并給每個鏈接附上新的id號
?$('div?p?.content?a').each(function(index){
?$(this).attr({
?'rel':?'external',
?'id':?'link_'?+?index
?});
?});
?//?*********?JQuery的.each()類似一個迭代器，給其傳遞的參數index類似一個計數器?*********
?6.2插入新元素
?1.將元素插入到其他元素前面：.insertBefore()和.before()
?2.將元素插入到其他元素后面：.insertAfter()和after()
?3.將元素插入到其他元素內部或后面（相當于追加一個元素）：appendTo()和append()
?4.將元素插入到其他元素內部或前面（相當于追加一個元素）：prependTo()和prepend()
?6.3包裝元素，將元素包裝到其他元素中?.wrap();
?$('#some-id').wrap('<li></li>');?//?將某一特定元素包裝到li中，即在特定元素外圍添加一個包圍元素
?6.4復制元素?.clone()
?1.$('#some-id').clone().appendTo($('body'));
?2.復制深度，當傳入false參數時，只復制匹配上的元素，其內部的其他元素不復制
?$('#some-id').clone(false)
?注意：.clone()方法不會復制元素中的事件
?6.5移除匹配元素中的元素，類似清空元素
?$('#some-id').empty();
?6.6從DOM中移除匹配的元素及其后代元素
?$('#some-id').remove();
from:?http://blog.csdn.net/csh624366188/article/details/7679187
總結
以上是生活随笔為你收集整理的Java程序员从笨鸟到菜鸟之（八十七）跟我学jquery（三）jquery动态创建元素和常用函数示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java程序员从笨鸟到菜鸟之（八十六）跟
- 下一篇： Java程序员从笨鸟到菜鸟之（八十八）跟