《jQuery Cookbook》学习笔记

第一章：基础

1.1    $('input',$('form'))：在form中寻找input

1.2    .filter&.find：前者只过滤当前包装集里的元素，后者返回当前包装集的子元素

1.3    .end：返回破坏性修改（忽视不是破坏性修改元素的方法）前的包装集，可叠加使用（链式操作时必须注意当前包装集是啥，所以有必要时必须注意使用.end()来返回到相应要操作的祖先包装集）

1.4    .andSelf：将前一个集合并到当前集合

1.5    $('li:eq(x)')：用eq索引选择li集中第x+1个元素

1.6    

/*
html:<ul id='a'><li>xx</>..</>
<ul id='b'></>
*/
$('ul#a li')
  .click(function(){alert('xxx')})
  .parent()//当前选择集为ul
    .clone(true)//克隆包括子元素以及附加到克隆元素的任何事件
      .find('li')//注意，这里的li仅指clone元素后代中的li元素
      .appendTo('#b')
    .end()//当前选择集为克隆的ul元素
  .end()//当前选择集为原始的ul
  .remove();//经测试有没有这个操作都一样？？不知道书里想干嘛

第二章：选择元素

2.1    >：选择直接子元素（区分好后代元素和子元素）；

         +：选择相邻兄弟元素；

         .siblings('x,y,z')：选择所有x,y,z的兄弟元素；

         $('li.selected~li')：选择li.selected之后的所有li兄弟

2.2    索引选择（类似CSS）：:even匹配偶数 :odd匹配奇数 :eq(n)索引n单个元素 :lt(n)索引小于n :gt... :animated匹配正在连续变化的元素 :contains文本内容 :has元素内容 :not非

2.3    创建自定义过滤器选择器（如:xxxx()）

//创建一个
$.expr[':'].newFilter = 
  function(elem,index,match){
  return xxx
};
//创建多个
$.extend($.expr[':'],{
  new1 : function(elem, index, match){
    return xx
};
  new2 : ....
});

第三章：进阶

3.1    将jquery选中对象转化为DOM原始对象以使用传统的DOM属性和方法：

 

•              快速：$('div')[0]，即选中集后[]选择。
•              使用get()，返回一个数组，故方便使用这个方法来操作数组如逆序排列：

$(document).ready(function(){
  var lis = $('ul li').get().reverse();
  $('ul').empty();
  $.each(lis,function(i){
    $('ul').append('<li>' + lis[i].innerHTML + '</li>');
  });
});

3.2    使用index()索引查找相应元素并进行操作：如果index(x)中x这个参数无法找到则返回-1，故可用if $(this).index(x) >== 0判断实现

第四章：工具

4.1    检测浏览器支持问题：使用jQuery.support。IE处理href属性时返回完整url而非href内容，所以在获取<a>中href内容时有必要使用if(! jQuery.support.hrefNormalized){xxxx}处理字符串

4.2    .grep()返回过滤后的数组，其中的回调函数返回true or false，真则保留数组中元素假则反之

4.3    .merge(arr1,arr2)合并数组，并用.unique()删除其中重复的元素

4.4    jQuery.isFunction(document.getElementById)在IE中返回假值

4.5    在用户提交表单中进行对前后空格的过滤并返回值：

$(document).ready(function(){
  $('input').blur(function(){
    var value = $.trim($(this).val());//注意这里是$调用的trim并将.val()作为其参数
  });
    $(this).val(value);//修改
});

4.6    使用jQuery.data将对象和数据附加到DOM中且避免内存泄露

$('#myId').data('myObject',{
  label: $('#myLabel')[0]
});
var myObject = $('myId').data('myObject');
myObject.label;

4.7    开发个允许用户传参的插件

(function($){
  $.fn.myPlugin = function(options){
    options = $.extend({
      message: 'hehe world',
      css:{
        color:'red'
      }
     },options);
     return this.each(function(){
       $(this).css(options.css).html(options.message);
      });
    };
})(jQuery);

第五章：More Fun More Speed

5.1    编写个自定义迭代器，使用setTimeout()延迟回调

jQuery.slowEach = function(array, interval ,callback){
  if(!array.length) return;
  var i = 0;
  next();
  function next(){
    if(callback.call(array[i], i, array[i])!== false)
      if(++i < array.length)
        setTimeout(next, interval);
  }
  return array;
};
jQuery.fn.slowEach = function(interval, callback){
  return jQuery.slowEach(this, interval, callback);
};
//每隔半秒显示一个元素
$('.reveal').slowEach(500, function(){
  $(this).show();
});

5.2    提高网站加载效率

 

• 缓存jQuery对象：定义变量var xx = $('xx')可以避免多次选择器寻找（此处xx变量名最好以$符号开头）
• 使用选择器时最好进行详细选择：$('#xx div.xxx') > $('.xxx')............
• 更快加载表格（数据从JSON获取）：使用for替代$.each并将JSON中重复的全放入for循环中；使用.join()构件数组instead of using append()；用.innerHTML or .html()替代DOM操作。例子懒得post上来了都是这么回事
• 在某些浏览器中使用++i会快于i++的速度，要习惯这个循环写法。for(i=-1; i<length; ++i)
• 当使用众多插件时合并为一个.js文件——减少服务器请求

5.3    一些陷阱

 

• 当使用jQuery操控CSS样式表时，要注意对属性名的写法。如font-size，不能写作fontsize，only fontSize or font-size【强烈建议使用驼峰式写法即fontSize，因为用jQuery指定动画属性时必须用驼峰否则无法显示动画！！】

