資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery 透過文字查詢元素？
概述
jQuery 包含一個預定義的方法，使開發人員能夠輕鬆構建此功能。jQuery 提供了一種選擇器語法，我們可以透過它找到任何文字元素。因此，“:contains” 選擇器用於在任何元素中查詢文字。為了全面瞭解這個“:contains” 選擇器，我們將透過一個示例來開發此功能。
語法
在元素中查詢文字的語法如下所示：
$(selector:contains());
選擇器 - 上述語法中的選擇器是指要掃描以查詢文字的任何元素、類或 ID 名稱。
:contains() - 這是 jQuery 中的一個選擇器，其中傳遞一個引數作為文字，我們需要在元素中查詢該文字。
演算法
步驟 1 - 在文字編輯器中建立一個 HTML 檔案，並向檔案中新增 HTML 基本結構。
步驟 2 - 將 jQuery CDN（內容分發網路）連結新增到檔案的 head 標籤中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
步驟 3 - 新增一個 HTML 輸入元素和一個帶有 HTML button 標籤的按鈕。
<input type="text" placeholder="type the words to find..."> <button>Check</button>
步驟 4 - 建立一個無序列表，其中包含一些要在元素中搜索的列表項。
<ul> <li>Tutorialspoint provides best variety of courses.</li> <li>I am a Java Developer.</li> <li>HTML stands for Hypertext markup language.</li> <li>JavaScript is a scripting language.</li> <li>Web application provides are the best in terms of storage.</li> <li>Tutorialspoint is a best platform to learn.</li> </ul>
步驟 5 - 新增內部樣式標籤以建立頁面的佈局。
<style>
ul{
display: flex;
flex-direction: column;
}
li{
margin: 0.5rem 0;
}
</style>
步驟 6 - 將一個 script 標籤新增到 body 元素中。
<script></script>
步驟 7 - 使用 jQuery 選擇器語法訪問按鈕。
$("button").click(() => {}
步驟 8 - 選擇輸入標籤，並使用 val() 方法將輸入文字儲存在 value 中。
var val = $("input").val();
步驟 9 - 使用選擇器選擇帶有“:contains()” 選擇器的列表標籤，並將“val”變數傳遞給它以查詢輸入的文字。
$(`li:contains(`+val+`)`).css({"backgroundColor":"green","color":"white"});
步驟 10 - 成功建立了透過文字查詢元素的功能。
示例
在這個示例中，我們將建立一個包含一般要點列表的無序列表。我們還將建立一個用於搜尋的輸入框和一個按鈕。在這個示例中，我們將動態搜尋列表標籤中存在的任何單詞。
<html>
<head>
<title> find the element by text </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
ul{
display: flex;
flex-direction: column;
}
li{
margin: 0.5rem 0;
}
</style>
</head>
<body>
<h3>Type the words and check it in an element.</h3>
<input type="text" placeholder="type the words to find..."><button>Check</button>
<ul>
<li> Tutorialspoint provides best variety of courses.</li>
<li> I am a Java Developer.</li>
<li> HTML stands for Hypertext markup language.</li>
<li> JavaScript is a scripting language.</li>
<li> Web application provides are the best in terms of storage.</li>
<li> Tutorialspoint is a best platform to learn.</li>
</ul>
<script>
$("button").click(() => {
var val = $("input").val();
$(`li:contains(`+val+`)`).css({"backgroundColor":"green","color":"white"})
})
</script>
</body>
</html>
下圖顯示了上述示例的輸出，其中瀏覽器視窗載入一個輸入框，用於在框中輸入文字，以及一個觸發搜尋功能的按鈕。當用戶在搜尋框中輸入文字“Tutorialspoint”並點選“檢查”按鈕時，contains 選擇器將在下面給定的列表元素中搜索文字，並將返回帶有綠色背景顏色的列表標籤，如下所示。帶有綠色背景的列表包含在搜尋框中輸入的文字。
結論
此功能用於許多文字編輯器和格式化程式，幫助使用者搜尋任何文字。它的優勢在於，無論內容多長，它都會找到文字並將其突出顯示給使用者。我們在上面的程式中使用了“:contains” 選擇器來構建此功能，此選擇器本質上區分大小寫，如果使用者以小寫格式輸入文字，則它只會返回具有相同格式型別的元素。
1K+ 次瀏覽
