《锋利的jQuery》心得笔记--Three Sections
第六章
1、 JavaScript的Ajax的实现步骤：
1) 定义一个函数用来异步获取信息
function Ajax(){ }
2) 声明：
var xmlHttpReq = null;
3) 赋值(实现浏览器兼容)：
if(window.ActiveXObject){ xmlHttpReq = new ActiveXObject(“Microsoft.XMLHttp”); }else if(window. XMLHttpRequest){ xmlHttpReq = new XMLHttpRequest(); }
4) 初始化
xmlHttpReq.open(“GET”,”test.php”,true);//第三个参数是是否异步的
5) 设置回调函数。因为要做异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。
xmlHttpReq.onreadystatechange = RequestCallBack;
6) 发送请求，因为刚才发送的是GET，所以可以不指定参数或使用null
xmlHttpReq.send(null)
7)
function RequestCallBack(){ if(xmlHttpReq. readyState == 4){ if(xmlHttpReq.status == 200){ document.getElementById(“resText”).innerHTML= xmlHttpReq.responseText; } { }
2、 load()
1) 载入HTML方法：load(【url】,【data,可选】,【function,可选】)
2) 筛选载入的HTML方法：load(“test.html .class”)
3) 传递方式：无参是GET方式传递，有参会自动转为POST
(1) 无参(GET方式)：load(“test.html .class”,function(){})
(2) 有参(POST方式)：load(“test.html .class”,{name:”ccl”,age:”23”},function(){})
4) 回调参数：load(“test.html .class”,function(responseText,textStatus,XMLHttpReq){})
3、 $.get()和$.post()方法
1) $.get(url,【data,可选】,【function(data,textStatus){},可选】,【type(服务器返回的内容格式xml/html/script/json/text/_default) ,可选】)
(1) 【data】可以使用{ username:$(“#username”).val(),content:$(“#content”).val()}
(2) 【function(data,textStatus){}】:data返回的类型可以是xml/html/ json……
eg：接下来的内容写在function里面
(1st) html格式：（最简单）
$("#res”).html(data)
(2nd) xml格式
var username = $(data).find(“comment”).attr(“username”); var content = $(data).find(“comment content”).text(); var txtHtml = “<div class=”comment”><h6>”+username+”:</h6><p class=’para’>”+ content+”</p></div>”; $("#res”).html(txtHtml);
(3rd) json格式（可数据重用）
var username = $(data). username; var content = $(data). content; var txtHtml = “<div class=”comment”><h6>”+username+”:</h6><p class=’para’>”+ content+”</p></div>”; $("#res”).html(txtHtml);
2) $.post()传输的数据不受限制，相对比较安全，结构和使用方法和$.get相同
4、 $.getScript()直接加载js文件
$.getScript(‘test.js’,【function(){}，可选】)
5、 $.getJSON()直接加载JSON文件
$. getJSON (‘test.json’,【function(data){}，可选】)
6、 $.each(【data】,【function(){}】)，遍历的方法
7、 $.ajax(【只放一个参数，但是参数是可选的，参数是以key:value】)
//放多个参数，$.ajax({key:value, key:value, key:value})
8、 序列化元素
1) serialize() 能够将元素内容序列化为字符串，表单、其他选择器选取的元素都能用
$.get(url,$(“#forrm1”).serialize(),function(){}) $(“:checkbox,:radio”) .serialize()
2) serializeArray() 将DOM元素序列化后，返回JSON格式的数据，之后可以使用$.each()迭代输出
fields = $(“:checkbox,:radio”) . serializeArray (); $.each(fields,function(I, field){ $(“#res”).append(field.value+”,”); });
3) $.param()
eg:
obj = {a:1,b:2}
k = $.param(obj)//a=1&b=2
9、 全局事件
1) ajaxStart和 ajaxStop
<div id=”loading”>加载中……</div> $(“#loading”).ajaxStart(function(){ $(this).show() }) $(“#loading”).ajaxStop (function(){ $(this).hide() })
2) ajaxCompele()//请求完成时执行
3) ajaxError()
4) ajaxSend()
5) ajaxSuccess()
6) global设置为false，让某个ajax不受全局影响
$.ajax({global:false})
第七章
1、 验证
1) 自定义验证信息
(1) 在jQuery代码中增加
errorELement:"em", success:function(lable){ //lable指向上面的em标签 lable.text(" ").addClass("success"); }
(2) 在css中增加
em.error{ background: url(../img/exit.png) no-repeat 0px 0px; padding-left: 16px; } em.success{ background: url(../img/icon_success.png) no-repeat 0px 0px; padding-left: 16px; }
2) 自定义验证方法
$.validator.addMethod("postcode",function(value,element,params){
var postcode = /^[0-9]{6}$/;
return this.optional(element)||(postcode.test(value));
},"请填写正确的邮编");
2、 表单
1) ajaxForm()能接受0个或1个参数，单个参数可以是回调函数，也可以是options
2) ajaxSubmit()能接受0个或1个参数，单个参数可以是回调函数，也可以是options
var options = { target:’#out’//服务器返回来的内容放在这个元素中 brforeSubmit:showRequest //提交前的回调函数 success:showResponse//提交后的回调函数 url: //默认是form的action，申明则覆盖 type://默认是form的method，申明则覆盖 dataType：null//服务器返回来的类型，html、xml、json clearFrom：true//提交成功后清除所有表单的值 resetFrom：true//提交成功后重置所有表单的值 timeout：3000//限制请求时间，大于这个时间，跳出请求 } function showRequest(formData,jqForm,options){ var queryString = $.param(formData); //var formElement = jqForm[0];// jqForm封装了表单的元素 //var address = formElement.address.value; return true; } function showResponse((responseText, statusText,xhr,$form){ // statusText【success/error】 }
3、 模拟窗口插件
1) 调用静态窗口
(1) 法一：$(“#element-id”).modal();
(2) 法二：$(“#element-id”).modal({options});
$.modal(“<div><h1>XXXX</h1></div>”,{options});
2) 定义有样式的静态窗口：
(1) 通过外部的css,选项对象或者两个一起来应用样式，modal overlay、container、data元素的css选项分别是overlayCss、containerCss、dataCss，它们都是键值对属性，
(2) 内部定义了如下的css样式：simplemodal-overlay、simplemodal-container、simplemodal-data
4、 cookie
1) 写入cookie：$.cookie(‘the_cookie’,’the_value’);
2) 读取Cookie：$.cookie(‘the_cookie’);
3) 删除cookie：$.cookie(‘the_cookie’,null);
4) 其他可选参数：
cookie：$.cookie(‘the_cookie’,’the_value’，{ expires:7,//有效期 path:’/’,//cookie的路径属性 domain:’jquery.com’,//cookie的域名属性 secure:true//如果设为true，那cookie的传输会要求一个安全协议，例如HTTPS });
5、 UI插件：分为交互、微件、效果库
