JavaScript DOM和JQuery方法对比
Posted 三云
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM和JQuery方法对比相关的知识，希望对你有一定的参考价值。
| JQuery | javascript | ||
| 创建节点 | $("<div>‘) | document.createElement("div“） | |
| 选择元素 | $(CSS选择器） | querySelector(CSS选择器）； querySelector(CSS选择器）； getElementById(); getElementsByTagName(); getElementsByClassName(); |
|
| 更改元素CSS | 修改单个CSS:$("p").css("backgroundColor", "red") 修改多个CSS： $("p").css({ "color":"white", "background-color":"#98bf21", "font-family":"Arial", "font-size":"20px", "padding":"5px" }); |
元素.style.backgroundColor="red" | |
| 更改元素属性 | 元素.prop("disabled",true); 元素.attr("disabled",true); |
元素.disabled=true; 元素.setAttribute("disabled",true); |
|
| 获取元素属性 | 元素.prop("disabled"); 元素.attr("disabled"); |
元素.getAttribute(”disabled") | |
| 标签里添加 html 标签或文本 | 元素.html("<em>target4</em>") | 元素.innerHTML="<em>target4</em>" | |
| 标签里只改变文本而不增加标签 | 元素.text() | 元素.innerText或者元素.textContent(不同浏览器不同方法）; 元素.文本子元素.nodeValue |
|
| 设置或返回表单字段的值 | 元素.val() | value | |
| 删除元素 | 元素自身.remove() | 父元素.removeChild(子元素）； 子元素.parentNode.removeChild(子元素）； |
|
| 末尾增加元素 |
新元素.appendTo(父元素） 父元素.append(新元素） |
父元素.appendChild(新元素） | |
| 指定位置增加元素 | 父元素.insertBefore(插入元素,参照元素） | ||
| 替换元素 | 父元素.replaceChild(插入元素,替换元素) | ||
| 克隆元素 | 元素.clone(); | 元素.cloneNode(true):深克隆； 元素.cloneNode(false):浅克隆； |
|
| 父元素 | 元素.parent() | 元素.parentNode | |
| 子元素 | 元素.children() 元素.children("CSS选择器") |
元素.childNodes（返回NodeList对象） 元素.firstChild; 元素.lastChild; |
|
| 后代元素 | 元素.find("CSS选择器") 示例:$(‘li.item-ii‘).find(‘li‘)，返回被选元素的后代元素，一路向下直到最后一个后代 |
||
| 兄弟元素 | 元素.next(); 元素.prev(); |
元素.nextSibling; 元素.previousSibling; |
|
| 伪类选择器选定子元素 | $("button:nth-child(3)") 选择属于其父元素的第3个子元素的每个<button> 元素。 $(".target:odd") 选择奇数位置元素； $(".target:even") 选择偶数位置元素； |
||
| 显示元素 | 元素.show() | 元素.style.display=“block" | |
| 隐藏元素 | 元素.hide() | 元素.style.display=“none" | |
| 页面资源全装载完成后触发 | ${window}.on("load",function(){}); | window.onload=function(){}; | |
| DOM加载完成后触发 | ${document}.read(function(){}); | ||
| 对象定义 | var $pin = $( "#main" ); | var main=document.getElementById(‘main‘) | |
| 访问元素集合指定索引值 | $(‘li‘).eq(2) （第二个li元素） | nodeList[i]或nodeList.item(i) | |
| 集合中的第一个元素 | .first() | ||
| 集合中的最后一个元素 | .last() | ||
| 为数组每个匹配元素规定运行的函数 |
$(selector).each(function(index,value){}) $.each( object, function(index,value){}) |
for循环遍历执行 | |
| 事件 | 元素.click（function(){...}) |
1、元素.onclick=function(){...} 2、元素.addClickListener(‘click‘,function(){...}) |
|
| 设置或返回元素的宽度（不包括内边距、边框或外边距） | width() | width | |
| 设置或返回元素的高度（不包括内边距、边框或外边距） | height() | height | |
| 返回元素的宽度（包括内边距） | innerWidth() | clientWidth | |
| 返回元素的高度（包括内边距） | innerHeight() | clientHeight | |
| 返回元素的宽度（包括内边距和边框） | outerWidth() | offsetWidth | |
| 返回元素的g高度（包括内边距和边框） | outerHeight() | offsetHeight | |
| 返回视口宽度/高度 | $(window).width()/$(window).height() | 内边距=0情况下的document.documentElement.clientWidth | |
| 返回文档宽度/高度 | $(document).width()/$(document).height() | ||
| 获取垂直滚动的距离 | $(document).scrollTop() | document.documentElement.scrollTop | |
| 获取水平滚动的距离 | $(document).scrollLeft() | document.documentElement.scrollLeft | |
| 被选元素相对于文档(document)的偏移坐标 |
offset().top,offset().left |
offsetTop,offsetLeft(offsetParent是默认body时，或者是效果相当于body的定位元素时） |
以上是关于JavaScript DOM和JQuery方法对比的主要内容，如果未能解决你的问题，请参考以下文章