jquery基本操作
(1)jquery放在head中必须先:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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的点击事件和格式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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同时对多个元素进行操作(用,隔开)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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对元素的后代进行操作(用空格隔开)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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(选择器)))
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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)属性过滤(自己添加属性,对其操作[属性名=值],[属性名!=值])
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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(选择器)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ 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(){});
完!!!!