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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
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+MySQL的聊天室设计
2006/10/09 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
python实现俄罗斯方块
2018/06/26 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Flask处理Web表单的实现方法
2021/01/31 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
大学生职业生涯规划范文
2014/01/22 职场文书
医院信息公开实施方案
2014/05/09 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
贷款委托书
2014/08/01 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
小学师德师风整改措施
2014/10/27 职场文书
体育个人工作总结
2015/02/09 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL