Heim > Web-Frontend > js-Tutorial > Verwendung von jQuery-Selektoren und hierarchischen Selektoren

Verwendung von jQuery-Selektoren und hierarchischen Selektoren

高洛峰
Freigeben: 2017-02-28 15:29:33
Original
1781 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt den spezifischen Implementierungscode des jQuery-Selektors als Referenz. Der spezifische Inhalt lautet wie folgt:

1 🎜>

Verwendung von jQuery-Selektoren und hierarchischen Selektoren

2. Ebenenauswahl
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery基本选择器</title>
  <script type="text/javascript" src="js/jquery-1.x.js"> </script>
 </head>
 <body>
  <p id="idp">DOM对象与jQuery对象的相互转化</p>
  <p class="classp">jQuery对象不能直接使用DOM对象的方法,</p>
  <p class="classp">但可以通过将jQuery对象转换成DOM对象后再调用其方法。</p>
  <span class="classSpan">基本选择器是jQuery中最常用的选择器</span>
  <script type="text/javascript">
    $(function(e){
      $("#idp").css("color","blue");
      $(".classp").css("background-color","#dddddd");
      $("span").css("background-color","gray").css("color","white");
      $("*").css("font-size","20px");
      $("#idp,.classSpan").css("font-style","italic");
    });
  </script>
 </body>
</html>
Nach dem Login kopieren

Verwendung von jQuery-Selektoren und hierarchischen Selektoren

Renderings
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery层次选择器</title>
  <script type="text/javascript" src="js/jquery-1.x.js"> </script>
 </head>
 <body>
  <p>
    搜索条件<input name="search" />
    <form>
     <label>用户名:</label>
     <input name="useName" />
     <fieldset>
       <label>密 码:</label>
       <input name="password" />
     </fieldset>
    </form>
    <hr/>
    身份证号:<input name="none" /><br/>
    联系电话:<input name="none" />
  </p>
  <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>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder PHP unterstützt Chinesische Website.

Verwendung von jQuery-Selektoren und hierarchischen Selektoren

Weitere Artikel zur Verwendung von jQuery-Selektoren und hierarchischen Selektoren finden Sie auf der chinesischen PHP-Website!



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage