search

Home >Web Front-end >JS Tutorial >About the difference between text() val() and html() in jQuery

About the difference between text() val() and html() in jQuery

不言
不言Original
2018-06-12 14:24:181384browse

This article mainly introduces relevant information with detailed examples of the difference between text() val() and html() in jQuery. It is very good and has reference value. Friends in need can refer to it

Simple Said: The difference between html() and text() mainly lies in whether it contains tags. And val() targets form elements.

But sometimes it’s still not so clear.

html(), val(), and text() are all divided into parameters and no parameters.

Example to illustrate their differences:

html() gets the content of the first matching element without parameters . It must be noted that even if there are multiple matches, only the first matched element can be obtained.
For example: 

<body>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
<h3>选中下面的文字，看看它的颜色</h3>
<h3>选中下面的文字，看看它的颜色</h3>
<h3>选中下面的文字，看看它的颜色</h3>
<input type="text" value="aaa">
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
var con = $("p").nextAll("h3");
console.log(con.html());
</script>

The con here matches 3 h3 elements, but only the content of the first h3 will be printed.

If we change to text(); then the contents of three h3 will be printed out.

If parameters are provided, con.html("aaa"); and con.text("aaa"); have the same effect and can change the contents of three h3s.

But if con.html("'aaa'") and con.text("'aaa'"); use html span will be parsed as a label, and text will be inserted as a string. 

<body>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
<h3><span>选中下面的文字，看看它的颜色</span></h3>
<h3><span>选中下面的文字，看看它的颜色</span></h3>
<input type="text" value="aaa">
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
var con = $("p").nextAll("h3");
console.log(con.html());
console.log(con.text());
</script>

About the difference between text() val() and html() in jQuery

html() will also remove the tag, but text() will only get text part.

Look at val();

<body>
<input type="text" value="aaa"/>
<input type="button" value="按钮"/>
选择性别：<input type="radio" name="sex" checked value="男"><label>男</label>
<input type="radio" name="sex" value="女"><label>女</label>
<br><br>
选择地区：
<select style="width: 150px">
<option value="1">上海</option>
<option value="2">杭州</option>
<option value="3">南京</option>
<option value="4">丽江</option>
</select>
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
console.log($("input:text").val());
console.log($("input:button").val());
console.log($("input[name=&#39;sex&#39;]:checked").val());
console.log($("select option:selected").text());
});
</script>

About the difference between text() val() and html() in jQuery

Here, you can Pay attention to how to get the value of the radio button and how to get the value of the selected select.

It should be noted that the value of option is not the content displayed on the page, because to set or obtain the page content of option, you need to use text(), of course, you can also use html().

Summary of the differences between the three

1. The .val() method is the same as .html(). If it is applied to multiple When on an element, you can only read the "value" value of the first form element, but .text() is different from them. If .text() is applied to multiple elements, it will read the "value" value of all selected elements. Text content.

2.html(),.text(),.val() can all use the return value of the callback function to dynamically change the content of multiple elements.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use Nodejs to build a server to access static resource files such as html, css, JS and so on

The above is the detailed content of About the difference between text() val() and html() in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Browser compatibility issues in JSNext article：Browser compatibility issues in JS

Related articles

See more