jquery和javascript的区别(常用方法比较)
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="data: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实际上不能用,上面这个测试过能用
jquery和javascript的区别(常用方法比较)的更多相关文章
- jquery和javascript的区别
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较 jquery 就对j ...
- JQuery 和JavaScript的区别
Google提供的jquery包: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js jQuery官方的jquery包: ...
- 2018-08-26 jQuery与javaScript的区别及核心方法
1.jq对象就是js new Object 生成的普通对象. 2.jq对象与js对象,他们的方法不能共用! 3.jq对象与js对象的相互转化: js对象转jq对象 -> $(js_obj);// ...
- jQuery页面加载完毕事件及jQuery与JavaScript的比较
1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...
- JQuery笔记:JQuery和JavaScript的联系与区别
来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...
- 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...
- jQuery 是javascript的一个库(常用插件、处理器)
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...
- jQuery.extend和jQuery.fn.extend的区别【转】
解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...
- JQUERY与JS的区别
JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...
随机推荐
- ucos互斥信号量解决优先级反转问题
在可剥夺性的内核中,当任务以独占方式使用共享资源的时候,会出现低优先级任务高于高优先级任务运行的情况,这种情况叫做优先级反转,对于实时操作系统而言,这是一场灾难,下面我们来说说优先级反转的典型环境. ...
- UIAlertView使用全解
举例: UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Default Alert View"messa ...
- CentOS6.x升级MySQL版本5.1到5.6
CentOS6.x升级MySQL版本5.1到5.6 分类: Web MySQL 2014-08-04 11:22 2813人阅读 评论(1) 收藏 举报 mysql云服务器升级centos6 有一些虚 ...
- IOS开发中响应者链
在IOS开发中,有时候会遇到如下情况:在页面1上有一个RedView,在RedView上有一个GreenView,在GreenView上有一个button,这些view的创建代码如下: 1.AppDe ...
- 安卓 canvas
[转]http://blog.sina.com.cn/s/blog_61ef49250100qw9x.html(easy) [转]http://blog.csdn.net/rhljiayou/arti ...
- 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
http://www.jb51.net/article/70415.htm 含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...
- CentOS6.7下使用非root用户(普通用户)编译安装与配置mysql数据库并使用shell脚本定时任务方式实现mysql数据库服务随机自动启动
CentOS6.7下使用非root用户(普通用户)编译安装与配置mysql数据库并使用shell脚本定时任务方式实现mysql数据库服务随机自动启动1.关于mysql?MySQL是一个关系型数据库管理 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- js原生写的微博留言板有angularjs效果
1.HTML: <!DOCTYPE html><html><head lang="en"> <meta charset=" ...
- Linux释放内存脚本
vi recover_mem.sh #!/bin/bash ################## #author:rrhelei@126.com# ################## #系统分配的 ...