Webform——JQuery基础(选择器事件DOM操作)

Posted 尘暮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webform——JQuery基础(选择器事件DOM操作)相关的知识,希望对你有一定的参考价值。

一、选择器

1、基本选择器

①id选择器:#       ②class选择器:.       ③标签名选择:标签名      

④并列选择:用,隔开          ⑤后代选择:用空格隔开

代码用法展示:

 View Code

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(){},....)——点击事件循环执行,具体看下面的代码用法展示

代码用法展示:

 View Code

3、事件冒泡(冒泡事件)

      冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

解析:下面是html代码部分:

 View Code

对应的jQuery代码如下:

 View Code

当点击span时,会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢?

修改如下:

 阻止冒泡一

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

或者通过return false来处理。

 阻止冒泡二

三、DOM操作

1、操作内容

①表单元素:取值:var s=$(“选择器”).val()      

                       赋值:$(“选择器”).val(“值”)

②非标单元素:取值:var s=$(“选择器”).text(“内容”)            var s=$(“选择器”).text(“内容”)      

                          赋值:$(“选择器”).text(“内容”)       $(“选择器”).html(“内容”)

代码用法展示:

 操作内容

2、操作属性

①获取属性:var s=$(“选择器”).attr(“属性名”)

②设置属性:$(“选择器”).attr(“属性名”,”属性值”)

③更改属性:$(“选择器”).attr(“属性名”,”属性值”)

④删除属性:$(“选择器”).removeAttr(“属性名”)

代码用法展示:

 操作属性

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(“选择器”)

用法代码展示:

 查找

②操作:新建:$(“html字符串”)

                  添加:appen(jquery对象或字符串)——某个元素内部添加

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

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

                 移除:empty()——清空内部全部元素

                          remove()——清空元素

                 复制:clone()

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <title></title>
    <style>
        .txt-main {
            position: relative;
            width: 80%;
            margin-left: 10%;
            border: 2px solid black;
            box-sizing: border-box;
            margin-top: 10px;
        }

            .txt-main h3 {
                margin-left: 5%;
            }

        .context {
            width: 90%;
            margin-left: 5%;
            border-bottom: 1px solid black;
            border-top: 1px solid black;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .txt-main span {
            display: inline-block;
            width: 90%;
            margin-left: 5%;
            text-align: right;
            height: 40px;
            line-height: 40px;
        }
        #txt2 {
        width:70%;
        height:30px;
        margin-left:20px;
        font-size:18px;
        }
        .huifu {
        width:100%;
       margin-left:20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <textarea id="txt1" style="width: 100%; height: 100px;"></textarea><br />
            发表人:<input type="text" id="txt-name" />
            <input type="button" value="发表" id="btn1" /><br />

        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        var str = "<div class=\\"txt-main\\"><h3 id=\\"h3\\">";
        str += $("#txt-name").val(); //这里填充发表人
        str += "</h3><div class=\\"context\\">";
        str += $("#txt1").val();//这里填充发表内容
        str += "</div><span>2000-1-1</span><input type=\\"button\\" value=\\"删除\\" class=\\"btn_del\\" /><input type=\\"button\\" value=\\"回复\\" class=\\"btn_ins\\" /><br /></div>";

        var ttt = $(str);
        $(this).next().after(ttt);
    });
    $(".btn_del").live("click", function () {
        $(this).parent().remove();
    });
    $(".btn_ins").live("click", function () {
        var str = "<div class=\\"huifu\\" ><textarea id=\\"txt2\\"></textarea></br><input type=\\"button\\" value=\\"提交\\" class=\\"btn_tijiao\\" /></br></div>";       
        var ttt = $(str);
        $(this).next().after(ttt);
    });
    $(".btn_tijiao").live("click", function () {        
        var str = "<div class=\\"huifu\\">";
        str += "@";
        str += $("#h3").text() + ":";
        str += $("#txt2").val();
        str += "</div>";
        var ttt = $(str);
        $(this).parent().after(ttt);
        $(this).parent().remove();
    });


</script>
View Code

 

以上是关于Webform——JQuery基础(选择器事件DOM操作)的主要内容,如果未能解决你的问题,请参考以下文章

JQuery基础

2017-06-02Jquery基础

JQuery语法,选择器和事件

jquery基础入门

jquery基础入门

JQuery:JQuery语法选择器事件处理