jQuery基础
一，jQuery是什么？
1：jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
2：Query是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3：它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
4：jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
5：jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二，jQuery对象是什么？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("p")[0]：jquery对象转为dom对象
$("p").html() 等价于 $("p")[0].innerHTML
三，jQuery选择器
1：基本选择器
$("*")，$("#id")，$(".class")，$("标签名")，$(".class,p,div")
2：层级选择器
1：$("ancestor descendant")：匹配 ancestor 下所有的后代 descendant 元素（descendant ：用以匹配元素的选择器，并且它是第一个选择器的后代元素）
2：$("parent > child")：匹配 parent 下所有的子代 child 元素（child ：用以匹配元素的选择器，并且它是第一个选择器的子元素）
3：$("prev + next")：匹配紧挨着 prev 的 next 元素（next ：一个有效选择器并且紧接着第一个选择器）
4：$("prev ~ siblings")：匹配 prev 元素之后的所有 siblings 元素(siblings ：一个选择器，并且它作为第一个选择器的同辈)
3：属性选择器
1：$("[属性名='name']")：匹配满足属性名=name的元素
例：$("[class='div1']").css("color", "red");
2：$("[属性名='name1'][自定义属性名='name2']"):配满足属性名=name1的元素,自定义属性名=name2的元素
例：$("[class='div1'][kelvin='111']").css("color", "red");
4：基本筛选器
1：$("li:first") ： 匹配 li 元素的第一个
2：$("li:first") ： 匹配 li 元素的最后一个
3：$("li:eq(2)") ： 匹配 li 元素下标为2的 li 元素
4：$("li:even") ： 匹配 li 元素下标为偶数的 li 元素
5：$("li:odd") ： 匹配 li 元素下标为奇数的 li 元素
6：$("li:gt(1)") ： 匹配 li 元素下标大于1的 li 元素
5：表单选择器
$("[type='name']")----->$(":name") **只适用于input标签 : $("input:checked")
6：过滤筛选器
1：$("li").eq(2) 等价于 $("li:eq(2)")
2：$("li").first() 等价于 $("li:first")
3：$("ul li").hasclass("name") :找到 ul 下的 li 元素class值为 name 的 li 元素
7：查找筛选器
1.1：$("parent").children("child")：匹配 parent 的子代 child
1.2：$("parent").find("child") ：匹配 parent 的后代 child
2.1：$("parent").next() ：匹配紧挨着 parent 的下一个同级元素
2.2：$("parent").nextAll() ：匹配 parent 下的所有同级元素
2.3：$("parent").nextUntil(指定位置) ：匹配从 parent 到 指定位置 的区间（不包括头尾）元素
3.1：$("parent").prev() ：匹配紧挨着 parent 的上一个同级元素
3.2：$("parent").prevAll() ：匹配 parent 上的所有同级元素
3.3：$("parent").prevUntil(指定位置) ：匹配从 parent 到 指定位置 的区间（不包括头尾）元素
4.1：$("child").parent() ：匹配 child 的第一级父元素
4.2：$("child").parents() ：匹配 child 的所有父级元素对象并组成一个数组
4.3：$("child").parentUntil(指定位置) ：匹配 child 从第一级父级元素到指定位置父级元素并组成一个数组（不包括最后一个父级元素）
5：$("div").siblings() ：匹配 div 的所有兄弟元素（div上下都包括）
四，元素处理
1：属性操作
------------属性--------------
$("").attr(); 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
$("").removeAttr();
$("").prop(); 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性
$("").removeProp();
-----------CSS类-------------
$("").addClass(class|fn)
$("").removeClass([class|fn])
-----------HTML代码/文本/值-------------
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css(属性名,属性值)
2： 文档处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
3：css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn]) ：元素本身的高度
$("").width([val|fn]) ：元素本身的宽度
$("").innerHeight() ：元素本身高度+内边距的高度
$("").innerWidth() ：元素本身宽度+内边距的宽度
$("").outerHeight([soptions]) ：元素本身高度+内边距的高度+border宽度+（margin）
$("").outerWidth([options]) ：元素本身宽度+内边距的宽度+border宽度+（margin）
五，事件处理
页面载入
ready(fn) **当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
方式1：$(document).ready(function(){})
方式2：$(function(){})
事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
** .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
** $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
** click事件；
[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：
**$('ul li').on('click', function(){console.log('click');})的绑定方式和
**$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
**li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的
**但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
**li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
六，效果
1：基本
方法1：show([speed,[easing],[fn]])：
方法2：hide([speed,[easing],[fn]])
方法3：toggle([speed],[easing],[fn])
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本效果</title> 6 <style> 7 div { 8 width: 200px; 9 height: 200px; 10 background-color: green; 11 } 12 </style> 13 </head> 14 <body> 15 <button onclick="show()">出现</button> 16 <button onclick="hide()">消失</button> 17 <button onclick="toggle()">切换</button> 18 <div></div> 19 <script src="js/jquery-1.11.0.js"></script> 20 <script> 21 function show() { 22 $("div").show(1000); 23 } 24 25 function hide() { 26 $("div").hide(1000); 27 } 28 29 function toggle() { 30 $("div").toggle(1000); 31 } 32 </script> 33 </body> 34 </html>
2：滑动
方法1：slideDown([speed],[easing],[fn])
方法2：slideUp([speed,[easing],[fn]])
方法3：slideToggle([speed],[easing],[fn])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本效果</title> 6 <style> 7 div { 8 width: 200px; 9 height: 200px; 10 background-color: green; 11 } 12 </style> 13 </head> 14 <body> 15 <button onclick="show()">出现</button> 16 <button onclick="hide()">消失</button> 17 <button onclick="toggle()">切换</button> 18 <div></div> 19 <script src="js/jquery-1.11.0.js"></script> 20 <script> 21 function show() { 22 $("div").slideDown(1000); 23 } 24 25 function hide() { 26 $("div").slideUp(1000); 27 } 28 29 function toggle() { 30 $("div").slideToggle(1000); 31 } 32 </script> 33 </body> 34 </html>
3：淡入淡出
方法1：fadeIn([speed],[easing],[fn])
方法2：fadeOut([speed],[easing],[fn])
方法3：fadeToggle([speed,[easing],[fn]])
方法4：fadeTo([[speed],opacity,[easing],[fn]])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>淡入淡出效果</title> 6 <style> 7 div { 8 width: 200px; 9 height: 200px; 10 background-color: green; 11 } 12 </style> 13 </head> 14 <body> 15 <button onclick="show()">出现</button> 16 <button onclick="hide()">消失</button> 17 <button onclick="toggle()">切换</button> 18 <button onclick="toggleTo()">渐变透明度至</button> 19 <div></div> 20 <script src="js/jquery-1.11.0.js"></script> 21 <script> 22 function show() { 23 $("div").fadeIn(1000); 24 } 25 26 function hide() { 27 $("div").fadeOut(1000); 28 } 29 30 function toggle() { 31 $("div").fadeToggle(1000); 32 } 33 34 function toggleTo() { 35 $("div").fadeTo(1000, 0.3); 36 } 37 </script> 38 </body> 39 </html>
七，扩展方法（插件机制）
1：jQuery插件机制核心方法
<script>
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));
-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});
$("p").print();
</script>
2：定义作用域
定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
(function(a,b){return a+b})(3,5)
(function ($) { })(jQuery);
相当于：
var fn = function ($) { };
fn(jQuery);
3：默认参数
定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。
step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);