首頁 > web前端 > js教程 > 主體

怎樣使用jQuery中元素選擇器

php中世界最好的语言
發布: 2018-05-30 09:29:51
原創
1398 人瀏覽過

這次帶給大家怎麼使用jQuery中元素選擇器,使用jQuery中元素選擇器的注意事項有哪些,以下就是實戰案例,一起來看一下。

一、介紹

元素選擇器是根據元素名稱來匹配對應的元素。

通俗的講元素選擇器指向的是DOM元素的標記名,也就是說元素選擇器是根據元素的標記名選擇的。

可以把元素的標記名理解成學生的姓名,在一個學校中可能有多個姓名為「劉偉」的學生,但是姓名為「吳語」的學生也許只有一個,所以透過元素選擇器匹配到的元素可能有多個,也可能是一個。

多數情況下,元素選擇器符合的是一組元素。

元素選擇器的使用方法如下:

$("element");
登入後複製

其中,element為要查詢元素的標記名稱。

例如,要查詢全部p元素,可以使用下面的jQuery程式碼:

$("p");
登入後複製

二、套用

##在頁面中新增兩個

標記和一個按鈕,透過點擊按鈕來取得這兩個

,並修改它們的內容。

三、程式碼##

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<p>这里种植了一棵草莓</p>
<p>这里养殖了一条鱼</p>
<input type="button" value="若干年后" />
<script type="text/javascript">
$(document).ready(
function()
{
 $("input[type='button']").click(
  function()
  {                //为按钮绑定单击事件
   $("p").eq(0).html("这里长出了一片草莓"); //获取第一个p元素
   $("p").get(1).innerHTML="这里的鱼没有了"; //获取第二个p元素
  });
});
</script>
登入後複製

#四、運行效果(這裡使用http:/ /tools.jb51.net/code/HtmlJsRun 線上執行測試):

五、執行說明

#在上面的程式碼中,使用元素選擇器取得了一組p元素的jQuery包裝集,它是一組Object對象,儲存方式為[Object Object],但是這種方式並不能顯示出單獨元素的文本訊息,需要透過索引器來確定要選取哪個p元素,在這裡分別使用了兩個不同的索引器eq()

get()這裡的索引器類似於房間的門牌號,不同的是,門牌號碼是從1開始計數的,而索引器是從0開始計數的。

在本實例中使用了兩種方法來設定元素的文字內容,

html()方法是jQuery的方法,innerHTML方法是DOM物件的方法。 這裡也用了$(document).ready()

方法,當頁面元素載入就緒的時候就會自動執行程序,自動為按鈕綁定點擊事件。

eq()方法傳回的是jQuery包裝集,所以它只能呼叫jQuery的方法,而get()

方法傳回的是一個DOM對象,所以它只能用DOM物件的方法。

eq()

方法與

get()方法預設都是從0開始計數。

$("#test").get(0)

等效於$("#test")[0]

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########JS裡常見內建函數使用詳解###############怎麼使用vue元件進行資料傳遞### ######

以上是怎樣使用jQuery中元素選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板