1.頁面載入時就執行

<script>
	$(document).ready(function(){
    	alert("hello jquery")
	})
	//簡寫
	$(function(){
       alert("hello jquery")
    })
</script>

類似於原生語法中的

<script>
	window.onload = function(){}
</script>

區別：

1. $(document).ready在頁面框架下載完就執行，而window.onload必須頁面全部載入完畢（包含圖片下載）後。
2. $(document).ready可以重複寫多個，每次執行結果都不同，window.onload儘管可以執行多個，但是僅輸出最後一個執行結果。

2.鏈式呼叫

<script>
   $(".title").click(function(){
       $(this).addClass("active").next(".item").css("display","block")
   })
</script>

next() 方法返回被選元素的後一個同級元素。

3.toggleClass() 方法

<script>
  $(
 
"button").click(function(){
  	  $("p").toggleClass("main");
  });
</script>

toggleClass() 對設定或移除被選元素的一個或多個類進行切換。
該方法檢查每個元素中指定的類。如果不存在則新增類，如果已設定則刪除之。這就是所謂的切換效果。

3.val() 方法

val() 方法用來獲取元素的值。該方法常用於表單中獲取或設定物件的值。
注意：val(array) 方法其引數也可以是陣列的形式。其作用是設定元素被選中。

<script>
  $(":radio").val(["radio2"
 
,"radio3"])
  //id為radio2和radio3的單選框被選中
</script>

4.事件冒泡

如圖所示，當body,div,還有按鈕都綁定了點選事件的時候，單擊按鈕，事件在冒泡的過程中先後又執行了div，body中的事件，所以共有三次事件的執行過程。我們可以用stopPropagation()方法阻止冒泡。

$(function() {
    $("body,div,#btnShow").click(function(event) {//點選事件
        alert(111);
        event.stopPropagation();//阻止冒泡過程
        //return false;也是阻止冒泡過程
    })
})

除了stopPropagation()方法阻止冒泡，還可以用return false阻止冒泡過程

$(function() {
    $("body,div,#btnShow").click(function(event) {//點選事件
        alert(111);
        return false;//阻止冒泡過程
    })
})

5.bind( )繫結事件

<script type="text/javascript">
    $(function() {
        $("#btnBind").bind("click mouseout", function() {
            $(this).attr("disabled", "disabled"); //按鈕不可用
        })
    })
</script>

bind方法中，第二個引數data為可選項，表示作為event.data屬性值傳遞到事件物件的額外資料物件，實際上該引數很少使用。

<div>姓名：<input type="text" class="txt" /></div>
<div id="divTip" class="clsTip"></div>
<script type="text/javascript">
    $(function() {
        var message = "執行的是focus事件";
        $(".txt").bind("focus", { msg: message }, function(event) {
            $("#divTip").show().html(event.data.msg); //設定文字
        });
        message = "執行的是change事件";
        $('.txt').bind('change', { msg: message }, function(event) {
            $("#divTip").show().html(event.data.msg); //設定文字
        });
    })
</script>

6.hover( )方法

hover(over,out)
引數over為滑鼠移到元素時觸發的函式， 引數out為滑鼠移出元素時觸發的函式，

<div class="clsFrame">
     <div class="clsTitle">jQuery簡介</div>
     <div class="clsContent">&nbsp;&nbsp;jQuery是由美國人John Resig於2006年建立的一個開源專案，它的主旨是：以更少的程式碼，實現更多的功能（Write less，do more）。</div>   
</div>
<script type="text/javascript">
    $(function() {
        $(".clsTitle").hover(function() {
            $(".clsContent").show();
        }, function() {
            $(".clsContent").hide();
        })
    })
</script>

7.trigger( )方法

trigger( )方法的功能是在所選擇的元素上觸發指定型別的事件。

姓名：<input id="Text1" type="text" class="txt"  value="緣滅" />
     <div id="divTip" style="padding-top:5px"></div>
<script type="text/javascript">
    $(function() {
        var oTxt = $("input"); //獲取文字框
        oTxt.trigger("select"); //自動選中文字框
        oTxt.bind("btn_Click", function() {//編寫文字框自定義事件
            var txt = $(this).val(); //獲取自身內容
            $("#divTip").html(txt); //顯示在頁面中
        })
        oTxt.trigger("btn_Click"); //自動觸發自定義事件
    })
</script>