jquery和javascript的区别(常用方法比较)


Posted in Javascript onJuly 04, 2013

jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单。人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能。JavaScript 与JQuery 常用方法比较

1、加载DOM区别

JavaScript:
window.onload

function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload = first;
window.onload = second;
//只会执行第二个window.onload;不过可以通过以下方法来进行改进:
window.onload = function(){
first();
second();
}

Jquery:
$(document).ready()

$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}
$(document).ready(function(){
first();
}
$(document).ready(function(){
second();
}
//两条均会执行
}

2、获取ID

JavaScript:
document.getElementById('idName')

JQuery:
$('#idName')

3、获取Class

JavaScript:
JavaScript没有默认的获取class的方法

JQuery:
$('.className')

4、获取TagName

JavaScript:
document.getElementsByTagName('tagName')

JQuery:
$('tagName')

5、创建对象并加入文档中

JavaScript: 
var para = document.createElement('p');
//创建一个p元素
document.body.appendElement(para);
//将p元素追加为body的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法

JQuery:
JQuery提供了4种将新元素插入到已有元素(内部)之前或者之后的方法:append()、appendTo()、prepend()、prependTo()。
格式:$( html );
eg,html代码:
<p>World!</p>
$('p').append('<b>Hello!</b>');
//输出:<p>World!<b>Hello!</b></p>
$('<b>Hello!</b>').appendTo('p'); //输出:同上
$('p').prepend('<b>Hello!</b>');
//输出:<p><b>Hello!</b>World! </p>
$('<b>Hello!</b>').prependTo('p');
//输出:同上

6、插入新元素

JavaScript:
insertBefore() 语法格式:
parentElement.insertBefore(newElement,targetElement)
eg, 将一个img元素插入一个段落之前。

html代码:
<img src="image.jpg" id="imgs" />
<p>这是一段文字</p>

JavaScript代码:
var imgs = document.getElementById('imgs');
var para = document.getElementsByTag('p');
para.parenetNode.insertBefore(imgs,para);

JQuery:
JQuery提供了4种将新元素插入到已有元素(外部)之前或者之后的方法:after()、insertAfter()、before()、insertBefore()。
格式:$( html );
eg,html代码:
<p>World!</p>

JQuery代码
$('p').after('<b>Hello!</b>');
//输出:<p>World! </p><b>Hello!</b>
$('<b>Hello!</b>'). insertAfter ('p');
//输出:同上
$('p').before('<b>Hello!</b>');
//输出:<b>Hello!</b><p>World! </p>
$('<b>Hello!</b>').insertBefore('p');
//输出:同上

7、复制节点

JavaScript:
reference = node.cloneNode(deep)
这个方法只有一个布尔型的参数,它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。

JQuery:
clone() //复制节点后,被复制的新元素并不具有任何行为
clone(true) //复制节点内容及其绑定的事件
备注:该方法通常与appendTo()、prependTo()等方法结合使用。

8、删除节点

JavaScript:
reference = element.removeChild(node)
removeChild()方法将一个给定元素里删除一个子节点

JQuery:
remove();
remove()方法作用就是从DOM中删除所有匹配的元素,remove()方法还可以与其他的过滤选择器结合使用,非常方便。
eg,将ul li下的title不是"Hello"的li移除:
$('ul li').remove(li[title!='Hello']);
empty();
empty()方法作用是清空节点。

9、包裹节点

JavaScript:
JavaScript暂无

JQuery:
wrap() //将匹配元素用其他元素的结构化标记单独包裹起来
wrapAll() //将所有匹配的元素用一个元素包裹起来
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来

10、属性操作:设置属性节点、查找属性节点

JavaScript:
document.getElementsByTagName('tagName')

JQuery:
JQuery中设置和查找属性节点都是:attr() 。
$('p').attr('title'); //获取p元素的title属性;
$('p').attr('title','My title'); //设置p元素的title属性
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时,可以用"名:值"对的形式,中间用逗号隔开。

11、替换节点

JavaScript:
reference = element.replaceChild(newChild,oldChild)
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。

JQuery:
replaceWith()、replaceAll()
eg:
<p>hello</p>
想替换为:
<h2>Hi</h2>

JQuery代码:
$('p') .replaceWith('<h2>Hi</h2>');
或者可以写成:
$('<h2>Hi</h2>').replaceAll('p');

12、CSS-DOM操作

JavaScript:
格式:element.style.property
CSS-DOM能够读取和设置style对象的属性,其不足之处是无法通过它来提取外部CSS设置的样式信息,而JQuery的.css()方法是可以的。
注意点:CSS中的如"font-size"这样有"-"的,要使用首字母小写的驼峰式表示,如fontSize。

JQuery:
格式:$(selector).css()
css()方法获取元素的样式属性
此外,JQuery还提供了height()和width()分别用来获取元素的高度和宽度(均不带单位),而css(height)、css(width)返回高宽,且带单位。

下面为大家补充一下别的网友的补充

jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助。

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:

<script language="javascript" src="/js/jquery.min.js"></script>

库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

Google提供的

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

jQuery官方的

http://code.jquery.com/jquery-1.6.min.js

我自己弄了个子域名,实际上也是跳转到Google的CDN

http://cdn.akcms.com/js/jquery.js

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

1 定位元素
JS
document.getElementById("abc")

jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。

2 改变元素的内容
JS
abc.innerHTML = "test";
jQuery
abc.html("test");

3 显示隐藏元素
JS
abc.style.display = "none";
abc.style.display = "block";

jQuery
abc.hide();
abc.show();

abc.toggle();
//在显示和隐藏之间切换(2012.4.21更新)

4 获得焦点

JS和jQuery是一样的,都是abc.focus();

5 为表单赋值
JS
abc.value = "test";
jQuery
abc.val("test");

6 获得表单的值
JS
alert(abc.value);
jQuery
alert(abc.val());

7 设置元素不可用
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);

8 修改元素样式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);

JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");

9 Ajax
JS
自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);

function recall(result) {
alert(result);
//如果返回的是json,则如下处理
//result = eval('(' + result + ')');
//alert(result);
}

10 判断复选框是否选中
jQuery
if(abc.attr("checked") == "checked")
注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用

Javascript 相关文章推荐
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
JS定时刷新页面及跳转页面的方法
Jul 04 #Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 #Javascript
深入解析contentWindow, contentDocument
Jul 04 #Javascript
关于Javascript与iframe的那些事儿
Jul 04 #Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 #Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 #Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 #Javascript
You might like
php基础知识:函数基础知识
2006/12/13 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
测试php函数的方法
2013/11/13 PHP
php 启动报错如何解决
2014/01/17 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP实现文件上传与下载
2020/08/28 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
angularjs 缓存的使用详解
2018/03/19 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
Python 条件判断的缩写方法
2008/09/06 Python
python发送伪造的arp请求
2014/01/09 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
数控技术专业推荐信
2013/11/01 职场文书
项目建议书怎么写
2014/05/15 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
cypress测试本地web应用
2022/06/01 Javascript