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()方法

示例：

示例：

您的项目需求