5.4    对于调试

 

• 当使用方法链出错时，学会分解方法链并进行单步调试如：$('xx').css({fontsize: '23px'}).find('xxx').show();分解如下

var $xx = $('xx');
$xx.css({fontsize: '23px'});
var $xxx = $xx.find('xxx');
$xxx.show;

• for better debugging使用未压缩版的jQuery

第六章：尺寸

6.1    jQuery中针对盒子的方法名：height, innerHeight, outerHeight。width一样

6.2    offset返回元素相对于文档偏移位置的一个对象；position返回相对于第一个定位双亲元素位置的对象

6.3    scrollTop(距离长度)：滚动至参数处

6.4    根据浏览器宽度切换样式表：

• 修改元素的类
• 修改href属性（会重新对服务器请求新的CSS文件，尽量不用）
• 包含所有尺寸样式表，通过获取size后对不适应的link元素的disabled属性进行修改

第七章：特效

7.1    animate({CSS属性: toggle（终点值） ,CSS属性: toggle, .....},'速度（slow or fast or default）')最常用简单用法

7.2    为众多元素应用连续特效：

$(document).ready(function(){
    		var $boxes = $('.box').hide(),//注意这里已经对.box类hide了
    		    div = 0;
    		$('#animate').click(function(){
    			$($boxex[div++] || []).fadeIn('slow', arguments.callee);//若没有下一个了则返回空数组；arguments.callee包含当前执行函数的引用，在这里可以用于递归函数调用~
    		});
    	});
		var $boxes = $('.box').hide(),//注意这里已经对.box类hide了
    		    div = 0;
    		$('#animate').click(function(){
    			$($boxex[div++] || []).fadeIn('slow', arguments.callee);//若没有下一个了则返回空数组；arguments.callee包含当前执行函数的引用，在这里可以用于递归函数调用~
    		});
    	});

7.3    复位动画：可在动画操作前添加stop()例如$('.box').stop().fadeTo(200,1); $('.box').stop().fadeTo(200,0)：如果在中途停止动画，如果此时不透明度为0.5，则下一个动画的出发点就在不透明度=0.5处（用于相反动画操作如悬停消失离开显示）。若添加多个动画，则必须多次调用stop()或者传递true作为stop()的第一个参数如$('.box').stop(true).fadeTo(..).animate(..)...。

第八章：事件

8.1    对不同数据重用处理程序函数：

funciton buttonClicked(e){
	jQuery('div.panel').hide();
	jQuery('#panel'+e.data.panel).show();
	jQuery('#desc').text('you clicked the '+e.data.color+' button');
}
//bind()接受可选的data参数（可以是任何类型，此处为对象），所以可以据此写个函数模板并绑定到各个要应用的选择集上
jQuery('#button1').bind('click',{panel:1, color:'red'},buttonClicked);
jQuery('#button2')..........

8.2    删除事件处理程序：为每个创建的插件使用单独的命名空间，在这个插件中绑定的任何处理程序必须添加到这个命名空间里，删除时只需“解除整个命名空间的绑定”即可删除所有相关的事件处理程序

//为事件绑定命名空间，使用时如点击写成.click.myPlugin即可
jQuery.fn.myPlugin = function(){
	return this
	    .bind('click.myPlugin', function(){
	    	...
	    })
	    .bind('mousedown.myPlugin', function(){
	    	...
	    })
	    ......
};
//解除绑定
jQuery.fn.disposeMyPlugin = function(){
	return this.unbind('.myPlugin');
};

8.3    阻止事件传播如表单提交检查

jQuery('form').submit(function(e){
	e.preventDefault();
	if(jQuery('#field').val() == '')
		e.stopImmediatePropagation();
}).submit(function(e){
	//上面函数不调用e.stopImmediatePropagation时执行
});

第十章：增强表单

10.1     像输入密钥一样，分几个输入框前一个填满自动跳到下一个，删除后光标自动定位到前一个

<fieldset class="autotab">
    	<legend>..</legend>
    	<input type="text" maxlength="4">
    	<input type="text" maxlength="4">
    	<input type="text" maxlength="4">
    	<input type="text" maxlength="4">
    </fieldset>

//jquery
    <script type="text/javascript">
    	$('.autotab input').bind('keydown keyup',function(event){
    		var keyCode = event.which;  //用event.which获取输入键值的ASCII码
    		var ignoreCode = ',9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,144,145,';//过滤像TAB一类的非显键值
    		if(ignoreCode.indexOf(','+keyCode+',') > -1){return;}
    		if (keyCode==8 && event.type=='keydown') {return;}//忽略退格键
    		var $this = $(this);
    		var currentLength = $this.val().length;
    		var max = $this.attr('maxlength');
    		if(keyCode==8 && currentLength==0){
    			$this.prev().focus();
    		}
    		if (currentLength==max) {
    			$this.next().focus();
    		}
    	});
    </script>

10.2    当要计算表单输入字符数长度时，可以使用.text()*1：.text()返回一个字符串，乘1转换为数字

10.3    当要过滤字符如仅限输入数字时，可以用bind将keydown和过滤函数绑定起来，其中过滤函数return true or false即可。当然，有时候用户会直接复制粘贴，所以这时候可以用方法链在.bind()后面再.bind('blur', function)，其中过滤函数用简单的正则表达式过滤并返回修改.val()即可。

第十二章：插件

12.1    在编写插件时，返回值需要this.each(function)用each()函数以便代码应用到所有结果