jQuery的ID選擇器

編程語言 jQuery JavaScript 技術 達人科技 2017-04-01

基本選擇器在實際應用中比較廣泛,建議重點掌握jQuery的基本選擇器,它是其他類型選擇器的基礎,基礎選擇器是jQuery選擇器中最為重要的部分。

jQuery基本選擇器包括ID選擇器、元素選擇器、類名選擇器、多種匹配條件選擇器和通配符選擇器。本篇介紹ID選擇器。

一 ID選擇器(#id)

ID選擇器#id顧名思義就是利用DOM元素的id屬性值來篩選匹配的元素,並以jQuery包裝集的形式返回給對象。

這就像一個學校中每個學生都有自己的學號一樣,學生的姓名是可以重複的但是學號卻是不可以的,根據學生的學號就可以獲取指定學生的信息。

ID選擇器的使用方法如下:

$("#id");

其中,id為要查詢元素的ID屬性值。

例如,要查詢ID屬性值為user的元素,可以使用下面的jQuery代碼:

$("#user");

如果頁面中出現了兩個相同的id屬性值,程序運行時頁面會報出JS運行錯誤的對話框,所以在頁面中設置id屬性值時要確保該屬性值在頁面中是唯一的。

二 應用

在頁面中添加一個ID屬性值為testInput的文本輸入框和一個按鈕,通過單擊按鈕來獲取在文本輸入框中輸入的值。

三 代碼

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="輸入的值為"/>
<script type="text/javascript">
$(document).ready(
function
{
$("input[type='button']").click(
function//為按鈕綁定單擊事件
{ 
var inputValue = $("#testInput").val; //獲取文本輸入框的值
        alert(inputValue);
    }
    );
}
);
</script>

四 運行效果

jQuery的ID選擇器

五 運行說明

1、在上面的代碼中,使用了jQuery中的屬性選擇器匹配文檔中的按鈕,並且為按鈕綁定單擊事件。

2、ID選擇器是以“#id”的形式獲取對象的,在這段代碼中用$("#testInput")獲取了一個id屬性值為testInput的jQuery包裝集,然後調用包裝集的val方法取得文本輸入框的值。

相關推薦

推薦中...