jquery基本操作
（1）jquery放在head中必须先：
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { //所要进行的操作 })//相当于JS中的 window.onload = function () {//所要进行的操作 } </script> </head>
（2）jquery的点击事件和格式
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $("#btn1").click(function () {//#后面是id alert("?"); }); }) </script> </head> <body> <form id="form1" runat="server"> <input type="button" id="btn1" value="btn1"/> </form> </body> </html>
（3）jquery同时对多个元素进行操作（用，隔开）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $("#btn1,#btn2").click(function () {//#后面是id alert("?"); }); }) </script> </head> <body> <form id="form1" runat="server"> <input type="button" id="btn1" value="btn1"/> <input type="button" id="btn2" value="btn2" /> </form> </body> </html>
（4）jquery对元素的后代进行操作（用空格隔开）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $("#div1 #btn1").click(function () {//#后面是id alert("?"); }); }) </script> </head> <body> <form id="form1" runat="server"> <div id="div1" style="width:100px;height:100px;background-color:red;"> <input type="button" id="btn1" value="btn1"/></div> <input type="button" id="btn2" value="btn2" /> </form> </body> </html>
（5）jquery对某个元素进行操作（第一个（first），随后一个(last)，任意一个(eq(索引号))，奇数（odd），偶数(even)，某一堆(小于lt(索引号)，大于gt(索引号))，排除某一个（not(选择器)））
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $(".div1:first").click(function () {//对第一个div的操作 alert("第一个div"); }); $(".div1:last").click(function () {//对最后一个div的操作 alert("最后一个div"); }); $(".div1:eq(2)").click(function () {//eq(索引号) 对任意一个div的操作 alert("第三个div"); }); $(".div1").eq(3).click(function () {//eq(索引号)的另一种写法 alert("第四个div"); }); $(".div1:lt(3)").click(function () {//lt(索引号) 小于索引号的该元素 alert("对索引号小于3的div进行操作"); }); $(".div1:gt(3)").click(function () {//lt(索引号) 小于索引号的该元素 alert("对索引号大于3的div进行操作"); }); $(".div1:odd").click(function () {//odd 索引号为奇数的该元素 alert("对索引号为奇数的div的操作"); }); $(".div1:even").click(function () {//even 索引号为偶数的该元素 alert("对索引号为偶数的div的操作"); }); $(".div1:not(.div1:eq(1))").click(function () {//not(选择器) alert("对索引号不为1的div的操作"); }); }); </script> <style> .div1 { width:100px; height:100px; background-color:red; float:left; margin-left:10px; } </style> </head> <body> <form id="form1" runat="server"> <div class="div1" ></div> <div class="div1" ></div> <div class="div1" ></div> <div class="div1" ></div> <div class="div1" ></div> <div class="div1" ></div> <div class="div1" ></div> </form> </body> </html>
（6）属性过滤（自己添加属性，对其操作[属性名=值]，[属性名!=值]）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $(".div1[aaa]").click(function () {//含有aaa属性的div1的操作 alert("该div有属性aaa"); }); $(".div1[aaa=bbb]").click(function () {// [属性名=值] 属性aaa=bbb的div1的操作 alert("该div的aaa属性值为bbb"); }); $(".div1[aaa!=bbb]").click(function () {//[属性名!=值] 属性aaa!=bbb并且没有属性aaa的div1的操作, alert("该div的aaa属性值不为bbb"); }); }); </script> <style> .div1 { width:100px; height:100px; background-color:red; float:left; margin-left:10px; } </style> </head> <body> <form id="form1" runat="server"> <div class="div1" ></div> <div class="div1" aaa="aaa"></div> <div class="div1" aaa="bbb"></div> <div class="div1" aaa="ccc"></div> <div class="div1" ></div> <div class="div1" ></div> <div class="div1" ></div> </form> </body> </html>
（7）内容过滤 contains("字符串") has(选择器)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $(".div1:contains('c')").click(function () {//contains(string s) alert("该div内容有c"); }); $(".div1:has(p)").click(function (){//has(元素) $(this).css("background-color", "black");//将class为div1，并且含有p标签的div的背景设置为黑色 }); }); </script> <style> .div1 { width:100px; height:100px; background-color:red; float:left; margin-left:10px; } </style> </head> <body> <form id="form1" runat="server"> <div class="div1" ></div> <div class="div1" aaa="aaa">aaa</div> <div class="div1" aaa="bbb">abc</div> <div class="div1" aaa="ccc"><p>aab</p></div> <div class="div1" ></div> <div class="div1" ></div> <div class="div1" ></div> </form> </body> </html>
（8）复合事件（hover，toggle）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $("#div1").hover(function () { $(this).css("background-color","yellow"); }, function () { $(this).css("background-color", "gray"); });//相当于mouseover和mouseout事件 $(".div2").toggle(function () { $(this).css("background-color", "yellow"); }, function () { $(this).css("background-color", "gray"); }, function () { $(this).css("background-color", "red"); }, function () { $(this).css("background-color", "blue"); });//点击一次变一次颜色，变完一遍后重新开始 }); </script> <style> #div1 { width:100px; height:100px; float:left; margin-left:10px; background-color:#B0E0E6; } .div2 { width:100px; height:100px; float:left; margin-left:10px; background-color:#B0E0E6; } </style> </head> <body> <form id="form1" runat="server"> <div id="div1" ></div> <div class="div2"></div> <div class="div2"></div> <div class="div2"></div> <div class="div2"></div> <div class="div2"></div> </form> </body> </html>
（9）冒泡事件(阻止冒泡事件的连续方法：return false)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $("#d1").click(function () { alert("d1"); return false; });//如果没有return false，就会执行d1的父级直至body的点击事件。 $("#d2").click(function () { alert("d2"); return false; }); $("#d3").click(function () { alert("d3"); return false; }); $("#d4").click(function () { alert("d4"); return false; }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="d1" style="width:200px;height:200px;background-color:black"> <div id="d2" style="width:150px;height:150px;background-color:gray"> <div id="d3" style="width:100px;height:100px;background-color:#B0C4DE"> <div id="d4" style="width:50px;height:50px;background-color:#ADFF2F"></div> </div> </div> </div> </form> </body> </html>
（10）设置样式和属性（addclass,attr,removeAttr,css,offset,hide.show）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { $("#div1").click(function () { alert($(this).css("background-color"));//获取div1的background-color }); $("#div2").click(function () { $(this).css("background-color", "gray");//设置div2的background-color为gray alert($(this).offset().top);//获取dinv2距离顶部的距离 }); $("#div3").click(function () { $(this).hide();//点击隐藏 }); $("#btn1").click(function () { $(this).attr("disabled", "disabled");//点击使按钮不可用 }); $("#btn2").click(function () { $("#btn1").removeAttr("disabled");//移除某属性 使按钮可用 }); $("#div4").click(function () { $(this).addClass("div4");//添加class }); }); </script> <style> * { margin:0px; padding:0px; } #div1 { width:100px; height:100px; float:left; margin-left:10px; background-color:#B0E0E6; } #div2 { width:100px; height:100px; float:left; margin-left:10px; background-color:#B0E0E6; } #div3 { width:100px; height:100px; float:left; margin-left:10px; background-color:#000000; } .div4 { width:100px; height:100px; float:left; margin-left:10px; background-color:blue; } </style> </head> <body> <form id="form1" runat="server"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <input type="button" id="btn1" value="btn1" /> <input type="button" id="btn2" value="使btn1能用" /> <div id="div4">你好</div> </form> </body> </html>
（11）DOM操作
①属性：
获取属性：$("选择器").attr(“属性名”)
设置属性：$("选择器").attr(“属性名”，“属性值”)
删除属性：$("选择器").removeAttr(“属性名”)
②内容：
表单元素：取值：$("选择器").val()
赋值：$("选择器").val("值")
非表单元素：取值：$("选择器").text() $("选择器").html()
赋值：$("选择器").text(“值”) $("选择器").html("值")
③相关元素：
父，前辈：parent() parents(选择器)
子，后代：children(选择器) （只能选儿子们） find(选择器) （能选儿子们，孙子们，重孙子们.......等等）
兄弟：prev() prevAll(选择器) next() nextAll(选择器)
④操作相关元素：
添加： append：内部添加
after：下部平级添加
before：上部平级添加
删除： empty：清空所有内容元素
remove：移除某个元素
复制：clone
（12）未来元素 对 窗体运行后动态添加的元素的操作
格式： 对象.live("事件名",function(){});
完！！！！
