jQuery中的.html() .text() .val() .attr()获取元素内容、值、属性

简介: 本文目录1. 元素2. 内容、值、属性3. html() text() val() attr()用法

1. 元素

所谓元素指的是一个html文档中一个闭合标签,比如body元素指的就是从<body>到</body>的所有代码。


2. 内容、值、属性

举个例子


<div id="div1">

请输入:<input type="text" value="hello"/>

</div>

1

2

3

这其中,div元素的内容就是请输入:<input type="text" value="hello"/>,div有一个属性为id,该属性的值为div。

input元素有一个值为hello。


这样获取元素的内容、属性、值的jQuery方法分别为.html()、.attr()、.val(),还有一个特殊的.text()方法,用来获取元素内容中的文本部分,例如div1的text()即为请输入。


3. html() text() val() attr()用法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<title></title>
</head>
<body>
  <div id="div1">
    <input id="text1" type="text" value="hello input value"/>
    hello div1 text
    <select id="select1">
      <option>math</option>
      <option>english</option>
    </select>
  </div>
  div1.html()<br/>
  <span id="span1"></span><br/>
  div1.text()<br/>
  <span id="span2"></span><br/>
  div1.val()<br/>
  <span id="span3"></span><br/>
  text1.val()<br/>
  <span id="span4"></span><br/>
  text1.attr("type")<br/>
  <span id="span5"></span><br/>
  select1.val()<br/>
  <span id="span6"></span><br/>
  <script>
    $("#span1").html($("#div1").html());
    $("#span2").html($("#div1").text());
    $("#span3").html($("#div1").val());
    $("#span4").html($("#text1").val());
    $("#span5").html($("#text1").attr("type"));
    $("#span5").html($("#text1").attr("type"));
    $("#span6").html($("#select1").val());
  </script>
</body>
</html>

image.png

相关文章
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
1月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
3月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
22 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
25 0
|
3月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
27 0