很久没写JS了，或者说自从工作以来都没怎么写过JS，最近在开发要用到JS，瞬间懵逼了. 立即去菜鸟找入门教材来看，磕磕碰碰的总算搞定了。以下是学习过程中碰到的问题以及自己的理解。
一：jquery.js和jquery.min.js的区别
从字面意思来看，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" >
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就有冲突，为了解决这个问题，可以使用
代码如下: var ace=jQuery.noConflict(); 释放$给其他框架
四：JQuery 遍历
$(selector).each(function(index,element))
参数：必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置。
- element - 当前的元素（也可使用 "this" 选择器）。
五：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：暂时先写到这里,后期会有继续的跟进。