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. linux 系统调用之文件操作

    fcntl 文件控制 open 打开文件 creat 创建新文件 close 关闭文件描述字 read 读文件 write 写文件 readv 从文件读入数据到缓冲数组中 writev 将缓冲数组里的 ...

  2. 在windows中把一个文件夹打成war包

    转: 在windows中把一个文件夹打成war包 一般开发打war包时都是用MyEclipse或IntelliJ IDEA等直接导出war文件,这里介绍一种如何把一个文件夹打成war包的方式,如下   ...

  3. mongodb安装和运行

    转载来源:https://blog.csdn.net/IT_wanghe/article/details/53884229 参考教程:http://www.runoob.com/mongodb/mon ...

  4. UVA11527Unique Snowflakes(滑动窗口 + set判重 | | map)

    题意:输入长度为n的序列a,找到一个尽量长的连续子序列a[l] - a[r],使该序列中没有相同的元素 紫薯P239 序列元素从0开始编号,l 和 r 分别表示子序列左右端点,初始化为0,固定 l,判 ...

  5. ubuntu14.04安装tun/tap网络设备

    14.04的系统默认是没有tun设备的,所以需要通过在内核中编译时勾选此设备.接下来分步来介绍如何安装tun设备. 一.更新ubuntu桌面版源: sudo gedit /etc/apt/source ...

  6. JAVA-比较浮点型数据

    Float public static void main(String[] args) { Float x = 12.4F; Float y = 12.4F; // 比较对象地址 System.ou ...

  7. Hadoop记录-Hadoop jmx

    https://cwiki.apache.org/confluence/display/EAG/Hadoop+JMX+Monitoring+and+Alerting curl http://10.11 ...

  8. JDK记录-JVM原理与调优(转载)

    转载自<https://www.cnblogs.com/andy-zhou/p/5327288.html> 一.什么是JVM JVM是Java Virtual Machine(Java虚拟 ...

  9. C#设计模式(8)——外观模式

    1.外观模式介绍 外观模式也被叫做门面模式,这种模式的作用是:隐藏系统的复杂性,并向客户端提供了一个可以访问系统的统一接口,这个统一的接口组合了子系统的多个接口.使用统一的接口使得子系统更容易被访问或 ...

  10. Web API中的模型验证

    一.模型验证的作用 在ASP.NET Web API中,我们可以使用 System.ComponentModel.DataAnnotations 命名空间中的属性为模型上的属性设置验证规则. 一个模型 ...