1、什麼是JQuery？     它是js的一個框架，它是開源的專案。對底層的js進行封裝，我們通過js框架就可以快速的完成DOM     對元素的增刪改查操作，並提供了動畫功能。jquery對外提供api讓開發者去開發jquery     外掛（就是一個功能模組，使用者只要做一些簡單的配置就完成複雜的功能）。jquery目前     是比較流行的一個JQuery框架。（宗旨：寫得少，做的多）。 2、JQuery特點:    輕量級    強大的選擇器    出色的DOM封裝    可靠的事件處理機制    完善的Ajax    出色的瀏覽器相容性    豐富的外掛支援    完善的文件    支援鏈式操作 3、JQuery的環境配置

   1)官網：http://www.jquery.com    2)去下載jquery庫檔案:       通常有兩個版本:        *未壓縮版本：--用在開發和除錯。（我們下載此版本）        *壓縮版本:--產品釋出的時候使用，可以提高效能和減少頻寬 4、在html頁面中如何使用jQuery？     使用<script src="jquery.js" type="text/javascript"></script>引入 5、在<script></script>內編寫jquery指令碼     /*當文件解析完畢好以後去執行一個函式*/       /* jQuery(document).ready(function(){           alert("hello,jQuery");        });*/       /* $(document).ready(function(){         alert("hello,jQuery");         })*/        $(function(){            alert("hello,jQuery");        })       注意:jQuery可以使用$符號作為別名。       強調:和window.onload=function(){}區別?       *載入時機不同，$(function(){})優先於window.onload=function(){}先執行       *執行的次數不同，window.onload=function(){}只會執行最後一個繫結的函式。         $(function(){})可以繫結多個函式來分別執行。 6、JQuery物件和DOM物件之間的關係，他們之間如何去轉換？

   *使用DOM方法來查詢得到的結果是DOM物件，它只能訪問DOM物件中所提供的屬性和方法。    *使用JQuery查詢得到的結果是Jquery物件，它只能訪問jQuery物件中所提供的屬性和方法。      也就是說JQuery物件不能呼叫DOM物件的屬性和方法，反之也一樣。      注意:養成一個良好的書寫習慣,JQuery物件的變數名最好以$開頭。    記住:JQuery查詢出來的結果是一個物件陣列，就算根據id來進行查詢就是返回的是一個物件陣列。         陣列記憶體放的是DOM物件。    *JQuery物件轉換成DOM物件，通過[下標]就可以轉，或者get(下標)方法來取出資料就是DOM物件    *DOM物件轉換成JQuery物件，通過$()工廠函式就可以了，把DOM物件作為引數傳給$()函式，那麼       就把DOM物件轉換成了JQuery物件。 ------------------------------------------------------------------------------------------- 選擇器的學習

