如何使用 jQuery 通过文本查找元素？

我们将学习如何使用 jQuery 的 API 查找元素。本文需要一些 HTML、CSS、JavaScript、Bootstrap 和 jQuery 知识。可以根据是否包含我们要查找的字符串来选择元素。这可以使用 jQuery contains 选择器来选择包含字符串的元素来完成。

关于包含选择器

根据元素的不同，匹配的文本可以直接出现在所选元素的后代内或后代内。 jQuery 中的:contains()选择器用于选择包含指定字符串的元素。文本必须具有要选择的匹配大小写。

语法：要查找的文本字符串。它区分大小写。

jQuery(":contains(text)")

方法：

• 在本地系统中创建一个 HTML 文件“ index.html” 。
• 通过在

  标记内添加文本，遵循基本的 HTML 模板和两段。

• 使用包含选择器选择

  标记，并在包含选择器方法中将要选择的关键字作为参数传递。

• 成功执行上述步骤后，将 CSS 属性附加到包含您作为参数传递到contains方法中的关键字的选定段落。

示例：在这种情况下，我们正在寻找包含单词“Gfg”的元素。我们在选择元素后更改包含单词“Gfg”的特定段落的颜色。

HTML

  

    
      
    
    
  
    
        body {
            border: 2px solid green;
            min-height: 240px;
        }
  
        .center {
            display: flex;
            justify-content: center;
        }
  
        h1 {
            color: green;
            text-align: center;
        }
    

  

    GeeksforGeeks
  
    
        
            
                Web development refers to the building, 
                creating, and maintaining of websites.
                Gfg includes aspects such as web design,
                web publishing, web programming, and 
                database management. It is the creation 
                of an application that works over the 
                internet i.e. websites.
            
        
          
        
            
                Web development refers to the building, 
                creating, and maintaining of websites.
                It includes aspects such as web design, 
                web publishing, web programming, and 
                database management. It is the creation 
                of an application that works over the 
                internet i.e. websites.
            
        
    
  
    
        $('p:contains("Gfg")').css({ 'color': 'green' });
    

  

输出：

包含文本