jQuery DOM operations change pages based on commands_jquery
WBOY
Release: 2016-05-16 18:37:05
Original
1069 people have browsed it
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.
$(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
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
$(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.
.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:
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.
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