:    *回顧下CSS選擇器：---css選擇器的作用是給指定的元素設定樣式的。     1)id選擇器  #id名{樣式規則}     id="id名"     2)類選擇器  .類名{樣式規則}     class="類名1 類名2 ....."     3)標籤選擇器 標籤名{樣式規則}     4)後代選擇器 選擇器1 選擇器2{樣式規則}     5)子元素選擇器  選擇器1>選擇器2{樣式規則}     6)相鄰選擇器  選擇器1+選擇器2{樣式規則}     7)同輩選擇器  選擇器1~選擇器2{樣式規則}     8)屬性選擇器          [屬性名='值']      [屬性名^='值']      [屬性名$='值']      [屬性名|='en']   比如:<input type="en-aa">      [屬性名*='en']      [屬性名~='en']   比如:<input type="en aa">    jQuery選擇器:--Jquery選擇器的作用是給指定的元素設定行為的。它提供了css1，css2                   css3部分的選擇器，還包含自身特有的一些選擇器。功能比較強大。     選擇器效率的問題       1)$("#id")       2)$("#id").find("");       3)$("p")       4)$(".className")       5)$("#id :hidden")    1)常用的基本選擇器      #id:根據給定的id匹配一個元素*****      .classname:根據給定的類名匹配一個元素*****       classname:根據給定的元素名匹配元素*****      *:匹配所有元素      select1,select2…:將每一個匹配到的元素合併後一起返回    2)層次選擇器*****      ancestor descendant:選取ancestor元素裡的所有descendant元素--對應的方法find()      parent>child:獲取parent元素下的child元素---對應的方法children()      prev+next:選取緊接在prev元素後的next元素---對應的next()方法      prev~siblings:選取prev元素之後的所有siblings元素--對應的nextAll()方法       例項：           //獲取所有的input元素           //alert($("#divTest input").length);           //alert($("#divTest").find("input").length);       //獲取id為divTest的元素下的input子元素           //alert($("#divTest>input").length);           //alert($("#divTest").children("input").length);           //獲取id為next元素的下一個input元素的內容           //alert($("#next+input").val());           //alert($("#next").next("input").val());           //獲取id為next元素的前後所有同輩a元素的個數          // alert($("#next~span").length);           alert($("#next").siblings("span").length);    3)基本過濾選擇器         :first:根據給定的id匹配一個元素==first()     :last:根據給定的類名匹配一個元素---last()     :not(selector):去除所有與給定選擇器匹配的元素     :even:選取索引值為偶數的所有元素,從0開始計數*****     :odd:選取索引值為奇數的所有元素,從0開始計數*****     :eq(index):匹配一個給定索引值元素,從0開始*****     :gt(index):匹配大於給定索引值元素,從0開始     :lt(index):匹配小於給定索引值元素,從0開始     :header:選擇h1,h2,h3一類的標籤     :animated:匹配正執行動畫效果的元素     :focus:匹配獲取焦點的元素    4)常用的內容過濾選擇器     :contains(text):匹配包含給定文字的元素     :empty:匹配所有不包含子元素或者文字的空元素     :has(selector):匹配含有選擇器所匹配元素的元素*****     :parent:選取含有子元素或者文字的元素         //查詢空元素的個數           //alert($("li:empty").length);           //查詢內容包含ip的li元素的個數           //alert($("li:contains('ip')").length);           //查詢擁有子元素的所有li元素，輸出滿足條件的元素個數          // alert($("li:parent").length);           //查詢並輸出包含a元素的li元素的內容           //alert($("li:has('a')").text());        5)常用的可見性過濾選擇器*****      :hidden:選取所有不可見的元素 <input type="hidden">  display:none      :visible:選取所有可見的元素     6)常用的屬性過濾選擇器     元素名[attribute]:選取擁有此屬性的元素     元素名[attribute=value]:選取屬性值等於value的元素     元素名[attribute!=value]:選取屬性值不等於value的元素     元素名[attribute^=value]:選取屬性值以value開始的元素     元素名[attribute$=value]:選取屬性值以value結束的元素     元素名[attribute*=value]:選取屬性值包含value的元素     元素名[attribute|=value]:選取屬性值是value的元素或以value開頭，後面跟-     元素名[attribute~=value]:選取屬性值包含value且以空格隔開的元素     元素名[attribute1][attribute2]…:多個屬性選擇器合併成一個複合屬性選擇器     7):常用的子元素過濾選擇器     :first-child:選取每個父元素下的第一個子元素     :first-of-type:選取同名兄妹節點的第一個子元素的所有元素     :last-child:選取每個父元素下的最後一個子元素     :last-of-type:選取同名兄妹節點的最後一個子元素的所有元素     :only-child:選取父元素中具有唯一的子元素的所有元素     :only-of-type:選取前後沒有同名兄妹節點的子元素的所有元素     :nth-child(index/even/odd):選取每個父元素下的第index個子元素或奇偶元素（index從1開始算起)     :nth-last-child(index/even/odd):取每個父元素下的第index個子元素,從最後一個往第一個數（index從1開始算起)     8):常用的表單選擇器     :input:選取所有<input>、<textarea>、<select>和<button>元素(表單元素)     :text:選取所有單行文字框     :password:選取所有密碼框     :radio:選取所有單選按鈕     :checkbox:選取所有複選框     :submit:選取所有提交按鈕     :image:選取所有影象按鈕     :reset:選取所有重置按鈕     :button:選取所有按鈕     :file:選取所有上傳域      9)常用的表單物件屬性過過濾選擇器     :disabled:選取所有不可用元素     :enabled:選取所有可用元素     :checeked:選取所有被選中的元素（單選框和複選框）     :selected:選取所有被選中的選項元素(下拉列表) jQuery繫結事件         $("#title").click(function(){                 if($("#content").is(':hidden')) {                     $("#content").slideDown(1000);                 }else{                     $("#content").slideUp(1000);                 }             });  先學習四個動畫函式  show(時間)---即改變透明度，高度、寬度  hide(時間)---即改變透明度，高度、寬度  slideDown(時間)--只改變元素的高度  slideUp(時間)--只改變元素的高度  判斷元素是否隱藏條件？    if($("#content").is(':hidden')){    }  層次選擇器所對應的方法***** next([元素])--找下一個同輩元素 pre([元素])--找上一個同輩元素 nextAll([元素])--找後面的所有同輩元素 preAll([元素])--找前面的所有同輩元素 siblings([元素])--找前後所有的同輩元素 text()---獲取文字 html()--獲取文字 val()--獲取value屬性值 length--長度 find([元素])--查詢後代元素  對應的另一種寫法 $("ol", this)--從this（元素）中去查詢後代ol元素 focus()--讓元素獲得焦點 parent()--獲得父元素 parents()--獲取父輩元素 addClass(類名)--給元素新增類選擇器 //改tab選項卡的功能，能用jquery儘量使用jquery來實現？ // ------------------------------------------------------------------------------------ *常用管理選擇器所得到結果的方法*****   1.index()--獲取指定元素在查詢結果中的下標。   2.add()--在集合中新增元素   3.not()--在集合中刪除元素   4.filter(匹配的條件/匹配的函式)--篩選集合中的元素--把符合條件的元素取出來生成一個新的陣列。   5.find()--對應的另一種寫法 $("ol", this)--從this（元素）中去查詢後代ol元素   6.each()--遍歷集合   7.end()--回到上一個操作物件   8.addBack()--結果集中加入上一個操作物件 *建立並插入元素節點:通過$(標籤的書寫規範)函式   append()    向每個匹配的元素內部追加內容*****  appendTo()    將所有匹配的元素追加到指定的元素中  prepend()    向每個匹配的元素內部前置內容  prependTo()    將所有匹配的元素前置到指定的元素中  after()    在每個匹配的元素之後插入內容  insertAfter()    將所有匹配的元素插入到指定元素的後面  before()    在每個匹配的元素之前插入內容  insertBefore()    將所有匹配的元素插入到指定元素的前面 *刪除元素  1、remove():對元素進行刪除，返回刪除的那個元素事件不可用  2、detach():對元素進行刪除，返回刪除的那個元素事件可用  3、empty():對元素進行後代元素的清除，返回沒有後代元素的空元素，元素繫結的事件還是存在的。 *包裹元素  1)wrap()  2)wrapAll()  3)wrapInner() *對元素屬性的操作*****  1)attr(“屬性名字”)--獲取屬性對應的值  2)attr("屬性名","屬性值")--設定一個屬性所對應的值  3)attr({"屬性名":"值","屬性名":"值",......})--設定多個屬性值 *給元素新增類選擇器*****   1)addClass("選擇器1 選擇器2");//新增多個類選擇器   2)removeClass();刪除元素上所有的類選擇器   3)removeClass("類選擇器名");刪除元素上指定的選擇器   4)hasClass("類選擇器名")；使用類選擇器返回true，否則返回false   5)toggleClass("類選擇器名");根據元素是否使用這個類選擇器來進行自動切換，使用的話刪除，未使用的話新增。 *獲取、設定文字的內容和值的方法   1)html()   2)text()   3)value()--它可以回去文字的value屬性值，也可以設定文字框的value屬性值            --選中下拉列表框的選項        --選中複選框        --選中單選框 *遍歷節點操作*****   1)children()--找元素中的子元素（可以指定具體要查詢的子元素）   2)next()   3)prev()   4)parent()   5)parents()   6)closest()   7)siblings()  --------------------------------------------------------------------------------  *css-DOM的操作    1)css()方法---作用，就是給標籤設定行內樣式，給標籤設定style屬性值        //$("p").css("color","red");        $("p").css({"color":"red","fontSize":"32px","backgroundColor":"#888888"});        alert($("p").css("fontSize"));    2)設定元素的寬和高      1)width()      2)height()      注意：      *有引數是設定，無引數是獲取      *獲取瀏覽器的寬和高      alert($(window).width());      alert($(window).height());      innerHeight()--包括內邊距。不包括邊框和外邊距      outerHeight()--包括內邊距,包括邊框             innerWidth()      outerWidth()    3)設定元素的滾動偏移量      scrollTop()      scrollLeft()      $(window).scroll(function(){});瀏覽器滾動事件    4)css-DOM中的定位方法      offset()--得到一個Jquery物件，裡面封裝了相對瀏覽器的偏移量（left，top屬性）               還可以設定相對瀏覽器的偏移量 offset({left:100,top:100});      position()--得到一個Jquery物件,裡面封裝了相對父元素的偏移量left，top屬性） *事件的繫結   1)on("事件型別1 事件型別2",[{"鍵":"值"}],"處理函式");      *第一個引數，事件型別可以多個      *第二個引數,傳給處理函式的資料      *第三個引數,響應處理函式   2)off()--解除元素的繫結事件     *不帶引數，解除元素上所有的事件     *帶事件名，多個用空格隔開，解除元素上指定的事件     *帶兩個引數的，解除具有指定處理函式的事件   3)簡寫的方式*****     語法:jquery物件.事件(),比如:$show.click(function(){}).mouserover(function(){}) *常用的合成事件   1)hover(函式1，函式2)     當滑鼠移入的時候執行函式1，移出的時候執行函式2   2)toggle()--切換（隱藏的時候顯示，顯示的時候隱藏） *事件物件   什麼是事件物件？   當一個元素觸發事件的時候，內部會生成一個事件物件，（裡面封裝了與事件相關的資訊）   此事件物件作為引數傳給處理函式。處理函式就能從事件物件中獲取相關的事件資訊   比如:通過事件物件可以阻止冒泡型事件、阻止元素的預設行為，獲得滑鼠的座標、   獲得鍵盤按鍵所對應的字元或碼值、獲得滑鼠的按鍵型別、獲得事件源、獲得事件型別   1)event.type屬性--獲取事件型別   2)event.preventDefault();--阻止元素的預設行為   3)event.stopPropagation();--阻止冒泡型事件   4)event.target---獲取事件源,返回的是DOM物件   5)event.pageX和event.pageY 獲得滑鼠的X,Y座標   6)return false，既阻止元素的預設行為，又阻止冒泡型事件   7)event.which,獲得滑鼠鍵 1，左，2中 3右   8)event.keycode *模擬事件的操作   trigger("事件名")   可以使用簡寫的方式，比如元素.click()  ----------------------------------------------------------------------------------  *jQuery動畫?  動畫就是在單位時間內去修改元素的一個或多個屬性值，也就是屬性值在單位時間內從一個  狀態到另外一個狀態。  jquery為什麼提供了一些現成的動畫方法來完成特定的效果。  show(毫秒)  hide(毫秒)     ---上面兩個動畫在指定的時間內改變屬性透明度、高度、寬度。  toggle()--在show()和hide()之間進行切換，自動判斷隱藏還是顯示  fadeIn()  fadeOut()  fadeToggle()--透明邊不透明，不透明變透明  fadeTo()--指定透明度      ----只改變元素的透明度 slideDown() slideUp() slideToggle()--收起的時候顯示，顯示的時候收起。    ---改變元素的寬度和高度。 以上動畫都可以指定完成時間和一個函式，這個函式的作用就是當動畫結束後要執行的功能。 *以上提供的動畫未必能滿足我們開發中所需的所有需求，所以要學會自定義動畫。   總結：自定義動畫用animate({多個屬性的鍵值對}，時間，函式)；   結束動畫:stop(引數1，引數2)       引數1：清除佇列中的所有動畫  true       引數2：讓正在執行的動畫直接跳到末尾狀態 true   延遲動畫的方法      delay(時間)--時間為毫秒數