jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较

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的区别的更多相关文章

  1. JQuery 和JavaScript的区别

    Google提供的jquery包: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js jQuery官方的jquery包: ...

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

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

  3. 2018-08-26 jQuery与javaScript的区别及核心方法

    1.jq对象就是js new Object 生成的普通对象. 2.jq对象与js对象,他们的方法不能共用! 3.jq对象与js对象的相互转化: js对象转jq对象 -> $(js_obj);// ...

  4. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  5. JQuery笔记:JQuery和JavaScript的联系与区别

    来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...

  6. 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别

    JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...

  7. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

  8. JQUERY与JS的区别

    JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...

  9. jquery deferred done then区别

    jquery deferred done then区别 deferred是jquery 对promise的实现. 以下内容基于jquery 1.8及以上版本 deferred具有then done等属 ...

随机推荐

  1. 斯坦福大学公开课机器学习: machine learning system design | error analysis(误差分析:检验算法是否有高偏差和高方差)

    误差分析可以更系统地做出决定.如果你准备研究机器学习的东西或者构造机器学习应用程序,最好的实践方法不是建立一个非常复杂的系统.拥有多么复杂的变量,而是构建一个简单的算法.这样你可以很快地实现它.研究机 ...

  2. H5新增元素

    标签 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸文章.博客条目.用户评论等内容. 支持HTML5的全局属性和事件属性. <as ...

  3. (计算几何 线段判交) 51nod1264 线段相交

    1264 线段相交 给出平面上两条线段的两个端点,判断这两条线段是否相交(有一个公共点或有部分重合认为相交). 如果相交,输出"Yes",否则输出"No".   ...

  4. 学习Docker之Dockerfile的命令

    使用Dockerfile去构建镜像好比堆积木.使用pom去构建maven项目一样,有异曲同工之妙,下面就把Dockerfile中主要的命令介绍一下. 组成部分 部分 命令 基础镜像信息 FROM 维护 ...

  5. Excel:11个查询函数组合

    还不懂?上栗子~ 1.普通查找 根据表二中的姓名,查找表一对应的应发工资.最基础的VLOOKUP函数就能搞定. 2.反向查找 根据表二姓名,查找表一编号.但表一中编号列在姓名列之前,无法直接使用VLO ...

  6. jmeter中判断数据库是否存在相应的记录

    jmeter判断数据库中是否存在相应记录可以使用count 配合case,然后再加个断言,后面用 变量JMeterThread.last_sample_ok来判断是否存在相应记录 select cas ...

  7. mysql5.7 on windows

    1.下载zip包:https://dev.mysql.com/downloads/file/?id=476696 2.解压到E盘3.执行命令 初始化 E:/mysql-5.7.22-winx64/bi ...

  8. 理解I/O:随机和顺序

    转自:https://blog.csdn.net/BaiWfg2/article/details/52885287 原文:http://www.violin-memory.com/blog/under ...

  9. jmeter元件执行顺序及简介

    最近在学习Jmeter,在进行实操之前,先查看了官方文档.因为官方文档是英文的,为了方便以后查看,自己翻译了一部分,中间个别地方根据自己的理解简单地翻译了部分.如果翻译等有问题,欢迎指正. 一.执行顺 ...

  10. Linux学习笔记:【004】Linux内核代码风格

    Chinese translated version of Documentation/CodingStyle   If you have any comment or update to the c ...