快捷導(dǎo)航

jQuery基本選擇器和層次選擇器學(xué)習(xí)使用

更新時(shí)間：2017年02月27日 11:12:10 作者：rain_web

這篇文章主要介紹了jQuery基本選擇器和層次選擇器的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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">但可以通過將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>

效果圖

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Jquery 表格合并的問題分享
有朋友問GridView控件對(duì)于跨行合并的問題，這可以用控件嵌套來完成，當(dāng)然，我更喜歡在前臺(tái)來用JS來控制網(wǎng)頁元素的樣式，而后臺(tái)僅僅是根據(jù)客戶的請求，來返回?cái)?shù)據(jù)。
2011-09-09
JS Canvas定時(shí)器模擬動(dòng)態(tài)加載動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JS Canvas定時(shí)器模擬動(dòng)態(tài)加載動(dòng)畫,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
jQuery實(shí)現(xiàn)的回車觸發(fā)按鈕事件功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的回車觸發(fā)按鈕事件功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-03-03
解決Jquery鼠標(biāo)經(jīng)過不停滑動(dòng)的問題
在鼠標(biāo)經(jīng)過的時(shí)候不停的顯示隱藏html元素，正確的寫法應(yīng)該是下面這樣的,需要的朋友可以參考下
2014-03-03
jQuery Form插件使用詳解_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery Form插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
jQuery中l(wèi)ayer分頁器的使用
本篇文章主要介紹了jQuery中l(wèi)ayer分頁器的使用，實(shí)例介紹了layer分頁器的技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-03-03
jQuery實(shí)現(xiàn)動(dòng)態(tài)粒子效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)粒子效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
jQuery基于圖層模仿五星星評(píng)價(jià)功能的方法
這篇文章主要介紹了jQuery基于圖層模仿五星星評(píng)價(jià)功能的方法,使用jQuery動(dòng)態(tài)修改元素背景色的方法實(shí)現(xiàn)星評(píng)功能,需要的朋友可以參考下
2015-05-05
jquery.Callbacks的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹的是jQuery.Callback()的實(shí)現(xiàn),這個(gè)函數(shù)常見的應(yīng)用場景是事件觸發(fā)機(jī)制，也就是設(shè)計(jì)模式中的觀察者（發(fā)布、訂閱機(jī)制），目前Callbacks對(duì)象用于queue、ajax、Deferred對(duì)象中，下面通過這篇文章來詳細(xì)看看關(guān)于jquery.Callbacks實(shí)現(xiàn)的介紹吧。
2016-11-11