从字面意思来看,jquery.min.js 是 jquery.js的迷你版本,功能都一样,只是jquery.js里面是没有进行处理的源代码,方便人们阅读与研究,而jquery.min.js是处理过的代码,在浏览器的开发者模式可以看到(F12)可以看到代码都进行过特殊的处理,如变量的名称基本都写成一个字母,而且格式缩进都被删除了.所以文件容量比较小(min),一般在网页中调用这个文件.
PS:附加一个下载地址:http://www.jq22.com/jquery-info122
二:JQuery 选择器
这里有篇比较全的文章:http://www.cnblogs.com/fangcaihuangshang/p/6091328.html
上面讲得很全,总结得很好,在这里就不多做介绍
三:页面初始化加载
JS初始化加载:是页面全部加载完成才执行初始化加载。
1,在body标签里面添加onload事件,绑定要初始化的方法
<script> function test(){ alert("页面初始化加载JS版") } </script> </head> <body class="id1" onload="test()">
2,直接在JS里面绑定初始化方法
<script> window.onload=function(){ alert("页面初始化加载JS版") } </script> </head> <body class="id1"> </body>
JQuery初始化加载: 等待页面加载完数据,以及页面部分元素(不包括图片、视频),
1,代码如下
$(function(){ alert("JQuery First to load when the browser page initialize"); });
2,使用ready
$(document).ready(function(){ alert("JQuery First to load when the browser page initialize"); });
3,代码如下
jQuery(function($){ alert("JQuery First to load when the browser page initialize"); });
PS:由于jquery使用$符号,和有些组件例如dwr就有冲突,为了解决这个问题,可以使用
五:JQuery Ajax与原生Ajax的用法
AJAX 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制。它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面。另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载。
原生Ajax要判断浏览器,而JQuery则完全的处理了这个问题
JQuery ajax 代码
$.ajax({ url:‘/comm/test1.php‘, type:‘POST‘, //GET async:true, //或false,是否异步 data:{ name:‘yang‘,age:25 }, timeout:5000, //超时时间 dataType:‘json‘, //返回的数据格式:json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) console.log(‘发送前‘) }, success:function(data,textStatus,jqXHR){ console.log(data) console.log(textStatus) console.log(jqXHR) }, error:function(xhr,textStatus){ console.log(‘错误‘) console.log(xhr) console.log(textStatus) }, complete:function(){ console.log(‘结束‘) } })
原生ajax代码
function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 var xmlHttpRequest; if (window.XMLHttpRequest) { //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlHttpRequest = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的BUG进行修正 if (xmlHttpRequest.overrideMimeType) { xmlHttpRequest.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //针对IE6,IE5.5,IE5 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中 //排在前面的版本较新 var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; for ( var i = 0; i < activexName.length; i++) { try { //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建 xmlHttpRequest = new ActiveXObject(activexName[i]); if(xmlHttpRequest){ break; } } catch (e) { } } } return xmlHttpRequest; } function get(){ var req = createXMLHTTPRequest(); if(req){ req.open("GET", "http://test.com/?keywords=手机", true); req.onreadystatechange = function(){ if(req.readyState == 4){ if(req.status == 200){ alert("success"); }else{ alert("error"); } } } req.send(null); } } function post(){ var req = createXMLHTTPRequest(); if(req){ req.open("POST", "http://test.com/", true); req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;"); req.send("keywords=手机"); req.onreadystatechange = function(){ if(req.readyState == 4){ if(req.status == 200){ alert("success"); }else{ alert("error"); } } } } }
PS:
readyState有五种状态:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
1 (载入):已经调用open() 方法,但尚未发送请求;
2 (载入完成): 请求已经发送完成;
3 (交互):可以接收到部分响应数据;
4 (完成):已经接收到了全部数据,并且连接已经关闭。
如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种:
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
六:Json 与 Jsonp的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.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){ alert(‘您查询到航班信息:票价: ‘ + json.price + ‘ 元,余票: ‘ + json.tickets + ‘ 张。‘); }, error: function(){ alert(‘fail‘); } }); }); </script> </head> <body> </body> </html>
说明:
1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。
4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。
总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变着一点!
PS:暂时先写到这里,后期会有继续的跟进。
原文:http://www.cnblogs.com/fangcaihuangshang/p/6091485.html