我突然想起了append(),但是我记不太清它是原生JS的还是jQuery封装的,貌似是JS的,咦?那它在jQuery里叫什么来着?哎呀!记不清了!确定append()是JS里的?不是jQuery里的?哎呀!这个问题好low啊,要是被那些大牛知道得笑死我了!赶紧偷偷整理一下!
获取节点内容/修改节点内容
原生JS方法
<div id="test">test</div> <script> alert(document.getElementById("test").innerHTML); document.getElementById("test").innerHTML += "test"; </script>
jQuery方法
text()
<div id="test"><h1>test</h1></div> <script> //返回test alert($("#test").text()); $("#test").text(" new test"); </script>
html()
<div id="test"><h1>test</h1></div> <script> //返回<h1>test</h1> alert($("#test").html()); $("#test").html("<h1>new test</h1>"); </script>
属性操作
原生JS方法
<div id="test" style="100px; height:100px; background:red;"></div> <script> document.getElementById("test").style.background="yellow"; alert(document.getElementById("test").style.background); document.getElementById("test").setAttribute("width","200px"); alert(document.getElementById("test").getAttribute("width")); </script>
注意:在使用setAttribute()后,元素的宽度并未发生改变,究其原因,在debug界面可以看到
<div id="test" style=" 100px; height: 100px; background: yellow;" width="200px"></div>
width被写在style外面,而真正生效的是style里的width
再看CSS管理器里
element.style { width: 100px; height: 100px; background: yellow; }
width仍然没有变化...如果不在行间写style写在<style>标签里呢?仍然没有用!因为setAttribute()并不会对element.style发生作用,而element.style的优先级是最高的。
所以在使用setAttribute()时要谨慎,没事就别瞎用了。
jQuery方法
<div id="testDiv" style="100px; height:100px; background:red;"></div> <a href="www.cnblogs.com" id="testLink">cnblogs</a> <script> alert($("#testDiv").attr("background-color")); alert($("#testLink").attr("href")); $("#testDiv").attr("background-color","yellow"); $("#testLink").attr("href","www.baidu.com"); alert($("#testDiv").attr("background-color")); alert($("#testLink").attr("href")); </script>
你会发现a的href是有用的,div的background-color是undefined,换成width还是undefined。我也不知道为什么,总之谨慎使用吧。
<div id="test" style="100px; height:100px; background:red;"></div> <script> alert($("#test").css("background-color")); $("#test").css({"background-color":"yellow"}); </script>
用css()方法比较稳定,它是CSS类的一个方法,和addClass()/removeClass()/toggleClass()一样。
节点操作
原生JS方法
<div id="testDiv"></div> <script> var testSpan = document.createElement("span"); var testText = document.createTextNode("Test"); testSpan.appendChild(testText); document.getElementById("testDiv").appendChild(testSpan); </script>
重复插入是没用的,九浅一深什么的都是没有用的,你只能换着姿势插
<div id="testDiv"> <p id="testP">Test</p> </div> <script> var testSpan = document.createElement("span"); var testText = document.createTextNode("Test"); testSpan.appendChild(testText); var testDiv = document.getElementById("testDiv"); var testP = document.getElementById("testP"); testDiv.insertBefore(testSpan,testP); </script>
或者替换
<div id="testDiv"> <p id="testP">Test</p> </div> <script> var testSpan = document.createElement("span"); var testText = document.createTextNode("TestReplace"); testSpan.appendChild(testText); var testDiv = document.getElementById("testDiv"); var testP = document.getElementById("testP"); testDiv.replaceChild(testSpan,testP); </script>
或者干脆删掉
<div id="testDiv"> <p id="testP">Test</p> </div> <script> var testDiv = document.getElementById("testDiv"); var testP = document.getElementById("testP"); testDiv.removeChild(testP); </script>
jQuery方法
<div id="testDiv"> <p id="testP">Test Paragraph</p> </div> <script> $("#testDiv").append("Append Test"); $("#testDiv").append("<p>Element Append Test</p>"); $("#testDiv").prepend("<p>Prepend Test</p>"); $("#testP").before("Before Test"); $("#testP").after("after Test"); </script>
用jQuery则要简单很多,不需要创建节点插来插去,只需要干着插,深深猛插。而且姿势也更多,原生JS只能正常插和从前面插,而jQuery不仅能正常插从前面插,还能在最前面插,在最后面插以及从某个部位的后面插,花样繁多,高下立判。
但是jQuery没有replace方法,但是人家提出了empty()清空子元素
<div id="testDiv"> <p id="testP">Test Paragraph</p> </div> <script> $("#testDiv").empty(); </script>
还有remove(),可以自杀
<div id="testDiv"> <p id="testP">Test Paragraph</p> </div> <script> $("#testP").remove(); </script>
换着姿势杀
<div id="testDiv"> <p id="testP">Test Paragraph</p> </div> <script> $("p").remove("#testP"); </script>
比原生JS不知道高到哪里去了
遍历操作
原生JS方法
<script> document.getElementById("test").firstChild; document.getElementById("test").lastChild; document.getElementById("test").parentNode; document.getElementById("test").childNodes[0]; </script>
基本就这样了
jQuery方法
<script> //祖先 //返回向上一级的父元素 $("test").parent(); //返回向上所有的祖先元素直到根节点 $("test").parents(); //返回介于两者之间的所有祖先元素 $("test").parentsUntil(test2); //子孙 $("test").children(); $("test").children("p.testP"); $("test").find("span"); $("test").find("*"); //兄弟 //前后找,过滤找 $("test").siblings(); $("test").siblings("p"); //往后找 $("test").next(); $("test").nextAll(); //往前找 $("test").pre(); $("test").preAll(); //过滤 //找第一个 $("test").first(); //找最后一个 $("test").last(); //按索引找 $("test").eq(0); //按条件找 $("test").filter(".testFilter"); //筛选出来找 $("test").not(".testFilter"); </script>
简直无情,已经把原生JS秒出十条街了。
写在结尾
库再好也只是库,是别人的东西,怎样做出自己的库,做出自己的库的方法才是最重要的。jQuery也只是对原生JS的封装,却能绽放出比原生JS更耀眼的魅力,它的源码才是真正的关键所在。学习思维和方法,永远比学习流于表面的代码重要。这篇笔记仅仅是为了我能够不搞混原生JS和jQuery而记录的,仅此而已。
PS:好吧,原生JS里根本就没有append()方法,我终于搞清楚了。