webform（九）——JQuery基礎（選擇器、事件、DOM操作）

JQuery —— 一個js函數包一、選擇器 1、基本選擇器 ①id選擇器：# ②class選擇器：. ③標簽名選擇：標簽名 ④併列選擇：用，隔開 ⑤後代選擇：用空格隔開代碼用法展示： <title></title> <script src="js/jquery-1.7.2.min.js"></ ...

JQuery —— 一個js函數包

一、選擇器

1、基本選擇器

①id選擇器：# ②class選擇器：. ③標簽名選擇：標簽名

④併列選擇：用，隔開 ⑤後代選擇：用空格隔開

代碼用法展示：

<title></title>
    <script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div1">
            <a>aaaaa</a>  <%--a標記--%>
        </div>
        <div id="div2"></div>
        <div class="div"></div>
        <div></div>     
    </form>
</body>
</html>

<%--   $   JQuery標誌性符--%>
<script type="text/javascript" >
    $("#div1").css("background-color", "red");  //id選擇,$("#div1")相當於js中docunment.getElementById("div1"),下麵其他類似
    $(".div2").css("background-color", "red");   //class選擇
    $("div").css("background-color", "red");     //標簽選擇
    $("#div1,#div2").css("background-color", "red");    //併列選擇，用逗號隔開
    $("#div1 a").css("background-color", "red");    //後代選擇，用空格隔開
</script>

基本選擇器

2、過濾選擇器

（1）、基本過濾

①首個：:first ②尾個：:last ③任意個：:eq(索引號) ④大於：:gt(索引號)

⑤小於：:lt(索引號) ⑥排除：:not(選擇器) ⑦奇數：odd ⑧偶數：even

（2）、屬性過濾

①屬性名過濾：[屬性名]

②屬性值過濾：[屬性名=屬性值]或[屬性名！=屬性值]

（3）、內容過濾

①文字過濾：:contains(“字元串”)

②子元素過濾：:has(選擇器)

代碼用法展示：

<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="div">aaa</div>
        <div class="div">bbb</div>
        <div class="div" hehe="aaa" he="aaa"><a></a></div>
        <div class="div" hehe="bbb">bbb</div>
        <div class="div">aaa</div>
        <div class="div"><a></a></div>
    </form>
</body>
</html>
<script type="text/javascript" >
    //基本過濾
    $(".div:first").css("background-color", "red");   //取首個
    $(".div:last").css("background-color", "red");   //取最後一個
    $(".div:eq(2)").css("background-color", "red");   //取任意個， :eq(索引號)  或者$(".div").eq(2).css("background-color", "red");——重點
    $(".div:gt(2)").css("background-color", "red");   //:gt(索引號)，取大於該索引號的
    $(".div:lt(2)").css("background-color", "red");   //:lt(索引號)，取小於該索引號的
    $(".div:not(.div:eq(2))").css("background-color", "red");   //:not(“選擇器”)，排除這一個，選剩餘的
    $(".div:odd").css("background-color", "red");   //:odd，選索引為奇數的
    $(".div:even").css("background-color", "red");   //:even，選索引為偶數的

    //屬性過濾
    $(".div[he]").css("background-color", "red");   //[屬性名]，選有該屬性名的
    $(".div[hehe=aaa]").css("background-color", "red");   //[屬性名=屬性值]，選有該屬性名且是此屬性值的
    $(".div[hehe!=bbb]").css("background-color", "red");   //[屬性名！=屬性值]，選有該屬性名的且屬性值不是此的
    //內容過濾
    $(".div:contains('a')").css("background-color", "red");   //:contains('字元串')，選取包含該字元串的——根據文字
    $(".div:has(a)").css("background-color", "red");   //:has(“選擇器”)，選取包含該選擇器的——根據選擇器
</script>

過濾選擇器

二、事件

1、常規事件——把js事件前面的on去掉

比如：js：onclick——JQuery：click

2、複合事件

①houver(function(){},functiaon(){})——相當於把mouseover()mouseout()合二為一

②toggle(function(){},function(){},....)——點擊事件迴圈執行，具體看下麵的代碼用法展示

代碼用法展示：

<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server"> 
        <div class="div">aaa</div>
        <div class="div">bbb</div>
        <div class="div"><a></a></div>
        <div class="div">bbb</div>
        <div class="div">aaa</div>
        <div class="div"><a></a></div>
   
    </form>
