Home > Web Front-end > JS Tutorial > Sharp jQuery DOM manipulation in jQuery_jquery

Sharp jQuery DOM manipulation in jQuery_jquery

WBOY
Release: 2016-05-16 18:31:42
Original
1129 people have browsed it

1 Find element node

var $x = $("selector").text()

2 Find attribute node

var $x = $("selector").attr("property")

3 Create node

var $x = $("html")

4 Insert node

$("selector").append()
Append content to each matching element
$("selector").appendTo()
Equivalent to the .append() operator swapping left and right

$("selector").prepend()
Prepend content inside each matching element
$("selector").prependTo()
Equivalent to the .prepend() operator swapping left and right

$("selector").after()
Insert content after each matching element
$("selector").insertAfter
Equivalent to the .after() operator swapping left and right

$("selector").before()
Insert content before each matching element
$("selector").insertBefore()
Equivalent to the .before() operator swapping left and right

5 Mobile Node

P70 example in this book:

Copy code The code is as follows:

<script> <br>var $one_li = $("ul li:eq(1)"); //Get the second <li> element node in the <ul> node <br>var $two_li = $("ul li :eq(2)"); //Get the third <li> element node in the <ul> node<br>$two_li.insertBefore($one_li); //Move the node<br></script>


6 Delete node

6.1 remove() method

$("selector").remove()
The remove() method will delete all descendant nodes of the selector. After the element is deleted with the remove() method, it can still be used. In addition, the remove() method can also pass parameters

to selectively delete elements, such as $("ul li").remove("li[title!=xxx]");

6.2 empty() method

$("selector").empty()
Clear all descendant nodes of selector

7 Copy node

$("selector").clone()
Such as $(this).clone().appendTo("ul"). To make the copied new element have the behavior of the original element, you need to pass the parameter true. Such as $("selector").clone(true)

8 Replace node

$("selector").replaceWith()
Replace all matching elements with the specified HTML or DOM elements
$("selector").replaceAll ()
is equivalent to the .replaceWith() operator swapping left and right

9 package nodes

$("selector").wrap()
Wrap all matching elements individually
$("selector").wrapAll()
Wrap all matching elements with one element
$("selector").wrapInner()
Use other structured elements for the sub-content of each matching element (including text nodes) wrapped with the tag

10 Attribute Operations

$("selector").attr()
Get (one property parameter) and set element attributes (two parameters, property and value), such as $("p"). attr("title","your title"). If

is set at the same time

Set multiple attributes in the format of $("p").attr({"title" : "your title" , "name" : "test"})
$("selector") .removeAttr()
Delete element attributes

11 Style operations

$("selector").attr()
Replacement style

$("selector").addClass()
Add style

$("selector").removeClass()
Remove style

$("selector").toggle()
Behavior repeated switching
Example:

Copy code The code is as follows:

<script> <br>$x.toggle(function(){ <br>//code1 <br>},function(){ <br>//code2 <br>}) <br></script>

Execute code1 and code2 alternately

$("selector").toggleClass()
Control repeated switching of styles, such as $("p").toggleClass("anotherClass")

$("selector").hasClass("anotherClass")
Determine whether the selector contains anotherClass

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template