Jquery基礎整理1

     1.簡單的JQuery

(1)  $(document).ready(function(){               $(document).ready(mydays);

        alert(“載入完畢，請檢查！”);               function mydays(){

});                                           alert(“載入完畢，請檢查！”)   };

//註冊事件的函數，和普通的Dom不一樣，不需要再元素上面標記onload這樣的事件。

(2)當頁面Dom元素載入完畢時執行代碼，可以簡寫為：$(function(){ alert(“載入完成”) });

(3)和onload類似，但是onload只能註冊一次（window.onload=function….）(沒有C#中的“+=“機制)，後註冊的取代先註冊的，而ready可以多次註冊都會被執行。

(4)JQuery的ready和Dom的onload的區別：

  onload是所有Dom元素建立完畢，圖片，CSS等載入完畢後才能被觸發。ready則是Dom元素建立完畢後就被觸發，這樣可以提高網頁的響應速度。

1. JQuery提供的函數

(1) $.map(array,fn) 對數組array中每個元素調用fn函數將逐個進行處理，fn函數將處理返回，最後得到一個新數組。

例如：得到一個數組值是原數組值二倍的新數組

var arr[3,4,7,8];

var arr2=$.map(arr,function(item){  return item*2  });

$.map不能處理Dictionary風格的數組。

(2) $.each(array,fn) 對數組array中每個元素調用fn函數進行處理，沒有傳回值。

  var arr={“tom”:10,”jerry”:20,”lily”:30};

  $.each(arr,function(key,value){alert(key+”=”+value);});

  如果是普通風格的數組，則key的值是序號。

(3) 還可以省略function參數，這時候用this可以得到遍曆的當前元素。

   var arr=[3,6,7];

   $.each(arr,function(){ alert(this);   });

1. JQuery對象，Dom對象

(1) JQuery對象就是通過JQuery封裝Dom對象後產生的對象：alert($(“#div1”).html());。Dom對象要想通過JQuery進行操作，先要轉換為JQuery對象。

(2) $(“#div1”).html()等價於document.getElementById(“div1”).innerHTML;

(3) $(“#div1”)得到的就是JQuery對象，JQuery對象只能調用JQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用JQuery對象的方法，所以這句話是錯誤的（alert($(“#div1”).innerHTML)），因為innerHTML是Dom對象的屬性。

(4) Array是JS語言本身的對象，不是Dom對象，因此不需要轉換為JQuery對象才能用。

(5) 將Dom對象轉換為JQuery對象的方法，$(Dom對象)；當調用JQuery沒有封轉的方法時必須用Dom對象。轉換方法：var domobj=jqobj[0]或者var domobj=jqobj.get(0)。

(6) JQuery修改樣式：$(“#div1”).css(“background”,”red”);  獲得樣式

$(“#div1”).css(“background”);  修改value=$(“#un”).val(“abc”)。獲得value;

$(“#un”).val(),類似的獲得，設定innerText，innerHTML用text()和html()。

1. JQuery選取器

(1) JQuery選取器用於尋找滿足條件的元素，比如可以用$(“#控制項ID”)來根據控制項ID獲得控制項的JQuery對象，相當於getElementById;

$(“#div1”).html(“<font color=red>Hello</font>”);

(2) $(“TagName”)來擷取所有指定標籤名的JQuery對象，相當於getElementByName;

 $(function(){

        $(“#btnclick”).click(function(){

               $(“p”).html(“我們都是p”);              

});      

  });                                

隱式迭代，給所有選擇出來的元素增加Click事件

(3) css選取器，同時選擇擁有樣式的多個元素。

<style type=”text/css”>

        .test{background-color:red; }

</style>

<script type=”text/javascript”>

        $(function(){

               $(“.text”).click(function(){

       alert($(this).text());

});        });

</script>

<p class=”test”>Test1</p>

(4) 多條件選取器

        1) 多條件選取器：$(“p,div,span.menuitem”)，同時選擇p標籤，div標籤和擁有menuitem樣式的.span標籤元素。

        2) 注意：選取器運算式中的空格不能多，不能少，這是易錯點。

        3) 層次選取器：

       $(“div li”)擷取div下的所有li元素（後代，子，子的子）。

        $(“div>li”)擷取div下的直接li子項目。

        $(“.menuitem+div”)擷取樣式名為menuitem之後的第一個div元素。

        $(“.menuitem~div”)擷取樣式名為menuitem之後的所有div元素。

1. JQuery隱式迭代

如何判斷對象是否存在，JQuery選取器返回的是一個對象數組，調用text(),html(),click()之類的方法的時候其實是對數組中的每個元素迭代調用每個方法，因此即使通過ID選擇的元素不存在也不會報錯，如果需要判斷是否存在，因該這樣寫：if($(“btn1”).length<=0){

     alert(“ID”為btn1的元素不存在,請您檢查！);

}

1. JQuery節點遍曆

(1) next()方法用於擷取節點後的第一個挨著的同輩元素 $(“.menuitem”).next(“div”);

  nextAll()方法用於擷取節點後的所有同輩元素   $(“.menuitem”).nextAll(“div”);

(2) siblings()方法用於擷取所有的同輩元素。  $(“.menuitem”).siblings(“li”);

1. JQuery基本過濾選取器

(1) :first 選取第一個元素。$(“div :first”);  選取第一個<div>

(2) :last 選取最後一個元素。  $(“div :last”)  選取最後一個<div>

(3) :not（選取器）選取不滿足”選取器條件的元素”   $(“input :not(.myclass)”);   選取樣式名不是myclass的<input>。

(4) :even，:odd  選取索引是奇數，偶數的元素。$(input:even)選取索引是奇數的<input>

(5) :eq(索引序號)，:gt(索引序號)，:lt( 索引序號)選取索引等於，大於，小於索引序號的元素，比如 $(“input:lt(5)”)  選取索引小於5的<input>。

(6) $(“:header”)選取所有的h1…..h6的元素。

(7) $(“div:animated”); 選取正在執行動畫的<div>元素

(8) 屬性過濾選取器

        $(“div[id]”)選取有ID屬性的<div>

        $(“div[title=test]”)選取title屬性為”test”的<div>,JQuery中沒有對GetElementByName進行封裝，用$(“input[name=abc]”);

        $(“div[title!=test]”)選取title屬性不為”test”的<div>

        還可以選擇開關，結束，包含等，條件還可以複合。

(9) 表單對象選取器

        $(“#form1:enabled”);   選取id為form1的表單內所有啟用的元素。

        $(“#from1:disabled”);   選取id為form1的表單內所有禁用的元素。

        $(“#form1:checked”);   選取所有選中的元素(Radio,CheckBox)。

        $(“selectLselected”);    選取所有選中的選項元素(下拉式清單)。

1. 元素的each

JQuery元素也可以調用each方法，只是對$.each的簡化調用。舉例：顯示選中的複選框

1. JQuery表單選取器

(1) $(“:input”);  選取所有的<input>，<textarea>，<select>和<button>元素，和$(“input”)不一樣，$(“input”)只能獲得<input>控制項。

(2) $(“:text”);  選取所有的單行文字框，等價於$(“input:[type=text]”);

(3) $(“:password”)選取所有的密碼框，同理還有：:radio，:checkbox，:submit，:image，:reset，:button，:file，:hidden。

1. JQuery的Dom操作

(1) 使用html()方法讀取或者設定元素的innerHTML;

        alert($(“a:first”).html());              alert($(“a:first”).html(“Hello”));

(2) 使用text()方法讀取或者設定元素的innerText.

        alert($(“a:first”).text());               alert($(“a:first”).text(Hello));

(3) 使用attr()方法讀取或者設定元素的屬性，對於JQuery沒有封裝的屬性用attr進行操作。     alert($(“a:first”).attr(“href”));

        $(“a:first”).attr(“href”,”http://www.baidu.com”);

(4) 使用removeAttr刪除屬性

1. 動態建立Dom節點

(1) 使用$(html字串)來建立Dom節點，並且返回一個JQuery對象，然後調用append等方法將新建立的節點添加到Dom中。

        var link=$(“<a href=’http://www.baidu.com’>百度</a>”);

        $(“div:first”).append(link);

$()建立的就是一個JQuery對象，可以完全進行操作。

        var link=$(“<a href=’http://www.baidu.com’>百度</a>”);

        link.text(“百度”);

        $(“div:first”).append(link);

append()方法用來在元素的末尾追加元素。

prepend()在元素的開始添加元素。

after() 在元素之後添加元素。

before()在元素之前添加元素。

1. 刪除節點

(1) remove()刪除選擇的節點

$(“ul li.textitem”).remove();  刪除ul下的li中有testitem樣式的元素。

remove方法的傳回值是被刪除的節點對象，還可以繼續使用被刪除的節點，比如重新添加到其他其他節點下：

       var list=$(“#ulsite li”).remove();

       $(“#ulsite2”).append(list);

(2) empty()是將節點清空

1. 節點操作

(1) 替換節點

        $(“br”).replaceWith(“<hr />”);  註解：<br />替換為<hr />

(2) 包裹節點

warp()方法用來將所有元素逐個用指定標籤包裹。

$(“b”).warp(“<font color=’red’></font>”)將所有的粗體紅色顯示

1. JQuery樣式操作

(1) 擷取樣式 attr(“class”)。

(2) 設定樣式 attr(“class”,”myclass”)。

(3) 追加樣式 addClass(“myclass”)。

(4) 移除樣式  removeClass(“myclass”)。

(5) 轉場樣式(如果存在樣式則去掉樣式，如果沒有樣式則添加樣式)  taggleClass(“myclass”)。

(6) 判斷是否存在樣式  :hasClass(“myclass”);