為什麼說 jQuery 會退出前端的舞臺?
作為一個8年的老前端,我來嘗試著回答你的問題。說這個問題之前,我們要先把關注點放在什麼是庫,什麼是框架,什麼是jQuery上。1、JS庫 直白點的話,JS...
基本選擇器在實際應用中比較廣泛,建議重點掌握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>
四 運行效果
五 運行說明
1、在上面的代碼中,使用了jQuery中的屬性選擇器匹配文檔中的按鈕,並且為按鈕綁定單擊事件。
2、ID選擇器是以“#id”的形式獲取對象的,在這段代碼中用$("#testInput")獲取了一個id屬性值為testInput的jQuery包裝集,然後調用包裝集的val方法取得文本輸入框的值。