webform（九）——JQuery基础（选择器、事件、DOM操作）
生活随笔
收集整理的這篇文章主要介紹了
webform（九）——JQuery基础（选择器、事件、DOM操作）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JQuery —— 一個js函數包
一、選擇器
1、基本選擇器
①id選擇器：#?????? ②class選擇器：.?????? ③標簽名選擇：標簽名??????
④并列選擇：用，隔開????????? ⑤后代選擇：用空格隔開
代碼用法展示：
<title></title><script src="js/jquery-1.7.2.min.js"></script> </head> <body><form id="form1" runat="server"><div id="div1"><a>aaaaa</a> <%--a標記--%></div><div id="div2"></div><div class="div"></div><div></div> </form> </body> </html><%-- $ JQuery標志性符--%> <script type="text/javascript" >$("#div1").css("background-color", "red"); //id選擇,$("#div1")相當于js中docunment.getElementById("div1"),下面其他類似$(".div2").css("background-color", "red"); //class選擇$("div").css("background-color", "red"); //標簽選擇$("#div1,#div2").css("background-color", "red"); //并列選擇，用逗號隔開$("#div1 a").css("background-color", "red"); //后代選擇，用空格隔開 </script> 基本選擇器?
2、過濾選擇器
（1）、基本過濾
①首個：:first??????? ②尾個：:last?????? ③任意個：:eq(索引號)??????? ④大于：:gt(索引號)
⑤小于：:lt(索引號)???????? ⑥排除：:not(選擇器)???????? ⑦奇數：odd?????????? ⑧偶數：even
（2）、屬性過濾
①屬性名過濾：[屬性名]???
②屬性值過濾：[屬性名=屬性值]或[屬性名！=屬性值]
（3）、內容過濾
①文字過濾：:contains(“字符串”)
②子元素過濾：:has(選擇器)
代碼用法展示：
<script src="js/jquery-1.7.2.min.js"></script> </head> <body><form id="form1" runat="server"><div class="div">aaa</div><div class="div">bbb</div><div class="div" hehe="aaa" he="aaa"><a></a></div><div class="div" hehe="bbb">bbb</div><div class="div">aaa</div><div class="div"><a></a></div></form> </body> </html> <script type="text/javascript" >//基本過濾$(".div:first").css("background-color", "red"); //取首個$(".div:last").css("background-color", "red"); //取最后一個$(".div:eq(2)").css("background-color", "red"); //取任意個， :eq(索引號) 或者$(".div").eq(2).css("background-color", "red");——重點$(".div:gt(2)").css("background-color", "red"); //:gt(索引號)，取大于該索引號的$(".div:lt(2)").css("background-color", "red"); //:lt(索引號)，取小于該索引號的$(".div:not(.div:eq(2))").css("background-color", "red"); //:not(“選擇器”)，排除這一個，選剩余的$(".div:odd").css("background-color", "red"); //:odd，選索引為奇數的$(".div:even").css("background-color", "red"); //:even，選索引為偶數的//屬性過濾$(".div[he]").css("background-color", "red"); //[屬性名]，選有該屬性名的$(".div[hehe=aaa]").css("background-color", "red"); //[屬性名=屬性值]，選有該屬性名且是此屬性值的$(".div[hehe!=bbb]").css("background-color", "red"); //[屬性名！=屬性值]，選有該屬性名的且屬性值不是此的//內容過濾$(".div:contains('a')").css("background-color", "red"); //:contains('字符串')，選取包含該字符串的——根據文字$(".div:has(a)").css("background-color", "red"); //:has(“選擇器”)，選取包含該選擇器的——根據選擇器 </script> 過濾選擇器?
二、事件
1、常規(guī)事件——把js事件前面的on去掉
比如：js：onclick——JQuery：click
2、復合事件
①houver(function(){},functiaon(){})——相當于把mouseover()mouseout()合二為一
②toggle(function(){},function(){},....)——點擊事件循環(huán)執(zhí)行，具體看下面的代碼用法展示
代碼用法展示：
<script src="js/jquery-1.7.2.min.js"></script> </head> <body><form id="form1" runat="server"> <div class="div">aaa</div><div class="div">bbb</div><div class="div"><a></a></div><div class="div">bbb</div><div class="div">aaa</div><div class="div"><a></a></div></form> </body> </html> <script type="text/javascript" >//單擊事件$(".div").click(function () {alert('aaa');});//雙擊事件$(".div").dblclick(function () {alert('aaa');});//復合事件hover——相當于把mouseover()mouseout()合二為一$(".div").hover(function () {$(this).css("background-color","red");}, function () {$(this).css("background-color", "blue");});//復合事件toggle——點擊事件循環(huán)執(zhí)行，下面代碼中即點擊div，循環(huán)為div更換背景色$(".div").toggle(function () {$(this).css("background-color", "red");}, function () {$(this).css("background-color", "yellow");}, function () {$(this).css("background-color", "blue");}, function () {$(this).css("background-color", "green");}, function () {$(this).css("background-color", "orange");}); </script> 常規(guī)和復合事件?
3、事件冒泡（冒泡事件）——冒泡部分轉載自：http://www.cnblogs.com/jiqing9006/archive/2012/09/11/2679831.html
????? 冒泡事件就是點擊子節(jié)點，會向上觸發(fā)父節(jié)點，祖先節(jié)點的點擊事件。
解析：下面是html代碼部分：
<body> <div id="content">外層div元素<span>內層span元素</span>外層div元素 </div><div id="msg"></div> </body>對應的jQuery代碼如下：
<script type="text/javascript"> $(function(){// 為span元素綁定click事件$('span').bind("click",function(){var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";//獲取html信息$('#msg').html(txt);// 設置html信息 });// 為div元素綁定click事件$('#content').bind("click",function(){var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";$('#msg').html(txt);});// 為body元素綁定click事件$("body").bind("click",function(){var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";$('#msg').html(txt);}); }) </script> 冒泡Jquery當點擊span時，會觸發(fā)div與body?的點擊事件。點擊div時會觸發(fā)body的點擊事件。
如何防止這種冒泡事件發(fā)生呢？
修改如下：
<script type="text/javascript"> $(function(){// 為span元素綁定click事件$('span').bind("click",function(event){var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";$('#msg').html(txt);event.stopPropagation(); // 阻止事件冒泡 });// 為div元素綁定click事件$('#content').bind("click",function(event){var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";$('#msg').html(txt);event.stopPropagation(); // 阻止事件冒泡 });// 為body元素綁定click事件$("body").bind("click",function(){var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";$('#msg').html(txt);}); }) </script> 阻止冒泡一event.stopPropagation(); // 阻止事件冒泡
或者通過return?false來處理。
<script type="text/javascript"> $(function(){// 為span元素綁定click事件$('span').bind("click",function(event){var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";$('#msg').html(txt);return false;});// 為div元素綁定click事件$('#content').bind("click",function(event){var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";$('#msg').html(txt);return false;});// 為body元素綁定click事件$("body").bind("click",function(){var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";$('#msg').html(txt);}); }) </script> 阻止冒泡二?
?
三、DOM操作
1、操作內容
①表單元素：取值：var s=$(“選擇器”).val()??????
?????????????????????? 賦值：$(“選擇器”).val(“值”)
②非標單元素：取值：var s=$(“選擇器”).text(“內容”)??????????? var s=$(“選擇器”).text(“內容”)??????
????????????????????????? 賦值：$(“選擇器”).text(“內容”)?????? $(“選擇器”).html(“內容”)
代碼用法展示：
<script type ="text/javascript" > //$(document).ready相當于js中的window.onload $(document).ready(function () {$("#a").click(function () {$(this).text("bbbb");//改變a標記的顯示內容 })$("#btn1").click(function () {$("#txt").val("aaaaaa");//改變文本框的顯示內容$(this).val("bbbb");//改變按鈕的顯示內容 })});</script> </head> <body><form id="form1" runat="server"><%--操作內容 start--%><a id="a">aaaaa</a><input type ="text" id="txt" /><input type ="button" id="btn1" value ="btn1" /><%--操作內容 end--%></form> </body> 操作內容?
2、操作屬性
①獲取屬性：var s=$(“選擇器”).attr(“屬性名”)
②設置屬性：$(“選擇器”).attr(“屬性名”,”屬性值”)
③更改屬性：$(“選擇器”).attr(“屬性名”,”屬性值”)
④刪除屬性：$(“選擇器”).removeAttr(“屬性名”)
代碼用法展示：
<style type="text/css" >.aaa {border :5px solid red;}.bbb {border :10px solid blue;}</style> </head> <body><form id="form1" runat="server"><%--操作屬性 start--%><input type ="text" id="txt1" /><input type ="button" id="btn1" value ="btn1" /><input type ="button" id="btn2" value ="btn2" /><input type ="button" id="btn3" value ="btn3" /><%--操作屬性 end--%></form> </body> </html> <script type ="text/javascript" >$("#btn1").click(function () {$("#txt1").attr("disabled", "disabled");//點擊btn1按鈕，給文本框設置不可用屬性和class$("#txt1").attr("class", "aaa");});$("#btn2").click(function () {$("#txt1").removeAttr("disabled").attr("class","bbb");//點擊btn2按鈕，刪除文本框不可用屬性,并且更改class屬性 });$("#btn3").click(function () {var aa = $("#txt1").attr("class");//點擊btn3按鈕，獲取文本框的class屬性，然后alert彈出看看 alert(aa);}); </script> 操作屬性?
3、操作樣式（一般用操作屬性就可以）
①操作內聯(lián)樣式：獲取樣式：var s=$(“選擇器”).css(“樣式名”)
??????????????????????????? 設置樣式：$(“選擇器”).css(“樣式名”,”值”)、
$("#btn1").click(function () {$("#txt1").css("border", " 5px solid red");});②操作樣式表的class：添加class：$(“選擇器”).addClass(“class名”)
??????????????????????????????????? 移除class：$(“選擇器”).removeClass(“class名”)
??????????????????????????????????? 添加移除交替class：$(“選擇器”).toggleClass(“class名”)
?
4、操作相關元素
?①查找：父輩、前輩：parent()???? parents(“選擇器”)
?????????????????? 子代、后代：children(“選擇器”)?? find(“選擇器”)
?????????????????? 兄弟：哥哥：prev()??? prevAll(“選擇器”)
??????????????????????????? 弟弟：next()??? next All(“選擇器”)
用法代碼展示：
<script src="js/jquery-1.7.2.min.js"></script><style type="text/css" >#div1 {width :400px;height :400px;background-color :red;}#div2 {width :300px;height :300px;background-color :yellow;}#div3 {width :200px;height :200px;background-color :blue;}#div4 {width :100px;height :100px;background-color :green;}</style> </head> <body><form id="form1" runat="server"><div id="div1"><div id="div2"><div id="div3"><div id="div4"></div></div></div></div><div id="div5"></div><div id="div6"></div><div id="div7"></div></form> </body> </html> <script type="text/javascript" >$("#div4").click(function () {var p = $(this).parent();//查找div4的父級var p = $(this).parent().parent();//查找div4的父級的父級var p = $(this).parents("#div2");//若知道前輩的id或name，可以用parents("選擇器") });$("#div1").click(function () {var p = $(this).children("#div2");//查找div1的子級，children("#div3")是找不出來的，div3是div1子集的子集var p = $(this).find("#div3");//查找div1的后代div3 });//div1、div5、div6、div7平級$("#div1").click(function () {var p = $(this).next();//查找div1的弟弟，可以next().next()var p = $(this).nextAll("#div6");//nextAll("選擇器")，前提知道需要查找的弟弟的選擇器 });$("#div7").click(function () {var p = $(this).prev();//查找div1的哥哥，可以prev().prev()var p = $(this).prevAll("#div6");//prevtAll("選擇器")，前提知道需要查找的哥哥的選擇器 });</script> 查找②操作：新建：$(“html字符串”)
??????????????????添加：appen(jquery對象或字符串)——某個元素內部添加
?????????????????????????? after(…)——下部平級添加
???????????????????????????before(…)——上部平級添加
???????????????? 移除：empty()——清空內部全部元素
????????????????????????? remove()——清空元素
?????????????????復制：clone()
代碼用法展示：例子：模仿制作一個微博或者其他的評論頁面
<script src="js/jquery-1.7.2.min.js"></script><style type="text/css" >#div1 {width :400px;height :400px;background-color :red;}#div2 {width :300px;height :300px;background-color :yellow;}#div3 {width :200px;height :200px;background-color :blue;}#div4 {width :100px;height :100px;background-color :green;}</style> </head> <body><form id="form1" runat="server"><div id="div1"><div id="div2"><div id="div3"><div id="div4"></div></div></div></div><div id="div5"></div><div id="div6"></div><div id="div7"></div></form> </body> </html> <script type="text/javascript" >$("#div4").click(function () {var p = $(this).parent();//查找div4的父級var p = $(this).parent().parent();//查找div4的父級的父級var p = $(this).parents("#div2");//若知道前輩的id或name，可以用parents("選擇器") });$("#div1").click(function () {var p = $(this).children("#div2");//查找div1的子級，children("#div3")是找不出來的，div3是div1子集的子集var p = $(this).find("#div3");//查找div1的后代div3 });//div1、div5、div6、div7平級$("#div1").click(function () {var p = $(this).next();//查找div1的弟弟，可以next().next()var p = $(this).nextAll("#div6");//nextAll("選擇器")，前提知道需要查找的弟弟的選擇器 });$("#div7").click(function () {var p = $(this).prev();//查找div1的哥哥，可以prev().prev()var p = $(this).prevAll("#div6");//prevtAll("選擇器")，前提知道需要查找的哥哥的選擇器 });</script> css前臺代碼：
總代碼 <title></title><script src="js/jquery-1.7.2.min.js"></script><link href="css/css7.css" rel="stylesheet" /> </head> <body><form id="form1" runat="server"><div id="boss"><div id="top"><textarea id="txt1"></textarea><input type="button" id="btn1" value="提交" /></div><div id="bottom"><%--評論div start--%><div class="item"><div class="item_top">aaaaaaaa</div><div class="item_txt">aaaaaaa </div><div class="item_bottom">1999-1-1<input type="button" class="btn_del" value="刪除" /></div></div><%--評論div end--%></div></div></form> </body> </html> <script type="text/javascript">$("#btn1").click(function () {var oTxt = $("#txt1").val();//取文本框的內容var aaa = "<div class=\"item\">";aaa += "<div class=\"item_top\">aaaaaaaa</div><div class=\"item_txt\">";aaa += oTxt;aaa += "</div><div class=\"item_bottom\">";aaa += "1999-1-1 <input type=\"button\" value=\"刪除\" class=\"btn_del\" /></div></div>";//拼接評論div的字符串//判斷是否已有評論if ($(".item").length <= 0) {$("#bottom").append(aaa);//若沒有，直接在 $("#bottom")內部添加一個 }else {$(".item").eq(0).before(aaa);//若有，從索引為0的一個，上部平級添加//$(".item").eq(0).after(aaa);//若有，從索引為0的一個，下部平級添加 }});//live()——未來事件，即給還沒有出現(xiàn)但一定會出現(xiàn)的元素添加事件，只要這個class是.btn_del的元素出現(xiàn)，就會綁上這個事件$(".btn_del").live("click", function () {$(this).parent().parent().remove();}); </script>?
轉載于:https://www.cnblogs.com/H2921306656/p/5977885.html
總結
以上是生活随笔為你收集整理的webform（九）——JQuery基础（选择器、事件、DOM操作）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库里any 和 all 的区别
- 下一篇： 在React 组件中使用Echarts