給定一個(gè)HTML文檔，如何使用jQuery按name屬性選擇元素？下面本篇文章就來給大家介紹一下使用jQuery按name屬性選擇元素的方法，希望對(duì)大家有所幫助。
在jQuery中，可以使用2個(gè)方法通過name屬性選擇元素；下面就來通過示例來介紹一下。
方法1：使用name屬性選擇器
name屬性選擇器可用于按name屬性選擇元素。此選擇器選擇值與指定值完全相等的元素。
語法：
[name="nameOfElement"]
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
? </head>?
? <body>
? ? <center>
? ? ? ? <p> 下面的文本框中有 <b>name屬性 'address'.</b>
? ? ? ? ? ? <form>
? ? ? ? ? ? ? ? <textarea rows="4" cols="40" name="address"></textarea>
? ? ? ? ? ? </form>
? ? ? ? </p>
? ? ? ? <p> 下面的文本框中有 <b>name屬性 'area'.</b>
? ? ? ? ? ? <form>
? ? ? ? ? ? ? ? <input type="text" name="area">
? ? ? ? ? ? </form>
? ? ? ? </p>
? ? ? ? <p>單擊按鈕，隱藏name為“area”的input輸入框</p>
? ? ? ? <button onclick="selectByName()">隱藏</button>
? ? ? ? <script src="https://code.jquery.com/jquery-3.3.1.min.js">
? ? ? ? </script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? function selectByName() {
? ? ? ? ? ? ? ? element = $('[name="area"]');
? ? ? ? ? ? ? ? //hide the element
? ? ? ? ? ? ? ? element.hide();
? ? ? ? ? ? }
? ? ? ? </script>
? ? </center>
</body>
</html>
輸出：
方法2：使用javascript按名稱獲取元素并將其傳遞給jQuery
可以使用javascript getElementsByName()方法選擇所需的元素，并將其傳遞給jQuery函數(shù)，以進(jìn)一步用作jQuery對(duì)象。
語法：
selector = document.getElementsByName('nameOfElement');
element = $(selector);
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
? </head>?
? <body>
? ? <center>
? ? ? ? <p> 下面的文本框中有 <b>name屬性 'address'.</b>
? ? ? ? ? ? <form>
? ? ? ? ? ? ? ? <textarea rows="4" cols="40" name="address"></textarea>
? ? ? ? ? ? </form>
? ? ? ? </p>
? ? ? ? <p> 下面的文本框中有 <b>name屬性 'area'.</b>
? ? ? ? ? ? <form>
? ? ? ? ? ? ? ? <input type="text" name="area">
? ? ? ? ? ? </form>
? ? ? ? </p>
? ? ? ? <p>單擊按鈕，隱藏name為“address”的文本框</p>
? ? ? ? <button onclick="selectByName()">隱藏</button>
? ? ? ? <script src="https://code.jquery.com/jquery-3.3.1.min.js">
? ? ? ? </script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? function selectByName() {
? ? ? ? ? ? ? ? selector = document.getElementsByName('address');
? ? ? ? ? ? ? ? element = $(selector);
? ? ? ? ? ? ? ? // hide the element
? ? ? ? ? ? ? ? element.hide();
? ? ? ? ? ? }
? ? ? ? </script>
? ? </center>
</body>
</html>
輸出：
推薦閱讀：
