10 jQuery code snippets for efficient Web development and jquery snippets for web Development

10 jQuery code snippets for efficient Web development and jquery snippets for web Development

Over the past few years, jQuery has been the most widely used JavaScript script library. Today, we will provide you with 10 most practical jQuery code snippets, which can be saved by developers who need them.

1. Check Internet Explorer version 
Internet Explorer has always been a problem for developers and designers when it comes to CSS design. Despite the Dark Age of Internet Explorer 6, Internet Explorer is becoming increasingly 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.

 $(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 the most widely used jQuery effect: clicking a link will smoothly move the page to the top. There is nothing new here, but every developer must occasionally write similar functions.

 $("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false;}); 

3. fixed to the top
A very useful code snippet that allows an element to be fixed on the top. It is extremely useful for navigation buttons, toolbar, 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') } else if (scrollTop <= navTop && isFixed) { isFixed = 0  $nav.removeClass('subnav-fixed') }} 

4. Use other content to replace the html mark
JQuery makes it easy to replace the html mark with another one. There is plenty of room to use.

 $('li').replaceWith(function(){ return $("<div />").append($(this).contents());}); 

5. Detect the window width
Nowadays, mobile devices are more common than outdated computers, and it is helpful to conveniently detect a smaller window width. Fortunately, it is super simple to use 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 may encounter damaged images somewhere on the interface. This useful function can help detect damaged images and replace it with your desired image, and will notify the visitor of this problem.

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

7. Check the copy, paste, and cut operations.
 Using jQuery, you can easily check the copy, paste, and cut operations as required.

 $("#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. The target = "blank" attribute is automatically added to an external link.
When you link to an external site, you may use the target = "blank" attribute to open the site on the new interface. The problem is that the target = "blank" attribute is not a valid W3C attribute. Let's use jQuery to complete the rescue: the following code will check whether the link is an external link. If yes, a target = "blank" attribute will be automatically added.

 var root = location.protocol + '//' + location.host;$('a').not(':contains(root)').click(function(){  this.target = "_blank";}); 

9. Transparent effect that is gradually enhanced or weakened when you stay on the Image
Another "classic" code should be put in your toolbox, because you will implement it from time to time.

 $(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  });}); 

10. Disable the Space key when entering text or password
Space keys are not required in many table fields, such as email, user name, and password. Here is a simple trick to disable the Space key in the selected input.

 $('input.nospace').keydown(function(e) { if (e.keyCode == 32) { return false; }});

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.