append替换代码后jquery不起作用_原生JavaScript与jQuery

本文分别从选择DOM节点、改变CSS样式两方面来总结JavaScript和jQuery的区别。

一、选择DOM节点

1、JavaScript中获取DOM节点：

（1）通过 id 获取-Document的方法 getElementById()返回一个匹配特定 ID的元素.

document.getElementById()

（2）通过 tagname 获取-返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection

document.getElementsByTagName()

（3）通过 class 获取-也可以在任意元素上调用getElementsByClassName()

document.getElementsByClassName()

注：这是HTML5 DOM中新增的一个方法,所以某些DOM可能还无法实现,且该方法和

document.getElementsByTagName()方法都是返回的一个数组.

（4）通过 CSS 选择器获取

（IE8+）document.querySelectorAll() -返回与指定的选择器组匹配的文档中的元素列表
（IE8+）document.querySelector()-返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。

// 通过 id 获取
var div1 = document.getElementById('div1') // 元素

// 通过 tagname 获取
var divList = document.getElementsByTagName('div')  // 集合
console.log(divList.length)
console.log(divList[0])

// 通过 class 获取
var containerList = document.getElementsByClassName('container') // 集合
var parentDOM = document.getElementById("parent-id");
var test = parentDOM.getElementsByClassName("test");

// 通过 CSS 选择器获取
var pList = document.querySelectorAll('p') // 集合
var el = document.querySelector(".myclass") // 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector("div.user-panel.main input[name='login']");
// 一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)
// 内包含一个name属性为"login"的input元素<input> (<input name="login"/>) 

附：（5）

elements = document.getElementsByName(name)根据给定的name返回一个在 (X)HTML document的节点列表集合。

name 是元素的 name 属性的值。但是：getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些id为指定值的元素。所以你要小心使用该方法，最好不要为元素的name和id赋予相同的值。

2、jQuery获取DOM节点

使用jQuery在文档树上查找节点非常容易。可以通过jQuery选择器（基本选择器、层次选择器、过滤选择器和表单选择器）快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。

var $li = $("ul li:eq(1)")        // 获取<ul>里第2个<li>节点

3、节点操作比较

3.1 查找节点对比：

例如：假设存在一个 id 为 test 的元素节点

// JS 获取节点方法：

var test = document.getElementById('test')
// 获取父节点
test.parentsNode
// 获取所有子节点
test.childNodes
// 获取第一个子节点
test.firstChild
// 获取最后一个子节点
test.lastChild
// 获取上一个兄弟节点
test.previousSibling
// 获取下一个兄弟节点
test.nextSibling

// JQ 获取节点的方法：

// 获取父节点
$('#test').parent
// 获取所有子节点
$('#test').children
// 获取上一个兄弟节点
$('#test').prev
// 获取之前所有的兄弟节点
$('#test').prevAll
// 获取下一个兄弟节点
$('#test').next
// 获取之后所有兄弟节点
$('#test').nextAll
// 获取所有兄弟节点
$('#test').siblings
// 获取 test 下的某类节点
$('#test').find('span')

3.2 创建节点对比：

JavaScript:Document.createElement() 方法创建由tagName指定的HTML元素。

jQuery: $(html)方法会根据传入的HTML标记字符串，创建一个 DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

// JavaScript语法：let element = document.createElement(tagName[, options]);

// create a new div element 
// and give it some content 
var newDiv = document.createElement("div"); 
var newContent = document.createTextNode("Hi there and greetings!"); 
newDiv.appendChild(newContent); //add the text node to the newly created div. 

// jQuery
var $li_1 = $("<li></li>")         // 创建第1个<li>元素
var $li_2 = $("<li>雪梨</li>")       // 创建一个<li>元素，包括元素节点和文本节点"雪梨"就是创建的文本节点
var $li_1 = $("<li title='香蕉'>香蕉</li>")   // 创建一个<li>元素
                                              // 包括元素节点、文本节点和属性节点
                                              // 其中title='香蕉'就是创建的属性节点

3.3 增删节点对比：

JavaScript：

// 增
// 1.Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。
var p = document.createElement("p");
document.body.appendChild(p); // 创建一个新的段落p元素,然后添加到body的最尾部

