jquery
什么是jQuery？
jquery是輕量級的JavaScript庫，核心是javascript，兼容css和各種瀏覽器，核心理念是寫得少做得多（write less do more）。
為什么要學習jQuery?
因為它有很多優勢：容易上手，強大的選擇器，節約開發時間，豐富的UI，完善的事件機制，Ajax的封裝。
此外，補充jQuery的一些特性和方法：鏈式操作，回調函數，迭代器，延遲對象，隊列。
帶min與不帶min兩個版本的區別：
a. jquery-1.11.3.js --- 開發版:編寫代碼的時候可能會出現一些問題,去看源碼的設計思路,讓自己的問題得到解決,切記:只是參考,看看就夠了,千萬不要修改。
b. jquery-1.11.3.min.js --- 生產版:當我們的編碼全部完成,測試通過,要上線,此時,換成該版本。
內容和功能全都是相同的，只是文件大小的問題,帶min的是經過壓縮以后的,去掉了所有的空格和換行,主要是減小占用的空間,形參進行了更改,通過工具進行的壓縮。
jQuery版本
1.x.x 兼容性最好的
2.x.x 拋棄了IE9以下
3.x.x 濃縮的2.0的版本
jQuery屬於說是企業的標准了
jquery的插件非常多,很多的動畫都是依賴於jquery完成的
jquery庫下載網站 --- http://www.jq22.com (免費的)
(注！jquery-2.0以上版本不再支持IE 6/7/8) 並不是最新的版本就最好的，而是根據您項目需求所適合的版本！)
引入jquery文件：
<script type="text/javascript" src="jquery-1.11.3.js"></script>
或者：
百度壓縮版引用地址:
微軟壓縮版引用地址:
官網jquery壓縮版引用地址:
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
jQuery 的核心函數是： $ === jQuery
| 函數 | 說明 |
|---|---|
| jQuery() | 主要用於獲取HTML DOM元素並將其封裝為jQuery對象 |
函數說明
jQuery():
jQuery()函數是jQuery庫的最核心函數，jQuery的一切都是基於此函數的。該函數主要用於獲取HTML DOM元素並將其封裝為jQuery對象，以便於使用jQuery對象提供的其他屬性和方法對DOM元素進行操作。
jQuery()函數的功能非常強大，它可以將各種類型的參數智能地封裝為jQuery對象。
var username = document.getElementsByClassName("username")[0]; console.log(username) //輸出的是一個DOM對象 username.style.backgroundColor = "#f00"; var $username = $(".username"); console.log($username) //輸出的是jquery對象，是類數組。 //不管你用什么方式獲取過來的全都是類數組,jquery操作也是操作這個類數組 $username.css("color","#fff")
jQuery對象與DOM對象的區別，聯系
DOM對象：使用JavaScript的方法獲取的對象就是DOM對象。
jQuery對象：使用jQuery的方法獲取的對象就是jQuery對象。
jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（偽數組））
區別
DOM對象與jQuery對象的方法不能混用。
聯系
jQuery對象與DOM對象可以互相轉換。
DOM ——> jQuery $( domobj)
jQuery ——> DOM $li [ 0 ] 或 $li.get( 0 )
//jquery對象 -> dom對象 var $username = $("#username"); //jquery對象 //var username = $username[0]; //jquery對象就是一個類數組，里面所放的每一個元素都是dom對象 //console.log(username) //dom對象 -> jquery對象 var username = document.getElementById("username"); //dom對象 //var $username = $(username); //直接把dom對象放到$()中進行包裝即可 //console.log($username) //console.log(username.value) console.log($username.val()) //jQuery是會去盡量減少報錯,不報錯真的不一定是好事 //不報錯你可能永遠不知道錯在啥地方
先推薦一個很實用的參考手冊噢 --- jQuery1.11.3_20150618.CHM（我想一般你們都有吧），或者w3c……
多庫共存
多庫共存：jQuery占用了$ 和jQuery這兩個變量。當在同一個頁面中引用了jQuery這個js庫，並且引用的其他庫（或者其他版本的jQuery庫）中也用到了$或者jQuery這兩個變量，那么，要保證每個庫都能正常使用，這時候就有了多庫共存的問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
//打印版本號。
console.log($.fn.jquery);//1.11.1
$.noConflict();//讓1.11.1放棄$的使用權，這樣1.8.2就會獲得對$的使用權
console.log($.fn.jquery);//1.8.2
console.log(jQuery.fn.jquery);//1.11.1
})
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
console.log($.fn.jquery);//1.11.1
var MrLv = $.noConflict(true);//讓1.11.1放棄兩個符號的使用權，同時定義一個新的使用權
console.log($.fn.jquery);//1.8.2
console.log(jQuery.fn.jquery);//1.8.2
console.log(MrLv.fn.jquery);//1.11.1
})
</script>
</head>
<body>
</body>
</html>
事件委托-原生
在綁定節點事件處理程序時遇到的問題：
-
每個 函數都是對象，都會占用內存；內存中的對象越多，性能就越差。
-
其次，必須事先指定所有事件處理程 序而導致的 DOM訪問次數，會延遲整個頁面的交互就緒時間。
采用事件委托的優點:
- document 對象很快就可以訪問，而且可以在頁面生命周期的任何時點上為它添加事件處理程序 （無需等待 DOMContentLoaded 或 load 事件）。換句話說，只要可單擊的元素呈現在頁面上， 就可以立即具備適當的功能。
- 在頁面中設置事件處理程序所需的時間更少。只添加一個事件處理程序所需的DOM引用更少， 所花的時間也更少。
- 整個頁面占用的內存空間更少，能夠提升整體性能。
- 綁定事件后,即使目標元素是以后再添加進來的也有效。
適合采用事件委托技術的事件包括click、mousedown、mouseup、keydown、keyup和keypress等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件委托-原生</title>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
// 普通的寫法 綁定了六次
// var lis = document.getElementsByTagName("li");
// for(var i = 0;i<lis.length;i++){
// lis[i].onclick = function(){
// console.log(this.innerHTML)
// }
// }
// 把自己要做的事情委托給父元素來做,事件只需要綁定一次就夠了
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
// console.log(target)
console.log(target.innerHTML)
}
</script>
</body>
</html>
jquery中的事件綁定
一、用bind()方法來對匹配元素進行特定事件的綁定
在文檔裝載完成后，使用bind()方法來對匹配元素進行特定事件的綁定，bing() 方法的調用格式為：
bind(type[,data],fn);
3個參數，說明如下
a. type：blur、focus、load、resize、scroll、unload、click、 dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、 mouseleaye、change、select、submit、keydown、keypress、keyup和error等，當然也可以是自定義名 稱。
b. data是可選參數：作為event.data屬性值傳遞給事件對象的額外數據對象。
c. fn參數則是用來綁定的處理函數。
平時我們寫像 click、mouseover 和 mouseout 這類事件，因為在程序中經常會使用到，jQuery 為此提供了一套簡寫方法，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery中的事件綁定</title>
<script src="jquery-1.11.3.min.js"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #f00;
display: none;
}
</style>
</head>
<body>
<button>事件綁定</button>
<div></div>
<script type="text/javascript">
// $("button").click(function(){
// if($("div").css("display") == "none"){
// $("div").show()
// }else{
// $("div").hide()
// }
// })
$("button").bind("click",function(){
if($("div").css("display") == "none"){
$("div").show()
}else{
$("div").hide()
}
})
</script>
</body>
</html>
二、移除之前的綁定事件
用$("#result").unbind("click")
如果你要移除所有的綁定事件，直接用 $("#result").unbind()
例題中用 $("button").unbind("mouseout")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery中的事件綁定</title>
<script src="jquery-1.11.3.min.js"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #f00;
display: none;
}
</style>
</head>
<body>
<button>事件綁定</button>
<div></div>
<script type="text/javascript">
// 鼠標移入btn是顯示,
// 移出btn是隱藏
// 移入 mouseover
// 移出 mouseout
// jquery 屬於鏈式調用
// $("button").mouseover(function(){
// $("div").show()
// }).mouseout(function(){
// $("div").hide()
// })
$("button").bind("mouseover mouseout",function(){ //事件綁定是可以綁定多個事件的
if($("div").css("display") == "none"){
$("div").show()
}else{
$("div").hide()
}
})
// 事件的解綁
// $("button").unbind() ///如果不寫就是解綁所有事件
$("button").unbind("mouseout") //寫指定的事件就是解綁指定的事件
</script>
</body>
</html>
自定義動畫
屬性對象
animate()方法的常規使用和之前介紹的3種常見動畫的使用方法類似
animate(properties[,duration][,easing][,complete])
animate()方法的第一個參數是一個必須參數，表示一個CSS屬性和值的對象，動畫將根據這組對象移動
所有用於動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。例如，width、height或者left可以執行動畫，但是background-color不能
當然，除了樣式屬性，一些非樣式的屬性，如scrollTop、scrollLeft以及自定義屬性，也可應用於動畫。
可選參數
animate(properties[,duration][,easing][,complete])方法中除了第一個屬性對象是必需參數，其余參數都是可選參數。接下來，介紹animate()方法的可選參數
持續時間
animate()方法的第二個參數持續時間，用一個字符串或者數字決定動畫將運行多久。默認值為"normal"，有三種預定速度的字符串"slow"、"normal"、"fast"分別表示600ms、400ms和200ms
[注意]如果要自定義持續時間，需要設置為數字(如400)，而不要設置為字符串'400'，否則將不生效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定義動畫</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #f00;
position: relative;
display: none;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
// 鏈式寫法
// $("div").show().animate({
// "width" : "100px",
// "height" : "100px",
// "top" : "100px",
// "left" : "100px"
// },3000)
$("div").show().animate({
"width" : "50px",
"height" : "50px"
},3000).animate({
"left" : "500px"
},3000)
</script>
</body>
</html>
jquery遍歷-each
當然我們知道 通過標簽獲取元素，返回的是一個類數組。
console.log(index); -- 返回的是當遍歷的索引
console.log(domElement) -- 輸出的是 <li>0</li> 當前索引的值
console.log(domElement.innerHTML) 和 console.log($(domElement).html()) -- 返回當前索引的文本內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery遍歷-each</title>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script type="text/javascript">
// var lis = document.getElementsByTagName("li");
// for(var i = 0;i < lis.length;i++){
// console.log(lis[i].innerHTML)
// }
var $lis = $("li");
$lis.each(function(index,domElement){
console.log(index);
console.log(domElement)
console.log(domElement.innerHTML)
console.log($(domElement).html())
})
</script>
</body>
</html>
結果如下：
最后吶，做了一個手風琴效果
代碼很簡單，也就是練練手。將如上內容融匯貫通，實際操作一遍。
代碼如下 :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {padding: 0;margin: 0;}
ul { list-style-type: none;}
.parentWrap {
width: 200px;
text-align:center;
}
.menuGroup {
border:1px solid #999;
background-color:#e0ecff;
}
.groupTitle {
display:block;
height:20px;
line-height:20px;
font-size: 16px;
border-bottom:1px solid #ccc;
cursor:pointer;
}
.menuGroup > div {
height: 200px;
background-color:#fff;
display:none;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function () {
//思路分析：
//1. 給所有的span注冊點擊事件，讓當前span的兄弟div顯示出來
$(".groupTitle").click(function () {
//下一個兄弟：nextElementSibling
//鏈式編程：在jQuery里面，方法可以一直調用下去。
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
});
});
</script>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">標題1</span>
<div>我是彈出來的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">標題2</span>
<div>我是彈出來的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">標題3</span>
<div>我是彈出來的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">標題4</span>
<div>我是彈出來的div4</div>
</li>
</ul>
</body>
</html>