Powerful jquery (iii)--manipulating HTML and traversing

The first two blogs talk about the basics of jquery and how they animate, and this article will introduce you to jquery manipulating HTML and the traversal of jquery.

First, jquery operation HTML1. Get content and Properties

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

attr ()-method to get the property 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. Adding elements

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

Instance:

<span style= "FONT-SIZE:18PX;" >function AppendText () {var txt1= "<p>Text.</p>";               Create a new element in HTML var txt2=$ ("<p></p>"). Text ("text.");   Create new element var txt3=document.createelement ("P") with JQuery;  Create a new element in DOM txt3.innerhtml= "Text."; $ ("P"). Append (TXT1,TXT2,TXT3);         Append new Element}</span>

<pre><span style= "FONT-SIZE:18PX;" >function Aftertext () {var txt1= "<b>i </b>";                    <span class= "Code_comment" >//create new elements in HTML </span>var txt2=$ ("<i></i>"). Text ("Love");     <span class= "Code_comment" >//create new elements from JQuery </span>var txt3=document.createelement ("big");  <span class= "Code_comment" >//create new elements via DOM </span>txt3.innerhtml= "jquery!"; $ ("img"). After (TXT1,TXT2,TXT3);          <span class= "Code_comment" >//Insert new element after IMG </span>}</span>

4. Deleting elements

Remove ()-Deletes the selected element (and its child elements)
Empty ()-Removes child elements from the selected element

5. Working with CSS

AddClass ()-adds one or more classes to the selected element
Removeclass ()-deletes one or more classes from the selected element
Toggleclass ()-switch operation to add/Remove classes for selected elements
CSS ()-Set or return style properties

Example:

<span style= "FONT-SIZE:18PX;" >$ ("button"). Click (function () {  $ ("H1,h2,p"). AddClass ("Blue");  $ ("div"). AddClass ("important");}); </span>

Second, jquery traversal1. What is traversal?

JQuery traversal, meaning "move", is used to "find" (or pick) HTML elements based on their relationship to other elements. Start with an option and move along the selection until you reach the desired element.

Explain:

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

The <ul> element is the parent element of the <li> element, and it is the child element of the <div>

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

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

Two <li> elements are compatriots (having the same parent element).

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

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

2. Traverse up

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

The parent () method returns the immediate 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 the immediate child elements of the selected element.

The Find () method returns the descendant elements of the selected element, all the way down to the last descendant.

4. Peer Traversal

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

The Nextall () method returns all the following sibling elements of the selected element.

the Nextuntil () method returns all the following sibling elements between two given arguments

5. Filter

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

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

The EQ () method returns the element 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 are removed from the collection, and the matching elements are returned.

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

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 a lot of functions about the jquery traversal, and I'm not going to list all of them. Please check your query Help documentation yourself.

To master a good language, even a very simple language, practice and thinking are essential, jquery is powerful and simple, we need to work in the future of the repeated use of learning in order to really master.