我突然想起了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="width: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="width: 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="width: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="width: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()方法,我终于搞清楚了。

DOM操作二三事的更多相关文章

  1. jQuery的dom操作(二)转

    addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...

  2. Jquery:Jquery中的DOM操作<二>

    由于昨天晚上回来的晚,写的有点匆忙,所以昨天的学习笔记中出现了多处错误的地方,幸好有各位园友帮忙指出,在这里谢过各位了!今天继续学习关于Jquery中DOM的操作,其实是昨天随笔的延续,求围观!!! ...

  3. javascript的DOM操作(二)

    <html> <title>学习DOM</title> <a id="wen">文本</a> <input nam ...

  4. DOM操作二

    1.创建节点 createElement():   创建新的Element节点 var s = document.createElement('script'); createTextNode(): ...

  5. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  6. JavaScript的BOM、DOM操作、节点以及表格(二)

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  7. 前端学习(二十三)DOM操作,事件(笔记)

    javascript 组成部分    1.ECMAScript        javascript的核心解释器 2.DOM        Document Object Modle         文 ...

  8. jQuery笔记(二)jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  9. javascript学习(二) DOM操作HTML

    一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...

随机推荐

  1. JS 中substring() , substr(), slice() 的区别

    substr(start, length) : 截取从start索引开始的字符,长度为length的字符串 substring(start, end) : 截取从start索引开始的字符,以end索引 ...

  2. Java JVM多线程

  3. xstream 解析xml报文

    一.xml一种格式的数据转换为对象 pom.xml引入 <!--javaBean和XML的双向转换--> <dependency> <groupId>com.tho ...

  4. django学习系列-01

    安装Django > pip install django==1.10.3(py2)或者>python3 -m pip install django==1.10.3(py3) 成功安装 D ...

  5. 第191天:js---Array常用属性和方法总结

    Array---常用属性和方法总结 1.Array对象构造函数 /*Array对象构造函数*/ /*组合记忆 shift unshift pop push 添加和删除 shift unshift 从数 ...

  6. 动态Lambda表达式打印HelloWorld

    最近在用C#与数据库打交道.开发过程中采用了ORM模型(以前是纯sql玩法,复杂的逻辑用存储过程做). 为了能通过配置文件动态地查询字段,也就是说需要能这样写: db.AsQuery<T> ...

  7. OSPF与Vlan间通信综合实验小结与端口隔离

      总结 本实验模拟实际工作环境的网络拓扑结构,至此终于理解了一部分的配置思路: 一.三层交换机连接路由器的端口配置 图中GE0/0/4应该是配置成access类型,这个时候应该是不带vlan标签的. ...

  8. P2774 方格取数问题

    题目背景 none! 题目描述 在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法.对于 ...

  9. Class类是什么? Class.forName()是干什么的?

    Class类概念 Class类用来描述一个类的结构,比如描述一个类有哪些成员,有哪些方法等.有多种方法可以获取一个类对应的Class类实例,比如: //第一种方式获取描述Dog类结构的Class类实例 ...

  10. 【BZOJ4767】两双手(动态规划,容斥)

    [BZOJ4767]两双手(动态规划,容斥) 题面 BZOJ 题解 发现走法只有两种,并且两维坐标都要走到对应的位置去. 显然对于每个确定的点,最多只有一种固定的跳跃次数能够到达这个点. 首先对于每个 ...