jQuery簡單示例 一

 

jQuery選擇器主要分爲四類:
  1、基本選擇器
  2、層次選擇器
  3、過濾選擇器
  4、表單選擇器

  <script type="text/javascript">

           //這是一種窗體首次加載給給某個控件綁定事件
            $("#Button2").bind("click", function () { $("#Button1").show(); }); //給按鈕Button2綁定點擊事件,讓Button1顯示
            $("#Button3").bind("click", function (event) { $("body div").css("background","#bbffaa"); });//給按鈕Button3綁定點擊事件,讓body中的所有div標籤的背景顏色爲#bbffaa
            $("#Button4").bind("click", function (event) { $("#Label1").text("abc"); })//給按鈕Button4綁定點擊事件,改變Label1的值

            $("#Button1").bind("click", function () { $("<div style=\"border:solid 1px #FF0000\">這是動態加載的DIV</div>").appendTo(addDiv); });// //給按鈕Button1綁定點擊事件,在DIV(addDiv)標籤中添加一個div標籤
            $(function () { addDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">這個是窗體首次加載的DIV</div>"; });//窗體首次加載添加一個Div標籤


            //這也是一種窗體首次加載給控件綁定事件的方法

            $(document).ready(function () {
                //                $("tr:first").css("background", "#bbffaa");//改變第一個tr標籤的背景顏色
                //                $("tr:last").css("background", "#bbffaa");//改變最後一個tr標籤的背景顏色
                //                $("tr:even").css("background", "red");//改變偶數的tr標籤的背景顏色
                //                $("tr:eq(1)").css("background", "blue");//改變i第2個tr標籤的背景顏色,這裏eq(i),i從0開始
                //                $("tr:odd").css("background", "#bbffaa");//改變奇數的tr標籤的背景顏色
                $("#Button6").click(function () { $("a").text("這是a標籤") });//給Button6添加事件,改變所有a標籤的值
                $("#Button7").click(function () { $("#a1,#Labeli").text("測試中...."); });//給Button7添加事件,改變ID爲a1,Labeli的控件的值
                $("#Button8").click(function () { $("#Label2+label").text("測試後標籤"); });//給Button8添加事件,改變ID爲Label2後面label標籤的值
                $("tr:gt(3)").css("background", "blue");//設置tr標籤前三行的背景樣式
                $("tr:lt(4)").css("background", "red");//設置tr標籤後四行的背景樣式
                $("div[id]").css("background", "blue")//設置所有DIV標籤有ID的背景樣式
                $("ul li:nth-child(2)").text("這個是第二個");//設置ul中第二個li的值
                $("ul li:first-child").text("這個是第一個");//設置ul中第一個li的值
                $("ul li:last-child").text("這個是最後一個");//設置ul中最後一個li的值
                $("input:checked").attr("checked",false);//設置所有選中複選框的checked=false

            });
        </script>     

--------------有錯誤的地方請多多點評,謝謝-----------------

========待續 ethan========

發佈了28 篇原創文章 · 獲贊 5 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章