《锋利的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)

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插件：分为交互、微件、效果库

巴特西

《锋利的jQuery》心得笔记--Three Sections

最新文章

热门文章