</body>
</html>
<script type="text/javascript" >
    //單擊事件
    $(".div").click(function () {
        alert('aaa');
    });
    //雙擊事件
    $(".div").dblclick(function () {
        alert('aaa');
    });
    //複合事件hover——相當於把mouseover()mouseout()合二為一
    $(".div").hover(function () {
        $(this).css("background-color","red");
    }, function () {
        $(this).css("background-color", "blue");
    });
    //複合事件toggle——點擊事件迴圈執行，下麵代碼中即點擊div，迴圈為div更換背景色
    $(".div").toggle(function () {
        $(this).css("background-color", "red");
    }, function () {
        $(this).css("background-color", "yellow");
    }, function () {
        $(this).css("background-color", "blue");
    }, function () {
        $(this).css("background-color", "green");
    }, function () {
        $(this).css("background-color", "orange");
    });
</script>

常規和複合事件

3、事件冒泡（冒泡事件）——冒泡部分轉載自：http://www.cnblogs.com/jiqing9006/archive/2012/09/11/2679831.html

冒泡事件就是點擊子節點，會向上觸發父節點，祖先節點的點擊事件。

解析：下麵是html代碼部分：

<body>
<div id="content">
    外層div元素
    <span>內層span元素</span>
    外層div元素
</div>

<div id="msg"></div>
</body>

對應的jQuery代碼如下：

<script type="text/javascript">
$(function(){
    // 為span元素綁定click事件
    $('span').bind("click",function(){
        var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";//獲取html信息
        $('#msg').html(txt);// 設置html信息
    });
    // 為div元素綁定click事件
    $('#content').bind("click",function(){
        var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
        $('#msg').html(txt);
    });
    // 為body元素綁定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
        $('#msg').html(txt);
    });
})
</script>

冒泡Jquery

當點擊span時，會觸發div與body 的點擊事件。點擊div時會觸發body的點擊事件。

如何防止這種冒泡事件發生呢？

修改如下：

<script type="text/javascript">
$(function(){
       // 為span元素綁定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 為div元素綁定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 為body元素綁定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
        $('#msg').html(txt);
    });
})
</script>

阻止冒泡一

event.stopPropagation(); // 阻止事件冒泡

或者通過return false來處理。

<script type="text/javascript">
$(function(){
       // 為span元素綁定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 為div元素綁定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 為body元素綁定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
        $('#msg').html(txt);
    });
})
</script>

阻止冒泡二

三、DOM操作

1、操作內容

①表單元素：取值：var s=$(“選擇器”).val()

賦值：$(“選擇器”).val(“值”)

②非標單元素：取值：var s=$(“選擇器”).text(“內容”) var s=$(“選擇器”).text(“內容”)

賦值：$(“選擇器”).text(“內容”) $(“選擇器”).html(“內容”)

代碼用法展示：

