标签：
jQuery设计思想：
（1）选择页面元素
css选择器：
$(document) 选择整个文档对象， $("#myId") 选择id为myId的页面元素， $("div.myClass")选择class为myClass的div元素
jQuery特有的选择器：
$("a:first")选择页面中第一个a元素，$("tr:odd")选择表格的奇数行，$("div:visible")选择可见的div元素。
（2）方法函数化
原生的：window.onload，innerHTML，onclick。
jQuery的:$()，html()，click()。
在jQuery代码中很少看到有等号出现的情况。因为它都函数化了，意思就是用函数的形式改写了原生的操作。比如:div.innerHTML = "chaojidan"，$("div").html("chaojidan")；div.onclick = function(){}，$("div").click(function(){});
（3）原生与jQuery的关系
原生和jQuery可以共存，比如：$("div").click(function(){ this.innerHTML = "chaojidan";})
原生和jQuery不能混用，比如：$("div").innerHTML = "chaojidan"; div.html("chaojidan")，这两个都是错误的写法。
（4）改变结果集
强大的过滤器：$("div").has("p")选择包含p元素的div元素，$("div").not(".myClass")选择class不等于myClass的div元素，$("div").filter(".myClass")选择class等于myClass的div元素。
相邻元素查找：$("div").next("p")选择div元素后面的（必须紧挨着）第一个p元素，$("div").parent()选择div元素的父元素，$("div").children()选择div元素的所有子元素。
（5）链式操作
$("div"). //找到页面上的所有div元素
find("h3"). //在div元素下找h3元素
eq(2). //取第三个h3元素
html("chaojidan"); //设置它的内容为chaojidan
jQuery还提供了.end方法，此方法可以使结果集后退一步。比如：
$("div"). //找到页面上的所有div元素
find("h3"). //在div元素下找h3元素
eq(2). //取第三个h3元素
html("chaojidan"). //设置它(第三个h3元素)的内容为chaojidan
end(). //此时的this指向就是在div元素下找h3元素的那个集合
.eq(0). //取第一个h3元素
.html("chaojidan2"); //设置它的内容为chaojidan2
（6）取值与赋值合体
$("h1").html(),没有参数，表示取出h1的值；$("h1").html("hello")，有参数，表示对h1进行赋值。
取值是对一组元素的第一个元素做操作，赋值是对一组中的所有元素做操作。
.css()，.attr()，这些函数，当传入一个参数时，是取值，当传入两个参数时，是赋值。
（7）元素的移形换位
直接移动该元素：$("div").insertAfter($("p"));把div元素移动到p元素的后面；$("p").appendTo($("div"));把p元素移动到div元素的里面。比如：$("div").insertAfter($("p")).css("background","red");这里会把div元素的背景颜色设置成红色。
移动其他元素：$("p").after($("div"))把div元素移到p元素的后面；$("div").append($("p"));把p元素移动到div元素的里面。比如：$("p").after($("div")).css("background","red");这里会把p元素的背景颜色设置成红色。
（8）强大的创建
$("#ul").append("<li>aaa</li>");创建一个li元素，把它添加到ul中。
$("<li>");创建一个li元素
$("div").clone().appendTo($("p"));克隆一个div元素，并把这个克隆的div添加到p元素里面，原来的那个div不变。
（9）工具方法
构造函数上的方法（静态方法）：$.each([],function(){})，$.trim()。原生的js可以调用这些方法。比如：var liList = document.getElementsByTagName("li");$.each(liList,function(index,element){});
原型上的方法（实例方法）：$("div").each(function(index,element){})
（10）事件操作
独立事件：click()针对click事件，mouseover()针对mouseover事件，比如:$("div").click(function(){})，点击div元素会触发回调函数。
通用事件：bind()，one()，unbind()，比如：$("div").bind("click mouseover",function(){})，这里给div元素绑定了click和mouseover两个事件。
jquery中，如果在回调函数中，返回false，表示阻止事件冒泡以及阻止默认操作。
在js原生方法中，div.onclick = function(){}，在回调函数返回false，也有一样的效果。
attachEvent也有一样的效果，但是addEventListener就不行。
（11）运动效果
常见效果：.fadeIn()淡入，.fadeOut()淡出，.slideDown()向下展开，.slideUp()向上卷起。
比如:$("#input1").toggle(function(){$("#div1").fadeOut()}, function(){$("#div1").fadeIn()})，点击按钮input1，就会把div隐藏，再次点击input1，就会把div显示。
复杂效果：.animate()动画操作，stop()。比如：
$("#div1").hover(
function(){
$(this).animate({
width:300,
height:300
})
},
function(){
$(this).animate({
width:200,
height:200
})
}
)
鼠标移入div元素，元素div就会变成大到300*300，鼠标移出div元素，元素div就会缩小到200*200.
stop方法是用来停止动画的。
（12）插件机制
在jQuery的源码上进行扩展。是其他人写的，不是jQuery官方写的，比如你自己也可以写一个基于jQuery的list列表插件list.js。在使用此插件时，你需要先引入jQuery，然后再引入你的list.js。如果想详细了解jQuery插件请看：http://www.cnblogs.com/chaojidan/p/4213942.html
（13）UI组件
jQuery官方提供的功能效果和UI样式。比如：选项卡Tab，拖拽Draggable。你使用这些功能效果时，除了需要引入jQeury外，还需要引入jQuery.ui.js（这个js文件里面实现了这些功能效果）。如果想深入了解jQuery UI，请看：http://www.cnblogs.com/chaojidan/p/4220941.html
加油！
标签：
原文地址：http://www.cnblogs.com/chaojidan/p/4212072.html
