jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - DOM

jQuery - DOM Manipulation

jQuery provides a number of methods to manipulate DOM in efficient way. You do not need to write big and complex code to set or get the content of any HTML element.

jQuery DOM Manipulation

jQuery provides methods such as attr(), html(), text() and val() which act as getters and setters to manipulate the content from HTML documents.

Document Object Model (DOM) - is a W3C (World Wide Web Consortium) standard that allows us to create, change, or remove elements from the HTML or XML documents.

Here are some basic operations which you can perform on DOM elements with the help of jQuery standard pbrary methods −

Extract the content of an element

Change the content of an element

Adding a child element under an existing element

Adding a parent element above an existing element

Adding an element before or after an existing element

Replace an existing element with another element

Delete an existing element

Wrapping content with-in an element

We have already covered attr() method while discussing jQuery Attributes and remaining DOM content manipulation methods html(), text() and val() will be discussed in this chapter.

jQuery - Get Content

jQuery provides html() and text() methods to extract the content of the matched HTML element. Following is the syntax of these two methods:

$(selector).html();

$(selector).text();

The jQuery text() method returns plain text value of the content where as html() returns the content with HTML tags. You will need to use jQuery selectors to select the target element.

Example

Following example shows how to get the content with the jQuery text() and html() methods:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#text").cpck(function(){
         alert($("p").text());
      });
      $("#html").cpck(function(){
         alert($("p").html());
      });
   });
</script>
</head>
<body>
   <p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p>
   
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

Get Form Fields

jQuery val() method is used to get the value from any form field. Following is simple syntax of this method.

$(selector).val();

Example

Following is another example to show how to get the value an input field with jQuery method val() −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").cpck(function(){
         alert($("#name").val());
      });
      $("#b2").cpck(function(){
         alert($("#class").val());
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value="Zara Ap"/></p>
   <p>Class: <input type="text" id="class" value="Class 12th"/></p>
   
   <button id="b1">Get Name</button>
   <button id="b2">Get Class</button>
</body>
</html>

jQuery - Set Content

jQuery html() and text() methods can be used to set the content of the matched HTML element. Following is the syntax of these two methods when they are used to set the values:

$(selector).html(val, [function]);

$(selector).text(val, [function]);

Here val is he HTML of text content to be set for the element. We can provide an optional callback function to these methods which will be called when the value of the element will be set.

The jQuery text() method sets plain text value of the content where as html() method sets the content with HTML tags.

Example

Following example shows how to set the content of an element with the jQuery text() and html() methods:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#text").cpck(function(){
         $("p").text("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
      $("#html").cpck(function(){
         $("p").html("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
   });
</script>
</head>
<body>
   <p>Cpck on any of the two buttons to see the result</p>
   
   <button id="text">Set Text</button>
   <button id="html">Set HTML</button>
</body>
</html>

Set Form Fields

jQuery val() method is also used to set the value from any form field. Following is simple syntax of this method when it is used to set the value.

$(selector).val(val);

Here val is he value to be set for the input field. We can provide an optional callback function which will be called when the value of the field will be set.

Example

Following is another example to show how to set the value an input field with jQuery method val() −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").cpck(function(){
         $("#name").val("Zara Ap");
      });
      $("#b2").cpck(function(){
         $("#class").val("Class 12th");
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value=""/></p>
   <p>Class: <input type="text" id="class" value=""/></p>
   
   <button id="b1">Set Name</button>
   <button id="b2">Set Class</button>
</body>
</html>

jQuery - Replacement Elements

The jQuery replaceWith() method can be used to replace a complete DOM element with another HTML or DOM element. Following is the syntax of the method:

$(selector).replaceWith(val);

Here val is what you want to have instead of original element. This could be HTML or simple text.

Example

Following is an example where we will replace a <p> element with an <h1> element and then further we replace <h1> element with <h2> element.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").cpck(function(){
         $("p").replaceWith("<h1>This is new heading</h1>");
      });
      $("#b2").cpck(function(){
         $("h1").replaceWith("<h2>This is another heading</h2>");
      });
   });
</script>
</head>
<body>
   <p>Cpck below button to replace me</p>

   
   <button id="b1">Replace Paragraph</button>
   <button id="b2">Replace Heading</button>
</body>
</html>

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery CSS/HTML Reference.

jQuery - DOM Manipulation

jQuery DOM Manipulation

jQuery - Get Content

Example

Get Form Fields

Example

jQuery - Set Content

Example

Set Form Fields

Example

jQuery - Replacement Elements

Example

jQuery HTML/CSS Reference

友情链接