4. Make your html move.
You can use jQuery to do some basic animations and effects. The core of the animation effect is the function animate(), which can change the specified css style at any time. For example, you can change the height, width, transparency or position. You can also specify the speed of the animation, and you can use milliseconds when changing the speed. (milliseconds), or you can use predetermined speed values: slow, normal, or fast.
Here is an example animation that changes the width and height of an element at the same time. Note that there is no initial value, only the final value. Value. The initial value can be taken directly from the existing element. At the same time, I also added a callback function:
$('#grow').animate({ height: 500, width: 500 }, "slow", function() {alert('The element is done growing!');});Using these built-in functions of jQuery, it is quite easy to create animation effects. You can use the show() function and hide() function to show and hide Elements can be set to execute immediately or at a specified speed. You can also use the fadeIn() and fadeOut() functions or the slideDown() and slideUp() functions to show or hide an element, depending on what effect you want. . The following is a simple example to show the slide down effect of the navigation bar:
$('#nav').slideDown('slow'); 5. DOM scripting and event handling jQuery is probably best at manipulating DOM and Event processing has been carried out. It is actually very easy to traverse and operate the DOM. Binding, removal and calling events are also very natural and easy to use, and compared with manually writing these codes, errors can be greatly reduced. In fact, jQuery simplifies the DOM Various operations. You can create an element and link it to other elements using the append() function, you can copy the element using clone(), you can set content using html(), you can delete content using the empty() function, and remove using () function deletes elements and content, and you can even use the wrap() function to wrap this element with another element. There are some functions that can change the content of the jQuery object itself by traversing the DOM. You can also get the siblings() of an element. , parents(), or children(). You can also use next() and prev() to find siblings. find() is perhaps the most powerful of these functions. It allows you to use a jQuery selector to Search within your jQuery object and its descendant nodes. These functions become even more powerful when paired with the end() function. The end() function acts like an undo, causing your jQuery object to fall back to the time you called find () or parents() or any other state before the traversal function. If you use the method link we mentioned above, very complex functions can be implemented with simple code. Listing7 shows an example, you will find A login form and perform some operations on the elements on it. Listing 7. Traversing and manipulating the DOM with ease$('form#login')// hide all the labels inside the form with the 'optional' class.find( 'label.optional').hide().end()// add a red border to any password fields in the form.find('input:password').css('border', '1px solid red'). end()// add a submit handler to the form.submit(function(){return confirm('Are you sure you want to submit?');}); Believe it or not, this example actually only has a single link A line of code with some spaces in the middle. First, I selected the login form. Then, I found the optional labels inside, hidden them, and then called end() to return to the form. I found the password input box and changed the border to into red, and then called end() again to return to the form. Finally, I added a submission time processing function to this form. What is particularly interesting is that in addition to the extremely concise code, jQuery also optimized all operations by itself to ensure that when When everything is connected nicely, you don't need to look for an element twice. Handling general events is also very simple, just like calling the function click(), submit(), or mouseover(), and then passing it to an event listener The functions are the same. In addition, you can also use bind('eventname', function(){}) to specify the event processing function. You can use unbind('eventname') to unbind an event, or use unbind() to unbind all events. . For more information about this series of functions and how to use them, please consult jQuery's application programming interface documentation (API). 6. Revealing the power of jQuery selectors
Normally, you use ID to select elements, such as #myid; or use class names To select, such as div.myclass. However, jQuery has a fairly complex and complete selector syntax that allows you to use a single selector to find any combination of elements.
jQuery's selector syntax is largely based on CSS3 and XPath. The more you know about CSS3 and XPath, the better you can use jQuery. For more information about jQuery selectors, including CSS3 and XPath, please refer to the resource links at the end of this article.
CSS3 includes some syntax is supported by all, so you may not see it very often. However, you can still use it to select elements in jQuery, because jQuery has its own customized selector parsing engine. For example, to give To add a dash to each empty column in the table, you can use the :empty pseudo-operator:
$('td:empty').html('-'); How to find every element that does not contain a specific class name? CSS3 has a specific syntax for this situation, using the :not pseudo-operator. The following code will hide all text input box elements that do not contain the required class name. $('input:not(.required)').hide( ); You can also use commas to connect multiple selectors together, just like in CSS. The following code will hide various types of list elements on the page at the same time. $('ul, ol, dl' ).hide();XPath is a powerful tool for finding elements in a document. It is somewhat different from CSS and allows you to find many things that cannot be found using CSS. For example, you want to add For a border, you can do this: $("input:checkbox/..").css('border', '1px solid #777'); jQuery also has some additional selectors that are not found in css and XPath, for example, To increase the readability of a table, you may want to set odd and even rows to use different class names. This is called zebra bars. Doing this with jQuery is a piece of cake, thanks to the :odd selector. Here is the code Demonstrates using the striped class to change the background color of odd-numbered rows in a table: $('table.striped > tr:odd').css('background', '#999999'); See, jQuery's powerful selectors can simplify your code. No matter what element you want to affect, no matter how clear or blurry it is, you can always find a way to target it using a simple jQuery selector. 7. Extending jQuery using plug-ins Unlike other software, you can Writing a jQuery plug-in is by no means a painful ordeal with a bunch of complicated APIs. In fact, writing a plug-in for jQuery is so simple that you may want to write a plug-in later to make your code more concise. Here is the most basic part of the plug-in you are going to write: $.fn.donothing = function(){return this;}; Although it is very simple, it needs a little explanation. First, you need to add a function to each jQuery object, You must assign it to $.fn. Secondly, the function must return this (jQuery object) to ensure that it does not break the method chaining rules mentioned above. You can easily extend the above code. To write a To change the background color of the plug-in instead of using css('background'), you can do this: $.fn.background = function(bg){return this.css('background', bg);}; Note that I can directly return css () function, because it is already a jQuey object itself, so method chaining can work well. I recommend using a jQuery plugin when you find that you are constantly repeating code. For example, when you use each( ) function to handle the same thing over and over again, you may consider using a plug-in [Annotation: Not very clear.]. Since jQuery plug-ins are very easy to develop, there are thousands of plug-ins available for you. Use. jQuery has plug-ins for tables, rounded corners, slideshows, tooltips, date selection, and just about any application you can think of. You can find a complete list of plug-ins in the resource list at the end of this article. The most complex and widely used The plug-in is Interface, an animation plug-in that handles sorting, dragging effects, various complex special effects, and other interesting and complex user interface effects. Interface is to jQuery what Scriptaculous is to Prototype. An equally popular and useful plug-in is the Form plug-in , allows you to simply submit a form in the background using ajax. This plugin is used in this situation: when you need to hijack the form submission event, then find all the different text output fields, and use them to build the ajax call. 8. jQuery After that, I just talked about some superficial things about jQuery. jQuery is very interesting to use, because the new features and new methods you learn seem very natural and logical. Once you use jQuery, you will realize that it can simplify your work. Javascript and Ajax development, every time you learn something, the code will become simpler.
After learning jQuery, I found a lot of fun in Javascript programming, and all the boring things are well handled, so I just need to Focus on the core part. After using jQuery, I can hardly remember the last time I used a for loop. I am even afraid of using other Javascript libraries. jQuery completely changed my view on Javascript programming.