1 概述

2 选取DOM元素

2.1 dom和jQuery对象转换

2.2 dom和jQuery的入口函数的区别

2.2.1 jQuery的入口加载函数

2.2.2 dom的入口加载函数

3 DOM操作

3.1 获取父元素

3.2 获取下一个同级元素

3.3 尾部追加DOM元素

3.4 头部插入DOM元素

3.5 生成DOM元素

3.6 删除DOM元素

3.7 清空子元素

3.8 检查是否有子元素

3.9 克隆元素

4 事件的监听

4.1 事件的触发

5 各种方法

5.1 attr方法

5.1.1 jQuery使用attr方法，读写网页元素的属性

5.1.2 DOM提供getAttribute和setAttribute方法读写元素属性

5.1.3 DOM还允许直接读取属性值，写法要简洁许多

5.2 addClass方法

5.2.1 jQuery的addClass方法，用于为DOM元素添加一个class

5.2.2 DOM元素本身有一个可读写的className属性，可以用来操作class

5.2.3 HTML 5还提供一个classList对象，功能更强大（IE 9不支持）

5.3 CSS

5.3.1 jQuery的css方法，用来设置网页元素的样式

5.3.2 DOM元素有一个style属性，可以直接操作

5.4 数据储存

5.4.1 jQuery对象可以储存数据

5.4.2 HTML 5有一个dataset对象

5.5 Ajax

5.5.1 jQuery的ajax方法，用于异步操作

5.6 动画

1 概述

jQuery是最流行的JavaScript工具库。据统计，目前全世界57.3%的网站使用它。也就是说，10个网站里面，有6个使用jQuery。如果只考察使用工具库的网站，这个比例就会上升到惊人的91.7%。

jQuery如此受欢迎，以至于有被滥用的趋势。许多开发者不管什么样的项目，都一股脑使用jQuery。但是，jQuery本质只是一个中间层，提供一套统一易用的DOM操作接口，消除浏览器之间的差异。多了这一层中间层，操作的性能和效率多多少少会打一些折扣。

2006年，jQuery诞生的时候，主要是为了解决IE6与标准的不兼容问题。如今的情况已经发生了很大的变化。IE的市场份额不断下降，以ECMAScript为基础的JavaScript标准语法，正得到越来越广泛的支持，不同浏览器对标准的支持越来越好、越来越趋同。开发者直接使用JavaScript标准语法，就能同时在各大浏览器运行，不再需要通过jQuery获取兼容性。

另一方面，jQuery臃肿的体积也让人头痛不已。jQuery 2.0的原始大小为235KB，优化后为81KB；如果是支持IE6、7、8的jQuery 1.8.3，原始大小为261KB，优化后为91KB。即使有CDN，浏览器加载这样大小的脚本，也会产生不小的开销。

所以，对于一些不需要支持老式浏览器的小型项目来说，不使用jQuery，直接使用DOM原生接口，可能是更好的选择。开发者有必要了解，jQuery的一些常用操作所对应的DOM写法。而且，理解jQuery背后的原理，会帮助你更好地使用jQuery。要知道有一种极端的说法是，如果你不理解一样东西，就不要使用它。

2 选取DOM元素

jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。

var $ = document.querySelectorAll.bind(document);

这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方法。如果有需要，可以考虑将Nodelist对象转为数组。

myList = Array.prototype.slice.call(myNodeList);

2.1 dom和jQuery对象转换

//dom转化为jQuery，只需把dom放进jQuery的对象就可以了$()
$(document);//就是一个jQuery对象
//jQuery转化为dom对象，只需把这个维数组里面的元素取出来即可
$(document)[0]或者$(document).get(0)

2.2 dom和jQuery的入口函数的区别

2.2.1 jQuery的入口加载函数

$(function(){//注意这个入口加载函数会只会等待页面文档加载完成，而不会等待外部资源或图片加载完成
});

注意这个入口加载函数会只会等待页面文档加载完成，而不会等待外部资源或图片加载完成

2.2.2 dom的入口加载函数

