資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 查詢文字區域並新增邊框？
概述
為了查詢任何元素，Jquery 提供了最佳的選擇器語法，它為我們提供了一行程式碼來從 HTML 文件中選擇任何元素。因此，要查詢 HTML 中的所有文字區域，我們將使用 Jquery 選擇器來選擇文字區域，然後透過使用 Jquery CSS（層疊樣式表）操作，我們將圍繞文字區域製作一個邊框。邊框使使用者介面更具吸引力。
語法
下面給出在 Jquery 中選擇和設定任何元素樣式的語法
$(selector).css();
$(selector) − 用於選擇任何元素，可以使用美元符號後跟選擇器名稱來實現類名或 ID 名。
css() − css() 是一個 Jquery 方法，用於設定 DOM 元素的樣式。我們可以將值作為鍵值對傳遞，也可以將引數作為包含元素不同樣式的物件傳遞。
演算法
步驟 1 − 在您的文字編輯器中建立一個 index.html 檔案，並在其中新增 HTML 基本結構。
步驟 2 − 現在將 Jquery CDN（內容分發網路）連結新增到 HTML 檔案的 head 標籤中。
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
步驟 3 − 現在使用 label 標籤建立一些文字區域。
<label>Skills</label><br> <textarea cols="30" placeholder="Write your technical skills here..."></textarea><br><br> <label>Cover Letter</label><br> <textarea cols="30" placeholder="Cover here..."></textarea><br><br> <label>About yourself</label><br> <textarea cols="30" rows="5" placeholder="Write about yourself..."></textarea><br><br> <label>Give your feedback below</label><br> <textarea cols="30" rows="5" placeholder="Write here..."></textarea><br>
步驟 4 − 現在建立一個 HTML 按鈕來查詢所有需要設定樣式的文字區域。
<button>Border TextArea</button>
步驟 5 − 現在新增 script 標籤。
<script></script>
步驟 6 − 現在建立一個帶有 click() 函式的 Jquery 選擇器來觸發該函式。
$("button").click(() => {)})
步驟 7 − 現在使用 Jquery 選擇器語法來選擇文字區域。
$("textarea")
步驟 8 − 現在使用 Jquery css() 方法來設定文字區域的樣式。
$("textarea").css("border", "2px dashed red");
步驟 9 − 文字區域周圍的邊框已成功應用。
示例
在這個示例中，我們將建立一個簡單的佈局，其中包含一些將在文字區域內輸入的條目和一個按鈕，該按鈕將觸發一個查詢文字區域的函式。我們將使用上面提到的 Jquery 選擇器語法和 css() 方法。
<html>
<head>
<title> find textarea and make border using jquery </title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
</head>
<body>
<label>Skills</label><br>
<textarea cols="30" placeholder="Write your technical skills here..."></textarea><br><br>
<label>Cover Letter</label><br>
<textarea cols="30" placeholder="Cover here..."></textarea><br><br>
<label>About yourself</label><br>
<textarea cols="30" rows="5" placeholder="Write about yourself..."></textarea><br><br>
<label>Give your feedback below</label><br>
<textarea cols="30" rows="5" placeholder="Write here..."></textarea><br>
<button style="margin-top: 1rem;">Border TextArea</button>
<script>
$("button").click(() => {
$("textarea").css("border", "2px dashed red");
})
</script>
</body>
</html>
下圖顯示了上述功能的輸出，當用戶將其載入到瀏覽器時，它會顯示文字區域，例如技能、求職信、關於您自己和反饋，以及一個觸發該函式的按鈕。當用戶點選“新增邊框”按鈕時，它會觸發 Jquery 函式並在頁面上查詢所有文字區域，在獲取所有文字區域後，css() 方法會被觸發並使用紅色設定所有文字區域的邊框樣式，如下面的影像所示。
結論
這種型別的功能用於操作元素的樣式，或者我們可以在任何表單驗證中使用它，如果使用者在文字區域中輸入了不合適的資訊，則文字區域的樣式將發生更改，並在頁面中突出顯示以顯示一些錯誤。如果我們想在 css() 方法中傳遞多個樣式，則可以透過物件作為鍵值對傳遞。它也可以在提交表單之前未填寫任何表單條目時使用。
102 次瀏覽
