(一)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()