快捷導(dǎo)航

jQuery選擇器用法實(shí)例詳解

更新時(shí)間：2015年12月17日 11:07:49 作者：冠軍

這篇文章主要介紹了jQuery選擇器用法,結(jié)合實(shí)例分析了jQuery選擇器的具體使用技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了jQuery選擇器用法。分享給大家供大家參考，具體如下：

jQuery 使用兩種方式來(lái)選擇 html 的 element，第一種使用CSS和Xpath選擇器聯(lián)合起來(lái)形成一個(gè)字符串來(lái)傳送到j(luò)Query的構(gòu)造器（如：$("div > ul a")）；第二種是用jQuery對(duì)象的幾個(gè)methods(方法)。這兩種方式還可以聯(lián)合起來(lái)混合使用。

使用 CSS 和 XPath 選擇器選擇的方法有許多種用法，關(guān)于詳細(xì)的 CSS 選擇器可參考本站相關(guān)文章。

首先來(lái)看通過(guò)元素的 ID 取得元素：$( "#id" )，在名字前面增加 # 表示這是一個(gè) id，注意引號(hào)不要丟掉。

在頁(yè)面中增加一個(gè) id 為 msg 的 span 元素，將 helloworld 顯示在 span 元素中，可以如下實(shí)現(xiàn)：

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
   <script type="text/javascript">
    $( function() {
     $("#msg").html("Hello, world."); } );
   </script>
  </head>
<body>
  <span id="msg"/>
</body>
</html>

注意：#id 需要用引號(hào)引起來(lái)，有參數(shù)的 html 函數(shù)用來(lái)為元素的 innerHTML 賦值。

下一個(gè)例子：

比如我們有一個(gè) list ，它的 ID 是 orderedlist，那么取得這個(gè) list 的引用的 jQuery 就是 $( "#orderedlist" )，為它增加一個(gè)值為 red 的 class 屬性 $("#orderedlist").addClass("red")，addClass 函數(shù)用來(lái)為元素增加 CSS 設(shè)置。取得 list 中的最后一個(gè) li 的引用，$( "#orderedlist li:last" )。

下面的例子將最后一個(gè) li 的內(nèi)容更改為 hello, world.

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
  <script type="text/javascript">
    $( function() {
     alert("wait");
     $( "#orderedlist li:last" ).html("hello, world.");
    } );
  </script>
</head>
<body>
  <ol id="orderedlist">
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
  </ol>
</body>
</html>

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: