jQuery

1. 基础

1.1 jQuery简介

jQuery 是一个JavaScript函数库。

jQuery 是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

提示： 除此之外，Jquery还提供了大量的插件。

1.2 jQuery优势

（1）轻量级。jQuery非常轻巧，采用UglifyJS压缩后，大小保持在30k左右。

（2）强大的选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

（3）出色的DOM封装。

（4）可靠的事件处理机制。

（5）完善的Ajax。

（6）不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性是jQuery可以与其他JavaScript库共存，在项目放心地引用而不需要考虑到后期可能的冲突。

（7）出色的浏览器兼容性。

（8）链式操作方式。即发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。

（9）隐式迭代。当用 jQuery 找到带有 ".myclass" 类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery 里的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅的减少了代码量。 

（10）行为层与结构层的分离。开发者可以使用 jQuery 选择器选中元素，然后直接给元素添加事件。这种行为层与结构层相分离的思想，可以使  jQuery 开发人员和 HTML 或其他开发人员各司其职，摆脱过去开发冲突或个人单干的开发模。同时，后期维护也非常方便，不需要在 HTML 代码中寻找某些函数和重复修改 HTML 代码。

（11）丰富的插件支持。

（12）完善的文档。

（13）开源。jQuery是一个开源产品，任何人都可以自由地使用并且提出意见。

1.3 jQuery代码编写

 基础语法：$(selector).action()， 美元符号$定义 jQuery，选择符（selector）"查询"和"查找" HTML 元素，

window.onload 与 $(document).ready() 的区别：

执行时机：window.onload 必须等待网页中所有的内容加载完毕后（包括图片）才能执行，$(document).ready 网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的元素并没有加载完；

编写个数：window.onload 不能同时编写多个；$(document).ready能同时编写多个；

简化写法： window.onload 无； 

window.onload=function(){
    //...
}

$(document).ready

$(document).ready(function(){
    //...
})
可以简写成：
$(function(){
    //...
})

 jQuery 的 action() 执行对元素的操作

$(document).ready(function(){
	alert("Hello World");
});

代码风格：链式操作风格

这是一个导航栏，HTML代码如下：

<div class="box">
	<ul class="menu">
		<li class="level">
			<a href="#none">衬衫</a>
			<ul>
				<li><a href="#">短袖衬衫</a></li>
				<li><a href="#">长袖衬衫</a></li>
				<li><a href="#">短袖T恤</a></li>
				<li><a href="#">长袖T恤</a></li>
			</ul>
		</li>
		<li class="level">
			<a href="#none">卫衣</a>
			<ul>
				<li><a href="#">开襟卫衣</a></li>
				<li><a href="#">套头卫衣</a></li>
				<li><a href="#">运动卫衣</a></li>
				<li><a href="#">童装卫衣</a></li>
			</ul>
		</li>
		<li class="level">
			<a href="#none">裤子</a>
			<ul>
				<li><a href="#">短裤</a></li>
				<li><a href="#">牛仔裤</a></li>
				<li><a href="#">休闲裤</a></li>
				<li><a href="#">免烫卡其裤</a></li>
			</ul>
		</li>
	</ul>
</div>

项目需求是做一个导航栏，单击不同的商品链接，显示相应的内容，同时高亮显示出当前的商品。 选择jQuery来实现这个导航栏效果，如下：

$(".level>a").click(function() {
	$(this).addClass('current').next().show().parent().siblings().children("a").removeClass('current').next().hide();
	return false;
});

这就是jquery强大的链式操作，一行代码就完成了导航栏的功能；

调整一下代码格式：

$(".level>a").click(function() {
	$(this).addClass("current")	//给当前元素添加"current"样式
	.next().show()			//下一个元素显示
	.parent().siblings().children("a").removeClass("current")
					//父元素的同辈元素的子元素<a>移除"current"样式
	.next().hide();			//他们的下一个元素隐藏
	return false;
});

总结3中情况：

（1）对于同一个对象不超过3个操作的，可以直接写成一行；

$("li").show().unbind("click");

（2）对于同一个对象的较多操作，建议每行写一个操作；

$(this).removeClass('mouseout')
	.addClass('mouseover')
	.stop()
	.fadeTo("fast",0.6)
	.fadeTo("fast",1)
	.unbind("click")
	.click(function() {
		//do something
	});

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。

$(this)addClass('highlight')
	.children('li').show().end()
.siblings().removeClass('highlight')
	.children('li').hide();

注意：程序块严格采用缩进风格书写，能保证代码清晰易读，风格一致。

1.4  jQuery对象和DOM对象

 （1）DOM对象

DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树。如下代码：

//省略其他代码
<h3>例子</h3>
<p title="选择你喜欢的水果">你喜欢的水果是？</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
//省略其他代码

初始化效果如图：

把网页元素表示为DOM树：

    在这棵DOM树中，<h3>,<p>,<ul>以及<ul>的3个<li>子节点都是DOM元素的节点。可以通过JavaScript中的getElementByTagName或者getElementById来获取元素子节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法，示例如下：

var domObj=document.getElementById("id");    //获得DOM对象
var ObiHTML=domObj.innerHTML;                //使用JavaScript中的属性——innerHTML

 （2）jQuery对象

 jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。

2. jQuery 选择器

• 如何获取更改元素的样式

如果想要更改一个样式时，css("样式名","样式值")
如果想要改变多个样式时，css中传入一个对象

案例1：隔行变色

$(function(){    
    $("tr:even").css("background-color","red");    
    $("tr:odd").css("background-color","blue");    
    $("td:even").css("background-color","skyblue")
})

案例2：表单操作

重置input和textarea的默认样式
resize:none;

HTML结构： 
<form action="">        
    <input type="text">        
    <input type="text">        
    <input type="checkbox" class="check">        
    <input type="checkbox" class="check">        
    <input type="checkbox" class="check">        
    <input type="checkbox" class="check">        
    <input type="checkbox" class="check">        
    <input type="checkbox" class="check">        
    <button type="button">点击我</button>        
    <select name="" id="bt1">            
        <option value="">春天</option>            
        <option value="">夏天</option>            
        <option value="">秋天</option>            
        <option value="">冬天</option>        
    </select>
</form>

原生JS书写： 
$(function(){        
    var index=0;        
    var inputs=document.getElementsByTagName('input');        
    $("button").click(function(){            
        for(var n=2;n<inputs.length;n++){                
            if(inputs[n].checked){                    
                index++;                
            }            
        }            
    alert(index+"个被选中了")            
    return index=0;        
    })    
})
jQuery 书写：
$(function(){    
    $("button").click(function(){            //所有的复选框中被选中的元素        
        alert($(".check:checked").length+"个被选中了");    
    })
})

原生JS书写:
$(function(){    
    var select=document.getElementById('bt1');    
    var ops=select.getElementsByTagName('option');    
    bt1.onchange=function(){        
        console.log(ops[this.selectedIndex].innerHTML)    
    }
})
jQuery 书写：
$(function(){    
    $("#bt1").change(function(){        
        console.log($("#bt1 option:selected").html())    
    })
})

案例3：TAB选项卡的实现

HTML:
<ul id="tabNav">
    <li class="active">腾讯</li>
    <li>阿里</li>
    <li>京东</li>
    <li>百度</li></ul>
<div id="wrap">
    <div class="show">腾讯</div>
    <div>阿里</div>
    <div>京东</div>
    <div>百度</div>
</div>

CSS:
<style>
    *{
        padding: 0;
        margin: 0;
    }
    li{
        list-style: none;
    }
    #tabNav{
        overflow: hidden;
  /* 给父级加 overflow: hidden，可以清除子集浮动对父级的影响，也可以让子级超出父级的部分隐藏 */
    }
    #tabNav li{
        width: 75px;
        height: 50px;
        border: 1px solid #ccc;
        float: left;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
    }
    #tabNav .active{
        background-color: red;
    }
    #wrap div{
        width: 306px;
        height: 256px;
        border: 1px solid #ccc;
        font-size: 50px;
        line-height: 256px;
        text-align: center;
        float: left;
        display: none;
    }
    #wrap .show{
        display: block;
        background-color: skyblue;
    }
</style>
JS:
$(function(){
    $("#tabNav li").click(function(){//后代选择器
        var index=$(this).index();
        $("#tabNav li").removeClass("active");
        $(this).addClass("active");
        $("#wrap div").removeClass("show");
        $("#wrap div").eq(index).addClass("show");
    })
})

window.onload=function(){
        var tabNav=document.getElementById('tabNav');
        var tabNavLis=tabNav.getElementsByTagName('li');
        var wrap=document.getElementById('wrap');
        var wrapDivs=wrap.getElementsByTagName('div');
        for(var n=0;n<tabNavLis.length;n++){
            tabNavLis[n].index=n;
            tabNavLis[n].onclick=function(){
                for(var j=0;j<tabNavLis.length;j++){
                    tabNavLis[j].className="";
                }
                this.className="active";
                for(var j=0;j<wrapDivs.length;j++){
                    for(var i=0;i<wrapDivs.length;i++){
                        wrapDivs[i].className="";
                    }
                    wrapDivs[this.index].className="show";
                }
            }
        }        
}

3. jQuery 中的 DOM 操作

3.1 DOM 操作的分类

一般来说，DOM 操作分为三个方面，即 DOM 核心（DOM Core）、HTML-DOM 和 CSS-DOM.

1. DOM Core

  DOM Core 并不专属于 JavaScript ，任何一种支持 DOM 的程序语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种标记语言编写出来的文档，例如 XML。

  JavaScript 中的 getElementById( )、getElementByTagName( )、getAttribute( ) 和 setAttribute( ) 等方法都是 DOM Core 的组成部分。

2. HTML-DOM

在使用 JavaScript 和 DOM 为 HTML 文件 编写脚本时，有许多专属于 HTML-DOM 的属性。HTML-DOM 的出现甚至比 DOM Core 还要早，它提供了一些更简明的记号来描述各种 HTML 元素的属性。

3. CSS-DOM

CSS-DOM 是针对 CSS 的操作。在 JavaScript 中，CSS-DOM 技术的主要作用是获取和设置 style 对象的各种属性。通过改变 style 对象的各种属性，可以使网页呈现出不同的效果。

例如：设置某元素 style 对象字体颜色的方法，

element.style.color="red";

jquery 作为 JavaScript 库，继承并发扬了JavaScript 对DOM 对象的操作的特性，使开发人员能方便地操作 DOM 对象。

3.2 jQuery 中的 DOM 操作

 获取（设置）元素的内容： .html()  .text()  .val() 

$("#user").val();//获取表单的value值
.html()是插入内容，可以解析标签//直接调用方法就是查找里边的内容，会将内部的标签一样获取出来，
.text() 只获取标签中的文字$("#text").text("<span>hellow</span>")
.text()也是插入，不过不可以解析标签

 获取属性，设置属性：.attr({ }) .prop() 

var x=$("img").attr("src");// .attr("属性名") 获取属性
$("img").attr("src","images/女裤.jpg"); // .attr("属性名","属性值")，更改属性
$("img").attr({"src":"images/女裤.jpg","alt":"对不起，路径出错了"}) // 可以设置多个属性
$("img").removeAttr("alt"); // 移除属性

 案例：全选

<input type="checkbox"><br>    
<input type="checkbox">    
<input type="checkbox">    
<input type="checkbox"><br>
$("input").eq(0).change(function(){
        var x=$(this).prop("checked");
        if(x){
            $("input").prop("checked",true)
        }else{
            $("input").prop("checked",false)
        }
})

类名：.addClass( ) .removeClass( ) .hasClass( ) .toggleClass( )

  案例：box 的显示与隐藏

