一、為什么要寫這篇文章
說到為什么要寫這篇文章主要有以下的兩個原因
1、由於公司比較忙，所以最近沒有怎么寫博客分享自己的學習成果了，這個對於一個喜歡寫博客的人來說會感到非常的不適應，因為習慣了寫博客的習慣，沒有寫博客好像思想上同技術上都沒有進步一樣，這個對於一個程序員來說是非常的不好的，所以就在自己百忙中抽出一點時間來寫一些博客、梳理一下最近工作上面的一些知識點和問題的解決思路
2、最近對於前端該學習哪些內容有點迷茫，而且身體上是真心的累了，所以博客也就沒有像以前一樣的更新頻率
3、博主本人很堅信寫博客是一個很好的習慣，能夠觸進自己的學習進步，提高自己的技能
二、jquery上面的常見問題解決
1、比較jquery中的html()、text()和append()
首相我們先比較一下html()和text()方法，這兩個方法有點類似但是有點不同，假設我們有一個列表如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筆記測試</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> </html>
如果我們在html()和text()方法中同時對都將id="one"的節點中的內容設置為this is one那么我們來看一下怎樣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筆記測試</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script> window.onload=function(){ //$("#one").html("this is one"); $("#one").text("this is one"); } </script> </html>
經過測試兩段代碼的運行結果是一樣一樣的，那么這兩個的區別究竟在哪里呢？如果當我們要把id="one"的節點設置為this is one並且將字體加粗那么結果這兩個的區別就顯而易見了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筆記測試</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script> window.onload=function(){ //html()實現 $("#one").html("<b>this is one</b>"); //text()實現 $("#one").text("this is one"); $("#one").css("font-weight","bold"); } </script> </html>
這里不用說明已經很清楚了吧，html()這個會把括號內的內容轉換成為html代碼的信息添加在指定的地方上，而text()則會把括號內的內容轉換成為字符串的形式。
接下來我們來說一下append方法
append方法顧名思義就是添加到后面的意思
如果還是上面的添加，我們向append中傳入this is one看看會是怎么樣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筆記測試</title> </head> <body> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </body> <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script> window.onload=function(){ //append方法 $("#one").append("this is one"); } </script> </html>
節點1返回的結果是：1this is one，這個說明了append這個標簽是會在原來的基礎上添加內容的，然而html()和text()是會將指定位置上面的內容替換掉
2、比較jquery中的attr()、prop()
不知道大家有沒有遇見過使用attr()這個屬性出現了一些莫名其妙的狀況，例如：
$("#test").click(function(){
$(this).attr("checked");
});
點擊id為test的checkbox，然后這個時候將checkbox設置為勾選，但是這樣寫有時候出現無法生效，這個時候你可以嘗試着使用prop()
當時什么時候使用attr什么時候使用prop，這個其實在官方文檔中是這樣寫的
具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
所以我們應該有寫成
$("#test").click(function(){
$(this).prop("checked");
});
3、jquery的last和last-child
last()返回的是匹配的最后一個集合中的最后一個元素
$("ul li").last()
last-child返回的是每個匹配集合中的最后要給元素，換句話說也就是返回一個集合
$("ul li:last-child")
三、總結
上面的知識點是我在這個月的開發工作中遇見的一些自己不是很清楚的知識點，在這里就和大家分享一下，不喜勿噴