Jquery Dom operations change pages based on commands

Er, it looks like an advertisement, huh? Haha, but it does. jquery provides us with a wide range of Dom operation methods to make these complex Dom operations easy.
It seems that it has been a long time since I wrote jquery notes. It is also necessary to write this section ~
Operation attributes:
Previously, we mentioned the. addclass () and. removeclass () methods. The modified method is actually the DOM attribute: classname.
When talking about this, we need to mention that the class name of the element is classname rather than class, because class is a reserved word of Js. Well.
In addition to class and other attributes of DOM elements, such as ID, Rel, and href, how do we operate these attributes?
Don't worry. jquery provides the. ATTR () and. removeattr () methods.
Even you can use these two methods to replace the. Class () method-if you want to find yourself some trouble, haha ..
Next, let's turn the red text into green, and I like Google, but some people like Baidu, so good, let's choose what we like. CopyCode The Code is as follows: there is a hyperlink. The hyperlink address is <a href = 'HTTP:/www.baidu.com 'target =' _ blank 'class = 'link'> Baidu </a>
<Br/>
Click this button to change Baidu to Google. Click it to change it back to Baidu. <input type = 'button 'value = 'to Google' Id = 'but _ link'/>
<Br/>
Here are a few words. The color of the word is red. <font color = 'red' class = 'font'> I am red, I am red </font>
<Br/>
Click this button to change the red color to green. <input type = 'button 'value = 'to green. 'id = 'but _ color'/>

