JQuery中的Dom操作和事件
Posted 微雨11
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;" 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()
以上是关于JQuery中的Dom操作和事件的主要内容，如果未能解决你的问题，请参考以下文章