Latest web development tutorials

jQuery get content and properties

jQuery has operable HTML elements and attributes powerful way.


jQuery DOM operations

jQuery is a very important part is the ability to DOM operations.

jQuery provides a set of methods associated with the DOM, which makes accessing and manipulating elements and attributes become very easy.

lampDOM = Document Object Model (Document Object Model)

DOM HTML and XML documents to define access criteria:

"W3C Document Object Model platform-independent and language interface that allows programs and scripts to dynamically access and update the document structure and style."



Obtain content - text (), html () and val ()

Three simple and practical method for jQuery DOM operations:

  • text () - Sets or returns the text content of the selected element
  • html () - Sets or returns the contents of the selected element (including HTML tags)
  • val () - Returns the value or form fields

The following example demonstrates how jQuery text () and html () method to get the content:

Examples

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

try it"

The following example demonstrates how jQuery val () method to obtain values ​​of input fields:

Examples

$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});

try it"


Get property - attr ()

jQuery attr () method is used to obtain the property value.

The following example shows how to get the value of the link href attribute:

Examples

$ ( "Button"). Click (function () {
alert ($ ( "# w3big") attr ( "href").);
});

try it"

The next chapter will explain how to set (change) the content and attribute values.