10 jquery Code Snippets Help improve Web development efficiency

jquery is another excellent JavaScript library following prototype. It is a lightweight JS library, it is compatible with CSS3, also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0 and subsequent versions will no longer support Ie6/7/8 browser. jquery makes it easier for users to work with HTML (an application under the standard Universal Markup Language), events, animate, and easily provide Ajax interactivity to the site. One of the big advantages of jquery is that its documentation is full, and the various applications are very detailed, as well as a number of mature plugins to choose from. jquery allows the user's HTML page to keep the code and HTML content separate, that is, no more inserting a bunch of JS in the HTML to invoke the command, only need to define the ID. The following 10 examples of jquery can help your web design project to achieve a smooth and efficient performance.

　　Detect IE Browser
In the design of CSS, ie browser for developers and designers is undoubtedly a problem. Although the Dark ages of IE6 have passed, the popularity of the Internet Explorer family has been declining, but we still need to detect it. Of course, the following fragments can also be used to detect other browsers.

$(document).ready(function() {       if (navigator.userAgent.match(/msie/i) ){         alert(‘I am an old fashioned Internet Explorer‘);       

　　Scroll smoothly to the top of the page
Here's one of the most common implementations of jquery: Click a link to scroll smoothly to the top of the page. There's nothing new to say, but almost every developer can use it.

$("a[href=‘#top‘]").click(function() {   $("html, body"0"slow");   returnfalse

　　keep at the top of always
The following code fragment allows an element to always be at the top of the page. As you can see, it is ideal for handling navigation menus, toolbars, or other important information.

$( function(){ var $win= $ (window)var $nav= $('. Mytoolbar ');varNavtop = $ ('. Mytoolbar '). Length && $ ('. Mytoolbar '). Offset (). Top;varIsfixed=0; Processscroll ()$win. On (' scroll ', Processscroll) function processscroll() { varI, scrolltop =$win. ScrollTop ()if(scrolltop >= navtop &&!isfixed) {isfixed =1 $nav. addclass (' subnav-fixed ') }Else if(scrolltop <= navtop && isfixed) {isfixed =0  $nav. Removeclass (' subnav-fixed ') } }

　　Replace HTML tags
jquery can be very easy to implement HTML tag substitution, which will bring us more new possibilities.

$(‘li‘).replaceWith(function(){   return $("<div />").append($(this

　　Detecting screen width
Now that mobile devices are almost more popular than traditional computers, it is important to detect the size of small screens. Fortunately, we can easily achieve this with jquery.

var/* if is below 481px */if481) {     alert(‘Viewport is smaller than 481px.‘/* end smallest screen */

　　automatically fix damaged pictures
If everyone's site is very large and has been online for several years, then there will be more or less the picture corruption situation. This feature detects damaged images and replaces them with our choices.

$(‘img‘).error(function(){     $(this).attr(‘src‘‘img/broken.png‘

　　detect copy, paste, and cut operations
With jquery, you can easily detect the copy, paste, and cut operations of selected elements.

$("#textA"). Bind (' Copy ', function() {$(' span '). Text (' Copy behaviour detected! ') }); $("#textA"). Bind (' Paste ', function() {$(' span '). Text (' Paste behaviour detected! ') }); $("#textA"). Bind (' Cut ', function() {$(' span '). Text (' Cut behaviour detected! ') });

　　automatically add target= "blank" Property for external links
When linking to an external site, you may want to use the target= "blank" property to ensure that the page opens in a new tab. The problem is that the target= "blank" attribute is not certified by the consortium. jquery can be a big help: The following fragment detects whether the current link is pointing outside, and if so, automatically adds the target= "blank" property to it.

var‘//‘ + location.host; $(‘a‘).not(‘:contains(root)‘).click(function(){     this"_blank"

　　fade-in/fade-out during hover
Another "classic" effect, you can use the following fragments at any time to use.

$ (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 whitespace in text/password input
No space is required for many common fields, whether it is an e-mail message, a user name, or a password. The following code makes it easy to disable all spaces in the selected input.

$(‘input.nospace‘).keydown(function(e) {     if32) {         returnfalse;     

10 jquery Code Snippets Help improve Web development efficiency