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选择器 获取元素的十一种方式
|
1月前
|
存储 开发者 SEO
|
1月前
|
移动开发 JavaScript 前端开发
编程笔记 html5&css&js 028 HTML输入属性(2/2)
编程笔记 html5&css&js 028 HTML输入属性(2/2)
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 027 HTML输入属性(1/2)
编程笔记 html5&css&js 027 HTML输入属性(1/2)
|
1月前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
1月前
|
存储 移动开发 前端开发
编程笔记 html5&css&js 010 HTML全局属性
编程笔记 html5&css&js 010 HTML全局属性