// 2.Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。
var parentElement = document.getElementById('parentElement'); //插入节点之前，要获得节点的引用
var theFirstChild = parentElement.firstChild; //获得第一个子节点的引用
var newElement = document.createElement("div"); //创建新元素
parentElement.insertBefore(newElement, theFirstChild); //在第一个子节点之前插入新元素

// 删
// 1.Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。
<div id="top" align="center">
  <div id="nested"></div>
</div>
// 先定位父节点,然后删除其子节点
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

// 替换
// parentNode.replaceChild(newChild, oldChild)用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");

// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");

// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");

// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);

// 获得被替换节点和其父节点的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// 用新的span元素sp1来替换掉sp2
parentDiv.replaceChild(sp1, sp2);

// 结果:
// <div>
//   <span id="newSpan">新的span元素的内容.</span>
// </div>

jQuery:

// 增
// 1 append() 向每个匹配的元素内部追加内容
$("p").append("<b>你好</b>") // 结果是<p>我说：<b>你好</b></p>
// 2 appendTo() 将所有匹配的元素追加到指定的元素中
$("<b>你好</b>").appendTo("p") // 结果是<p>我说：<b>你好</b></p>
// 3 prepend() 向每个匹配的元素内部前置内容
$("p").prepend("<b>你好</b>") // 结果是<p><b>你好</b>我说：</p>
// 4 prependTo() 将所有匹配的元素前置到指定的元素中
$("<b>你好</b>").prependTo("p") // 结果是<p><b>你好</b>我说：</p>
// 5 after() 在每个匹配的元素之后插入内容
$("p").after("<b>你好</b>") // 结果是<p>我说：</p><b>你好</b>
// 6 insertAfter() 将所有匹配的元素插入到指定元素的后面
$("<b>你好</b>").insertAfter("p") // 结果是<p>我说：</p><b>你好</b>
// 7 before() 在每个匹配的元素之前插入内容
$("p").before("<b>你好</b>") // 结果是<b>你好</b><p>我说：</p>
// 8 insertBefore() 将所有匹配的元素插入到指定的元素的前面
$("<b>你好</b>").insertBefore("p") // 结果是<b>你好</b><p>我说：</p>

// 删
// 1 remove()方法,作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素
$("ul li:eq(1)").remove() // 获取<ul>节点中的第2个<li>元素节点后，将它从网页中删除
$("ul li").remove("li[title!=菠萝]")// 将<li>元素中属性title不等于“菠萝”的<li>元素删除
// 2 detach()方法
//   detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但这个方法不会把匹配的元素从jQuery对象中删除，
//   因而可以在将来再使用这些匹配的元素。与remove()不用的是，所有绑定的事件、附加的数据等都会保留下来。
$("ul li").click(function(){ alert($(this).html()) })
var $li = $("ul li:eq(1)").detach()     // 删除元素
$li.appendTo("ul") // 重新追加此元素，发现它之前绑定的事件还在，如果使用remove()方法删除元素的话则它之前绑定的事件将失效
// 3 empty()方法
//   empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
$("ul li:eq(1)").empty() // 获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里。
                         // 当运行代码后，第2个<li>元素的内容被清空了，只剩下<li>标签默认的符号“.”

// 复制
$("ul li").click(function(){
  $(this).clone().appendTo("ul")    // 复制当前单击的节点，并将它追加到<ul>元素中
})
// 复制节点后，被复制的新元素并不具有任何行为。若需要新元素也具有复制功能（上例是单击事件），可使用如下jQuery代码：
$(this).clone(true).appendTo("body")    // 注意参数true，它的含义是复制元素的同时复制元素中所绑定的事件

// 替换
// 1 replaceWith()
     // replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者 DOM元素
     // 例如：要将网页中<p title="选择你喜欢">你喜欢的蔬果？</p>替换成<strong>你讨厌的蔬果？</strong>
$("p").replaceWith("<strong>你讨厌的蔬果？</strong>")
// 2 replaceAll()
     // 该方法与replaceWith()作用相同，只是颠倒了replaceWith()操作，可使用如下代码实现上例同样的功能：
$("<strong>你讨厌的蔬果？</strong>").replaceAll("p")

