jQuery概述
JavaScript 庫封裝了很多預定義的對象和實用函數(shù)。能幫助使用者建立有高難度交互客戶端頁面, 并且兼容各大瀏覽器勤婚。
核心理念是write less,do more(寫得更少,做得更多)
當前流行的 JavaScript 庫有：
jQuery 使用非常多 , EXTJS 功能比jQuery更多,但ext2.0收費,Prototype 一般用于做框架,YUI! (Yahoo! User Interface)
Bootstrap霜幼，來自 Twitter瘾婿，是目前很受歡迎的前端框架恬惯。Bootstrap 是基于 HTML向拆、CSS、JAVASCRIPT 的酪耳，它簡潔靈活浓恳，使得 Web 開發(fā)更加快捷
jQuery介紹
jQuery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫 碗暗，它兼容CSS3颈将，還兼容各種瀏覽器。
jQuery已經(jīng)成為最流行的javascript庫言疗，在世界前10000個訪問最多的網(wǎng)站中晴圾，有超過55%在使用jQuery。由美國人John Resig在2006年1月發(fā)布,jQuery是免費噪奄、開源的死姚。
jQuery分類：
WEB版本：我們主要學習研究 （jQuery-版本.js 、 jQuery-版本-min.js）
UI版本：集成了UI組件
mobile版本：針對移動端開發(fā)
qunit版本：用于js測試的
jquery官網(wǎng) http://jquery.com/
常用版本介紹：
min版是上線版本勤篮，沒有換行符等都毒，節(jié)省存儲空間。
1.4.* 舊版的穩(wěn)定版本
1.8.* - 1.9.* 學習使用版本
1.11.* 最新的版本
2.1+* 2.0后的版本不再兼容低版本的IE瀏覽器
jQuery的封裝
- js只有一個全局代碼區(qū)碰缔，聲明變量的時候出現(xiàn)同名的概率比較高温鸽，也就是容易造成覆蓋
- 使用命名空間,將代碼掛載到某個對象下，但是仍然存在對象被覆蓋的風險
- 工廠模式封裝：將對象封存起來手负，讓代碼更加的具備完整性涤垫，但是依然存在被覆蓋的風險
- 不要函數(shù)名字，雖然解決了被覆蓋的風險竟终，但是無法進行調用了
- 使用自己調用自己的方式可以實現(xiàn)函數(shù)的調用蝠猬，但是只能調用一次，在頁面加載的時候
- 閉包原理：使用更大作用域變量或者大家同一認可的變量將執(zhí)行一次就會消失的內容記錄下來统捶，實現(xiàn)重復調用
jQuery使用
jQuery的基本操作
jQuery同dom操作的原理相同,同樣的獲取元素對象,修改其樣式榆芦、屬性、文本等’喘鸟，只是簡化了代碼.
- 獲取jQuery對象的三種方式
語法：$(選擇器或者DOM對象)或jQuery(選擇器或者DOM對象) ,$==jQuery,方式的區(qū)別是因為封裝原理匆绣，包裝對象所形成的語法特點。含義是相同的什黑。
// $() 語法崎淳，建議：如果是jQuery對象變量名使用$作為前綴
var $obj = $("#username");
// jQuery() 語法.
var $obj = jQuery("#username");
- jQuery對象和DOM對象相互轉換
注意:jQuery對象使用jquery的api（方法、函數(shù)）愕把。DOM對象使用 dom 的函數(shù)拣凹、屬性等森爽。不能混淆使用。
/*dom對象轉化為jquery對象*/
var obj = document.getElementById("div2");
/*轉化操作*/
var $obj = $(obj);
alert($obj.text() + "第二次");
/*jQuery對象轉化文dom對象*/
var div2 = $("#div2");
//先通過 $(...) 獲得jQuery對象嚣镜，底層使用數(shù)組進行維護的爬迟，可以存放多個對象。
//然后通過get()可以從jquery對象轉換成 dom對象菊匿。參數(shù)：數(shù)組的下標付呕，可以省略。如果省略下標獲得dom 數(shù)組跌捆。
var obj2 = div2.get(0);
alert(obj2.outerHTML + "第三次");
jQuery的選擇器（重點）
jQuery的選擇器的設計原理和CSS選擇器的選擇器設計理念相同徽职。
- 基本選擇器的使用
// id選擇器
// 標簽演示 ：<標簽 id="id值">
// 語法:
$("#id");
// 標簽（元素）選擇器
// 語法：
$("標簽名");
// 類選擇器
// 標簽元素：<標簽 class=”class名稱”>
// 語法：
$(".class名稱")
// 通配符選擇器：
// 語法：$(“*”) <!—選擇所有的標簽元素-->
// 多選擇器選擇;
// 語法： $("選擇器1，選擇器2疹蛉，....")表示的是同時滿足兩種選擇器的元素。
$(“#id,.class”)
- 層級選擇器
定義: 即Ancestor（祖先）和descendant（后代）之間的關系力麸，返回值是集合的形式Array(Elements)可款。
// 所有子孫元素
// 關系: Ancestor descendant //給定祖先下的匹配所有的后代元素
/* 語法：*/ $("A B") --> //A標簽中 所有的B標簽
// 所有孩子元素
// 關系：parent > child //給定父元素下的匹配所有的子元素
/*語法：*/ $("A > B") --> //A標簽中 所有的子標簽中B標簽
// 后面第一個兄弟
// 關系：prev + next //匹配所有緊接在prev后的next元素
/*語法：*/ $("A + B") --> //A標簽后面的第一個兄弟元素
//后面的所有兄弟
//關系： prev ~ siblings //匹配prev之后的所有siblings元素
/*語法：*/ $("A ~ B") --> //A標簽后面的所有兄元素
- 過濾器的使用
基本過濾選擇器
語法規(guī)則1： $("A：過濾類型") -> A標簽（或元素）元素經(jīng)過過濾后的所有元素
注意：常見的過濾器有節(jié)點順序的屬性，表單元素過濾的屬性(當過濾類型唯一也可以： $(“:過濾器”))克蚂，內容過濾屬性闺鲸，可見性過濾，子元素過濾
屬性過濾器
語法規(guī)則： $("A[attr=’attrValue’]") --> A標簽(或元素)元素經(jīng)過屬性值過濾后的元素
jQuery操作樣式屬性（重點）
操作樣式就是操作：屬性,類class,html代碼/文本/值,css,位置,尺寸
語法規(guī)則：css(參數(shù)個數(shù))埃叭，text(參數(shù)個數(shù))摸恍，attr(參數(shù)個數(shù))，html(參數(shù)個數(shù))
參數(shù)個數(shù)：一個參數(shù)表示獲取當前選擇的值（也可以是傳入JOSN格式批量設置屬性）赤屋， 兩個參數(shù)表示設置指定屬性的值
- 操作CSS樣式
//直接設置樣式的值
$div.css("border", "1px solid red");
//獲取指定樣式的值
alert($div.css("border"))
//通過JOSN的方式設置樣式的值
$div.css({
"width":"100px",
"height":"100px",
"background-color":"#ff0"
});
- 操作class屬性操作樣式
//操作的是標簽的class屬性 <標簽 class="class名稱">
addClass(class名稱) // 追加一個class值
removeClass("class") // class移除
toggleClass("class") // 添加和移除切換立镶。如果沒有就添加，如果有就移除类早。
- jQuery操作標簽屬性文本
<!-- attr()方法使用 -->
<!-- attr(name) 通過屬性名獲得屬性值媚媒。<標簽 屬性名=“屬性值”> -->
<!-- attr(key,val) 給指定的屬性設置值。（設置一個） -->
<!-- attr(pro) 給jQuery對象設置一組值涩僻。使用JSON格式缭召。 -->
<!-- Pro -> {key:value , key : value , .....} key必須使用雙引號，value如果字符串也必須使用雙引號逆日。使用單引號嵌巷，屬于畸形格式json -->
<!-- removeAttr(name) 將執(zhí)行屬性移除 -->
//使用示例：
//標簽: <input type=’text’name=’value’>
//語法：
$(“:text”).attr(“name”) //獲取name的屬性值
$(“:text”).attr(“name”，“value”) //設置name的屬性值
$(“:text”).removeAttr(“name”) //刪除name的屬性值
$(“:text”).attr(｛
“name1”：“value1”,
“name2”：“value2”,
｝) //通過JOSN的方式設置一組屬性值.
//注意：低版本可以使用attr方法設置屬性的值.高版本中建議使用prop的方法設置屬性的值.
html(),val(),text()方法使用
操作的是標簽的value屬性或者標簽體
val() 獲得 value屬性的值室抽。<標簽 value="">
val(值) 設置值
html() 獲得標簽體內容搪哪，以標簽方式
html(值) 設置內容
text() 獲得標簽體內容，以文本方式
text(值) 以文本方式設置內容
注意：text和html的區(qū)別坪圾，當添加的是標簽元素時text會把標簽當作文本噩死，html會當作標簽颤难。
其他方法的使用
- 位置
offset() 獲得位置，返回json數(shù)據(jù)已维。格式：{"top": xx , "left" : yy}
offset(坐標) 設置位置
position() 獲得相對父元素偏移
scrollTop([val]) 獲得 或 設置 垂直滾動條的位置
scrollLeft([val]) 獲得 或 設置 水平滾動條的位置
- 尺寸
height([val]) 獲得 或 設置 高度
width([val]) 獲得 或 設置 寬度
jQuery操作文檔（重點）
- 操作結構的方法
- 內部插入,外部插入,復制,替換,刪除,包裹
A.append(B) 行嗤，將B插入到A內部的后面。（追加到后面）
A.prepend(B) 垛耳，將B插入到A內部的前面栅屏。（追加到前面)
A.appendTo(B) , 將A插入到B內部的后面。（追加到后面）
A.prependTo(B) 將A插入到B內部的前面堂鲜。（追加到前面）
- 外部插入
A.after(B)栈雳，將B插入到A后面
A.before(B) ，將B插入到A前面
A.insertBefore(B) 缔莲，將A插入到B前面
A.insertAfter(B) 哥纫，將A插入到B后面
復制
clone(event [,deepEven])
參數(shù)1：表示是否克隆事件
參數(shù)2：子元素中綁定數(shù)據(jù)是否被克隆。替換
A.replaceWith(B) 使用B替換掉A
A.replaceAll(B) 使用A替換掉所有的B刪除
empty() 清空標簽體內容痴奏，刪除所有子元素
remove() 將指定對象移除蛀骇，返回值為移除對象。但此對象將綁定事件读拆，綁定數(shù)據(jù)都一并移除擅憔。
detach()將指定對象移除，返回值為移除對象檐晕。但此對象保留 綁定事件暑诸，綁定數(shù)據(jù) 等。包裹
wrap(...) ： 每一個匹配元素使用指定的內容包裹辟灰。
wrapAll(...)：所有的元素使用一個指定的內容包裹
wrapInner(...)：子節(jié)點使用指定的內容包裹个榕。
unwrap(): 移出該元素的父元素。
each()遍歷方法
用法
第一種用法
/*第一種方式*/
$("#b1").click(function(){
$("input:hidden").each(function(index,dom){
alert("dom.value" + "===========" + dom.value);
})
})
<input type="button" value=" 選取" id="b2"/>
/*第二種方式*/
$("#b2").click(function(){
$.each($("input:hidden"),function(){
alert("$(this).val()" + "===========" + $(this).val());
})
})
第二種用法
// 定義二維數(shù)組:
var arr = new Array(4);
arr[0] = new Array("哈爾濱","齊齊哈爾","大慶","佳木斯");
arr[1] = new Array("長春市","吉林市","四平市","通化市");
arr[2] = new Array("沈陽市","錦州市","大連市","鐵嶺市");
arr[3] = new Array("鄭州市","洛陽市","安陽市","南陽市");
var $cities = $(arr[$pro]);
$cities.each(function(){
$city.append("<option>" + this + "</option>");
})
文檔的元素篩選的方法
篩選與之前的選擇器雷同,篩選提供的都是函數(shù).
- 過濾
eq(index|-index):獲取指定索引的元素.如果是正數(shù),索引從0開始;若是負數(shù),倒著數(shù)從1開始.
first():第一個
last():最后一個
hasClass(...):判斷元素是否含有特定的樣式
filter(...):篩選出與指定表達式匹配的元素集合
is(...):判斷元素是否符合指定的選擇器
has(...):含有特定后代的元素
not(...):刪除與指定表達式匹配的元素
slice(start,end):從給定的數(shù)組中芥喇，按照范圍截取元素笛洛。 [start,end)
map(fn):將一組元素轉換成其他數(shù)組
- 查找
children([...]):獲取他的所有孩子
closest(...):從元素本身開始，逐級向上級元素匹配乃坤，并返回最先匹配的元素
find(...):查找后代
next():下一個兄弟
nextAll():后面所有的兄弟
nextUntil(...):從下一個兄弟開始,直到指定元素結束
parent():獲取父元素
parents():匹配元素的祖先元素的元素(不包含根元素)
prev():上一個兄弟
prevAll():前面的所有兄弟
prevUntil():從上一個兄弟開始,直至指定元素結束
siblings():所有的兄弟
closest和parents的主要區(qū)別是：
- 前者從當前元素開始匹配尋找苛让，后者從父元素開始匹配尋找；
- 前者逐級向上查找湿诊，直到發(fā)現(xiàn)匹配的元素后就停止了狱杰，后者一直向上查找直到根元素，然后把這些元素放進一個臨時集合中厅须，再用給定的選擇器表達式去過濾仿畸；
- 前者返回0或1個元素，后者可能包含0個，1個错沽，或者多個元素簿晓。
- 串聯(lián)
A.add(B) 將A和B拼湊在一起，等效 $(A,B)
A.children().andSelf() 所有孩子千埃，再添加自己
A.children().end()... 使用end后將返回A位置
contents() 獲得所有節(jié)點（子元素憔儿、文本） <div>abc<a></a> xxx</div>
jQuery的事件綁定
- 常見事件概述
focus和focusin 得到焦點
focus 獲得焦點
foucsin 獲得焦點》趴桑可以在父元素上檢測子元素獲取焦點的情況
blur和focusout 失去焦點
mouseover 和 mouseenter 移進
mouseover , 如果鼠標指針穿過任何子元素谒臼，同樣會觸發(fā) mouseover 事件
mouseenter ,如果鼠標指針穿過任何子元素，不會觸發(fā) mouseenter 事件
mouseout和mouseleave 移除 同上
- 頁面的載入事件
注意點：頁面加載事件可以向下疊加耀里；在一個頁面中可以使用多次
原生JS事件也可以同時綁定蜈缤，但是最后加載。
綁定語法：
//常用格式1:
$(document).ready(function(){
//....
})
//常用格式2: 格式1的簡化版
$(function(){
//......
});
//常用格式3:完整版
jQuery(document).ready(function(){
//......
});
- 事件的處理和委派
處理
on:綁定多個事件
one: 綁定一次事件
bind和unbind
bind:綁定事件,一直使用,直到解綁
例如:$btn1.bind(“click”,function(){}); ===$btn1.click(function(){});
unbind:解綁事件
綁定的時候可以指定別名,格式: 事件.別名
例如:
bind(“click.c1”,fn);
unbind(“click.c1”);
trigger和triggerHandler
trigger() 觸發(fā)所有的事件（包括瀏覽器默認的）
triggerHandler() 觸發(fā)所有的事件（不包括瀏覽器默認的）
委派
live jQuery給所有匹配的元素附加一個事件處理函數(shù)冯挎，即使這個元素是以后再添加進來的也有效,例如給A標簽添加事件底哥，之后再追加a標簽都具有相同的事件。
事件切換
hover 在mouseover和mouseout之間進行切換
toggle 點擊事件切換房官，點擊第一次執(zhí)行 fn趾徽，點擊第二次執(zhí)行fn2.....
jQuery的效果
?
基本：改變高和寬
show(速度，[fn]) 顯示 當顯示成功后觸發(fā)fn
hide() 隱藏
toggle(speed [,fn]) 切換,如果隱藏就顯示易阳，如果顯示就隱藏附较。
滑動：改變高度
slideDown 吃粒，顯示（從上往下）
slideUp潦俺，隱藏（從下往上）
slideToggle() 切換
淡入淡出：改變透明度
fadeIn 顯示
fadeOut 隱藏
fadeToggle 切換
fadeTo 指定對象透明度