window.onload=function(){//这个函数会等待一切资源加载完成在执行，比如外部脚本或图片
}

这个函数会等待一切资源加载完成在执行，比如外部脚本或图片

3 DOM操作

DOM本身就具有很丰富的操作方法，可以取代jQuery提供的操作方法。

3.1 获取父元素

// jQuery写法
$("#elementID").parent()// DOM写法
document.getElementById("elementID").parentNode

3.2 获取下一个同级元素

// jQuery写法
$("#elementID").next()// DOM写法
document.getElementById("elementID").nextSibling

3.3 尾部追加DOM元素

// jQuery写法
$(parent).append($(child));// DOM写法
parent.appendChild(child)

3.4 头部插入DOM元素

// jQuery写法
$(parent).prepend($(child));// DOM写法
parent.insertBefore(child, parent.childNodes[0])

3.5 生成DOM元素

// jQuery写法
$("<p>")// DOM写法
document.createElement("p")

3.6 删除DOM元素

// jQuery写法
$(child).remove()// DOM写法
child.parentNode.removeChild(child)

3.7 清空子元素

// jQuery写法
$("#elementID").empty()// DOM写法
var element = document.getElementById("elementID");
while(element.firstChild) element.removeChild(element.firstChild);

3.8 检查是否有子元素

// jQuery写法
if (!$("#elementID").is(":empty")){}// DOM写法
if (document.getElementById("elementID").hasChildNodes()){}

3.9 克隆元素

// jQuery写法
$("#elementID").clone()// DOM写法
document.getElementById("elementID").cloned(true)

4 事件的监听

jQuery使用on方法，监听事件和绑定回调函数。

$('button').on('click', function(){ajax( ... );
});

完全可以自己定义on方法，将它指向addEventListener方法。

Element.prototype.on = Element.prototype.addEventListener;

为了使用方便，可以在NodeList对象上也部署这个方法。

NodeList.prototype.on = function (event, fn) {[]['forEach'].call(this, function (el) {el.on(event, fn);});return this;};

取消事件绑定的off方法，也可以自己定义。

Element.prototype.off = Element.prototype.removeEventListener;

4.1 事件的触发

jQuery的trigger方法则需要单独部署，相对复杂一些。

Element.prototype.trigger = function (type, data) {var event = document.createEvent('HTMLEvents');event.initEvent(type, true, true);event.data = data || {};event.eventName = type;event.target = this;this.dispatchEvent(event);return this;
};

在NodeList对象上也部署这个方法。

NodeList.prototype.trigger = function (event) {[]['forEach'].call(this, function (el) {el['trigger'](event);});return this;
};

5 各种方法

5.1 attr方法

5.1.1 jQuery使用attr方法，读写网页元素的属性

$("#picture").attr("src", "http://url/to/image")

5.1.2 DOM提供getAttribute和setAttribute方法读写元素属性

imgElement.setAttribute("src", "http://url/to/image")

5.1.3 DOM还允许直接读取属性值，写法要简洁许多

imgElement.src = "http://url/to/image";

需要注意的是，文本框元素（input）的this.value返回的是输入框中的值，链接元素（a标签）的this.href返回的是绝对URL。如果需要用到这两个网页元素的属性准确值，可以用this.getAttribute('value')和this.getAttibute('href')。

5.2 addClass方法

5.2.1 jQuery的addClass方法，用于为DOM元素添加一个class

$('body').addClass('hasJS');

5.2.2 DOM元素本身有一个可读写的className属性，可以用来操作class

document.body.className = 'hasJS';// ordocument.body.className += ' hasJS';

5.2.3 HTML 5还提供一个classList对象，功能更强大（IE 9不支持）

document.body.classList.add('hasJS');document.body.classList.remove('hasJS');document.body.classList.toggle('hasJS');document.body.classList.contains('hasJS');

5.3 CSS

5.3.1 jQuery的css方法，用来设置网页元素的样式

$(node).css( "color", "red" );

5.3.2 DOM元素有一个style属性，可以直接操作

