Web基础之jQuery
承蒙大家厚爱，我的《Go语言之路》的纸质版图书已经上架京东，有需要的朋友请点击 此链接 购买。
jQuery快速入门教程。
jQuery
jQuery是什么？
- jQuery是一个兼容多浏览器的JavaScript库。
- jQuery能极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
- jQuery包含以下内容：
-
HTML元素选取
-
HTML元素操作
-
CSS操作
-
HTML事件函数
-
JavaScript特效和动画
-
HTML DOM遍历和修改
-
AJAX
-
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。
相当于：document.getElementById("i1").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0] //jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html(); //jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
查找标签
选择器
id选择器：
$("#id")
class选择器：
$(".className")
标签选择器：
$("tagName")
组合选择器：
$("#id, .className, tagName")
层级选择器：
$("#id a"); // 所有的后代a标签
$("#id > a"); // 第一个儿子标签a
基本选择器：
:first // 第一个
:eq(index) // 索引等于index的那个元素
:last // 最后一个
属性选择器：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); // 取到checkbox类型的input标签
筛选器
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parentsAll()
$("#id").parentsUntil()
儿子和兄弟元素：
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
查找元素：
$("id").find()
示例：左侧菜单
操作
属性
用于自定义属性：
attr()
removeAttr()
用于checkbox和radio
prop()
removeProp()
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。
示例：全选、反选、取消
CSS
CSS类
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
示例：开关灯
CSS样式
CSS
css("color", "red") //DOM操作：tag.style.color="red"
位置：
offset() // 当对视窗的坐标
position()
scrollTop()
scrollLeft()
尺寸：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文档
HTML代码：
html()
文本值：
text()
值：
val() // 针对input标签
文档处理：
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到B
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面
添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面
移除和晴空元素
remove() // 从DOM中删除所有匹配的元素。
empty() // 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone()
示例：
点击按钮复制。
事件
常用事件
click(function(){...})
mouseout(function(){...})
mouseover(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
事件绑定
bind("click", function(){...})
unbind("click", function(){...})
on("click", function(){...})
off("click", function(){...})
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).read(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
事件委托
事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。
示例：
完善克隆那个例子。
动画
基本
.show([speed, [easing], [fn]]) //显示隐藏的匹配元素。
.hide([speed, [easing], [fn]]) //隐藏显示的匹配元素。
.toggle([speed], [easing], [fn]) //如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
参数介绍：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
**fn:**在动画完成时执行的函数，每个元素执行一次。
滑动
.slideDown([speed, [easing], [fn]]) //通过高度变化（向下增大）来动态地显示所有匹配的元素。
.slideUp([speed, [easing], [fn]]) //通过高度变化（向下减小）来动态地隐藏所有匹配的元素。
.slideToggle([speed, [easing], [fn]]) //通过高度变化来切换所有匹配元素的可见性。
参数介绍同上。
淡入淡出
.fadeIn([speed, [easing], [fn]]) //通过不透明度的变化来实现所有匹配元素的淡入效果。
.fadeOut([speed, [easing], [fn]]) //通过不透明度的变化来实现所有匹配元素的淡出效果。
.fadeTo([speed, [easing], [fn]]) //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。
.fadeToggle([speed, [easing], [fn]]) //通过不透明度的变化来切换所有匹配元素的淡入和淡出效果。
参数介绍同上。
自定义
.animate(params, [speed], [easing], [fn]) //用于创建自定义动画的函数。
参数介绍：
params:一组包含作为动画属性和终值的样式属性和及其值的集合。
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”。
fn:在动画完成时执行的函数，每个元素执行一次。
补充
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li = [10, 20, 30, 40]
$.each(li, function(i, v){
console.log(i, v); //index是索引，ele是每次循环的具体元素。
})
输出：
0 10
1 20
2 30
3 40
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$( "li" ).each(function() {
$(this).addClass( "foo" );
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的.each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("foo");
注意：
在遍历过程中可以使用return false提前结束each循环。
.data()
在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k", 100); //给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过.data(name, value)或HTML5 data-*属性设置。
$("div").data("k"); //返回第一个div标签中保存的"k"的值
插件
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
<script>
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
</script>
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
// jQuery对象可以使用新添加的check()方法了。
$( "input[type='checkbox']" ).check();
</script>
单独写在文件中的扩展：
(function(jq){
jq.extend({
funcName: function(){
...
},
});
})(jQuery);
