Powerful JQuery (III)-operate html and traversal, jquery-html

Powerful JQuery (III)-operate html and traversal, jquery-html

The first two blogs talked about JQuery's basic knowledge and animation effects. This article will introduce jquery's html manipulation and jquery's traversal.

I. jquery operations html1. get content and attributes

Text ()-set or return the text content of the selected Element
Html ()-set or return the content of the selected element (including HTML tags)
Val ()-set or return the value of a form field

Attr ()-the method is used to obtain the attribute value.

Instance:

<span style="font-size:18px;">$("#btn1").click(function(){  alert("Text: " + $("#test").text());});$("#btn2").click(function(){  alert("HTML: " + $("#test").html());});</span>

<pre><span style="font-size:18px;">$("button").click(function(){  alert($("#w3s").attr("href"));});</span>

2. Set content-text (), html (), and val ()

Instance:

<span style="font-size:18px;">$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");});</span>

<pre><span style="font-size:18px;">$("button").click(function(){  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");});</span>

3. Add Elements

Append ()-insert content at the end of the selected Element
Prepend ()-insert content at the beginning of the selected Element
After ()-insert content after the selected Element
Before ()-insert content before the selected Element

Instance:

<Span style = "font-size: 18px;"> function appendText () {var txt1 = "<p> Text. </p> "; // create a new element var txt2 in HTML = $ (" <p> </p> "). text ("Text. "); // create a new element var txt3 = document with jQuery. createElement ("p"); // create a new element named txt3.innerHTML = "Text. "; $ (" p "). append (txt1, txt2, txt3); // append new elements} </span>

<Pre> <span style = "font-size: 18px;"> function afterText () {var txt1 = "<B> I </B> "; <span class = "code_comment"> // create a new element in HTML </span> var txt2 = $ ("<I> </I> "). text ("love"); <span class = "code_comment"> // create a new element using jQuery </span> var txt3 = document. createElement ("big"); <span class = "code_comment"> // create a new element through DOM </span> txt3.innerHTML = "jQuery! "; $ (" Img "). after (txt1, txt2, txt3); <span class = "code_comment"> // Insert new elements after img </span >}</span>

4. Delete Elements

Remove ()-delete the selected element (and its child element)
Empty ()-delete a child element from the selected Element

5. Operate css

AddClass ()-add one or more classes to the selected Element
RemoveClass ()-delete one or more classes from the selected Element
ToggleClass ()-Adds or deletes the selected element to/from the switch operation.
Css ()-set or return style attributes

Example:

<span style="font-size:18px;">$("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important");});</span>

Ii. JQuery traversal 1. What is traversal?

JQuery traversal, indicating "moving", is used to "find" (or select) HTML elements based on their relationship with other elements. Start with an option and move it along the option until it reaches your desired element.

Explanation:

The <div> element is the parent element of <ul> and is the ancestor of all the content.

The <ul> element is the parent element of the <li> element and a child element of the <div> element.

The <li> element on the left is the parent element of <span>, the child element of <ul>, and the descendant of <div>.

The <span> element is a child element of <li> and is a descendant of <ul> and <div>.

The two <li> elements are siblings (with the same parent element ).

The <li> element on the right is the parent element of <B>, the child element of <ul>, and the descendant of <div>.

The <B> element is the child element of <li> on the right, and is the descendant of <ul> and <div>.

2. Traverse up

The parents () method returns all the ancestor elements of the selected element along the way to the root element of the document (

The parent () method returns the direct parent element of the selected element.

The parentsUntil () method returns all ancestor elements between two given elements.

Example

<span style="font-size:18px;">$(document).ready(function(){  $("span").parentsUntil("div");});</span>

3. Traverse down

The children () method returns all direct child elements of the selected element.

The find () method returns the child element of the selected element, all the way down until the last child.

4. Peer Traversal

The next () method returns the next compatriot element of the selected element.

The nextAll () method returns all siblings of the selected element.

The nextUntil () method returns all the following compatriot elements between two given parameters.

5. Filter

The first () method returns the first element of the selected element.

The last () method returns the last element of the selected element.

The eq () method returns the elements with the specified index number in the selected element.

The filter () method allows you to specify a standard. Elements that do not match this standard will be deleted from the set, and matched elements will be returned.

The not () method returns all elements that do not match the standard.

For example

<span style="font-size:18px;">$(document).ready(function(){  $("p").not(".intro");});</span>

<pre><span style="font-size:18px;">$(document).ready(function(){  $("div p").last();});</span>

$(document).ready(function(){  $("div p").last();});

There are still many jquery traversal functions. I will not list them one by one. If you are interested, please check the Query help documentation on your own.

To master a language, even a very simple language, Practice and Thinking are essential. JQuery is powerful and simple, we need to use it repeatedly in our future work and study to grasp it.

Jquery Traversal

Var str = "";
$ ("Li"). each (function () {str + = $ (this). text ()})

JQuery traversal Problems

<Ul>
<Li> <a herf = "1.html"> 1 </a> </li>
<Li> <a herf = "2.html"> 2 </a> </li>

<Li> <a herf = "3.html"> 3 </a> </li>

<Li> <a herf = "4.html"> 4 </a> </li>
</Ul>
Var thisLI = $ ("ul li"); // get all LI
ThisLI. each (function (I ){
If (I = 0)
{
Alert ($ (this). attr ("href "));
}
});
I starts from scratch. Which one do you want?