(转)jQuery设计思想

jQuery设计思想 write less，do more
英文：api.jquery.com
中文：www.css88.com/jqapi-1.7/

优势：使用jquery不需要做兼容，而且使用方便。

1.选择网页元素

//css选择器：
$(document) //-选择整个文档对象
//jquery特有的表达式：
$('tr:odd') //-选择表格的奇数行
$('div:visible') //-选择可见的div元素

2.方法函数化

$()=window.onload
html()=innerHTML
click()=onclick

3.原生与JQ可以共存，但不能混用

$('#div1'.innerHTML) //-不执行

4.改变结果集

//强大的过滤器：
has()/not()/filter('.myclass') //-选择class等于myclass的元素
//相邻元素查找：
next()/parent()/children()

5.链式操作

 find()/eq()/end()

6.取值与赋值合体

.html() //无参数为取值，有参数为赋值
.attr() //获取/设置值,取值是一组中的第一个元素，赋值是所有的元素。

7.元素移形换位（改变页面原先结构顺序）
直接移动该元素（把div元素移动到p元素后面）：

$('div').insertAfter($('p')); 
$('div').appendTo($('p'));

移动其他元素（把p元素加到div元素前面）：

$('p').after($('div'));  
$('div').append($('p'));

区别：操作的元素不同。
8.强大的创建

$('#yl1').append('<li>aaaa</li>');
var oLi = $('<li>')
clone();

9.工具方法（写了两份）

//构造函数上的方法（静态方法）
$.each([],function(){});
$.trim($('div').attr('class'));//去掉class的前后空格
$.each = function(){}//源性上的方法
$('div').each(function(){});

//$.方法为工具方法，原生的JS也可以用
var aLi = document.getElementsByTagName('li');
$.each(aLi,function(index,elements){element.innerHTML = index;});
$.prototype.each = function(){}；

10.事件操作

//独立操作
click()/mouseover()
//通用事件
blind()/one()/unblind()/e:event/pageX
//阻止默认与冒泡
return false;/triggrt(),/toggle()
//循环执行
$('input').toggle(function(){},function());

11.运动特效

//常见效果：
fadeIn()//-淡入
fadeOut()//-淡出
slideDown()//-向下展开
slideUp()//-向上卷起
//复杂效果：
animate()/stop()//只执行一次，阻止前面的运动效果，只执行当前的运动效果。

12.插件机制
在JQ的源码上进行扩展，使用闭包形式，使所有变量是局部，作为工具函数，$.fn：扩展插件的方法。

(function(){
    $.fn.myname = function(){
        //代码
        //this是调用此方法/插件的元素
        //防止作用域问题，最好这样
        var This = this;
        //调用时：$(This).
    }
})(jQuery); //传jQuery，接受$,调用时使用

//插件调用：
$('#div1').muname();

13.其他JQ官方提供的功能效果和UI样式：UI组件 、jQuery-moblie