JQuery DOM Operation Summary and instance _jquery

Classification of DOM operations: Dom Core (CORE), Html-dom, and Css-dom
1. DOM Core
Dom Core is not specifically JavaScript, and can be used by any programming language that supports DOM.

Its use is not limited to processing Web pages, but can also be used to handle any kind of document written in markup language, such as XML.

The getElementById (), Getelementbytagname (), getattribute (), and setattribute () methods in JavaScript are part of the DOM core.

2. Html_dom

Ways to get Form objects by using Html_dom
Document.forms
Method of using Html_dom to get the src attribute of an element
Element.src
3. Css_dom

Css_dom is a CSS-oriented operation. In JavaScript, the primary role of Css-dom technology is to get and set the properties of a style object. By changing the various properties of the style object, you can make the Web page appear in a variety of different effects.
Element.style.color = "Red";
As a JavaScript library, jquery inherits and develops the nature of JavaScript's manipulation of DOM objects, enabling developers to manipulate DOM objects conveniently.

JQuery's DOM manipulation method elements are created, copied, reorganized, and decorated. The following example is fully available and each row has a comment, please copy the code to run.

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script src= "Http://img.jb51.net/jslib/jquery/jquery.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
. Chapter
{
Width:42em;
}
A.link
{
Text-decoration:none;
}
Span.footnote
{
Font-style:italic;
Font-family: "Times New Roman", the Times, serif;
Display:block; /* make it into a piece of * *
Margin:1em 0;
}
. text-reference
{
Font-weight:bold;
}
#notes Li
{
Margin:1em 0;
}
#notes
{
Margin-top:1em;
border-top:1px solid #00ff00;
}
#footer
{
Margin-top:1em;
border-top:1px solid #dedede; /* Top Line * *
}
. inhabitants
{
border-bottom:1px solid #dedede;
}
. pulled-wrapper
{
Background:url (pq-top.jpg) no-repeat left top;
Position:absolute;
width:160px;
Right: -180px; /* Position the horizontal position of the annotation box * *
padding-top:18px;
}
. pulled
{
Background:url (pq-bottom.jpg) no-repeat left bottom;
position:relative;
Display:block;
width:140px;
padding:0 10px 24px 10px;
Font:italic 1.4em "Times New Roman", the Times, serif;
}
</style>
<script type= "Text/javascript" >
Add attributes for each P element
$ (document). Ready (function () {
$ (' P '). each (function (index) {
var Currentclass = $ (this). attr (' class ');
$ (this). attr (' class ', Currentclass + ' inhabitants ');
});
});

Dynamically adding attributes to an element
$ (document). Ready (function () {
$ (' Div.chapter a[href*=cnblogs] '). each (the function (index) {//each is like a for loop, and he loops through all the objects in the collection, and the method of parameter one is the action on each object. Index is an indexed object
var $thisLink = $ (this);
$ (this). attr ({
' Rel ': ' subsection ',
' ID ': ' blogslink-' + index,
' title ': ' More ' + $thisLink. Text () + ' information in Feng Ruitao's blog ',
' class ': ' Link '
});
});
});
Insert return to above connection
$ (document). Ready (function () {
$ (' <a id= ' top ' name= ' top ' > New Year's Good </a> '). Prependto (' body '); Initialize to Body
$ (' Div.chapter p:gt (0) '). After (' <a href= ' #top ' > Return to Top </a> ');
Downlink equivalence which line of code above the GT represents starting from the p behind the first few elements
$ (' <a href= #top ' > Return to Top </a> '). InsertAfter (' Div.chapter p:gt (0) ');
});
//
$ (document). Ready (function () {
$ (' <ol id= ' notes ' ></ol> '). InsertAfter (' Div.chapter ');
$ (' span.footnote '). each (function (index) {
$ (This)
Add a digital connection to the front dynamically for each footnote (1,2)
. Before (' <a href= ' #foot-note-' + (index + 1) + ' id= ' context-' + (index + 1) + ' class= ' context ' >^{' + (i Ndex + 1) + '}</a> '
Inserting footnote into the Ol tab (without the above connection, span only) is to move the label, with the Appendto representative to append itself to the other elements
. Appendto (' #notes ')
Appends a label to the contents of the specified element
. Append (' (<a href= "#context-' + (index + 1) + '" > Content </a>) ')
Include this in the tag represented in the first parameter of wrap
. Wrap (' <li id= ' foot-note-' + (index + 1) + ' ></li> ');
});
});
$ (document). Ready (function () {
$ (' span.pull-quote '). each (function (index) {
Get parent Element P
var $parentParagraph = $ (this). Parent (' P ');
Set the P label to relative positioning, otherwise it cannot operate on its location
$parentParagraph. css (' position ', ' relative ');
Copy a copy, Span.pull-quote Clone (False), on behalf of the copy-only tag itself without copying its contents
var $clonedCopy = $ (this). Clone ();
$clonedCopy
. addclass (' pulled ')//Add style, with background below
. Find (' span.drop ')//Locate the Span.drop, this time the object is Span.drop
. html (' ... ')//Set HTML document for Span.drop
. End ()//Return the JQuery object state before it was changed
. Prependto ($parentParagraph)//Append this span to the specified element
. Wrap (' <div class= ' Pulled-wrapper "></div>"); And it is included in the Div content itself <div><span>
var clonedtext = $clonedCopy. Text (); Get the text, remove the HTML
$clonedCopy. HTML (clonedtext); Inserts text into the content as HTML, which is equivalent to replacing HTML content
});
});


</script>
<body>
<form id= "Form1" >
<span class= "Footnote" > Good month </span> <span class= "footnote" >Terry.Feng.C</span> <span
class= "footnote" > Feng Ruitao </span>
<div class= "chapter" >
<p>
1. <a href= "http://terryfeng.cnblogs.com" >jQuery</a> dynamically add attributes to the link. </p>
<p>
2. <a href= "http://terryfeng.cnblogs.com" >CSLA.Net</a> the strongest framework for the business layer. <span class= "Pull-quote" >csla comment <span class= "Drop" > omitted section </span></span></p>
<p>
3. <a href= "http://terryfeng.cnblogs.com" >DNN</a> free Open source CMS system. <span class= "Pull-quote" >dnn comment <span class= "Drop" > omitted section </span></span></p>
</div>
<div id= "Footer" >
Feng Ruitao's Blog </div>
</form>
</body>