• JQuery中的Dom操作和事件


    (一)JQuery中的事件

    1.常规事件,把js事件中的on去掉

      复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行

            toggle(function(){},function(){},....)可以写多个,点击事件循环执行

      未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作

     列子:点击按钮,创建元素,并给创建的元素添加点击事件 

      //对象.append();在什么对象下添加元素 $("html中要创建的内容")
      $("#boss").append($("<div class='div1'></div>"));

    复制代码
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!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.1.min.js"></script>
        <title></title>
        <style type="text/css">
            .div1 {
                100px;
                height:100px;
                margin-left:20px;
                margin-top:20px;
                float:left;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="button" value="提交" id="but"/>
            <div style="800px;height:600px;" id="boss">
                <div class="div1">
                </div>
                <div class="div1">
                </div>
                <div class="div1">
                </div>    
    
            </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
        //对象.live未来事件  
        $(".div1").live("click",function () {
            alert("aaa");
        });
    
        $("#but").click(function () {
            //对象.append();在什么对象下添加元素    $("html中要创建的内容")
            $("#boss").append($("<div class='div1'></div>"));
    
        });
    
    </script>
    复制代码

    2.阻止事件冒泡的方法:直接在事件中加入  return false;

    (二)Dom操作

    1.操作属性:

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

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

      删除属性:$("选择器").removeAttr("属性名")

    2.操作样式:

      操作样式:获取样式: var s = $("选择器").css("样式名")

            设置样式:$("选择器").css("样式名","值")

      操作样式表的class:添加class     $("选择器").addClass("class名")

                移出class     $("选择器").removeClass("class名")

                添加移除交替class     $("选择器").toggleClass("class名")

    3.操作内容:

    表单元素的取值赋值和js中的一样,非表单元素中,.html赋值:标记会编译,取值:标记会取出    

                           .text赋值:内容直接全部输入,取值:只取出文字内容

      表单元素:

        取值:var s = $("选择器").val()  

         赋值: $("选择器").val("值")

      非表单元素:

        取值:var s = $("选择器").html(),  var s = $("选择器").text()

        赋值:$("选择器").html("内容"), $("选择器").text("内容")

    4.操作相关元素:

      查找:父辈 --- parent()      前辈  ---  parents(选择器)

          子级 --- children(选择器)    后代 --- find(选择器)

          兄弟(哥哥) --- prev() ,prevAll(选择器)   弟弟 --- next()后面一个元素   nextAll(选择器)后面兄弟级的元素

      操作:新建元素$("html字符串") 

          添加:对象.appen(jquery对象) --- 内部添加,给什么对象添加

              after(jquery对象)  --- 下部平级添加

              before(jquery对象)  --- 上部平级添加

          移出:empty()   ---  清空内部全部元素

              remove()  ---  移出元素

          复制:clone()        

  • 相关阅读:
    Cmder配置
    uboot移植
    嵌入式产品开发技术问题
    flexbox布局
    使用PS过程
    STM32 使用 FreeRTOS过程记录
    TTL、RS232、RS485、串口
    用纯css改变下拉列表select框的默认样式
    task9暂存
    Hello World
  • 原文地址:https://www.cnblogs.com/weiyu11/p/6942175.html
Copyright © 2020-2023  润新知