JQuery Dom Operation Instance

JQuery Dom Operation Instance _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

To deepen the impression, we all know that jquery is good to use, because it simplifies the JavaScript code, and more importantly, it is compatible with basically all browsers, web development is the most headaches this is, so jquery is also deeply loved by the code farmers, But first you have to remember it to better use it is not it, after a long time the useless attribute method will also fade, the following is the jquery Dom operation method Attributes of the detailed, see deepen the impression.

Although the ugly function of the sample is still!

Copy Code code as follows:

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style type= "Text/css" >
Body {
/*color:purple;*/
}
. a{
color:red;
}
. b {
Color:purple;
}
</style>
<script src= "Script/jquery-1.4.1.js" ></script>
<body>
<p id= "Div" >class</p>
<div id= "All" class= "a" >all
<input type= "text" value= "text" name= "text" id= "text"/>
<p id= "P" >p</p>
<ul id= "ul" >
<li id= "A" > Apple </li>
<li id= "B" > Navel orange </li>
<li id= "C" > Grapefruit </li>
</ul>
<div id= "D" >
<p> content </p>
</div>
<input type= "button" value= "Mouse Suspension effect" id= "over"/>
</div>
<script type= "Text/javascript" >
$ (). Ready (function () {
var p = $ ("#p");
Alert (p.attr ("id"));//attr ("Property name") Gets the property, attr ("Property name", "property value") Sets the property
P.attr ("title", "title");//Set properties
P.REMOVEATTR ("id");//delete element attribute of specified element property name
$ ("#all"). attr ("Class", "class");//Set the class property so that setting the property replaces the previous class attribute (Class= ' class ')
$ ("#all"). AddClass ("class"); Set class Property, append a class to the original Class attribute (class= ' all class ') if a class has the same attributes (such as color), Then the latter will cover the former
$ ("#all"). Removeclass ("all");//delete the specified class attribute
$ ("#all"). Removeclass ()//Remove all class attributes in class
$ ("#all"). Toggle (//Alternating method
function () {
$ (this). CSS ("Color", "red");
}, function () {
$ (this). CSS ("color", "purple");
//});
$ ("#div"). Click (function () {$ ("#all"). Toggle (); /used to display hidden alternating specified elements
$ ("#all"). Click (function () {$ (#div). Text ("Class property is:" +$ ("#all"). attr ("class"));
$ ("#all"). Click (function () {
$ ("#all"). Toggleclass ("B")
//});
Alert ($ ("#all"). Hasclass ("all");//Determine if there is this class attribute
Alert ($ ("#all"). Is (". all");//Effect IBID.

           //alert ($ ("#all"). html (); Same equals innerHTML effect
           //$ ("#all"). HTML ("set success");
           //alert ($ ("#all"). Text ();//Get all textual content
           //$ ("#all"). Text ("set success");
           //alert ($ ("[name= ' text ']:eq (0)"). Val ()) ;//equal to the Value property (Val (Set property value))

var NEWP = $ ("<p id= ' newp ' >newP</p>");//create element, create a single element by (<p/>) plus/
P.append (NEWP)//Append element to P internal back (<p id= ' P ' >p<p id= ' NEWP ' >newP</p></p>)
Newp.appendto (P);//Append NEWP to P internal back
P.prepend (NEWP)//Append element to P internal front (<p id= ' P ' ><p id= ' NEWP ' >newP</p>p</p>)
Newp.prependto (P);//Append NEWP to P internal front

P.after (NEWP),//Append element to the back of P element (<p id= ' P ' >p</p><p id= ' NEWP ' >newP</p>)
Newp.insertafter (P);//Append NEWP to the back of P element
P.before (NEWP);//Append to front of P element
Newp.insertbefore (P);//append NEWP to P element
Apple navel orange Grapefruit move attribute node
var a = $ ("#a");
var C = $ ("#c");
C.insertbefore (a);//Move the C (grapefruit) element to the front of a (apple) element
A.remove ()//delete node (all descendant nodes will also be deleted)
A.remove ();
C.after (a);/delete element in Add back
$ ("Ul>li"). Remove ("li[id= ' a");//delete the specified element according to the criteria
A.empty ()//clear all the elements inside
A.clone (). InsertAfter (c);//Add copied Node A (apple) to the back of C (pomelo)

$ ("#d"). ReplaceWith ("<span>span</span>");//Replace all text elements in the ID #d element with the specified content text
$ ("<span>span</span>"). ReplaceAll ("#d");/ibid., just reverse the order.

           //$ ("#ul"). Wrap ("<b></b>"); The element with ID #ul is wrapped with <b> label (if there are more than one UL element, this method will use a <b> to wrap each ul)
            //$ ("#ul"). Wrapall ("<b></b>");//to wrap the elements with ID #ul with <b> tags ( If you assume that there are more than one UL element, this method will be all UL with a <b> wrapped up)
            $ ("#ul"). Wrapinner ("<b></b>")//wrap the contents of the specified element in a <b> tag

Alert ($ ("#ul"). Children (). length);//Get all of the child elements (next () to get the next sibling node, prev () Get the previous sibling node, siblings () get all sibling nodes)
$ ("#ul"). Closest ("ul"). CSS ("Color", "red");//retrieve to match the current element, if the part match is returned to the parent element retrieve, otherwise return empty
Alert ($ ("#ul"). CSS ("height"); the height of the//css method may be auto, with PX, associated with CSS settings, and height () is the actual height of the element on the page without PX, So is the width.

Offset () method
var ul = $ ("#ul"). Offset ();
Alert (ul.left)//Gets the offset value of the element away from the window (top)
Position () method
var ul = $ ("#ul"). Position ();
alert (ul.left);//Get an offset value of absolute positioning
$ ("#ul"). ScrollTop () $ ("#ul"). ScrollLeft () Gets the distance of the scroll bar from the top and left position
$ ("#ul"). ScrollTop ("#ul"). ScrollLeft (300) set the distance between the top and the left of the scroll bar
Alert (("Aabaa"). Slice ( -2));//slice () returns the first two strings, 2 returns the string following the start of the index
$ ("#over"). MouseOver (function (e) {
var tool = $ ("<div id= ' tool ' > Suspended content </div>");
$ ("Body"). Append (tool);
Tool.css ("position", "absolute"). CSS ("Top", e.pagey+ "px")-CSS ("left", E.pagex + "px");
Tool.css ({"Top": E.pagey + ' px ', ' left ': E.pagex + ' px '}). Show ();
Alert (e.pagex+ "" +e.pagey);
}). mouseout (function () {
$ ("#tool"). Remove ();
});
});
</script>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JQuery Dom Operation Instance _jquery

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support