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