jQuery 獲取和設置HTML元素

Query 中包含更改和操作 HTML 元素和屬性的強大方法。我們可以通過這些方法來獲取 HTML 元素中的文本內容、元素內容（例如HTML標簽）、屬性值等。

text()方法

text() 方法可以用于設置或獲取所選元素的文本內容。

示例：

例如我們獲取下列 <p> 標簽中的文本內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').text();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來到俠課島!</p>
  <div>
    <p>希望俠課島中有適合你的編程課程。</p>
  </div>
</body>
</html>

在瀏覽器中演示效果：

除了獲取文本內容，text() 還可以用于設置文本內容，我們可以來看一下。

示例：

例如通過 text() 將 .content 的文本內容設置為 hello, xkd!：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('.content').text("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <p class="content">你好，歡迎來到俠課島!</p>
  <p><button>點擊按鈕</button></p>
</body>
</html>

在瀏覽器中演示效果：

html()方法

html() 方法用于設置或返回所選元素的內容（包括HTML標記）。

示例：

通過 html() 方法獲取 p 元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').html();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來到俠課島!</p>
</body>
</html>

在瀏覽器中演示效果：

除此之外，我們還可以使用 html() 方法來設置指定元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('.hello').html('你好，歡迎來到俠課島!');
  });
</script>
</head>
<body>
  <p>向下面的p標簽中添加文本內容：</p>
  <p class="hello"></p>
</body>
</html>

在瀏覽器中演示效果：

val()方法

val() 用于設置或返回表單字段的值。該方法大多時候用于 input 元素。

示例：

例如獲取輸入框 input 中的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert($('input').val());
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="summer" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

如果要使用 val() 方法設置 value 的值，我們可以像下面這樣做：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('input').val('summer')
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

attr()方法

attr() 方法用于設置或返回被選元素的屬性值。

示例：

例如下面這個例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    alert($('div').attr("class"));
  });
</script>
</head>
<body>
  <div class="xkd">獲取class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

attr() 方法除了獲取元素的屬性值，還可以設置元素的屬性值，我們來看一下。

示例：

將下面 <div> 標簽中的 class 屬性的值設置為 summer：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('div').attr("class", "summer")
  });
</script>
</head>
<body>
  <div>設置class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

鏈接：https://www.9xkd.com/

attr('checked', true)設置狀態只有第一次有用，再次點擊就無效果。類似的屬性還有selected 和 disabled。當遇到這種情況的時候，把attr換成prop方法，prop和attr一樣使用，以下有例子；

全選的小例子：

近在利用學習TP5.1做網站時，在解決用戶修改密碼時在沒有輸入確認密碼時不能點擊button按鈕時遇到了Uncaught ReferenceError: $ is not defined。

<html>

<head>
    <meta charset="utf-8">
    <title>文本框內容為空時button不能點擊并變灰</title>

</head>


<body>
    <form action="" id='test' method="POST">
        <label>姓名</label><input type='text' id="u_name" name='name' onblur="checkEmpty()"><br>
        <input type='button' id='user_button' value="  提交  " style="background-color:gray;" disabled>
    </form>

    <script>
        function checkEmpty() {   //當input的值為空時，button的背景色為gray，disabled
            var s =document.getElementById('#u_name');
            if (s == null) {
                $("#user_button").attr('style', 'background-color:gray;')
            } else {     //當input的值不為空時，button的背景色為bisque
                $('#user_button').attr('style', 'background-color:bisque;')  //背景色該成bisque
                $('#user_button').removeAttr('disabled');   //disabled屬性取消
            }
        }
    </script>
</body>

</html>

對于出現這個問題主要是沒有引入jquery庫jquery.min.js文件引起的。只要在引入jquery.min.js。

可以直接引入百度CDN加速后的官方jquery.min.js

只要在頭部寫入就可以完全解決<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

源碼如下：

<html>

<head>
    <meta charset="utf-8">
    <title>文本框內容為空時button不能點擊并變灰</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>
    <form action="" id='test' method="POST">
        <label>姓名</label><input type='text' id="u_name" name='name' onblur="checkEmpty()"><br>
        <input type='button' id='user_button' value="  提交  " style="background-color:gray;"
        disabled>
    </form>
    <script>
        function checkEmpty() {
            if ($('#u_name').val() != null && $('#u_name').val() !=""){
                $('#user_button').attr('style', 'background-color:bisque;')
                $('#user_button').removeAttr('disabled');
            }
            else{
                $('#user_button').attr('style', 'background-color:gray;')
            }
        }
    </script>
</body>

</html>

注意事項：

引入jquery.min.js的位置一定要要是你網頁<script></script>

如果還是出現這個問題，可能是因為你函數里出現問題，比如{}等問題！

本人是剛開始學習PHP的新手，寫得不好請體諒……

在線咨詢

上一篇：Word里如何段落首行縮進
下一篇：初識HTML中的<div>塊元素-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery 獲取和設置HTML元素

text()方法

示例：

示例：

html()方法

示例：

val()方法

示例：

attr()方法

示例：

示例：

您的項目需求