首页 > 代码库 > 2017-6-3 JQuery中的Dom操作和事件

2017-6-3 JQuery中的Dom操作和事件

2024-09-30 01:46:38   221人阅读

---恢复内容开始---

（一）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=http://www.mamicode.com/"Js/jquery-1.7.1.min.js"></script>
    <title></title>
    <style type="text/css">
        .div1 {
            width: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=http://www.mamicode.com/"提交" id="but"/>
        <div style="width:800px;height:600px;background-color:blue;" 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 　　　　   

　　　　　　　

 

2017-6-3 JQuery中的Dom操作和事件


联系
我们