// 包裹
// wrap()将某个节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。
$("strong").wrap("<b></b>")    // 用<b>标签把<strong>元素包裹起来

---

二、改变CSS样式

1、Javascript

1.1 使用obj.style对象：

改变HTML元素的样式：document.getElementById(id).style.property = new style

/*第一种，单独给每一个属性设定属性值*/
var tagName = document.getElementById("pTag");
tagName.style.color = 'red';
tagName.style.backgroundColor = 'yellow';
 
/*第二种，使用cssText设定一组样式,避免页面reflow,提高页面性能*/
 
var tagName = document.getElementById("pTag");
 
/*需要注意的一点是，使用cssText，其属性名字与在css中一致，不是驼峰式命名，
例如background-color，而不是backgroundColor*/
tagName.style.cssText = "background-color:yellow;color:red;";

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。document.getElementById("id").style.property="值"

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>上面的段落已被脚本改变。</p>

</body>
</html>

1.2 使用js的setAttribute（）方法更改class属性值

操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法，直接读写或删除网页元素的style属性。

tagName.setAttribute('class','change-after');

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid black;'
);
// 相当于HTML 代码<div style="background-color:red; border:1px solid black;" />

1.3 更改css样式表文件:

var link = document.getElementById('href');
link.setAttribute('href','style/css2.css');

1.4 通过赋值替换原来的class属性值：

tagName.className = 'change-after';

1.5 通过Element.classList来访问元素的类列表。element.classList 本身是只读的，但是你可以使用 add() 和 remove() 方法修改它。

const div = document.createElement('div');
div.className = 'foo';

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

2、jQuery

2.1 获取样式和设置样式

获取class和设置class都可以使用attr()方法来完成。
<p class="myClass" title="选择你最喜欢的水果">你最喜欢的水果是？</p>
上面的代码中class也是<p>元素的属性，因此获取和设置class都可以使用attr()方法来完成：

var p_class = $("p").attr("class")     // 获取<p>元素的class

// 也可以使用attr()方法来设置<p>元素的class
$("p").attr("class", "high")           // 设置<p>元素的class为high,
// 代码运行后 HTML代码将变为<p class="high" title="选择你最喜欢的水果">你最喜欢的水果是？</p>

2.2 追加样式

addClass()方法专门用来追加样式。

2.3 移除样式

removeClass()方法用来删除class的某个值，作用是从匹配的元素中删除全部或者指定的class。
如：$("p").removeClass("high another") // 把<p>元素的两个class都删除
也可以写成：$("p").removeClass() // 移除<p>元素的所有class

2.4 切换样式

toggle()方法：用于绑定两个或多个事件处理器函数，控制行为上的重复切换。（该方法也可用于切换被选元素的hide和show）如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。
用法1:$(selector).toggle(function1(),function2(),functionN(),...)
function1(): 必需。规定当元素在每偶数次被点击时要运行的函数。
function2(): 规定当元素在每奇数次被点击时要运行的函数。
functionN(): 规定需要切换的其他函数。
范例：例2.4.1.1

用法2:$(selector).toggle(speed,callback)
检查每个元素是否可见。如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。
speed:可选。规定 hide/show 效果的速度。默认是 "0"。可能的值 ： 毫秒（比如 1500） "slow" "normal" "fast"。
callback:可选。当 toggle() 方法完成时执行的函数。
范例：例2.4.1.2

用法3:$(selector).toggle(switch)
规定是否只显示或只隐藏所有匹配的元素。
switch:必需。布尔值，规定 toggle() 是否应只显示或只隐藏所有被选元素。true - 显示元素 false - 隐藏元素。
范例：例2.4.1.3

toggleClass()方法：在CSS类的应用与不应用之间进行切换。
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
用法1:$(selector).toggleClass(class,switch)
class:必需。规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
switch:可选。布尔值。规定是否添加(true)或移除(false) class。
范例：例2.4.2.1
用法2:$(selector).toggleClass(function(index,class),switch)
使用函数来切换类。
function(index,class)：必需。规定返回需要添加或删除的一个或多个类名的函数。 index - 可选。接受选择器的 index 位置。class - 可选。接受选择器的当前的类。
switch：可选。布尔值。规定是否添加(true)或移除(false)类。
范例：例2.4.2.2

