jQuery与直接写JS的区别详细解析

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下所示。需要的朋友可以过来参考下

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:
<script language="javascript"
src="/js/jquery.min.js"></script>

库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

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")

时间: 2024-08-18 13:48:20

jQuery与直接写JS的区别详细解析的相关文章

写jQuery和直接写JS的区别(转自馒头的博客)

jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助. 要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如: <script language="javascript" src="/js/jquery.min.js"></script> 库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,

【转】全局变量与局部变量在内存中的区别详细解析

转自:http://www.jb51.net/article/42012.htm 作者: 字体:[增加 减小] 类型:转载 时间:2013-10-11 我要评论 以下是对全局变量与局部变量在内存中的区别进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一.预备知识-程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)- 由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. 2.堆区(heap) - 一般

jquery的应用和JS的区别

jquery 和 js的主要区别在于DOM操作 DOM操作: 找元素: js: document.getElementBy(ID,classnama,tagname) jquery: $(选择器) 例:$(.one)操作内容: js: 非表单: Dom.innerHTML 表单:Dom.value jquery: 非表单: jqDom.html(str) 表单:jqDom.val(str)操作属性: js: 设置: Dom.setAttribute("","");

C++中overload,override,overwrite的区别详细解析

以下是对C++中overload,override,overwrite的区别进行了详细的分析介绍,需要的朋友可以过来参考下 Overload(重载):在C++程序中,可以将语义.功能相似的几个函数用同一个名字表示,但参数或返回值不同(包括类型.顺序不同),即函数重载.(1)相同的范围(在同一个类中):(2)函数名字相同:(3)参数不同:(4)virtual 关键字可有可无. Override(覆盖):是指派生类函数覆盖基类函数,特征是:(1)不同的范围(分别位于派生类与基类):(2)函数名字相同

[转]PHP取整函数:ceil,floor,round,intval的区别详细解析

我们经常用到的PHP取整函数,主要是:ceil,floor,round,intval. 1.ceil -- 进一法取整 说明float ceil ( float value ) 返回不小于 value 的下一个整数,value 如果有小数部分则进一位.ceil() 返回的类型仍然是 float,因为 float 值的范围通常比 integer 要大. PHP取整函数例子 1. ceil() 例子 echo ceil(4.3); // 5 echo ceil(9.999); // 10 2.flo

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

jquery和Js的区别和基础操作

jquery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jquery的话,先要引入一下jquery包,jquery包从网上下一个就可以,一般用带有min的,是压缩版的,如果还要引用其他js文件的话,一定要jquery包在上面,其他的引用放在他下面 先来看看如果使用Jquery的话,怎么来引用Jquery包 这样来引用,然后就可以用Jquery方法了 和js的语法一样,都是写在<script type = "text/j

jQuery与js的区别,并有基本语法详解,

通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src="jquery-1.11.2.min.js"></script>: 引用文件的语句一定要放在最前面,即使写了新的js方法和引用的js文件,也要把Jquery文件的引用语句放在最前面.下面就说一下Jquery和js的区别: 1.找元素(两种方法一一对应): js方法: v

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?