jQuery DOM operations change pages based on commands_jquery

Uh, it looks like an advertisement? Haha, but it is indeed the case. jQuery provides us with a wealth of DOM operation methods to make these complex DOM operations simple.
It seems like a long time has passed since the last time I wrote about jQuery. It is indeed necessary to write this section. Haha, Let's Go~
Operation attributes:
As we said before. The addClass() and .removeClass() methods actually change the DOM attribute: className.
Speaking of which, I have to mention again why the class name of the element is called className instead of directly called class, because class is a reserved word of js. Um.
In addition to class, there are other attributes of DOM elements, such as id, rel and href. How do we operate these attributes?
Don’t worry, jQuery provides .attr() and .removeAttr() methods.
Even, you can use these two methods to replace the .class() method - if you want to cause yourself some trouble, haha. .
Next, let us change the red words into green. Moreover, I like GOOGLE, but some people like Baidu, so good, let us choose the one we like.

Copy code The code is as follows:

There is a hyperlink here, the address of the hyperlink is < ;a href='http:/www.baidu.com' target='_blank' class='link'>Baidu


Click this button to let Baidu Change to GOOGLE, click again to change it back to Baidu


There are a few words here. The color of the words is red, I am red, I am red
< ;br/>
Click this button to make red turn green

Copy 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','Let's become BAIDU');
},function(){
$('.link'). attr('href','http://www.baidu.com');
$('.link').text('Baidu');
$(this).attr('value' ,'GOOGLE');
});
$('#but_color').toggle(function(){
$('.font').attr('color','green ');
$('.font').text('I am green, I am green');
$(this).attr('value','Turn it red');
},function(){
$('.font').attr('color','red');
$('.font').text('I am red, I am red ');
$(this).attr('value','turn it green');
});
});

If you want to loop Some DOM objects are processed, such as the example in the book. If you want to give each A tag under a DIV a unique ID
, then you can use jQuery's .each() method, which is similar to a Iterator, a bit like PHP's foreach

Copy code The code is as follows:

$(document) .ready(function() {
$('div.chapter a').each(function(index) {
$(this).attr({
'id': 'wikilink-' index ,
});
});
});

This index parameter is similar to a counter, its value is 0 for the first link, and then for each link Its value will be incremented by 1 for each subsequent link. And so on.
Well, wait for these examples later, I will give the demonstration address together. But unfortunately, the address in my foreign space has been blocked. Um.
In-depth understanding of the $() factory function:
Actually, we have been using this factory function since we first started taking this note.
In a sense, this function is at the core of the jQuery library, because it is indispensable when adding effects, events
or adding attributes to a matched set of elements.
However, in addition to selecting elements, there is another mystery inside the parentheses of the $() function - this powerful feature allows the $() function not only to change the visual appearance of the page,
but also to change the page actual content. As long as you put a set of HTML elements within this pair of parentheses, you can easily change the entire DOM structure.
For example, the example in the book is very appropriate because I did write FAQ. . .
The FAQ is always a question-and-answer type (self-question and self-answer type). Well, because some answers are too long, you need to add a Back to top
after it, you can write like this

Copy codeThe code is as follows:

$(document).ready(function){
$('back to top');
$('< ;a id="top">');
});

In this way, a hyperlink "Back to top" is added after each paragraph. And also adds a "top" anchor.
What? You said you didn't see it? Uh, okay. . I admit that I haven't inserted this new element into the DOM yet, I've just created it.
Insert new elements:
jQuery provides two methods to insert elements in front of other elements: .insertBefore() and .before().
These two methods have the same effect, their difference depends on how they are concatenated with other methods.
Then, naturally, if you are smart, you will think that the methods to insert after other elements are .insertAfter() and .after().
For the "back to top" we just used the .insertAfter() method, the reason is that we need to add this link after each answer. . Um.

Copy code The code is as follows:

$(document).ready(function){
$('back to top').insertAfter('div.chapter p');
$('');
});

The same task as .insertAfter() can also be accomplished through the .after() method, except that the selector expression must be Place it before this method, not after it.
When using the .after() method, the first line of code in $(document).ready() can be rewritten as follows:
$('div.chapter p').after('< ;a href="#top">back to top');
Using .insertAfter(), you can continuously operate on the created element by connecting more methods.
With .after(), the operation object of other methods of concatenation becomes the element matched by the selector in $('div.chapter p').
So, what should we do if we want to insert a new element into the element? What I just said are the elements that make it a brother. And how to insert child elements?
Don’t worry, there is a .prependTo() method.

Copy code The code is as follows:

$('').prependTo('body');

.prependTo() method inserts a stroke as the target, and we add a group of Fully functional back to top link.
Similarly, jQuery also provides a method called .prepend(). According to the API, its function is:
Append content to each matching element.
This operation is similar to executing the appendChild method on specified elements to add them to the document.
For example:

Copy code The code is as follows:

I would like I would like to say: Hello

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


Wrapper element:
The method in jQuery for wrapping elements in other elements is aptly named: .wrap().

If you want to wrap the

tag inside a

Test Paragraph.

Inside the div,

Test Paragraph.

You can write like this
$("p").wrap(document.getElementById('content'));
Copy element:
The highlight is finally out. . Um. Copy the element. .
Cloning has been implemented at the beginning of this year, but it seems that they rarely shout recently. The most popular thing is the need for human cloning. It’s strange to think about it. What should I do if I steal your wife after cloning?
Ugh. Stop gossiping. . jQuery’s cloning method is .clone(). Um. Relative to the insert method, it is equivalent to copy and paste.
By default, the .clone() method will copy not only the matching element, but also all its descendant elements.
The book says that this method also accepts parameters. If the parameter value is false, then only the matching element will be copied, not its child elements.
But this is not the case after my experiment. . Um.

Copy code The code is as follows:

I am a 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 subtag, but my experiment is that the content of the subtag will still be copied. . This is one difference.
In addition, the book says that clone() will not copy the element's events. This is also possible after I tested it. . Um. . Still weird. . well.

When you need to reference a jQuery object multiple times, the best way is to save them into variables.
In this way, by reducing calls to jQuery’s $() factory function, the speed of DOM traversal can be improved. .
Well, this chapter is simply recorded. It's a bit regretful because I can't explain it to everyone based on the examples in the book. That would be copying this book.
Intermittently, because I need to eat. So it took me a long time to write this section, but I am quite satisfied with the overall effect. hehe.
Now, copy this paragraph from the book. Um. This is a simple summary of the
DOM operation methods:
To insert a new element into each matching element, use:
.append()
.appendTo()
.prepend()
.prependTo()
To insert a new element at the same position as each matched element, use:
.after()
.insertAfter()
.before()
.insertBefore()
To insert a new element outside each matched element, use:
.wrap()
To replace each matched element with a new element or text, use:
. html()
.text()
To remove each matching element from the document, use:
.empty()
To remove each matching element and its To descend descendant elements, without actually removing them, use:
.remove()

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jQuery Changing Element Attributes Example</title> <a href="http:/www.baidu.com" target="_blank" class="link"> There is a hyperlink here. The address of the hyperlink is </a>Baidu<input type="button" value="">