Learn about the methods available in jQuery for manipulating text-JS Tutorial-php.cn

Learn about the methods available in jQuery for manipulating text

WBOY

Release： 2024-02-28 11:24:03

Original

1153 people have browsed it

Learn about the methods available in jQuery for manipulating text

Understand the methods that can be used to manipulate text in jQuery
jQuery is a JavaScript library widely used in front-end development. It provides many convenient and easy-to-use methods to manipulate DOM elements. When processing text, jQuery provides a series of methods that allow developers to easily modify, obtain, and manipulate text content. The following will introduce some commonly used jQuery text processing methods, and attach specific code examples to help everyone better understand and use them.

text() method
text() method is used to set or return the text content of the selected element. When the text() method has no parameters, it means getting the text content of the element; when parameters are passed in, it means setting the text content of the element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文本处理示例</title>
<script src="https://cdn.bootcdn.net/cdnjs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="content">Hello, World!</div>

<script>
$(document).ready(function(){
  var text = $('#content').text(); // 获取文本内容
  console.log(text);

  $('#content').text('Hello, jQuery!'); // 设置文本内容
});
</script>
</body>
</html>

Copy after login

html() method
html() method is used to set or return the HTML content of the selected element, including text and tags. Unlike the text() method, the html() method preserves tags.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文本处理示例</title>
<script src="https://cdn.bootcdn.net/cdnjs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="content">Hello, <strong>World!</strong></div>

<script>
$(document).ready(function(){
  var html = $('#content').html(); // 获取 HTML 内容
  console.log(html);

  $('#content').html('Hello, <strong>jQuery!</strong>'); // 设置 HTML 内容
});
</script>
</body>
</html>

Copy after login

val() method
val() method is used to get or set the value of a form element. For form elements such as text boxes, text fields, and drop-down boxes, you can use the val() method to get or set their values.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文本处理示例</title>
<script src="https://cdn.bootcdn.net/cdnjs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input" value="Hello, World!">

<script>
$(document).ready(function(){
  var value = $('#input').val(); // 获取表单元素的值
  console.log(value);

  $('#input').val('Hello, jQuery!'); // 设置表单元素的值
});
</script>
</body>
</html>

Copy after login

By learning and mastering these jQuery text processing methods, developers can manipulate text content more flexibly, adding more possibilities for page production and interactive effects. I hope the above examples will be helpful to everyone, so that everyone can become more proficient in using jQuery for front-end development.

The above is the detailed content of Learn about the methods available in jQuery for manipulating text. For more information, please follow other related articles on the PHP Chinese website!