jQuery教程

JQuery:

什麼是JQuery?

　　JQuery就是一個javascript函數庫,沒什麼特別的.

JQuery能作什麼?jQuery是作什麼的?

　　JQuery自己就是一堆JavaScript函數,JavaScript是作什麼的,jQuery也同樣.畢竟JQuery只是用JavaScript編寫的函數庫而已,有些功能JQuery沒有封裝,則還須要經過本身寫JavaScript來實現.

好處:

JQuery的特色?

　　Write Less,Do More(寫更少(的代碼),作更多(的事情))

　　①更好的解決了不一樣的瀏覽器兼容問題(IE 6.0+, FireFox 2+, Safari 3.0+, Chrom)css仍是有些問題的,對於不一樣控件具備統一的操做方式.

　　②體積小(幾十KB)、使用簡單方便（Write Less,Do More）

　　③鏈式編程$('#div1').draggble().show().hide().fly()

　　④隱式迭代

　　⑤插件豐富、開源、免費.讓JavaScript程序風簡單、更強大！

JQuery中的頂級對象$:

　　JQuery中最經常使用的對象即$對象,想要使用JQuery的方法必須經過$對象.只有普通的DOM對象封裝成JQuery對象,而後才能調用JQuery中的各類方法.

　　$是JQuery簡寫,在代碼中可使用JQuery代替$,但通常爲了方便都是用$.

Window.onload事件:

　　window.onload通常都是寫在<script>標籤中的js代碼裏,衆所周知,代碼的執行順序是從上倒下的,若是你的js代碼寫在你要添加功能的html前邊那麼,代碼執行時,執行到js代碼後,沒有獲取到html,在執行完成後,就會執行html,所以js代碼會無效.而添加了window.onload的事件處理函數，它會只有當文檔加載完成後，纔會執行事件處理函數.因此若是js代碼和html代碼寫在一塊兒了,而且js代碼在html代碼的上邊就必須這樣寫:window.onload=function(){js代碼}.

 

爲何Jquery對象和DOM對象要互轉?

 

　　DOM對象轉Jquery對象操做方便,畢竟Jquery中方法都是封裝好了的,並且兼容問題解決的很好,代碼少,方便. Jquery對象轉DOM對象,由於Jquery中文件一直在更新，不少東西都是隨着使用而進行封裝和升級,不太可能把全部dom中用到的進行封裝,還有不少未知的兼容問題沒有封裝進去,因此,有的時候jquery中不能解決的問題,還須要原生的js代碼來解決,因此,jquery對象有的時候須要轉成dom對象來進行操做.

Jquery對象和DOM對象互轉:

 

$(function () {
    var bt1=$("#btn")[0];//由jquery對象轉成了dom對象
    var bt2=document.getElementById("btn");//對象        
    console.log(bt1==bt2);
});

 

將dom對象轉成jQuery對象,加$就能夠了

如何將jquery對象轉dom對象

$(function () {
    var dv1 = $("#dv");//由jquery對象轉成了dom對象
    var dv2 = document.getElementById("dv");//對象    
//必然報錯,爲何?由於jquery對象不能直接調用dom中對象的屬性或者是方法    
    dv1.innerHTML = "<p>哈哈</p>";    
    //同理,下面這行代碼必然報錯,爲何呢?由於dom對象是不能直接調用jquery對象的方法的    
    dv2.html("<p>哈哈</p>");
});

$('#btn')[0]和$('#btn').get(0)均可以轉dom對象, $(dom對象)及可轉jquery對象

案例:(網頁開關燈)

DOM寫法:

$(function () {
    $("#btn").click(function () {
        if($(this).val()=="開燈") {                    
              $("body").css("backgroundColor", "black");              
              $(this).val("關燈");
        }else{
            $("body").css("backgroundColor", "");
           $(this).val("開燈");
        }
    });
});
        

JQuery寫法:

$("#btn").click(function () {
        if(this.value=="開燈") {
            $("body")[0].style.backgroundColor="black";
            this.value="關燈";
        }else{
            $("body")[0].style.backgroundColor="";
            this.value="關燈";
        }
    });
});

因而可知JQuery比DOM寫法簡便不少.

JQuery中的選擇器:

選擇器:就是爲了獲取元素進行操做.

DOM中獲取元素的方式:

 

document.getElementById();　　　　//經過id來獲取元素
document.getElementByTagName();　//經過標籤名來獲取元素
document.getElementByClassName();//經過class類來獲取元素

 

JQuery中獲取元素的方式

$("#btn");//經過id獲取元素
$("div"); //經過標籤名來獲取元素
$(".cls") //經過class類名來獲取元素

因而可知DOM中選擇器代碼多、長、麻煩，而JQuery中簡單，而且方便。

下邊介紹些JQuery中的一些特殊選擇器寫法：

好比點擊按鈕設置頁面上應用cls類樣式li標籤的背景顏色就能夠用:
$(li.cls)；  //標籤加類選擇器

好比點擊一個按鈕,設置頁面中的span標籤,li標籤,div標籤的背景顏色就可使用:
$(span,li,div)  //多條件選擇器

 

層級選擇器:

 

後代選擇器(子元素中元素,子,仔仔,孫)$(「#dv li」)或者$(「ul li」)或者$(「.cls li」)

$("#dv li").css("backgroundColor","red");//給id叫dv的全部li元素設置背景顏色爲紅色(只要是這個div裏面的li就都變色)

 

子代選擇器(直接的全部子元素,兒子) $(「#ul>li」)或者$(「div >span」)或者$(「.cls >li」)

$("#dv>li").css("backgroundColor","red");//給id叫dv的元素裏面的li元素設置背景顏色爲紅色(若是裏面還有嵌套,嵌套裏面的li不變色)

索引選擇器:

$("#u1 li:eq(7)").css("backgroundColor","red");// 獲取索引爲7的元素
$("#u1 li:gt(7)").css("backgroundColor","green");//索引大於7的全部元素
$("#u1 li:lt(5)").css("backgroundColor","black"); //索引小於5的全部的元素

運行結果:

 

JQuery中的常見方法

 

.html()方法,設置標籤中間顯示其餘標籤及內容,相似於innerHTML

.text()方法,設置標籤中間顯示的文本內容,相似於innerText

.val()方法,設置input標籤中value的值,相似於value

.css()方法,設置元素的樣式,相似於style

注意:

()中寫字符串,一個參數,就是要設置的值,什麼也不寫,返回的是這個屬性的值

.css()寫的是鍵值對

 

 

 

 

 

今天就先總結到這吧!有緣下次再見