element.style.color = "red”;;// orelement.style.cssText += 'color:red';

5.4 数据储存

5.4.1 jQuery对象可以储存数据

$("body").data("foo", 52);

5.4.2 HTML 5有一个dataset对象

HTML 5有一个dataset对象，也有类似的功能（IE 10不支持），不过只能保存字符串

element.dataset.user = JSON.stringify(user);element.dataset.score = score;

5.5 Ajax

5.5.1 jQuery的ajax方法，用于异步操作

$.ajax({type: "POST",url: "some.php",data: { name: "John", location: "Boston" }
}).done(function( msg ) {alert( "Data Saved: " + msg );
});

我们自定义一个ajax函数，简单模拟jQuery的ajax方法。

function ajax(url, opts){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){var completed = 4;if(xhr.readyState === completed){if(xhr.status === 200){opts.success(xhr.responseText, xhr);}else{opts.error(xhr.responseText, xhr);}}};xhr.open(opts.method, url, true);xhr.send(opts.data);
}

使用的时候，除了网址，还需要传入一个自己构造的option对象。

ajax('/foo', { method: 'GET',success: function(response){console.log(response);},error: function(response){console.log(response);}
});

5.6 动画

jQuery的animate方法，用于生成动画效果。

$foo.animate('slow', { x: '+=10px' })

jQuery的动画效果，很大部分基于DOM。但是目前，CSS 3的动画远比DOM强大，所以可以把动画效果写进CSS，然后通过操作DOM元素的class，来展示动画。

foo.classList.add('animate')

如果需要对动画使用回调函数，CSS 3也定义了相应的事件。

el.addEventListener("webkitTransitionEnd", transitionEnded);el.addEventListener("transitionend", transitionEnded);

jQuery与DOM的区别相关推荐

原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
JS对象与Dom对象与jQuery对象之间的区别
前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
03-老马jQuery教程-DOM操作(上）
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
js中onload和jQuery中的ready区别
js中onload和jQuery中的ready区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. ------>不能写多个(如果有多个,只会执行一个) $(do ...
jQuery中DOM操作方法之 html,text,val
jQuery内核 DOM操作方法之 html,text,val 回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对 ...
jQuery: 选择器(DOM,name,属性,元素)
出处:http://www.cnblogs.com/starof/p/5411457.html 大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html ...
jQuery的DOM操作
jQuery的DOM操作前期:http://blog.csdn.net/goodshot/article/details/20202019 1 , 创建元素节点传统的javascript方法,创建 ...

jQuery与DOM的区别

1 概述

2 选取DOM元素

2.1 dom和jQuery对象转换

2.2 dom和jQuery的入口函数的区别

2.2.1 jQuery的入口加载函数

2.2.2 dom的入口加载函数

3 DOM操作

3.1 获取父元素

3.2 获取下一个同级元素

3.3 尾部追加DOM元素

3.4 头部插入DOM元素

3.5 生成DOM元素

3.6 删除DOM元素

3.7 清空子元素

3.8 检查是否有子元素

3.9 克隆元素

4 事件的监听

4.1 事件的触发

5 各种方法

5.1 attr方法

5.1.1 jQuery使用attr方法，读写网页元素的属性

5.1.2 DOM提供getAttribute和setAttribute方法读写元素属性

5.1.3 DOM还允许直接读取属性值，写法要简洁许多

5.2 addClass方法

5.2.1 jQuery的addClass方法，用于为DOM元素添加一个class

5.2.2 DOM元素本身有一个可读写的className属性，可以用来操作class

5.2.3 HTML 5还提供一个classList对象，功能更强大（IE 9不支持）

5.3 CSS

5.3.1 jQuery的css方法，用来设置网页元素的样式

5.3.2 DOM元素有一个style属性，可以直接操作

5.4 数据储存

5.4.1 jQuery对象可以储存数据

5.4.2 HTML 5有一个dataset对象

5.5 Ajax

5.5.1 jQuery的ajax方法，用于异步操作

5.6 动画

jQuery与DOM的区别相关推荐

最新文章

热门文章