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. S3C2440外部中断系统详解

    个中断源的请求.提供这些中断源的是内部外设,如DMA控制器.UART.IIC等等.在这些中断源中,UARTn.AC97和EINTn中断对于中断控制器而言是“或”关系.任意一个中断发生都会触发总中断 当 ...

  2. 友坚恒天.开发板(Cotex-A9 Exynos4412 开发板)

    友坚恒天.开发板 Cotex-A9 Exynos4412 开发板

  3. JQuery中根据表单元素动态拼接json 字符串

    // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  4. Java解析JSON文件的方法 (二)

    assets文件夹资源的访问        assets文件夹里面的文件都是保持原始的文件格式,需要用AssetManager以字节流的形式读取文件.       1. 先在Activity里面调用g ...

  5. PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)

    CSV大文件的读取已经在前面讲述过了(PHP按行读取.处理较大CSV文件的代码实例),但是如何快速完整的操作大文件仍然还存在一些问题. 1.如何快速获取CSV大文件的总行数? 办法一:直接获取文件内容 ...

  6. Mybatis中常见的SQL DML

    1.sql select 查询 <select id="query" resultType="CfCurrbusilogEntity" > sele ...

  7. 环信 之 iOS 客户端集成一:导入库

    1. 导入 我采用cocoapod的方式,在project同级目录下创建Podfile,Podfile内容如下: platform :ios, '7.0' pod 'EaseMobSDKFull', ...

  8. 1.4. 为现有的应用程序添加 Core Data 支持(Core Data 应用程序实践指南)

    项目创建时会有 “Use Core Data" ,但是,有时没有勾选这个选项,那么就要手动链接Core Data Framework. 选中 Grocery Dude Target Gene ...

  9. Android开发:View的几种布局及实践

    引言 View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).网格视图(Grid View).标签布 ...

  10. 【BZOJ 3926】【ZJOI 2015】诸神眷顾的幻想乡

    http://www.lydsy.com/JudgeOnline/problem.php?id=3926 广义后缀自动机的例题,感觉广义后缀自动机好恶心... 广义后缀自动机是对一个trie建立的后缀 ...