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

This article mainly introduces the jQuery code snippets to improve the speed of Web development, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

JQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code base (framework) after Prototype. It was released by [John Resig] in January 2006. JQuery is designed to be "write Less,Do More", which advocates writing less code and doing more. It encapsulates the common functional code of JavaScript, provides a simple JavaScript design pattern, and optimizes HTML document operation, event handling, animation design and Ajax interaction.

Detect Internet Explorer version

When it comes to CSS design, Internet Explorer has always been a problem for developers and designers. Although the dark ages of IE6 are over and IE is becoming less and less popular, it is always a good thing that can be easily detected. Of course, the following code can also be used to detect other browsers.

JQuery detects Internet Explorer version

$(document) .ready (function () {if (navigator.userAgent.match (/ msie/i)) {alert ('I am an old fashioned Internet Explorer');}}); slide smoothly to the top of the page

This is one of the most widely used jQuery effects: clicking on a link moves the page smoothly to the top. There is nothing new here, but every developer must write a similar function once in a while

JQuery slides smoothly to the top of the page

Click (function () {$("html, body") .animate ({scrollTop: 0}, "slow"); return false;}); fixed at the top

A very useful code snippet that allows an element to be fixed at the top. It is super useful for navigation buttons, toolbars, or important information boxes.

JQuery is fixed to the top instance

$(function () {var $win = $(window) var $nav = $('.myopia'); var navTop = $('.myopia'). Length & & $('.myopia'). Offset (). Top; var isFixed=0 ProcessScroll () $win.on ('scroll', processScroll) function processScroll () {var I, scrollTop = $win.scrollTop () if (scrollTop > = navTop & &! isFixed) {isFixed = 1$ nav.addClass (' subnav-fixed')} else if (scrollTop $nav.removeClass ('subnav-fixed')}} check window width

Now that mobile devices are more common than outdated computers, it would be helpful to be able to easily detect a smaller window width. Fortunately, it's super easy to do it with jQuery.

An example of window width detected by jQuery

Var responsive_viewport = $(window). Width (); / * if is below 481px * / if (responsive_viewport 'Viewport is smaller than 481px.');} / * end smallest screen * / automatically locate and repair damaged images

If your site is large and has been running online for many years, you will more or less encounter damaged pictures somewhere on the interface. This useful function can help detect a damaged image and replace it with your favorite image, and will notify the visitor of the problem.

Automatically locate and repair damaged picture examples

$('img') .error (function () {$(this) .attr (' src', 'img/broken.png');}); detect copy, paste and cut operations

Using jQuery, you can easily detect copy, paste, and cut operations according to your requirements.

Examples of jQuery detection of copy, paste and cut operations

$("# textA"). Bind ('copy', function () {$(' span'). Text ('copy behaviour textA')}); $("# textA"). Bind ('paste', function () {$(' span'). Text ('paste behaviour inherited)}); $("# textA") .bind (' cut', function () {$('span'). Text (' cut behaviour reserved')}) Automatically add the attribute of target= "blank" when you encounter an external link

When linking to an external site, you may use the properties of target= "blank" to open the site in the new interface. The problem is that the target= "blank" attribute is not a valid W3C attribute. Let's fix it with jQuery: the following code will detect whether the link is outside the chain, and if so, automatically add a target= "blank" attribute.

Automatically add a property instance of target= "blank" when you encounter an external link

Var root = location.protocol +'/ /'+ location.host;$ ('a'). Not (': contains (root)') .click (function () {this.target = "_ blank";}); fade out or fade in when you stay on the picture

Another "classic" code, it should be put in your toolbox, because you will have to implement it from time to time.

Fade out or fade in when you stay on a picture

$(document) .ready (function () {$("thumbs img") .fadeTo ("slow", 0.6); / / This sets the opacity of the thumbs to fade down to 60% when the page loads $(".thumbs img") .hover (function () {$(this) .fadeto ("slow", 1.0); / / This should set the opacity to 100% on hover}, function () {$(this) .fadeTo ("slow", 0.6) / / This should set the opacity back to 60% on mouseout});}); disable spacebar when entering text or password

There is no need for spacebar in many table areas, such as e-mail, user name, password, etc. Here is a simple technique that can be used to disable the spacebar in selected input.

JQuery forbids blank instances

$('input.nospace') .keydown (function (e) {if (e.keyCode = = 32) {return false;}}); Thank you for reading this article carefully. I hope the article "what are the jQuery code snippets to improve the speed of jQuery development" shared by the editor will be helpful to you. At the same time, I also hope you will support us, pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

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.