- Get and Set HTML attributes and content with jQuery
- jQuery Get or Set Contents and Values
- jQuery text ( ) Method
- Get Contents with text ( ) Method
- Set Contents with text ( ) Method
- jQuery Html ( ) Method
- Get HTML Contents with Html ( ) Method
- Set HTML Contents with Html ( ) Method
- jQuery attr ( ) Method
- Get Attribute Value with attr ( ) Method
- jQuery val () Method
- Get the Values of Form Fields with val ( ) method
- jQuery — Get Content and Attributes
- jQuery DOM Manipulation
- Get Content — text(), html(), and val()
- Example
- Example
- Get Attributes — attr()
- Example
- jQuery Exercises
- jQuery HTML Reference
- jQuery.get()
- jQuery.get( url [, data ] [, success ] [, dataType ] ) Returns: jqXHR
- version added: 1.0 jQuery.get( url [, data ] [, success ] [, dataType ] )
- version added: 1.12-and-2.2 jQuery.get( [settings ] )
- The jqXHR Object
Get and Set HTML attributes and content with jQuery
In this session, you will learn how to Get or Set the content of the element and attribute value with the help of JQuery with an example.
jQuery Get or Set Contents and Values
In jQuery, a few methods like text ( ), Html, attr ( ), and Val ( ) method can be used to assign or read some value on a selection.
If these methods are known with no argument, it means it referred to as getters, because it gets the value of the element. When these methods are known with value as an argument, it referred to as a setter because it sets or assigns that value.
jQuery text ( ) Method
The method is used to get the combined text contents of the selected elements, with the set text contents are called the jQuery text ( ) method.
Get Contents with text ( ) Method
With the help of the following example, you will know how to get the text contents of paragraphs.
Set Contents with text ( ) Method
With the help of the following example you know how to set the text contents of a paragraph:
jQuery Html ( ) Method
The method is used to get or set the HTML contents of the elements are called the jQuery Html ( ) method.
Get HTML Contents with Html ( ) Method
With the help of the following example you will know how to get the Html contents of the paragraph elements as well as an element container:
Set HTML Contents with Html ( ) Method
With the help of following example you will know how to set the Html content of the element:
jQuery attr ( ) Method
The method is used to get the value of an element attribute or set one or more attributes for the selected elements are called jQuery attr ( ) method.
Get Attribute Value with attr ( ) Method
With the help of the following example, you will know the href attribute of the hyperlink.
jQuery val () Method
The method is used to get or set the current value of the Html form element is called the jQuery val ( ) method.
Get the Values of Form Fields with val ( ) method
With the help of the following example you will know how to get the values of the form control:
jQuery — Get Content and Attributes
jQuery contains powerful methods for changing and manipulating HTML elements and attributes.
jQuery DOM Manipulation
One very important part of jQuery is the possibility to manipulate the DOM.
jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents:
«The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.»
Get Content — text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
- text() — Sets or returns the text content of selected elements
- html() — Sets or returns the content of selected elements (including HTML markup)
- val() — Sets or returns the value of form fields
The following example demonstrates how to get content with the jQuery text() and html() methods:
Example
The following example demonstrates how to get the value of an input field with the jQuery val() method:
Example
Get Attributes — attr()
The jQuery attr() method is used to get attribute values.
The following example demonstrates how to get the value of the href attribute in a link:
Example
The next chapter explains how to set (change) content and attribute values.
jQuery Exercises
jQuery HTML Reference
For a complete overview of all jQuery HTML methods, please go to our jQuery HTML/CSS Reference.
jQuery.get()
jQuery.get( url [, data ] [, success ] [, dataType ] ) Returns: jqXHR
Description: Load data from the server using a HTTP GET request.
version added: 1.0 jQuery.get( url [, data ] [, success ] [, dataType ] )
A callback function that is executed if the request succeeds. Required if dataType is provided, but you can use null or jQuery.noop as a placeholder.
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
version added: 1.12-and-2.2 jQuery.get( [settings ] )
A set of key/value pairs that configure the Ajax request. All properties except for url are optional. A default can be set for any option with $.ajaxSetup(). See jQuery.ajax( settings ) for a complete list of all settings. The type option will automatically be set to GET .
This is a shorthand Ajax function, which is equivalent to:
$.ajax(url: url,data: data,success: success,dataType: dataType>);
The success callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.
As of jQuery 1.5, the success callback function is also passed a "jqXHR" object (in jQuery 1.4, it was passed the XMLHttpRequest object). However, since JSONP and cross-domain GET requests do not use XHR , in those cases the jqXHR and textStatus parameters passed to the success callback are undefined.
Most implementations will specify a success handler:
$.get( "ajax/test.html", function( data )$( ".result" ).html( data );alert( "Load was performed." );>);
This example fetches the requested HTML snippet and inserts it on the page.
The jqXHR Object
As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.get() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The jqXHR.done() (for success), jqXHR.fail() (for error), and jqXHR.always() (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the jqXHR Object section of the $.ajax() documentation.
The Promise interface also allows jQuery's Ajax methods, including $.get() , to chain multiple .done() , .fail() , and .always() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.