webform（九）——JQuery基础（选择器、事件、DOM操作）

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 = $(this).nextAll("#div6");//nextAll("选择器")，前提知道需要查找的弟弟的选择器

    });

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

        var p = $(this).prev();//查找div1的哥哥，可以prev().prev()

        var p = $(this).prevAll("#div6");//prevtAll("选择器")，前提知道需要查找的哥哥的选择器

    });

</script>

css

前台代码：

总代码

    <title></title>

    <script src="js/jquery-1.7.2.min.js"></script>

    <link href="css/css7.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">

        <div id="boss">

            <div id="top">

                <textarea id="txt1"></textarea>

                <input type="button" id="btn1" value="提交" />

            </div>

            <div id="bottom">

                <%--评论div   start--%>

                <div class="item">

                    <div class="item_top">aaaaaaaa</div>

                    <div class="item_txt">

                        aaaaaaa

                    </div>

                    <div class="item_bottom">

                        --

                        <input type="button" class="btn_del" value="删除" />

                    </div>

                </div>

                <%--评论div   end--%>

            </div>

        </div>

    </form>

</body>

</html>

<script type="text/javascript">

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

        var oTxt = $("#txt1").val();//取文本框的内容

        var aaa = "<div class=\"item\">";

        aaa += "<div class=\"item_top\">aaaaaaaa</div><div class=\"item_txt\">";

        aaa += oTxt;

        aaa += "</div><div class=\"item_bottom\">";

        aaa += "1999-1-1 <input type=\"button\" value=\"删除\" class=\"btn_del\" /></div></div>";//拼接评论div的字符串

        //判断是否已有评论

        if ($(".item").length <= ) {

            $("#bottom").append(aaa);//若没有，直接在 $("#bottom")内部添加一个

        }

        else {

            $(".item").eq().before(aaa);//若有，从索引为0的一个，上部平级添加

            //$(".item").eq(0).after(aaa);//若有，从索引为0的一个，下部平级添加

        }

    });

    //live()——未来事件，即给还没有出现但一定会出现的元素添加事件，只要这个class是.btn_del的元素出现，就会绑上这个事件

    $(".btn_del").live("click", function () {

        $(this).parent().parent().remove();

    });

</script>

巴特西

webform（九）——JQuery基础（选择器、事件、DOM操作）

最新文章

热门文章