《锋利的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=" ...
随机推荐
- Android操作系统服务(Context.getSystemService() )
getSystemService是Android很重要的一个API,它是Activity的一个方法,根据传入的NAME来取得对应的Object,然后转换成相应的服务对象.下面介绍系统相应的服务: 传入 ...
- 【优先队列】HDU 1873——看病找医生
来源:点击打开链接 看路径记录的BFS之前,再看一遍优先队列的用法. 优先队列的排序规则可以用运算符重载的方式完成,通常意义下,应该用friend bool operator <进行重载. #i ...
- 关于androidManifest.xml的概叙以及intent-filter的详细分析
AndroidManifest.xml配置文件对于Android应用开发来说是比较细但又很重要的基础知识,本文旨在总结该配置文件中常用到的几个属性,以便日后查阅,至于那些比较细的属性,主要是平时开发比 ...
- ApplePay高调入华,教你在app里上线ApplePay
ApplePay在中国上线后,就有许多线上app前后脚加入了对其的接入支持,个人比较喜欢的ENJOY也抢在首批接入了ApplePay应用内支付.本文将分享作者的接入经验. ApplePay是苹果公 ...
- java邮件发送 qq与163邮箱互发和qq和163邮箱发送其他邮箱实例
研究了近一天的时间,通过查阅相关资料,终于对java发送邮件的机制,原理有了一点点的理解,希望能够帮到大家! 1.首先要向你的项目里导入1个jar包:mail-1.4.4.jar即可(实现qq和163 ...
- ASP.NET页面与IIS底层交互和工作原理详解(第一回)
引言 我查阅过不少Asp.Net的书籍,发现大多数作者都是站在一个比较高的层次上讲解Asp.Net.他们耐心.细致地告诉你如何一步步拖放控件.设置控件属性.编写CodeBehind代码,以实现某个特定 ...
- Java Script基础(八) Array数组对象
一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...
- java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext
***************************错误提示************************************************ SEVERE: A child cont ...
- jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- FastJson的使用方法总结
本文参考:http://www.tuicool.com/articles/zUbQfa 还可参考:https://www.iflym.com/index.php/code/alibaba-fastjs ...