Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the common functions of jQuery". The editor shows you the operation process through actual cases, and the operation method is simple, fast and practical. I hope this article "what are the common functions of jQuery" can help you solve the problem.

Using the animate and scrollTop methods in jQuery, you can create a simple animation that scrolls to the top without a plug-in:

/ / Back to top $('.top') .click (function (e) {e.preventDefault (); $('html, body'). Animate ({scrollTop: 0}, 800);}); Back to top

Change the value of scrollTop to change where you want to place the scroll bar. All you really need to do is animate the body of the document in 800 milliseconds until it scrolls to the top of the document.

Note: beware of some misbehaviors of scrollTop.

Preload Ima

If your web page uses a large number of initially invisible (for example, hovering) images, you can preload these images:

$. PreloadImages = function () {for (var I = 0; I

'). Attr (' src', arguments [I]);}}; $.preloadImages ('img/hover-on.png',' img/hover-off.png')

Check whether the image is loaded

Sometimes in order to continue the script, you may need to check that the images have all been loaded:

$('img') .load (function () {console.log (' image load successful');})

You can also replace it with ID or class

Tag to check whether a particular image is loaded.

Automatically repair damaged images

Replacing broken image links one by one is very painful. However, the following simple code can help you:

$('img') .on (' error', function () {if (! $(this) .hasClass ('broken-image')) {$(this) .prop (' src', 'img/broken.png'). AddClass (' broken-image');}})

Even if there are no broken links, adding this piece of code won't cost you anything.

Hover switching class

Suppose you want to change the color of a clickable element when the user hovers over it. Then you can add the class to the element when the user hovers, and otherwise delete the class:

$('.btn') .hover (function () {$(this) .addClass ('hover');}, function () {$(this) .removeClass (' hover');})

You just need to add the necessary CSS. An easier way is to use the toggleClass method:

$('.btn') .hover (function () {$(this) .toggleClass ('hover');})

Note: CSS may be a faster solution in this case, but it is necessary to understand this approach.

Disable input field

Sometimes, you may want to disable the submit button for a form or one of its text input until the user performs a specific action (for example, check the "I have read the relevant terms" check box). Add the disabled attribute to your input and enable it only when you want it:

$('input [type = "submit"]') .prop ('disabled', true)

Then you just need to run the input prop method, but set the value of disabled to false:

$('input [type = "submit"]') .prop ('disabled', false)

Stop loading links

Sometimes, you don't need to link to a particular page, nor do you want to reload the page-you may want the link to do something else, such as triggering some other script. This is about blocking the default action:

Function (e) {e.preventDefault ();})

Fade / slide toggle

Sliding and fading are a lot of things we use when we animate with jQuery. If you just want to display an element after the user clicks, then using the fadeIn and slideDown methods is very *. However, if you want the element to appear on the * click and then disappear on the second click, try the following code:

/ / Fade $('.btn') .click (function () {$('.element'). FadeToggle ('slow');}); / / Toggle $(' .btn') .click (function () {$('.element') .click ('slow');})

A simple accordion

This is an easy way to quickly generate an accordion:

/ / Close all panels $('# accordion'). Find ('. Content'). Hide (); / / Accordion $('# accordion'). Find ('. Accordion-header') .click (function () {var next = $(this). Next (); next.slideToggle ('fast'); $(' .content'). Not (next) .slideUp ('fast'); return false;})

By adding this script, all you really need to do is add the necessary HTML elements to the page so that it can work.

Make the two div have the same height

Sometimes you need to make the two div have the same height no matter what they contain:

$('.div') .css ('min-height', $(' .main-div') .height ())

Set min-height, which means that it can be larger than the main div but definitely not smaller than the main div. However, there is a more flexible way to iterate through a set of elements and then set the height to the height of the element of * *:

Var $columns = $('.column'); var height = 0; $columns.each (function () {if ($(this). Height () > height) {height = $(this). Height ();}}); $columns.height (height)

If you want all columns to be the same height:

Var $rows = $('.same-height-columns'); $rows.each (function () {$(this). Find (' .column'). Height ($(this). Height ();})

Open an external link in a new tab / window

Open an external link in a new browser tab or window and make sure that links from the same source can be opened in the same tab or window:

Attr ('target',' _ blank'); $('a [href ^ = "/"]'). Attr ('target',' _ blank'); $('a [href ^ = "'+ _ window.location.origin +']'). Attr ('target',' _ self')

Note: _ window.location.origin is not valid in IE10. Be careful of this problem when repairing.

Find elements through text

You can find the text of the element's content by using the contains () selector in jQuery. If the text does not exist, hide the element:

Var search = $('# search'). Val (); $('div:not (: contains ("' + search +'))') .hide ()

Triggered when the Visibility is changed

When the user no longer follows a tab or refocuses on the original tab, the JavaScript is triggered:

$_ (document) .on ('visibilitychange', function (e) {if (e.target.visibilityState = "visible") {console.log (' Tab is now in viewpoints');} else if (e.target.visibilityState = "hidden") {console.log ('Tab is now hiddensities');}})

AJAX call error handling

When the Ajax call returns a 404 or 500 error, the error handler is executed. If no handler is defined, other jQuery code may go on strike. Define a global Ajax error handler:

$(document) .ajaxError (function (e, xhr, settings, error) {console.log (error);})

Chain plug-in call

JQuery allows method calls from "chained" plug-ins to ease the process of repeatedly querying DOM and creating multiple jQuery objects. For example, the following code snippet represents your plug-in method call:

$('# elem'). Show (); $('# elem'). Html ('bla'); $(' # elem'). OtherStuff ()

By using chaining, it can be greatly improved:

$('# elem') .show () .html ('bla') .otherStuff ()

Another way is to cache elements in the (prefix $) variable:

Var $elem = $('# elem'); $elem.hide (); $elem.html ('bla'); $elem.otherStuff (); that's all for "what are the common functions of jQuery?" Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.