js与jQuery区别

jQuery能大大简化Javascript程序的编写。

要使用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实际上不能用,上面这个测试过能用

来源:http://www.2cto.com/kf/201405/301890.html

时间: 2024-10-24 04:54:36

js与jQuery区别的相关文章

js和jQuery区别

①.根据ID取元素 { JS:取到的是一个DOM对象. 例:var div = document.getElementByID("one"); JQUERY:取到的是一个JQUERY对象. 例:var div = $("#one");--括号里面是根据某个东西来找,相当于一个选择,如果我们要根据ID来找,在样式表里的ID是用#来表示的,所以在这里我们直接带入井号,整句的意思就是根据ID为one的来查找. } ②.根据class取元素,在数组里面如果要取DOM对象使用

offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>offsetWidth.clientWidth.width.scrollWidth区别及js与jQuery获取的方式</title> <script type="text/javascript" src="jquery.min.js"></

js和jQuery入口函数的区别

一.原生Js和jQuery入口函数加载模式不同. 1.原生Js会等到DOM元素加载完毕,并且图片也加载完毕才会执行: 2.jQuery会等到DOM元素加载完毕,但不会等到图片加载完毕就会执行. 二.编写多个入口函数的区别. 1.原生Js如果编写多个入口函数,后面编写的会覆盖前面编写的: 2.JQuery中编写多个入口函数,后面的不会覆盖前面的. 原文地址:https://www.cnblogs.com/misi/p/10389399.html

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的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

原生js和Jquery操作DOM

原生javascript和jQuery操作DOM的对比总结 目录: DOM元素节点:1)文档节点:2)元素节点:3)属性节点:4)文本节点:5)注释节点 1)创建节点 2)选择(访问)节点 3)操作: 1)节点操作 1)添加节点 2)删除节点 3)修改内容: 1)文本[text] 2)html 3)表单val 4)改变事件 2)CSS操作 3)动画 下文转自:http://www.jb51.net/article/103583.htm 这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一

js与jQuery实现方式对比汇总

CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" style="border:1px solid red;height:100px;width:100px;"></div> 1.控制元素的显示与隐藏 javascript方式 /*控制div隐藏*/ document.getElementById("ListCo

js day43 Jquery入门(回顾js,Jquery选择器,dom操作)

1     Javascript回顾 问题:Javascript能做什么? 1. 获取操作dom <style> .aa{ background:red} .bb{ background:blue} </style> <body> <div id="dv" title="提示信息" class="aa">AAAAAAAAA</div> <button onclick="f

js和jquery获取父级元素、子级元素、兄弟元素的方法(转)

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom"> <div></div> <div></div> <div></div> </div> var a = docu