《锋利的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插件:分为交互、微件、效果库
《锋利的jQuery》心得笔记--Three Sections的更多相关文章
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 《锋利的jQuery》心得笔记--Four Sections
第八章 1. 当父元素设置position:relative的时候,子元素设置position:absolute.这个子元素设置在父元素的任何位置. 第九章 1. 对可视区进行纠正,通知浏 ...
- 《锋利的jQuery》心得笔记--Two Sections
第三章 1. DOM操作(节点) 1) 查找节点可以查找元素节点和属性节点 2) 创建节点: (1) 创建元素节点 var addLi = $(“&l ...
- 《锋利的jQuery》心得笔记--One Sections
第一章 1. $是jQuery的一个简写形式 2. 在jQuery中无法使用DOM对象的任何方法:比如:$ (“#id”).innerHTML.$ (“#id”).checked, 可以使 ...
- 锋利的JQuery 学习笔记
第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...
- 锋利的jquery学习笔记
1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
随机推荐
- dsPIC33EP 高速PWM模块初始化设置及应用
//文件 p33pwm6.h #ifndef _P33PWM6_H_ #define _P33PWM6_H_ //#include "p33pwm6.h" #define FSYN ...
- [AngularJS+ GSAP] Greensock TimelineLite Animation Sequences
TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequen ...
- 能在你离开时照顾你的宠物的3D打印机器人
您的宠物很可爱吧,您要离开时怎么办?找宠物公司来照顾他们?现在不用了.加拿大大学生推出了其3D打印的宠物机器人PetBot,它能照顾您的宠物,让您远程监控宠物,并能让您和宠物互动. “有 些人认为宠物 ...
- 一行命令搞定VS2012无法安装cocos2d-x-2.1.4及创建跨平台项目(二)
转自:http://blog.csdn.net/yangjingui/article/details/9418843 由于上次发了一个比较二的方法来解决VS2012无法安装cocos2d-x-2.1. ...
- 之前的Android项目报错,新建Android项目报错,代码中找不到错误解决方案
打开一年前的东西,结果发现里面的android项目全部有个红叉,也找不到错误.新建一个项目也报错,首先确定自己的环境应该没问题,然后通过查看网上的资料,发现可能是debug的keystore到期啦. ...
- php & 引用
引用的作用: 如果程序比较大,引用同一个对象的变量比较多,并且希望用完该对象后手工清除它,个人建议用 "&" 方式,然后用$var=null的方式清除. 其它时候还是用ph ...
- NULL, '\0',0 '0'的区别
如题,在程序中经常遇到NULL,和'\0',常常疑惑它们是什么关系,其实它们的值是一样的,只不过表现的形式不一样: 1.NULL; NULL 即空指针,在C和C++中的形式不一样,msdn上有如下的内 ...
- Python练习题 004:判断某日期是该年的第几天
[Python练习题 004]输入某年某月某日,判断这一天是这一年的第几天? ---------------------------------------------- 这题竟然写了 28 行代码! ...
- 将字符转换为unicode码
将字符转换为unicode码: /** * unicode转义字符 * @param ch * @param out */ public static void unicodeEscape(int c ...
- [Javascript] “||”和“&&”的灵活运用
引用URL : http://my249645546.iteye.com/blog/1553202 你是否看到过这样的代码:a=a||""; 可能javascript初学者会对此感 ...