copy the Code the code is as follows: $ (document ). ready (function () {
$ ('# but_link '). toggle (function () {
$ ('. link '). ATTR ('href ', 'HTTP: // www.google.com');
$ ('. link '). text ('Google ');
$ (this ). ATTR ('value', 'change to Baidu bar');
}, function () {
$ ('. link '). ATTR ('href ', 'HTTP: // www.baidu.com');
$ ('. link '). text ('Baidu ');
$ (this ). ATTR ('value', 'change to Google ');
});
$ (' # but_color '). toggle (function () {
$ ('. font '). ATTR ('color', 'green');
$ ('. font '). text ('I am Green, I am green');
$ (this ). ATTR ('value', 'red');
}, function () {
$ ('. font '). ATTR ('color', 'red');
$ ('. font '). text ('I am red, I am red');
$ (this ). ATTR ('value', 'change to green');
});

If You Want To cyclically process some DOM objects, such as examples in books, to assign a unique ID to each a tag under a div
, you can use jquery. the each () method is similar to an iterator, a bit like PHP's foreach copy Code the code is as follows: $ (document ). ready (function () {
$ ('div. chapter '). each (function (INDEX) {
$ (this ). ATTR ({
'id': 'wikilink-'+ index,
});

This index parameter is similar to a counter. Its value for the first link is 0, and its value for each subsequent link increases by 1. And so on.
Well, I will give the demo address together later. However, it is quite helpless that the address of the space outside China is broken down. Well.
in-depth understanding of $ () Factory functions:
In fact, from the very beginning, we were using this factory function.
In a sense, this function is at the core of the card in the jquery library, because no matter when adding effects, events
or adding attributes to a matching element set, it is indispensable.
however, apart from selecting elements, there is another xuanjicang In the parentheses of the $ () function-this powerful feature enables the $ () function not only to change the visual appearance of the page,
you can change the actual content on the page. You can easily change the entire DOM structure by placing a set of HTML elements in the parentheses.
for example, the example in the book is very appropriate, because I did write a faq...
FAQs are always Q & A (self-answer ). So, because some answers are too long, you need to add a Back to Top
after them. You can write copy Code the code is as follows: $ (document ). ready (function) {
$ (' Back to Top ');
$ (' ');
});

A hyperlink "Back to Top" is added to each section, and a "TOP" anchor is added.
what? You said you didn't see it? Uh, okay .. I admit that I have not inserted this new element into the Dom, but created it.
Insert a new element:
jquery provides two methods to insert an element before another element:. insertbefore () and. Before ().
the two methods work the same way. Their Differences depend on how they are joined with other methods.
naturally, you will be smart enough to think that the insert method to the end of other elements is. insertafter () and. After ().
we use the. insertafter () method for "Back to Top", because we need to add this link after each answer .. Well. copy Code the code is as follows: $ (document ). ready (function) {
$ (' Back to Top '). insertafter ('div. chapter p ');
$ (' ');
});

The. After () method can also be used to complete the same tasks as. insertafter (), except that the selector expression must be placed before the method, rather than the following.
in use. after () method, $ (document ). the first line of code in ready () can be rewritten as follows:
$ ('div. chapter p '). after (' Back to Top ');
use. insertafter (), you can concatenate more methods to operate the created element consecutively.
when. After () is used, the operation objects of other methods of concatenation become the elements that match the operators in $ ('div. Chapter p.
What should I do if I want to insert a new element into the element? All of this is to make it a sibling element. How can we insert child elements?
don't worry. What about the. prependto () method. copy Code the code is as follows: $ (' '). prependto ('body');

. The prependto () method inserts a description as the target, and we add a set of fully functional Back to Top links to the page.
Similarly, jquery also provides the. prepend () method. The function of the API is as follows:
Append content to each matching element.
this operation is similar to executing the appendchild method on the specified elements and adding them to the document.
example: copy Code the code is as follows:

I wowould like to say:

I wowould like to say: Hello

--> $ ("p "). append (" Hello ");

packaging element:
jquery is used to wrap an element in other elements and is named. Wrap ().
If You Want To

test paragraph.

the tag package is in the div,

test paragraph.

$ ("p "). wrap (document. getelementbyid ('content');
copy element:
the final scene is coming .. Well. Copy element ..
currently, all headers are cloned, but it seems that we have not shouted much recently. The most shouting is to clone humans. It's strange to think about it. What should I do after cloning your wife?
er. Let's talk a little bit about it .. The clone method of jquery is. Clone (). Well. Compared with the insert method, it is equivalent to copying and pasting.
by default, the. Clone () method not only copies the matched elements, but also copies all its descendant elements.
in the book, this method also accepts parameters. If the parameter value is false, only the matching elements are copied without the child elements.
however, this is not the case after the test .. Well. copy Code the code is as follows:

Div with content

$ (' # but_clone '). click (function () {
$ ('# XXX '). clone (false ). insertafter ($ ('# XXX');
});

The book says that clone (false) will not copy the content in the sub-tag, but my experiment will still copy the sub-TAG content .. This is different.
In addition, the book says that clone () will not copy the event of the element. This is also possible after my experiments .. Well .. It's still strange .. Alas.

When you need to reference A jquery object multiple times, the best way is to save them to variables.
In this way, the DOM traversal speed can be improved by reducing the call to the $ () factory function of jquery ..
Er, this chapter is simple. I'm sorry, because I can't explain it to everyone based on the examples in the book. That's why I copied this book.
Intermittent, because it is medium to eat. So this article has been written for a long time. I am satisfied with the overall effect. Haha.
Next, copy this section of the book. Well. Yes
A brief summary of Dom operation methods:
To insert a new element into each matching element, use:
. Append ()
. Appendto ()
. Prepend ()
. Prependto ()
To insert a new element to the trusted position of each matching element, use:
. After ()
. Insertafter ()
. Before ()
. Insertbefore ()
To insert new elements outside each matching element, use:
. Wrap ()
Replace each matching element with a new element or text, and use:
. Html ()
. Text ()
To remove the elements from each matching element, use:
. Empty ()
To remove each Matching Element and Its descendant element from the document, but not delete them, use:
. Remove ()<Textarea id = "runcode19488"> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <br/> there is a hyperlink, hyperlink address: Baidu </P> <p> click this button to change Baidu to Google, click it to change it back to Baidu <input type = "button" value = "google Google" id = "but_link"> </P> <p> there are several words, the color of the word is red, I am red, I am red </P> <p> click this button, turn red to green <input type = "button" value = "" id = "but_color"> <button> clone me! </Button> </P> <p> I have a div with content </P> <p> <input type = "button" id = "but_clone" value = "Copy "> <input type =" button "id =" but_fun "onclick = 'javascript: alert ("XXX") 'value = "buttons with methods"> </textarea>