HTML:
<button>显示/隐藏</button>    
<div class="show contain wrap"></div>
CSS:
div{
    width: 300px;
    height: 300px;
    background-color: chartreuse;
    display: none;
}        
.show{
    display: block;
}

 JS 部分 方法1：

var index=true;
        $("button").click(function(){
            if(index){
                $("div").removeClass("show");
                index=false;
            }else{
                $("div").addClass("show");
                index=true;
            }
        }

方法2：

 var x=$("div").attr("class");            
var arr=x.split(" ");            
for(var n=0;n<arr.length;n++){
    if(arr[n]!="show"){
        $("div").addClass("show");
    }else{
        $("div").removeClass("show");
        break;
    }
}

方法3：

var x=$("div").attr("class");
var arr=x.split(" "); 
for(var n=0;n<arr.length;n++){
    if(arr[n]=="show"){
        $("div").removeClass("show");
        break;
    }else{
        $("div").addClass("show");
    }
}

方法4：

var x=$("div").hasClass("show");            
if(x){                
    $("div").removeClass("show");            
}else{                
    $("div").addClass("show");            
}

方法5：

.toggleClass( ) 用于类名的切换，自动判断是否含有指定的类名，如果含有，自动将其删除，如果没有，自动将其添加

$("div").toggleClass("show");

元素的尺寸：.width()  .innerWidth()  .outerWidth() 

   // var x=$("#box").css("width"); // 300px string        
// 设置元素宽度的数值 .width()            
// var x=$("#box").width(); // 300 number        
// 设置元素宽度的数值加上 padding， .innerWidth()            
// var x=$("#box").innerWidth(); // 500 number        
// 设置元素宽度的数值加上 padding 和 border，.outerWidth()            
// var x=$("#box").outerWidth(); 520 number        
// 加上数值可以更改宽度和高度，更改的永远是width和height            
// $("#box").width(500)             
// $("#box").innerWidth(700)            
// $("#box").outerWidth(800)

 如何动态创建元素： $("< />").appendTo    .parentTo() 

var li=$("<li />").html("我是动态创建的").css("color","red").addClass("show");
$("#nav").append(li) // append 在元素的末尾添加
$("#nav").prepend(li) // prepend 在元素的开头添加
// appendTo 给元素插入到指定元素内部的末尾部分
// prependTo 给元素插入到指定元素内部的开头部分

//动态创建的元素之间，可以互相嵌套
// var li=$("<li />");
// var button=$("<button />").html("删除");
// li.append(button);// $("#nav").append(li);
$("<li />").append($("<button />").html("删除")).appendTo($("#nav"))

动态创建的元素添加事件，在创建的函数中，再添加一次  

$(function(){ 
    $("#add").click(function(){
        var li=$("<li />")  
        li.append($("<span />").html("你好")); 
        li.append($("<button />").html("删除").addClass("delete")) 
        $("#nav").append(li)      
        $(".delete").click(function(){ // 重新绑定一次事件                
            // .parent()当前元素的父级元素 .remove()删除指定的元素                    
            $(this).parent().remove()                
        })            
    })        
})

  .siblings() 是在同一个父级中的兄弟元素

$("xxx").on("事件名称"，function(){// 事件绑定
    ...//
})
$(".alter").on("click",function(){
    ..//
}) //绑定事件
$(".alter").off("click");//解绑事件
//children("xxx") 找到子集

4. jQuery 中的事件和动画

4.1 加载 DOM

4.2 事件机制

jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，

包括了：事件绑定、事件解绑、事件触发。 

简单事件绑定： 

click(handler) 单击事件 

blur(handler) 失去焦点事件 

mouseenter(handler) 鼠标进入事件 

mouseleave(handler) 鼠标离开事件 

dbclick(handler) 双击事件 

change(handler) 改变事件，如：文本框值改变，下来列表值改变等 

focus(handler) 获得焦点事件 

keydown(handler) 键盘按下事件 

 on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式）

// $(selector).on(events,selector,data,handler);第二个和第三个可选        
// 第一个参数：events，绑定事件的名称，如果多个事件（标准事件或者自定义事件），由空格分隔开    
// 第二个参数：selector, 执行该事件的后代（子）元素，利用选择器选择；this指向会发生变化    
// 第三个参数：data，传递给处理函数的数据（可以是对象或数组），事件触发的时候通过event.data来使用
// 第四个参数：handler，事件处理函数

事件解绑
$(selector).off(); 
// 没有参数，解绑匹配元素的所有事件；有参数，解绑指定事件
$(selector).off("click"); // 解绑匹配元素的所有click事件
$(selector).off( “click”, “**”  解绑所有代理的click事件，元素本身的事件不会被解绑 

 4.3 事件对象

event.data 传递给事件处理程序的额外数据 

event.currentTarget 等同于this，当前DOM对象 

event.pageX 鼠标相对于文档左部边缘的位置   offsetX 

event.type 事件类型：click，dbclick… 

event.which 鼠标的按键类型：左1 中2 右3 

event.keyCode 键盘按键代码 

event.target 触发事件源，不一定===this 

event.preventDefault(); 阻止默认行为 

event.stopPropagation()； 阻止事件冒泡 

事件冒泡：点击子元素的事件时，如果父级元素也有事件，会逐层触发事件会按照 DOM 层次结构像水泡一样不断向上只至顶端.
解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.
阻止事件冒泡，给子级加 event.stopPropagation()
event.preventDefault() 阻止默认事件，  
如何处理兼容
div.onclick=function(event){
    var e=event||window.eventconsole.log("div的点击事件")
}
sps.onclick=function(event){
    var e=event||window.event
    e.stopPropagation()//阻止事件冒泡，
    console.log("sps的点击事件")
}

event.target 触发事件源，不一定===this 

<div class="wrap">        
<div></div>        
<div></div>        
<div></div>        
<div></div>        
<p></p>    
</div>    
<script>        
$(function(){            
    $(".wrap").click(function(event){                
        console.log(event.target)                
        console.log(this)                
        if(event.target!=this){                    
            $(event.target).toggleClass("active")                
        }            
    })        
})    
</script>

event.preventDefault(); 阻止默认行为 

网页中的元素有自己的默认行为，例如：单击超链接后会跳转，单击“提交”按钮后表单会提交，有时需要组织元素的默认行为。

4.4 each

each方法 有了隐式迭代，为什么还要使用each函数遍历？ 

大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。 如果要对每个元素做不同的处理，这时候就用到了each方法 

 作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数 

$(selector).each(function(index,element){
    ...//
}); 

Element是一个 js对象，需要转换成jquery对象 

参数一表示当前元素在所有匹配元素中的索引号

参数二表示当前元素（DOM对象） 

jQuery 效果 函数

1. jQuery 隐藏/显示 

（1） jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

（2）jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

2.  jQuery 淡入淡出

  jQuery Fading 方法  

  通过 jQuery，可以实现元素的淡入淡出效果。

  jQuery 拥有下面四种 fade 方法：

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

（1）fadeIn( )方法

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

$(selector).fadeIn(speed,callback)

提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

（2） fadeOut( )方法

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

$(selector).fadeOut(speed,callback)

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

（2）jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

（3）jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间，不会隐藏）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

3. jQuery 动画

animate( ) 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法1：

$(selector).animate(styles,speed,easing,callback)

语法2：

4. jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

5. jQuery Callback 

jQuery Callback 函数

当动画 100% 完成后，即调用 Callback 函数。

当动画 100% 完成后，即调用 Callback 函数。

jQuery 事件

jQuery 事件方法

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

jQuery 文档操作

jQuery 文档操作方法

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

jQuery 遍历

jQuery 遍历函数

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

1. each( ) 方法规定为每个匹配元素规定运行的函数。

提示：返回 false 可用于及早停止循环。

语法

$(selector).each(function(index,element))