JQuery 和JavaScript的区别
Google提供的jquery包:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
http://code.jquery.com/jquery-1.6.min.js
区别如下:
1 定位元素
JS
document.getElementById("abc")
jQuery
$(".abc") 通过class定位
$("div") 通过标签定位
$("#id") 通过id定位
需要注意的是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); 不可用
abc.removeAttr("disabled"); 恢复可用
8 修改元素样式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);
9 修改元素class
JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");
10 Ajax
JS
自己创建对象,还得处理浏览器兼容的等问题。
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
function recall(result) {
alert(result);
//如果返回的是json,则如下处理
//result = eval('(' + result + ')');
//alert(result);
}
$.post("abc.php", postvalue, recall);
11 判断复选框是否选中
jQuery
if(abc.attr("checked") == "checked")
注意:.attr("checked") == true实际上不能用
12 跨域访问
JS
方式1:
createXMLHTTPRequext();
xmlhttp.Open("get", "http://localhost/example.htm", false);xmlhttp.Send(xmldoc);
方式2:
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
方式3:
$.get(url,{params:str },function(data,status){})
.fail(function() {})
.always(function() {});
jQuery
方式1:
$.ajax({
type: 'POST',
url: url ,
data: data ,
dataType: dataType,
success: success
});
方式2:
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){ },
error: function(){}
});
JQuery 和JavaScript的区别的更多相关文章
- jquery和javascript的区别(常用方法比较)
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单.人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能.JavaScript 与JQu ...
- jquery和javascript的区别
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较 jquery 就对j ...
- 2018-08-26 jQuery与javaScript的区别及核心方法
1.jq对象就是js new Object 生成的普通对象. 2.jq对象与js对象,他们的方法不能共用! 3.jq对象与js对象的相互转化: js对象转jq对象 -> $(js_obj);// ...
- jQuery页面加载完毕事件及jQuery与JavaScript的比较
1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...
- JQuery笔记:JQuery和JavaScript的联系与区别
来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...
- 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...
- jQuery.extend和jQuery.fn.extend的区别【转】
解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...
- JQUERY与JS的区别
JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...
- jquery deferred done then区别
jquery deferred done then区别 deferred是jquery 对promise的实现. 以下内容基于jquery 1.8及以上版本 deferred具有then done等属 ...
随机推荐
- nios II--实验1——hello_world硬件部分
hello_world 硬件开发 新建原理图 1.打开Quartus II 11.0,新建一个工程,File -> New Project Wizard…,忽略Introduction,之间单击 ...
- Myeclipse 2015 stable 2.0 完美破解方法
2015-08-21 以前写了一篇<Myeclipse 2015 stable 1.0 完美破解方法>,现 在跟新一下Myeclipse 2015 stable 2.0 破解方法,此方法 ...
- 十天冲刺---Day2
站立式会议 站立式会议内容总结: git上Issues新增内容: 燃尽图 照片
- 《锋利的jQuery》读书笔记
jQuery理念:write less, do more! 第 一 章一:jQuery简介 a:轻量级 b:强大选择器 c:DOM封装 d:ajax封装 e:不污染顶级变量 只建立一个jQuery对象 ...
- .net的Hello World之旅
class Program { //这是主函数,是程序的入口 static void Main(string[] args) { ...
- 【BZOJ 2733】【HNOI 2012】永无乡 Splay启发式合并
启发式合并而已啦,, 调试时发现的错误点:insert后没有splay,把要拆开的树的点插入另一个树时没有把ch[2]和fa设为null,找第k大时没有先减k,,, 都是常犯的错误,比赛时再这么粗心就 ...
- 素数筛 uva 543
给你一个n求出n由2个奇质因子的和 这2个因子差最大 没有就输出'Goldbach's conjecture is wrong. #include<stdio.h> #include&l ...
- Android中图像变换Matrix的原理、代码验证和应用(二)
第二部分 代码验证 在第一部分中讲到的各种图像变换的验证代码如下,一共列出了10种情况.如果要验证其中的某一种情况,只需将相应的代码反注释即可.试验中用到的图片: 其尺寸为162 x 251. 每种变 ...
- C#-WinForm-跨窗体 构造函数传值 及应用—登录式窗口传值、如何关闭主页面时关闭应用程序、如何打开唯一窗口—★★★★★五星重量级
构造函数可以传任意类型的值,并可以同时传多个值 结构函数传值的初步应用--简单的登陆式界面 现在我有两个窗体Form3和Form4,如下,如何点击Form3中的按钮后,打开Form4并将Form3中的 ...
- 【奶昔队ROUND#1】
奶昔队Round #1 热身 (奶昔队不是真正的队,是群) CodeForces 435C Cardiogram 模拟,不过我做的时候不是模拟,是计算...(写了好久,还wa了几次),现在看了别人的代 ...