10 jquery code Snippets for efficient web development

In the past few years, jquery has been the most widely used JavaScript scripting library. Today we will provide you with 10 of the most useful jquery code snippets for Web developers, and the developers who need them can be saved.

1. Detecting Internet Explorer versions

Internet Explorer has always been a problem for developers and designers when it comes to CSS design. Although the Dark ages of IE6 have passed, ie is becoming more and more popular, and it is always a good thing to detect easily. Of course, the following code 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 ');}      );

2. Slide smoothly to the top of the page

This is one of the most widely used jquery effects: Clicking on a link will smoothly move the page to the top. There's nothing new here, but every developer has to write a similar function occasionally.

$ ("a[href= ' #top ']"). Click (function () {  $ ("html, Body"). Animate ({scrolltop:0}, "slow");  return false;});

3, fixed at the top of

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

$ (function () {var $win = $ (window) var $nav = $ ('. Mytoolbar '); var navtop = $ ('. Mytoolbar '). Length && $ ('. Mytoolbar ') ). 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 ')} El Se if (scrolltop <= navtop && isfixed) {isfixed = 0 $nav. Removeclass (' subnav-fixed ')}}

4. Replace HTML logo with other content

jquery makes it easy to replace HTML flags with something else. There is endless room for use.

$ (' Li '). ReplaceWith (function () {  return $ ("<div/>"). Append ($ (this). contents ());});

5. Detection window width

Mobile devices are now more common than outdated computers, and it can be helpful to detect a smaller window width. Fortunately, it's super easy to do with jquery.

var responsive_viewport = $ (window). width ();/* If is below 481px */if (Responsive_viewport < 481) {    alert (' Viewport is smaller than 481px. ');} /* End Smallest screen */

6. 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 a damaged image somewhere on the interface. This useful function can help detect damaged images and replace them with your favorite images, and will notify visitors of this issue.

$ (' img '). Error (function () {$ (this). attr (' src ', ' img/broken.png ');});

7. Detection of copy, paste and cut operations

Using jquery makes it easy to detect copy, paste, and cut operations based on your requirements.

$ ("#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! ')});

8, encountered external links automatically add target= "blank" Properties

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

var root = Location.protocol + '//' + location.host;$ (' a '). Not (': Contains (root) '). Click (function () {    this.target = " _blank ";});

9. Gradually enhance or weaken the transparency effect when staying on the picture

Another "classic" code, it's going to be in your toolbox, because you're going to have to do it every now and then.

$ (document). Ready (function () {    $ (". Thumbs img"). FadeTo ("slow", 0.6);//This sets the opacity of the thumbs to Fade Dow N to 60% when the page loads    $ (". Thumbs img"). Hover (function () {        $ (this). FadeTo ("Slow", 1.0);//this should set th e opacity to 100% in hover    },function () {        $ (this). FadeTo ("slow", 0.6);//This should set the opacity back to 60% O n mouseout    });

10. Prohibit spacebar when text or password input

Space keys are not required in many form areas, such as email, username, password, etc. Here is a simple technique that can be used to disallow the spacebar in the selected input.

$ (' Input.nospace '). KeyDown (function (e) {if (E.keycode = =) {return false;}});

10 jquery code Snippets for efficient web development