原生js與jquery針對dom的操作的不同之處整理
阿新 • • 發佈:2018-12-17
通過兩段程式碼(相同功能效果)來表示其不同:
html部分:
<div class="wrapper"> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li id="last">555</li> </ul> <button id="add">新增</button> <button id="remove">刪除</button> <button id="replace">替換</button> <input type="text"> <input type="checkbox"></div>
首先是原生js的程式碼:
//獲取元素 var _ul = document.getElementsByTagName('ul'); var addBtn = document.getElementById('add'); var removeBtn = document.getElementById('remove'); var replaceBtn = document.getElementById('replace'); var _input = document.getElementsByTagName('input'); //事件操作 addBtn.onclick =function () { //建立元素節點 var node = document.createElement('li'); //建立文字節點 var textNode = document.createTextNode('666'); //新增文字 node.appendChild(textNode); //新增元素 _ul[0].appendChild(node) }; removeBtn.onclick =function () { //移除元素 _ul[0].removeChild(_ul[0].lastChild) } //替換元素 replaceBtn.onclick = function () { var newNode = document.createElement('li'); var newText = document.createTextNode('hello'); var last = document.getElementById('last'); newNode.appendChild(newText); _ul[0].replaceChild(newNode,_ul[0].lastChild);//父元素.replaceChild(新的節點,舊的節點) } //設定屬性 _input[0].setAttribute('placeholder','測試') //獲取屬性 console.log(_input[0].getAttribute('placeholder')) // _input[1].setAttribute('checked','false'); console.log(_input[1].getAttribute('checked')); //設定樣式 _input[0].style.backgroundColor = 'red';下面是jquery的程式碼(與上面實現效果相同):
/獲取元素var $ul = $('ul');var $li = $('li');var $addBtn = $('#add');var $deleteBtn = $('#remove');var $replaceBtn = $('#replace');var $input1 = $('.one');var $input2 = $('.two');//事件操作$addBtn.click(function () { //建立元素和文字節點 var $li = $('<li>666</li>');//也可不加$,var $li = '<li>666</li>';效果一樣 //新增元素 $ul.append($li);})$deleteBtn.click(function () { //刪除元素 $ul.remove();//刪除被選元素和其子元素 $ul.empty();//刪除被選元素的子元素,此元素本身不會被刪除});$replaceBtn.click(function () { var $newNode = $('<li>hello</li>');//建立節點 var $newNodeq = $('<li>helloq</li>'); //替換元素節點 $('li:first-child').replaceWith($newNodeq);//選擇要被替換的元素.relaceWith(新的節點元素) $($newNode).replaceAll($('li:last-child'))//新的節點元素.replaceAll(選擇需要被替換的元素)})$input1.prop('placeholder','新增');$input2.attr('checked','true');console.log($input1.attr('placeholder'));console.log($input1.prop('placeholder'));console.log($input2.prop('checked'));//對checked 返回true或falseconsole.log($input2.attr('checked'))//對checked返回具體的值 //設定樣式 $input1.css('background-color','red')
另外,特此說明一下jquery中prop和attr的不同:jquery的版本不同,使用attr獲得的結果會不同,比如在在 1.9.0 的版本中:<input type="checkbox" /> <script> $(function() { $('input').click(function() { $(this).attr('checked'); }); }); </script> 點選 checkbox,結果都是 undefined! 在 jQuery 1.6 之前,使用 attr() 有時候會出現不一致的行為,所以在jQuery 1.6 開始新增了一個方法 prop(),也是獲取屬性的方法; 使用$(this).prop('checked');結果就為true; 所以,具有true和false兩個屬性的屬性,如checked,selected或者disabled使用prop(),其他的使用attr()。看網上還有其他解釋(參考連結:https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html):
- 對於HTML元素本身就帶有的固有屬性(如標籤<a>中的屬性“href、target和class"),在處理時,使用prop方法。
- 對於HTML元素我們自己自定義的DOM屬性(如標籤<a>中的屬性action),在處理時,使用attr方法。
有不正確的地方,歡迎批評指正~~~