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

2017-6-3 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=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操作和事件