<script type ="text/javascript" >       
        //$(document).ready相當於js中的window.onload
        $(document).ready(function () {
            $("#a").click(function () {
                $(this).text("bbbb");//改變a標記的顯示內容
            })
            $("#btn1").click(function () {
                $("#txt").val("aaaaaa");//改變文本框的顯示內容
                $(this).val("bbbb");//改變按鈕的顯示內容
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <%--操作內容   start--%>
        <a id="a">aaaaa</a>
        <input type ="text" id="txt" />
        <input type ="button" id="btn1" value ="btn1" />
        <%--操作內容   end--%>
    </form>
</body>

操作內容

2、操作屬性

①獲取屬性：var s=$(“選擇器”).attr(“屬性名”)

②設置屬性：$(“選擇器”).attr(“屬性名”,”屬性值”)

③更改屬性：$(“選擇器”).attr(“屬性名”,”屬性值”)

④刪除屬性：$(“選擇器”).removeAttr(“屬性名”)

代碼用法展示：

<style type="text/css" >
        .aaa {
        border :5px solid red;
        }
        .bbb {
        border :10px solid blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <%--操作屬性   start--%>
        <input type ="text" id="txt1" />
        <input type ="button" id="btn1" value ="btn1" />
        <input type ="button" id="btn2" value ="btn2" />
        <input type ="button" id="btn3" value ="btn3" />
        <%--操作屬性   end--%>
    </form>
</body>
</html>
<script type ="text/javascript" >
    $("#btn1").click(function () {
        $("#txt1").attr("disabled", "disabled");//點擊btn1按鈕，給文本框設置不可用屬性和class
        $("#txt1").attr("class", "aaa");
    });

    $("#btn2").click(function () {
        $("#txt1").removeAttr("disabled").attr("class","bbb");//點擊btn2按鈕，刪除文本框不可用屬性,並且更改class屬性
    });

    $("#btn3").click(function () {
        var aa = $("#txt1").attr("class");//點擊btn3按鈕，獲取文本框的class屬性，然後alert彈出看看
        alert(aa);
    });
</script>

操作屬性

3、操作樣式（一般用操作屬性就可以）

①操作內聯樣式：獲取樣式：var s=$(“選擇器”).css(“樣式名”)

設置樣式：$(“選擇器”).css(“樣式名”,”值”)、

$("#btn1").click(function () {

        $("#txt1").css("border", " 5px  solid  red");});

②操作樣式表的class：添加class：$(“選擇器”).addClass(“class名”)

移除class：$(“選擇器”).removeClass(“class名”)

添加移除交替class：$(“選擇器”).toggleClass(“class名”)

4、操作相關元素

①查找：父輩、前輩：parent() parents(“選擇器”)

子代、後代：children(“選擇器”) find(“選擇器”)

兄弟：哥哥：prev() prevAll(“選擇器”)

弟弟：next() next All(“選擇器”)

用法代碼展示：

<script src="js/jquery-1.7.2.min.js"></script>
    <style type="text/css" >
        #div1 {
        width :400px;
        height :400px;
        background-color :red;
        }
        #div2 {
        width :300px;
        height :300px;
        background-color :yellow;
        }
        #div3 {
        width :200px;
        height :200px;
        background-color :blue;
        }
        #div4 {
        width :100px;
        height :100px;
        background-color :green;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div4"></div>
            </div>
        </div>
    </div>
        <div id="div5"></div>
        <div id="div6"></div>
        <div id="div7"></div>
    </form>
</body>
</html>
<script type="text/javascript" >
    $("#div4").click(function () {
        var p = $(this).parent();//查找div4的父級
        var p = $(this).parent().parent();//查找div4的父級的父級
        var p = $(this).parents("#div2");//若知道前輩的id或name，可以用parents("選擇器")
    });

    $("#div1").click(function () {
        var p = $(this).children("#div2");//查找div1的子級，children("#div3")是找不出來的，div3是div1子集的子集
        var p = $(this).find("#div3");//查找div1的後代div3
    });
    //div1、div5、div6、div7平級
    $("#div1").click(function () {
        var p = $(this).next();//查找div1的弟弟，可以next().next()
        var p = $(this).nextAll("#div6");//nextAll("選擇器")，前提知道需要查找的弟弟的選擇器
    });
    $("#div7").click(function () {
        var p = $(this).prev();//查找div1的哥哥，可以prev().prev()
        var p = $(this).prevAll("#div6");//prevtAll("選擇器")，前提知道需要查找的哥哥的選擇器
    });

</script>

查找

②操作：新建：$(“html字元串”)

添加：appen(jquery對象或字元串)——某個元素內部添加

after(…)——下部平級添加

before(…)——上部平級添加

移除：empty()——清空內部全部元素

remove()——清空元素

複製：clone()

代碼用法展示：例子：模仿製作一個微博或者其他的評論頁面

<script src="js/jquery-1.7.2.min.js"></script>
    <style type="text/css" >
        #div1 {
        width :400px;
        height :400px;
        background-color :red;
        }
        #div2 {
        width :300px;
        height :300px;
        background-color :yellow;
        }
        #div3 {
        width :200px;
        height :200px;
        background-color :blue;
        }
        #div4 {
        width :100px;
        height :100px;
        background-color :green;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div4"></div>
            </div>
        </div>
    </div>
        <div id="div5"></div>
        <div id="div6"></div>
        <div id="div7"></div>
    </form>
</body>
</html>
<script type="text/javascript" >
    $("#div4").click(function () {
        var p = $(this).parent();//查找div4的父級
        var p = $(this).parent().parent();//查找div4的父級的父級
        var p = $(this).parents("#div2");//若知道前輩的id或name，可以用parents("選擇器")
    });

    $("#div1").click(function () {
        var p = $(this).children("#div2");//查找div1的子級，children("#div3")是找不出來的，div3是div1子集的子集
        var p = $(this).find("#div3");//查找div1的後代div3
    });
    //div1、div5、div6、div7平級
    $("#div1").click(function () {
        var p = $(this).next();//查找div1的弟弟，可以next().next()
        var p = $