jQuery基本選擇器和層次選擇器學(xué)習(xí)使用
更新時間:2017年02月27日 11:12:10 作者:rain_web
這篇文章主要介紹了jQuery基本選擇器和層次選擇器的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery選擇器的具體實現(xiàn)代碼,供大家參考,具體內(nèi)容如下
1. 基本選擇器
<html> <head> <meta charset="utf-8"> <title>jQuery基本選擇器</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </head> <body> <div id="idDiv">DOM對象與jQuery對象的相互轉(zhuǎn)化</div> <div class="classDiv">jQuery對象不能直接使用DOM對象的方法,</div> <div class="classDiv">但可以通過將jQuery對象轉(zhuǎn)換成DOM對象后再調(diào)用其方法。</div> <span class="classSpan">基本選擇器是jQuery中最常用的選擇器</span> <script type="text/javascript"> $(function(e){ $("#idDiv").css("color","blue"); $(".classDiv").css("background-color","#dddddd"); $("span").css("background-color","gray").css("color","white"); $("*").css("font-size","20px"); $("#idDiv,.classSpan").css("font-style","italic"); }); </script> </body> </html>
2. 層次選擇器
<html> <head> <meta charset="utf-8"> <title>jQuery層次選擇器</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </head> <body> <div> 搜索條件<input name="search" /> <form> <label>用戶名:</label> <input name="useName" /> <fieldset> <label>密 碼:</label> <input name="password" /> </fieldset> </form> <hr/> 身份證號:<input name="none" /><br/> 聯(lián)系電話:<input name="none" /> </div> <script type="text/javascript"> $(function(e){ $("form input").css("width","200px"); $("form > input").css("background","pink"); $("label + input").css("border-color","blue"); //$("label").next("input").css("border-color","blue"); $("form ~ input").css("border-bottom-width","8px"); //$("form").nextAll("input").css("border-bottom-width","4px"); $("*").css("padding-top","3px"); }); </script> </body> </html>
效果圖
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery使用append在html元素后同時添加多項內(nèi)容的方法
這篇文章主要介紹了jQuery使用append在html元素后同時添加多項內(nèi)容的方法,實例分析了jQuery中append追加內(nèi)容的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼
對于習(xí)慣使用GridView的人來說,前臺頁面需要動態(tài)添加表格的行數(shù),是一件痛苦的事。GridView處理這種事情相當麻煩,你點擊“新增一行”,需要回傳到服務(wù)器。2010-09-09jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能
這篇文章主要介紹了jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10用jquery獲取select標簽中選中的option值及文本的示例
下面小編就為大家分享一篇用jquery獲取select標簽中選中的option值及文本的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jquery實現(xiàn)滑屏大圖定時收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實現(xiàn)滑屏大圖定時收縮為小banner圖片的廣告代碼,可實現(xiàn)大幅廣告圖的漸顯效果及定時收縮功能,點擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實用價值,需要的朋友可以參考下2015-09-09