js与jquery增删改查对比

最新推荐文章于 2022-11-04 10:29:29 发布

倪舒扬

最新推荐文章于 2022-11-04 10:29:29 发布

阅读量446

点赞数

本文链接：https://blog.csdn.net/u010403387/article/details/43531463

版权

左为jquery，右为js

增在后面

append()=>parentNode.appendChild(childNode)/createTextNode(nodeValue)/createElement(tagName)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
for(i=0;i<document.getElementsByTagName("p").length;i++){
var nt=document.createTextNode("Appended text.");
var el=document.createElement('b');
el.appendChild(nt);
$("p")[i].appendChild(el);
}

});
$("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
增在前面
before()/after()=>parentNode.insertBefore(addNode,whereNode)
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var nt=document.createTextNode("before");
var el=document.createElement("b");
el.appendChild(nt);
    $("img")[0].parentNode.insertBefore(el,$("img")[0]);
});
$("#btn2").click(function(){
    var nt=document.createTextNode("after");
var el=document.createElement("i");
el.appendChild(nt);
var after=document.getElementsByTagName("br")[0];
    $("img")[0].parentNode.insertBefore(el,after);
});
});
</script>
</head>
<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
css()=>style.backgroundColor
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
for(i=0;i<document.getElementsByTagName("p").length;i++){
    $("p")[i].style.backgroundColor="red";
}
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

改与查（值、属性、内容）
text()/val()/html()/attr()=>nodeText/innerHTML/value/getAttribute(name)/setAttribute(name,value)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ans")[0].innerHTML="Text: " + $("#test2")[0].childNodes[0].nodeValue+ $("#test2")[0].childNodes[1].childNodes[0].nodeValue+ $("#test2")[0].childNodes[2].nodeValue;
});
$("#btn2").click(function(){
$("#ans")[0].innerHTML=("HTML: " + $("#test2")[0].innerHTML);
});
$("#btn3").click(function(){
   $("#ans")[0].innerHTML=("Vaule: " + $("#test")[0].value);
});
$("#btn4").click(function(){
    alert($("#w3s")[0].getAttribute("href"));
});
$("#btn5").click(function(){
    $("#w3s")[0].setAttribute("href","http://www.baidu.com/");
$("#w3s")[0].innerHTML=("http://www.baidu.com/");
});
});
</script>
</head>
<body>
<p id="test2">这是段落中的<b>粗体</b>文本。</p>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示值</button>
<button id="btn4">显示 href 值</button>
<button id="btn5">设置 href 值</button>
<p id="ans"><p>
</body>
</html>

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

遍历
each() => createTreeWalker(node,whatToDo,fliter,bool)/createNodeinteractor(node,whatToDo,fliter,bool)
<html>
<head>
<title>dom中的NodeIterator对象示例</title>
<script>
function makelist()
{
   var divnode = document.getElementById("div1");

   var iterator = document.createTreeWalker(divnode, NodeFilter.SHOW_ELEMENT, null, false);
   var oput = document.getElementById("textarea1");
   var node = iterator.nextNode();
   while(node)
   {
      oput.value += node.tagName +"\n";
      node = iterator.nextNode();
   }
}
</script>
</head>
<body>
<div id="div1">
   <p>你好<b>读者!</b></p>
   <ul>
      <li>列表项一</li>
      <li>列表项二</li>
      <li>列表项三</li>
      <li>列表项四</li>
   </ul>
</div>
<textarea id="textarea1" rows="10"></textarea><br />
<input type="button" value="生成列表" οnclick="makelist()" />
</body>
</html>　