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的区别

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

  2. JQuery 和JavaScript的区别

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

  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 是javascript的一个库(常用插件、处理器)

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...

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

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

  9. JQUERY与JS的区别

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

随机推荐

  1. uos事件控制块与任务同步

    Ucos为了任务之间的通讯定义了信号量,互斥性信号量,消息对象 消息队列等结构以及api,为了统一的管理这些同步,定义了一个结构叫做时间控制块OS_EVENT,如下 typedef struct os ...

  2. My first essay

    今天是我开通博客第一天,从此开始了我的博客之路.为了实现成为程序猿的我,现在开始努力啦~今年大三,就读杭州电子科技大学,通信工程专业.现在在自学web前端,虽然与我就读专业并无多大相关,但是这是根据自 ...

  3. ArcGIS Server的切图原理深入(转载)

    http://forum.osgearth.org/template/NamlServlet.jtp?macro=search_page&node=2174485&query=arcg ...

  4. delphi 获取硬盘序列号、cpu号、bios号、网卡号

    delphi 获取硬盘 序列号 function GetIdeNum: String; type TSrbIoControl = packed record HeaderLength : ULONG; ...

  5. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

  6. 使用(Drawable)资源——图片资源

    图片资源是最简单的Drawable资源,只要把*.png.*.jpg.*.gif等格式的图片放入/res/drawble-xxx目录下,Android SDK就会在编译应用中自动加载该图片,并在R资源 ...

  7. IIS8中添加WCF支持几种方法小结[图文]

    方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少 ...

  8. BNU Online Judge-34973-Liserious战队

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34973 题目不难,很容易,不过不仔细看题可能你一直做不出,注意<<一共分为1~ ...

  9. Flex 各种校验

    Flex 各种校验: 参考:http://blog.csdn.net/jerry_bj/article/details/5650469 参考正则表达式:http://www.cnblogs.com/f ...

  10. IIS安装教程

    IIS安装步骤图解: 1):打开添加删除程序,并选中添加/删除 Windows组件,后双击! 2): 选中并双击添加/删除 Windows组件后,弹出组件安装向导!并可以看到Internet 信息服务 ...