摘要:本人的兩篇原創文章純干貨一切關于選擇器和純干貨之操作解析,發布不到個月,就被博客園某賬號認領為他的原創,并且他還精心地將慕課網原創文章的版權聲明和文章中關于我的點點滴滴,刪除地干干凈凈,很專業。
本人的兩篇原創文章純干貨!一切關于jquery選擇器和純干貨!jQuery之DOM操作解析,發布不到1個月,就被博客園某賬號 認領 為他的原創,并且他還精心地將慕課網原創文章的版權聲明和文章中關于我的點點滴滴,刪除地干干凈凈,很專業。我不打算貼出他的賬號,只是希望部分程序員能學會尊重他人的版權。
</>復制代碼
版權聲明,文章首發于本人慕課網賬號:人生還有多少個二十年,歡迎轉載,轉載請注明出處
說明:本文涉及的內容多,為保持整體脈絡的清晰,對個別疑難點將另附鏈接,并不定期對文章的錯漏之處進行修正...
一、創建節點
</>復制代碼
eg: //用三種方式創建三個段落(包括標簽節點、屬性節點和文本節點)并添加到文檔中去
$("").attr({title:"p1",id:"p1"}).html("這是第一個段落").appendTo("body");
$("",{title:"p2",id:"p2"}).html("這是第二個段落").appendTo("body");
$("這是第三個段落
").appendTo("body");
二、查找節點
</>復制代碼
eg: //采用上面已經創建的節點,下面進行查找標簽節點、屬性節點和文本節點的操作
var p1 = $("p:first");//獲取第一個段落節點
console.log(p1);//打印標簽節點 result: Object[p#p1]
console.log(p1.attr("title"));//打印屬性節點 result: p1
console.log(p1.text());//打印文本節點 result: 這是第一個段落
三、插入節點
</>復制代碼
1. $(target).append(content)/$(content).appendTo(target) - 在被選元素的內部的結尾插入內容
$(target).prepend(content)/$(content).prependTo(target) - 在被選元素的內部的開頭插入內容
$(target).after(content)/$(content).insertAfter(target) - 在被選元的素外部之后插入內容
$(target).before(content)/$(content).insertBefore(target) - 在被選元素的外部之前插入內容
詳情請看:《一眼看破插入節點的8個方法》 http://www.imooc.com/article/12047
四、替換節點
</>復制代碼
1.$(target).replaceWith(content)/$(content).replaceAll(target)-將目標元素替換為內容
eg:
$("- html
- css
").appendTo("body");
console.log($("ul").html()); //result:
html
css
$("
html5
").replaceAll($("ul li:eq(0)"));- console.log($("ul").html()); //result:
- html5
- css
- $("ul li:eq(1)").replaceWith("
- css3
");- console.log($("ul").html()); //result:
- html5
- css3
- 2.如果替換之前,已經為元素綁定事件,替換后原先綁定的事件將會與被替換的元素一起消失,需要在新元素上重新綁定事件
五、復制節點
</>復制代碼
eg: $(this).clone(); //僅復制節點,不復制元素所綁定的事件
$(this).clone(true); //既復制節點,也復制元素所綁定的事件
如果不理解上面的兩句話,自己打一下下面的具體代碼,運行一次,應該就能明白了:
1)html代碼:
2)引入jQuery庫(根據自己的情況自行引入)
3)script代碼:
$(function(){
$("input:eq(0)").click(function(){
$(this).clone().appendTo("body");
});
$("input:eq(1)").click(function(){
$(this).clone(true).appendTo("body");
});
});
六、刪除節點
</>復制代碼
$(element).remove()返回值是一個指向刪除的節點的引用,因此可以在以后再使用這些元素,但是它綁定的事件、附加的數據無法再次使用了
$(element).detach()使用之后,重新追加該元素,所有綁定的事件、附加的數據都能夠使用
$(element).empty()嚴格來說并不是刪除節點,而是清空節點,它能清空元素中的所有后代節點
eg://下面兩個例子意在解釋empty()
1)$("人生有多少個二十年
").appendTo("body");
console.log($("div").html()); //result: 人生有多少個二十年
$("p").empty();
console.log($("div").html()); //result:
2)$(element).empty()類比:
你可以把element看做電腦的回收站,把$(element).empty()看做是清空回收站的操作,把包含在element中的標簽節點看做回收站中的文件夾,把包含在element中的文本節點看做是回收站中的文件,而清空回收站就是把回收站里的所有文件夾和文件都徹底刪除,并且回收站自身并不會被刪除,這就類似于清空節點,該操作把某節點里的所有后代標簽節點包括文本節點都徹底刪除,但該節點本身沒有被刪除。
七、包裹節點
</>復制代碼
wrap()將所有匹配的元素進行多帶帶的包裹,在原來的元素的外部實施包裹
wrapAll()將匹配的元素集合當做一個整體來包裹,在元素的外部實施包裹
wrapInner()經所有匹配的元素進行多帶帶的包裹,在原來的元素額內部實施包裹
詳情請看:《一眼看破包裹節點的方法》 http://www.imooc.com/article/12193
八、遍歷節點
</>復制代碼
1.往上遍歷
1)parent() 方法返回被選元素的直接祖先元素,即父元素。
2)parents() 方法返回被選元素的所有祖先元素,它一路向上直到文檔的根元素 ()
3)parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。
4)closest()方法從元素本身開始,逐級向上級元素匹配,并返回最先匹配的祖先元素。
2.往下遍歷
1)children() 方法返回被選元素的所有直接后代元素,即子元素。(跟parent()方向恰好相反,一個是往上找,一個是往下查)
2)find() 方法返回被選元素的后代元素,一路向下直到最后一個后代。(跟parents()方向恰好相反)
3.同級遍歷
1)siblings() 方法返回被選元素的所有同輩元素。
2)next() 方法返回被選元素的下一個同輩元素。
nextAll() 方法返回被選元素的后面所有的同輩元素。
nextUntil() 方法返回介于兩個給定參數之間的所有的同輩元素。
3)prev(), prevAll() 以及 prevUntil() 方法的跟上面三個方法的原理是一樣的(都是找同輩元素),但是方向恰好相反(next()/ nextAll()/nextUntil() 是往后找,而prev()/ prevAll() / prevUntil() 則是往前找)。
4.過濾(相當于基本過濾選擇器)
1)first() 方法返回被選元素的首個元素。
last() 方法返回被選元素的最后一個元素。
eq() 方法返回被選元素中帶有指定索引號的元素。
2)filter() 方法允許規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。
3)not() 方法返回不匹配標準的所有元素。(not() 方法與 filter() 相反。)
attentions:
1)此小節內容較多,容易混淆,可以結合我寫過的另一篇文章來輔助理解:
《純干貨!一切關于jquery選擇器 》 http://www.imooc.com/article/11319
九、cssDOM
</>復制代碼
1).在css()方法中,如果屬性中帶有“-”符號,例如font-size和background-color屬性,如果在設置這些屬性的值的時候不帶引號,那么就要用駝峰命名法,例如:
$("p").css({ fontSize:"30px",backgroundColor:"#888888"});
如果帶上了引號,既可以寫成"font-size",也可以寫成“fontSize"。
總之,帶上引號是一個好習慣。
2).獲取高度值用css()和height()的差別:
css()方法獲取的高度值與樣式的設置有關,可能得到"auto",也可能得到“10px”之類的字符串;而height()方法獲取的高度值則是元素在頁面中的實際高度,與樣式的設置無關,并且不帶單位
3).css ()與addClass()設置樣式的區別
1)可維護性:addClass()優于css()
2)靈活性:css()優于addClass()
3)樣式值:css()可以獲取到指定的樣式值,而addClass()無法獲取指定的屬性的值。
4)樣式優先級:css()的樣式優先級高于addClass()。(理由:addClass()方法是通過增加class名的方式,那么這個樣式是在外部文件或者內部樣式中先定義好的,等到需要的時候附加到元素上;css()處理的是內聯樣式,直接通過元素的style屬性附加到元素上)
總結:兩個方法各有利弊,一般是靜態的結果,都確定了布局的規則,可以用addClass的方法,增加統一的類規則;如果是動態的HTML結構,在不確定規則,或者經常變化的情況下,一般多考慮css()方式。
4).總結樣式操作:
js中:
1)通過類名: element.className = theClassName或者element.setAttribute("class",theClassName)
eg: document.getElementById("p1").className = "active";
或document.getElementById("p1").setAttribute("class","active");
2)通過element.style
eg: document.getElementById("p1").style.color="blue";
jquery中:
1)通過類名: $(element).addClass(theClassName)或者$(element).attr("class",theClassName)
eg: $("p1").addClass("active");
或$("p1").attr("class","active");
2)通過css()
eg: $("p1").css("color","blue");
十、jQuery-尺寸
</>復制代碼
1. width()/height() 方法設置或返回元素的寬度/高度(不包括內邊距、邊框或外邊距)。
innerWidth()/innerHeight() 方法返回元素的寬度/高度(包括內邊距)。
outerWidth()/outerHeight() 方法返回元素的寬度/高度(包括內邊距和邊框)。
outerWidth(true)/outerHeight(true) 方法返回元素的寬度/高度(包括內邊距、邊框和外邊距)。
attentions:
1)根據盒子模型,可知:
width()/height()獲得的是盒子模型最內層(content)的寬、高
innerWidth()/innerHeight()獲取的是盒子模型內兩層(content、padding)的寬、高
outerWidth()/outerHeight()獲取的是盒子模型內三層的(content、padding、border)寬、高
outerWidth(true)/outerHeight(true)獲取的是盒子模型的整個盒子(content、padding、border、margin)的寬、高
盒子模型圖:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/86508.html
摘要:本人的兩篇原創文章純干貨一切關于選擇器和純干貨之操作解析,發布不到個月,就被博客園某賬號認領為他的原創,并且他還精心地將慕課網原創文章的版權聲明和文章中關于我的點點滴滴,刪除地干干凈凈,很專業。 本人的兩篇原創文章純干貨!一切關于jquery選擇器和純干貨!jQuery之DOM操作解析,發布不到1個月,就被博客園某賬號 認領 為他的原創,并且他還精心地將慕課網原創文章的版權聲明和文...
摘要:在匹配元素集合中的每個元素后面插入參數所指定的內容,作為其兄弟節點。當需要移走一個元素,不久又將該元素插入時,這種方法很有用。實例從中移除集合中匹配元素的所有子節點。 JQuery干貨篇之插入元素 本次使用的html,css還是我上一篇的源代碼,詳情請看上一篇文章 分類 插入子元素:append,prepend ,appendTo,prependTo 封裝包裹元素:wrap,wrap...
摘要:在匹配元素集合中的每個元素后面插入參數所指定的內容,作為其兄弟節點。當需要移走一個元素,不久又將該元素插入時,這種方法很有用。實例從中移除集合中匹配元素的所有子節點。 JQuery干貨篇之插入元素 本次使用的html,css還是我上一篇的源代碼,詳情請看上一篇文章 分類 插入子元素:append,prepend ,appendTo,prependTo 封裝包裹元素:wrap,wrap...
摘要:圖對可復用代碼挑戰最大的五項問題五大開發問題如下。瀏覽器的缺陷修復。瀏覽器缺失的功能。復雜的地方是,當前瀏覽器會在未來的瀏覽器版本中被修復。假設瀏覽器引起常見的網站問題為解決瀏覽器使用特殊技巧,將來瀏覽器發布新版本修復了,就會出現問題。 任意一段重要的代碼都需要關注無數的開發問題。但是,其中對可復用JavaScript代碼挑戰最大的五項問題如圖14.2所示。 showImg(https...
閱讀 1356·2023-04-26 00:35
閱讀 2728·2023-04-25 18:32
閱讀 3379·2021-11-24 11:14
閱讀 782·2021-11-22 15:24
閱讀 1432·2021-11-18 10:07
閱讀 6561·2021-09-22 10:57
閱讀 2787·2021-09-07 09:58
閱讀 3575·2019-08-30 15:54