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="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="提交" 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()
