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 相关文章推荐
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
vue插件实现v-model功能
Sep 10 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
原生JS运动实现轮播图
Jan 02 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
php析构函数的具体用法小结
2014/03/11 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
python异步任务队列示例
2014/04/01 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
资产经营总监岗位职责
2013/12/04 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
黄石寨导游词
2015/02/05 职场文书
网络销售员岗位职责
2015/04/11 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
Golang数据类型和相互转换
2022/04/12 Golang