jquery Property traversal, HTML operations

JQuery has a powerful way to manipulate HTML elements and Attributes.

JQuery traversal function

The JQuery traversal function includes methods for filtering, finding, and concatenating elements.

. Add ()	Adds an element to the collection of matching Elements.
. andself ()	Adds the previous set of elements in the stack to the current Collection.
. Children ()	Gets all the child elements of each element in the matching element collection.
. Closest ()	Starting with the element itself, it is progressively matched to the ancestor element and returns the first matching ancestor Element.
. Contents ()	Gets the child elements of each element in the matching element collection, including the text and comment Nodes.
. Each ()	Iterates over the JQuery object and executes the function for each matching Element.
. End ()	Ends the most recent filter operation in the current chain and returns a collection of matching elements to the previous State.
. EQ ()	Reduces the collection of matching elements to a new element at the specified Index.
. Filter ()	Reduces the set of matching elements to a new element that matches the selector or the return value of the matching Function.
. Find ()	Gets the descendants of each element in the current matching element collection, filtered by the Selector.
. First ()	Reduces the collection of matching elements to the first element in the Collection.
. has ()	Reduces the collection of matching elements to a collection of descendants that contain a particular element.
. is ()	Checks the current set of matching elements based on the selector, and returns true if at least one of the matching elements exists.
. Last ()	Reduces the collection of matching elements to the last element in the Collection.
. Map ()	Passes each element in the current matching collection to the function, producing a new JQuery object that contains the return Value.
. Next ()	Gets the sibling element adjacent to each element in the matching element collection.
. Nextall ()	Gets all the sibling elements after each element in the matching element collection, optionally filtered by Selectors.
. Nextuntil ()	Get all the sibling elements after each element until you encounter the element that matches the Selector.
. Not ()	Removes an element from the collection of matching Elements.
. offsetParent ()	Gets the first parent element used for Positioning.
. Parent ()	Gets the parent element of each element of the current matching element collection, optionally filtered by the Selector.
. Parents ()	Gets the ancestor element of each element in the current matching element collection, optionally filtered by the Selector.
. Parentsuntil ()	Gets the ancestor element of each element in the current matching element collection until it encounters an element that matches the Selector.
. prev ()	Gets the previous sibling element immediately adjacent to each element in the matching element collection, optionally filtered by the Selector.
. Prevall ()	Gets all sibling elements before each element in the matching element collection, optionally filtered by Selectors.
. Prevuntil ()	Get all of the sibling elements before each element until you encounter the element that matches the Selector.
. Siblings ()	Gets the sibling elements of all elements in the matching element collection, optionally filtered by the Selector.
. Slice ()	Reduces the collection of matching elements to a subset of the specified Range.

JQuery DOM Operations

A very important part of JQuery is the ability to manipulate the DOM.

JQuery provides a series of DOM-related methods that make it easy to access and manipulate elements and Attributes.

Tip: DOM = Document Object model

The DOM defines the criteria for accessing HTML and XML documents:

The Document Object model is Platform-and language-independent, allowing programs and scripts to dynamically access and update the content, structure, and style of the Document. ”

Get Content-text (), html (), and Val ()

Three simple and practical jQuery methods for DOM manipulation:

• 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 ()-sets or returns the value of a form field

The following example shows how to get content with the JQuery text () and HTML () methods: text bold effect <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#btn1"). Click (function () {
Alert ("text:" + $ ("#test"). Text ());
});
$ ("#btn2"). Click (function () {
Alert ("html:" + $ ("#test"). HTML ());
});
});
</script>

<body>
<p id= "test" > This is the <b> bold </b> text in the Paragraph. </p>
<button id= "btn1" > display text </button>
<button id= "btn2" > Show html</button>
</body>

The following example shows how to get the value of an input field using the JQuery Val () method: <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("button"). Click (function () {
Alert ("Value:" + $ ("#test"). val ());
});
});
</script>

<body>
<p> name: <input type= "text" id= "test" value= "mickey mouse" ></p>
<button> Display Values </button>
</body>

Get Property-attr ()

The JQuery attr () method is used to get the property Value.

The following example shows how to get the value of the href attribute in the Link: <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script
<script>
$ (document). Ready (function () {
  $ ("button"). Click (function () {
     Alert ($ ("#w3s"). attr ("href"));
 });
});
</script>

<body>
<p><a href= "http://www.w3school.com.cn" id= "w3s" >w3school.com.cn</a></p>
<button> display href value </button>
</body>

Set contents of all P elements: <script type= "text/javascript" src= "/jquery/jquery.js" ></ Script>
<script type= "text/javascript";
$ (document). Ready (function () {
  $ (". btn1"). Click ( function () {
    $ ("p"). html ("Hello <b>world!</b>");
 });
});
</script>
<body>
<p>this is a paragraph.</p>
<p>this is another paragraph.</p>
<button class= "btn1" > change the contents of the P element </button>
</body>
</ Html>

When you use this method to return a value, it returns the contents of the first matching Element. <script type= "text/javascript" src= "/jquery/jquery.js" ></script>
<script type= "text/javascript";
$ (document). Ready (function () {
  $ (". btn1"). Click (function () {
    alert ($ ("p"). HTML ());
 });
});
</script>
<body>
<p>this is a paragraph.</p>
<button class= "btn1" > change the content of P elements </button>
</body>

The

uses functions to set the contents of all matching Elements. <script type= "text/javascript" src= "/jquery/jquery.js" ></script>
<script type= "text/javascript";
$ (document). Ready (function () {
  $ ("button"). Click (function () {
    $ ("p"). The index of the P element of the HTML (function (n) {
    return "is:" + n;
   });
 });
});
</script>
<body>
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
<button> Change the content of P elements </button>
</body>

The following example shows how to add a class attribute to different Elements. of course, when you add a class, you can also select multiple Elements: <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("h1,h2,p"). addclass ("blue");
$ ("div"). addclass ("important");
});
});
</script>
<style type= "text/css" >
. Important
{
font-weight:bold;
font-size:xx-large;
}
. Blue
{
color:blue;
}
</style>
<body>

<p> this is a paragraph. </p>
<p> this is another paragraph. </p>
<div> This is very important text! </div>
<br>
<button> adding classes to elements </button>

</body>

The above is my Jqery property traversal with HTML Operations.

jquery Property traversal, HTML operations