Practical tips about jQuery

This article mainly shares with you an article about the practical skills of jQuery. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look. The following ten jQuery examples can help everyone improve the efficiency of their web design projects.

Detect IE browser

When designing CSS, IE browser is very important to developers and It is undoubtedly a problem for designers. Although the dark age of IE6 has passed and the popularity of the IE browser family is declining, we still need to detect it. Of course, the following snippet 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'); 
 
      } 
 
});

Smooth scrolling to the top of the page

The following is the most common implementation effect of jQuery: click a link to smoothly scroll to the top of the page. Although there is nothing new at all, almost every developer can use it.

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

Keep always on top

The following code snippet allows an element to always be at the top of the page. As you can imagine, it's ideal for handling navigation menus, toolbars, or other important information.

$(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 <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>Replace html tags</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">jQuery can easily replace html tags, and this will also bring us more new possibilities. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('li').replaceWith(function(){ 
 
  return $("<p></p>").append($(this).contents()); 
 
});

Detecting screen width

Now that the popularity of mobile devices has almost surpassed that of traditional computers, it is very important to detect the size of small screens. Fortunately, we can easily achieve this functionality using jQuery.

var responsive_viewport = $(window).width(); 
 
/* if is below 481px */ 
 
if (responsive_viewport <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>Automatically repair damaged images</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">If your site is very large and has been online for several years, there will be more or less damaged images. This feature detects corrupted images and replaces them according to our choice. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('img').error(function(){ 
 
$(this).attr('src', 'img/broken.png'); 
 
});

Detecting copy, paste and cut operations

Using 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 the target="blank" attribute to external links

When linking to external sites, you may want to use the target="blank" attribute to ensure that Open the page in a new tab. The problem is that the target="blank" attribute is not W3C certified. jQuery can help a lot: the following snippet detects whether the current link points externally, and if so, automatically adds the target="blank" attribute to it.

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

Fade in/out on hover

Another "classic" effect that you can use at any time using the following clip.

$(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 spaces in text/password input

Many common fields do not require the use of spaces, whether it is email, username or password. The following code easily disables all spaces in selected input.

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

The above is the detailed content of Practical tips about jQuery. For more information, please follow other related articles on the PHP Chinese website!