jQuery获取内容和属性

jQuery获取内容和属性

获取内容:为了获取DOM对象的内容,有三个简单的方法,jQuery的DOM操作方法如下。

  • text()。它用于设置或返回选定元素的文本内容。
  • html()。它用于设置或返回选定元素的内容,包括HTML标记。
  • val()。它用于设置或返回表单字段的值。

例子:这个例子使用文本内容方法来获取内容。

<!DOCTYPE html>
<html>
  
<head> 
    <title>jQuery Get Content</title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head> 
  
<body style="text-align:center;">
  
    <h1 id="GFG1" style = "color:green;">
        GeeksForGeeks
    </h1>
      
    <h2 id="GFG2">jQuery Get Content</h2>
      
    <button id="btn1">Text</button>
    <button id="btn2">HTML</button>
      
    <!-- Script to get the content -->
    <script>
        (document).ready(function(){
            ("#btn1").click(function(){
                alert("Text: " + ("#GFG2").text());
            });
              
            ("#btn2").click(function(){
                alert("HTML: " + $("#GFG1").html());
            });
        });
    </script>
</body>
  
</html>  

输出:

  • 在点击按钮之前。
    jQuery获取内容和属性
  • 单击文本按钮后。
    jQuery获取内容和属性
  • 点击Html按钮后。
    jQuery获取内容和属性

获取属性 jQuery attr() 方法用于获取DOM对象的属性值。

例子:这个例子使用attr()方法来获取属性值。

<!DOCTYPE html>
<html>
  
<head> 
    <title>jQuery Get Attributes</title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head> 
  
<body style="text-align:center;">
   
    <h1 style = "color:green;">
        GeeksForGeeks
    </h1>
      
    <h2>jQuery Get Attributes</h2>
      
    <button id="btn1">Click</button>
      
    <br><br>
      
    <h3>
        <a href="https://geeksforgeeks.org" id="GFG">
            geeksforgeeks.org
        </a>
    </h3>
      
    <!-- Script to get the attribute value -->
    <script>
        (document).ready(function(){
            ("button").click(function(){
                alert($("#GFG").attr("href"));
            });
        });
    </script>
</body>
  
</html>  

输出:

  • 在点击按钮之前。
    jQuery获取内容和属性
  • 点击按钮后。
    jQuery获取内容和属性

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程