一、选择网页元素
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。
- 选择表达式—CSS选择器
| $(document) | 选择整个文档对象 |
| $(“#myId”) | 选择ID为myId的网页元素 |
| $(“div.myClass”) | 选择class为myClass的div元素 |
| $(“input[name=first]”) | 选择name属性等于first的input元素 |
-
选择表达式—jQuery特有表达式
| $(“a:first”) | 选择网页中第一个a元素 |
| $(“tr:odd”) | 选择表格的奇数行 |
| $(“#myForm :input”) | 选择表单中的input元素 |
| $(“div:visible”) | 选择可见的div元素 |
| $(“div:gt(2)”) | 选择所有的div元素，除了前三个 |
| $(“div:animated”) | 选择当前处于动画状态的div元素 |
二、改变结果集
jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。
| $(“div”).has(“p”); | 选择包含p元素的div元素 |
| $(“div”).not(“.myClass”); | 选择class不等于myClass的div元素 |
| $(“div”).filter(“.myClass”); | 选择class等于myClass的div元素 |
| $(“div”).first(); | 选择第1个div元素 |
| $(“div”).eq(5); | 选择第6个div元素 |
jQuery也提供了在DOM树上的一个节点寻找相关其他节点：
| $(“div”).next(“p”); | 选择div元素后面的第一个p元素 |
| $(“div”).parent(); | 选择div元素的父元素 |
| $(“div”).closest(“form”); | 选择离div最近的那个form父元素 |
| $(“div”).children(); | 选择div的所有子元素 |
| $(“div”).siblings(); | 选择div的同级元素 |
三、链式操作
jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来。
例如：
- $(“div”).find(“h3”).eq(2).html(“Hello”); //找到div元素，选择其中的全部h3元素，选取第3个h3元素，将其内容改为hello
- $(“div”).find(“h3”).eq(2).html(“Hello”).end().eq(0).html(“World”); //找到div元素，选择其中的全部h3元素，选取第3个h3元素，将其内容改为hello，返回选择全部h3元素这步，选中第1个h3元素，将他的内容改为World
四、元素的操作：取值和赋值
jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。
- $(“h1”).html(); //html()没有参数，表示取出h1的值
- $(“h1”).html(“Hello”); //html()有参数Hello，表示对h1进行赋值
常见的取值和赋值函数
| .html() | 取出或设置html内容 |
| .text() | 取出或设置text内容 |
| .attr() | 取出或设置某个属性的值 |
| .width() | 取出或设置某个元素的宽度 |
| .height() | 取出或设置某个元素的高度 |
| .val() | 取出某个表单元素的值 |
注：如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（除.text()例外，它取出所有元素的text内容）。
五、元素的操作：移动
jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
| .insertAfter()和.after() | 在现存元素的外部，从后面插入元素 |
| .insertBefore()和.before() | 在现存元素的外部，从前面插入元素 |
| .appendTo()和.append() | 在现存元素的内部，从后面插入元素 |
| .prependTo()和.prepend() | 在现存元素的内部，从前面插入元素 |
举例说明.insertAfter()和.after() 差别：
-
- $(“div”).insertAfter($(“p”)); //把div元素移动p元素后面
- $(“p”).after($(“div”)); //把p元素加到div元素前面
六、元素的操作：复制、删除和创建
元素操作方法：
| .clone() | 复制元素 |
| .remove() | 删除元素，不保留被删除元素的事件 |
| .detach() | 删除元素，保留被删除元素的事件，利于重新插入文档时使用 |
| .empty() | 清空元素，不删除元素 |
创建元素
-
- $(“<p>Hello</p>”);
- $(“<li class=‘new’>new list item</li>”);
- $(“ul”).append(“<li>list item</li>”);
七、工具方法
jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。
- 理解工具方法的实质：定义在jQuery构造函数上的方法，即jQuery.method()，可以直接调用。
- 操作元素的方法的实质：定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，必须生成实例（即选中元素）后使用。
常用的工具方法
| $.trim() | 去除字符串两端的空格。 |
| $.each() | 遍历一个数组或对象。 |
| $.inArray() | 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。 |
| $.grep() | 返回数组中符合某种标准的元素。 |
| $.extend() | 将多个对象，合并到第一个对象。 |
| $.makeArray() | 将对象转化为数组。 |
| $.type() | 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。 |
| $.isArray() | 判断某个参数是否为数组。 |
| $.isEmptyObject() | 判断某个对象是否为空（不含有任何属性） |
| $.isFunction() | 判断某个参数是否为函数。 |
| $.isPlainObject() | 判断某个参数是否为用"{}"或"new Object"建立的对象。 |
| $.support() | 判断浏览器是否支持某个特性。 |
八、事件操作
jQuery设计思想之七，就是把事件直接绑定在网页元素之上。
例如：
$(“p”).click(function(){
alert(“Hello”);
});
jQuery主要事件
| .blur() | 表单元素失去焦点。 |
| .change() | 表单元素的值发生变化 |
| .click() | 鼠标单击 |
| .dblclick() | 鼠标双击 |
| .focus() | 表单元素获得焦点 |
| .focusin() | 子元素获得焦点 |
| .focusout() | 子元素失去焦点 |
| .hover() | 同时为mouseenter和mouseleave事件指定处理函数 |
| .keydown() | 按下键盘（长时间按键，只返回一个事件） |
| .keypress() | 按下键盘（长时间按键，将返回多个事件） |
| .keyup() | 松开键盘 |
| .load() | 元素加载完毕 |
| .mousedown() | 按下鼠标 |
| .mouseenter() | 鼠标进入（进入子元素不触发） |
| .mouseleave() | 鼠标离开（离开子元素不触发） |
| .mousemove() | 鼠标在元素内部移动 |
| .mouseout() | 鼠标离开（离开子元素也触发） |
| .mouseover() | 鼠标进入（进入子元素也触发） |
| .mouseup() | 松开鼠标 |
| .ready() | DOM加载完成 |
| .resize() | 浏览器窗口的大小发生改变 |
| .scroll() | 滚动条的位置发生变化 |
| .select() | 用户选中文本框中的内容 |
| .submit() | 用户递交表单 |
| .toggle() | 根据鼠标点击的次数，依次运行多个函数 |
| .unload() | 用户离开页面 |
注：以上事件是.bind()的便捷方式可以用.bind()更灵活的控制事件，例如：
- .bind() //绑定多个事件
$(“input”).bind(
“click change”, //同时绑定click和change事件
function() {
alert(“Hello”);
}
);
- .one() //只运行一次
$(“p”).one(“click”, function() {
alert(“Hello”); //只运行一次，以后的点击不会运行
});
- .unbind() //解除事件绑定
$(“p”).unbind(“click”);
所有的事件处理函数，都可以接受一个事件对象（event object）作为参数，比如下面例子中的e：
$(“p”).click(function(e) {
alert(e.type); // "click"
});
事件对象属性和方法：
| event.pageX | 事件发生时，鼠标距离网页左上角的水平距离 |
| event.pageY | 事件发生时，鼠标距离网页左上角的垂直距离 |
| event.type | 事件的类型（比如click） |
| event.which | 按下了哪一个键 |
| event.data | 在事件对象上绑定数据，然后传入事件处理函数 |
| event.target | 事件针对的网页元素 |
| event.preventDefault() | 阻止事件的默认行为（比如点击链接，会自动打开新页面） |
| event.stopPropagation() | 停止事件向上层元素冒泡 |
在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：
$(“a”).click(function(e) {
if ($(this).attr(“href”).match(“evil”)) { //如果确认为有害链接
e.preventDefault(); //阻止打开
$(this).addClass(“evil”); //加上表示有害的class
}
});
.trigger()和riggerHandler()可以自动触发一个事件
$(“a”).click();
$(“a”).trigger(“click”);
九、特殊效果
jQuery允许对象呈现某些特殊效果。
常用的特殊效果：
| .fadeIn() | 淡入， 默认执行时间都是400ms（毫秒） |
| .fadeIn() | 淡出， 默认执行时间都是400ms（毫秒） |
| .fadeTo() | 调整透明度， 默认执行时间都是400ms（毫秒） |
| .hide() | 隐藏元素 |
| .show() | 显示元素 |
| .slideDown() | 向下展开，默认执行时间都是400ms（毫秒） |
| .slideUp() | 向上卷起， 默认执行时间都是400ms（毫秒） |
| .slideToggle() | 依次展开或卷起某个元素，默认执行时间都是400ms（毫秒） |
| .toggle() | 依次展示或隐藏某个元素， 默认执行时间都是400ms（毫秒） |
注：可以更改默认执行事件，例如:
$(“h1”).fadeIn(300); // 300毫秒内淡入
$(“h1”).fadeOut(“slow”); // 缓慢地淡出
特效结束后可以执行回调函数，例如：
$(“h1”).fadeOut(300, function() { $(this).remove(); });
动画特效：.animate()
$(“div”).animate(
{
left : “+=50”, //不断右移
opacity : 0.25 //指定透明度
},
300, // 持续时间
function() { alert('done!'); } //回调函数
);
| .stop() | 停止特效执行 .stop(true) 停止当前动画 .stop(true,true)立即结束动画 |
| .delay() | 延缓特效执行 |
| $.fx.off | 设置为true，则关闭所有网页特效 |