这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本文主要介绍 jQuery 与 JavaScript 节点的创建方法,以及他们的具体代码实现方法,大家可以对比下他们之间的不同,希望对大家编写代码有所帮助
一、 创建节点:
节点是 DOM 结构的基础,根据 DOM 规范,节点是一个很宽泛的概念,包含元素、属性、文本、文档和注释。但在实际开发中,要动态创建内容,主要操作的节点包括元素、属性和文本。
1、需求:创建一个 h1 标签,把它作为 div 元素的子节点添加到 DOM 节点树中。
2、基本思路是:先创建一个 h1 元素对象,然后添加到文档中。
3、以下是两种实现方式:
- // jQuery方式
- var $h1 = $("<h1 title='创建节点' class='head'>jQuery与JavaScript创建节点比较</h1>");
- $("div").append($h1);
- //JavaScript方式
- var div = document.getElementById("div1");
- var h1 = document.createElement("h1");//创建h1对象
- h1.setAttribute("title","创建节点");//为h1对象创建属性节点,并设置属性值
- h1.setAttribute("class","head");//为h1对象成交价属性节点class,并设置属性值
- var txt = document.createTextNode("jQuery与JavaScript创建节点比较");
- h1.appendChild(txt);//将文本增加到元素节点中
- div.appendChild(h1);//把创建的h1对象添加到div中
4、两种方式比较:
1)、代码输入:jQuery 创建元素节点操作简单,仅两行代码即可快速实现。JavaScript 实现比较麻烦,用户需要分别创建元素节点和文本节点,然后再一步步地把文本节点添加到元素节点中,最后才能够添加到 DOM 结构树中。
2)、从执行角度分析:在 Safari 浏览器中,JavaScript 实现要比 jQuery 实现快 80 倍以上,而在执行速度最慢的 IE 浏览器,两者差别也在 10 倍以上
以上所述是本文的全部内容,有问题的可以和小编联系,下篇文章介绍 jQuery 与 JavaScript 插入元素的方法对比,大家可以关注下。。
来源: http://www.phperz.com/article/17/0503/330400.html