2.5 判断是否含有某个样式

hasClass()可以用来判断元素中是否含有某个class，如果有则返回true，否则返回false。

2.6 CSS-DOM操作:CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

2.6.1 jQuery可以直接利用css()方法获取元素的样式属性，也可以直接利用css()方法设置某个元素的单个样式。
2.6.2 关于元素定位: offset()、position()、scrollTop()、scrollLeft()

/** 2.6.1 可以直接利用css()方法获取元素的样式属性，也可以直接利用css()方法设置某个元素的单个样式。*/

$("p").css("color")     // 获取<p>元素的样式颜色
$("p").css("color", "red")    // 设置<p>元素的样式颜色为红色

$("p").height()      // 获取<p>元素的高度值
// 等同于
$("p").css("height")

$("p").height(100)     // 设置<p>元素的高度值为100px
$("p").height("10em")  // 设置<p>元素的高度值为10em

/** 2.6.2 关于元素定位
* offset()方法：获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
* position()方法：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，
 与offset()一样返回的对象也包括两个属性即top和left。
* scrollTop()方法和scrollLeft()方法：作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
 还可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。
*/

$("textarea").scrollTop(300)     // 元素的垂直滚动条滚动到指定的位置
$("textarea").scrollLeft(300)    // 元素的横向滚动条滚动到指定的位置

var $p = $("p")
var scrollTop = $p.scrollTop     // 获取元素的滚动条距顶端的距离
var scrollLeft = $p.scrollLeft   // 获取元素的滚动条距左侧的距离

var position = $("p").position()  // 获取<p>元素的position()
var left = position.left          // 获取左偏移
var top = position.top          // 获取上偏移

var offset = $("p").offset()     // 获取<p>元素的offset()
var left = offset.left           // 获取左偏移
var top = offset.top          // 获取上偏移

---

三、设置和获取HTML、文本和值

1、Javascript

1.1 Element.innerHTML属性设置或获取HTML语法表示的元素的后代。

function log(msg) {
  var logElem = document.querySelector(".log");
 
  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Logging mouse events inside this container...");

/* 这个例子的 HTML 代码:
<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div> 
*/

1.2 HTMLElement.innerText属性表示一个节点及其后代的“渲染”文本内容。范例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>#source { color: red; }</style>
</head>
<body>
  <h3>Source element:</h3>
  <p id="source">
    Take a look at<br>
    how this text<br>
    is interpreted below.
    <span style="display:none">HIDDEN TEXT</span>
  </p>
  <h3>Result of textContent:</h3>
  <textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
  <h3>Result of innerText:</h3>
  <textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
  
  <script>
  const source = document.getElementById('source');
  const textContentOutput = document.getElementById('textContentOutput');
  const innerTextOutput = document.getElementById('innerTextOutput');

  textContentOutput.innerHTML = source.textContent;
  innerTextOutput.innerHTML = source.innerText;
  </script>
</body>
</html>

innerText 很容易与Node.textContent混淆, 但这两个属性间实际上有很重要的区别. 大体来说,innerText 可操作已被渲染的内容， 而 textContent则不会.

1.3 HTMLDataElement.value

value可以用来修改（获取）textarea和input的value属性的值或元素的内容。

2、jQuery

2.1 html()方法

此方法类似于JavaScript中的innerHTML属性，可用来读取或者设置某个元素中的HTML内容。

2.2 text()方法

此方法类似于JavaScript中的innerText属性，可用来读取或者设置某个元素中的文本内容。

2.3 val()方法

此方法类似于JavaScript中的value属性，可用来设置和获取元素的值。无论元素是文本框、下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

本文参考引用：

JavaScript 标准参考教程（alpha）​javascript.ruanyifeng.com JavaScript JQuery常用获取 dom 节点​www.jianshu.com

锋利的jQuery (豆瓣)​book.douban.com

jQuery中toggle()方法、toggleClass()方法​blog.csdn.net Javascript改变css样式的四种方法​blog.csdn.net 原生js添加类名_JavaScript_前端指南-CSDN博客​blog.csdn.net