Menu
第6章 jQuery与Ajax的应用
- 6.5jQuery中的Ajax
- 6.6序列化元素
- 6.7jQuery中的Ajax全局事件
第7章 jQuery插件的使用和写法
- 7.1jQuery表单验证插件—Validation
- 7.2jQuery表单插件—Form
- 7.4管理Cookie的插件—Cookie
- 7.6编写jQuery插件
第11章 jQuery性能优化和技巧
- 11.1jQuery性能优化
第6章 jQuery与Ajax的应用
跨域请求
- 第一步:配置Php 后台允许跨域
- 第二步:配置Apache web服务器跨域(httpd.conf中)
- 原始代码
- 改为以下代码
- 6.5jQuery中的Ajax
- jQuery ajax - load() 方法
- 语法：$.load(url,data,function(response,status,xhr))
- $.param()方法
- 它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。
var obj = $.param({name:"bob",age:17});
document.write(obj) // name=bob&age=17
6.7jQuery中的Ajax全局事件
jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面，而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。例如当 Ajax 请求开始时，会触发 ajaxStart()方法的回调函数；当 Ajax请求结束时，会触发 ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。在前面例子中，远程读取Flickr.com网站的图片速度可能会比较慢，如果在加载的过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信心。
此时，就需要为网页添加一个提示信息，常用的提示信息是“加载中...”，代码如下：
加载中…
然后用CSS控制元素隐藏，当Ajax请求开始的时候，将此元素显示，用来提示用户Ajax请求正在进行。当Ajax请求结束后，将此元素隐藏。代码如下：
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
}); //也可以使用链式写法
- 其它Ajax全局事件
- $.ajaxComplete() // 针对每一个请求
- $.ajaxError() // 当请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递；
- $.ajaxSend() // 在请求发送前执行的函数；
- $.ajaxSuccess() // 在请求成功时触发；
- ajaxStart()，ajaxStop() // 是针对文本中所有的ajax请求的，当第一个ajax请求发送时触发ajaxStart()事件，当最后一个ajax请求完成时，触发ajaxStop()事件，不同的是，ajaxSend()和ajaxComplete是针对文本中每一次的ajax请求的。所以如果你在文本中一次使用了3个请求，ajaxStart()会在第一个请求发起时触发，ajaxStop()会在最后一个请求结束时触发，所以它们常常组合用于显示loading等待框等。因为他们处理的是一群ajax请求，所以它们的回调函数中没有任何参数；
第7章 jQuery插件的使用和写法
7.1jQuery表单验证插件—Validation
-
最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件—Validation。 Validation拥有如下特点。
- 内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。
- 自定义验证规则：可以很方便地自定义验证规则。
- 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。
- 实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证。
引入Validation查件
// 下载地址：https://github.com/jquery-validation/jquery-validation/releases
// 插件本身
// 中文补丁
- 7.1.5 验证信息 and 7.1.6 自定义验证规则
7.2jQuery表单插件—Form
jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法—ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法：formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()和resetForm()等。
下载地址:http://jquery.malsup.com/form/#download
已有评论：
- 7.4管理Cookie的插件—Cookie
- 插件描述：jquery.cookie.js是一个强大的用来操作 Cookie 的插件，本文讲述如何对cookie进行写入，删除，修改等操作。
下载地址:插件描述：jquery.cookie.js是一个强大的用来操作 Cookie 的插件，本文讲述如何对cookie进行写入，删除，修改等操作。
用户名：
记住用户名
- expires：（Number|Date）有效期。可以设置一个整数作为有效期（单位：天），也可以直接设置一个日期对象作为Cookie的过期日期。如果指定日期为负数，例如已经过去的日子，那么此 Cookie 将被删除；如果不设置或者设置为null，那么此 Cookie 将被当作 Session Cookie处理，并且在浏览器关闭后删除。
- path：（String）cookie的路径属性。默认是创建该Cookie的页面路径。
- domain：（String）cookie的域名属性。默认是创建该Cookie的页面域名。
- secure：（Boolean）如果设为true，那么此 Cookie的传输会要求一个安全协议，例如HTTPS。
7.6编写jQuery插件
-
7.6.2 插件的基本要点
- jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JavaScript库插件混淆。例如命名为jquery.color.js。
- 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
- 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素。
- 可以通过this.each来遍历所有元素。
- 所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。具体方法可以参考后面的代码。
- 插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。
- 避免在插件内部使用
作为jQuery的别名。很多插件都是这么做的，本书也会利用这种形式。
7.6.3 插件中的闭包
// 可以在插件头尾都加上一个分号，以免他人的不规范代码给插件带来影响。
;(function test($) {
var name = "Bob";
var func = function(){
alert(name)
};
$.func = func // 让匿名函数内部的函数func()可在全局范围内访问；
})(jQuery)
$.func() // 调用匿名函数内部的func函数；func函数可调用到匿名函数内部的其它局部变量；
- 7.6.4 jQuery插件的机制
- jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。
// $.extend 扩展对象
function options(obj1, obj2){
target = {
name: "name",
age: "0",
job: null
}
// 用后面的对象数据合并到第一个target对象
jQuery.extend(target, obj1, obj2)
return options
}
newOptions = options({name:"Bob"},{age:1})
// 遍历对象的item
$.each(newOptions,function (k,v) {
alert(k + v)
})
- 7.6.5 编写jQuery插件
- 插件编写：
;(function ($) {
$.fn.extend({
"color":function (colorName) {
if(!colorName){
return this.css("color")
}else{
return this.css("color",colorName)
}
}})
})(jQuery);
- 插件使用
div test
姓名 性别 暂住地
张山
男
浙江宁波
李四
女
浙江杭州
王五
男
湖南长沙
找六
男
浙江温州
Rain
男
浙江杭州
MAXMAN
女
浙江杭州
姓名 性别 暂住地
张山
男
浙江宁波
李四
女
浙江杭州
王五
男
湖南长沙
找六
男
浙江温州
Rain
男
浙江杭州
MAXMAN
女
浙江杭州
//插件代码
;(function($){
$.fn.extend({
"alterBgColor": function(options){
var option = {
odd:"odd",
even:"even",
selected:"selected"
};
var newOptions = $.extend(option, options); // 扩展参数对象
$("tbody>tr:odd", this).addClass(newOptions.odd); // 给偶数行加上odd class
$("tbody>tr:even", this).addClass(newOptions.even);
$("tbody>tr", this).click(function () { // 给选中的table的tr加上click事件
var hasSelected = $(this).hasClass(newOptions.selected); //判断单击选中的tr是否有class selected
// 如果选中的tr已经有class selected 则去掉， 没有则加上；再找到单选框子元素，做同步勾选或取消勾选操作；
$(this)[hasSelected? "removeClass": "addClass"](newOptions.selected).find(':checkbox').attr('checked',!hasSelected);
})
//如果单选框默认情况下是选择的，则自动加上class selected， 即高色显示
$('tbody>tr:has(:checked)',this).addClass(newOptions.selected);
return this //返回jQuery对象
}
})
})(jQuery)
- 封装全局函数的插件
//html代码
// 插件代码
;(function ($) {
$.extend({"ltrim":function(text){ // 去除左空格的全局函数
return (text||"").replace(/^\s+/g, ""); //用正则表达式去掉左空格
},
"rtrim":function(text) {
return (text||"").replace(/\s+$/g, "")
}
})
})(jQuery);
- (text || "")部分是用于防止传递进来的text这个字符串变量处于未定义之类的特殊状态。如果text是undefined，则返回字符串""，否则返回字符串text。这个处理是为了保证接下来的字符串替换方法replace()方法不会出错。
- $.fn.extend 和 $.extend 的区别
- $.extend 是扩展的jQuery这个类本身的方法, 例如$.functionName()
- $.fn.extend 拓展的是jQuery对象（原型的）的方法， 例如$("#abc").functionName()， 用在jQuery对象上面。
- 自定义选择器
- jQuery 提供了一套方法让用户可以通过制作选择器插件来使用自定义选择器，从而使 jQuery的选择器功能更加完善。
- 基本格式：
$.expr[':'].test = function(obj, index, meta, stack) {
/* obj - is a current DOM element 当前DOM元素
index - the current loop index in stack 当前元素在stack中的索引，
meta - meta data about your selector !!! 用来存参数值，详见带参数的自定义选择器。
stack - stack of all elements to loop 选择器所选中的元素集。
Return true to include current element 返回 true 就包含当前元素
Return false to explude current element 返回 false 就抛弃当前元素
*/
};
- 调用方法：
$('.someClasses:test').doSomething();
- 创建带参数的自定义选择器，通过meta来实现.
$('.someClasses:test(argument)').doSomething();
- meta 就会得到如下格式的数组：
[
':test(argument)', // full selector 整个自定义选择器
'test', // only selector 自定义选择器名称
'', // quotes used 使用了什么引号(很明显这里没有)
'argument' // parameters 参数
]
- 例如调用：
$('.someClasses:test("arg1, arg2")').doSomething();
- meta 就会得到如下格式的数组：
[
':test("arg1, arg2")', // full selector 整个自定义选择器
'test', // only selector 自定义选择器名称
'"', // quotes used 使用了什么引号(这里用的是双引号)
'arg1, arg2' // parameters 参数
]
- 例子：
$.expr[':'].withAttr = function(obj, index, meta, stack){
return ($(obj).attr(meta[3]) != '');
};
- 调用：
$('a:withAttr(rel)').css('background-color', 'yellow');
第11章 jQuery性能优化和技巧
- 11.1jQuery性能优化
-
- 使用最新版本的jQuery类库
- 2.使用合适的选择器
- 选择器性能从高到低：
- $("#id")
- ("div")，$("input")
- $(".class")
- $("[attribute=value]")
- $(":hidden")
- 注意：
- 1.尽量使用ID选择器
- 2.尽量给选择器指定上下文
- 3．缓存对象
- 如果你打算在其他函数中使用jQuery对象，那么你可以把它们缓存到全局环境中。如下代码所示：
//在全局范围定义一个对象 (例如: window对象)
window.$my = {
head : $("head"),
traffic_light : $("#traffic_light"),
traffic_button : $("#traffic_button")
};
function do_something(){
// 现在你可以引用存储的结果并操作它们
var script = document.createElement("script");
$my.head.append(script);
// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
$my.cool_results = $("#some_ul li");
$my.other_results = $("#some_table td");
// 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css("border-color", "red");
$my.traffic_light.css("border-color", "green");
}
//你也可以在其他函数中使用它
//记住，永远不要让相同的选择器在你的代码里出现多次。
- 4.循环时的DOM操作
- 使用jQuery可以很方便的添加，删除或者修改DOM节点，但是在一些循环，例如for()，while()或者$.each()中处理节点时，下面有个实例值得大家注意，代码如下：
var top_100_list = [...], // 假设这里是100个独一无二的字符串
$mylist = $("#mylist"); // jQuery选择到 元素
for (var i=0, l=top_100_list.length; i" + top_100_list[i] + "");
}
- 以上代码中，我们将每一个新添加的标签元素都作为一个节点添加容器ID中，实际上jQuery操作消耗的性能也不低，所以更好的方式是尽可能的减少DOM操作，这里应该将整个元素字符串在插入DOM之前全部创建好，修改代码如下：
var top_100_list = [...] , $mylist = $("#mylist"),
top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i";
}
$mylist.html(top_100_li);
- 5.数组方式使用jQuery对象
- 在性能方面，建议使用简单for或者while循环来处理，而不是$.each()，这样能使你的代码更快。
$.each(array, function (i) {
array[i] = i；
})；
//使用for代替each()方法，代码如下：
var array = new Array()；
for (var i=0； i< array.length； i++) {
array[i] = i；
}
- 6.事件代理
- 每一个 JavaScript 事件（例如：click，mouseover 等）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。比如, 我们要为一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：
$('#myTable td').click(function(){
$(this).css('background', 'red');
});
- 假设有100个td元素，在使用以上方式的时候，你绑定了100个事件，这将带来很负面的性能影响。那么有什么更好的方式呢？
代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素，代码如下：
$('#myTable').click(function(e) {
var $clicked = $(e.target); // e.target 捕捉到触发的目标元素
$clicked.css('background', 'red');
});
- 同时，在jQuery 1.7中提供了一个新的方式on()，来帮助你将整个事件监听封装到一个便利方法中，如下所示：
$('#myTable').on('click','td',function() {
$(this).css('background', 'red');
});
- 7．将你的代码转化成jQuery插件
- 8．使用join()来拼接字符串
- 也许你之前一直使用"+"来拼接长字符串，现在你可以改改了。虽然它可能会有点奇怪，但它确实有助于优化性能，尤其是长字符串处理的时候。首先创建一个数组，然后循环，最后使用join()把数组转化为字符串，代码如下：
var array = [];
for(var i=0;i<=10000;i++) {
array[i] = ''+i+' ';
}
$('#list').html(array.join(''));
- 9．合理利用HTML5的Data属性
- HTML 5的data属性可以帮助我们插入数据，特别是前后端的数据交换。jQuery的data()方法，有效的利用HTML5的属性，来自动得到数据。下面是个例子：
//为了读取数据，你需要使用如下代码：
$("#d1").data("role"); // "page"
$("#d1").data("lastValue"); // 43
$("#d1").data("options").name; // "John";
- 10．尽量使用原生的JavaScript方法
- 11．压缩JavaScript