jQuery基本選擇器和層次選擇器學(xué)習(xí)使用
本文實(shí)例為大家分享了jQuery選擇器的具體實(shí)現(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對(duì)象與jQuery對(duì)象的相互轉(zhuǎn)化</div> <div class="classDiv">jQuery對(duì)象不能直接使用DOM對(duì)象的方法,</div> <div class="classDiv">但可以通過(guò)將jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象后再調(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/> 身份證號(hào):<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>
效果圖
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別
- 詳解強(qiáng)大的jQuery選擇器之基本選擇器、層次選擇器
- jQuery層次選擇器選擇元素使用介紹
- jquery選擇器之層級(jí)過(guò)濾選擇器詳解
- Jquery中的層次選擇器與find()的區(qū)別示例介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
- jQuery選擇器之基本選擇器與層次選擇器
- JQuery中層次選擇器用法實(shí)例詳解
- jQuery層次選擇器用法示例
- jQuery入門(mén)之層次選擇器實(shí)例簡(jiǎn)析
- jQuery層疊選擇器用法實(shí)例分析
相關(guān)文章
jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法
這篇文章主要介紹了jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法,實(shí)例分析了jQuery中append追加內(nèi)容的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼
對(duì)于習(xí)慣使用GridView的人來(lái)說(shuō),前臺(tái)頁(yè)面需要?jiǎng)討B(tài)添加表格的行數(shù),是一件痛苦的事。GridView處理這種事情相當(dāng)麻煩,你點(diǎn)擊“新增一行”,需要回傳到服務(wù)器。2010-09-09jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能
這篇文章主要介紹了jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10用jquery獲取select標(biāo)簽中選中的option值及文本的示例
下面小編就為大家分享一篇用jquery獲取select標(biāo)簽中選中的option值及文本的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01基于jQuery實(shí)現(xiàn)表單提交驗(yàn)證
本文給大家分享的是一段基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的表單提交驗(yàn)證的代碼,非常簡(jiǎn)單實(shí)用,推薦給有相同需求的小伙伴們參考下。2014-11-11jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼,可實(shí)現(xiàn)大幅廣告圖的漸顯效果及定時(shí)收縮功能,點(diǎn)擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09