Essential jQuery practical skills (Part 1)-JS Tutorial-php.cn

Essential jQuery practical skills (Part 1)

PHPz

Release： 2018-09-28 16:20:21

Original

990 people have browsed it

This article mainly summarizes the classic and practical jQuery code development skills. can help everyone develop quickly. Interested friends can refer to . The details are as follows:

1. Right-clicking is prohibited

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
 return false;
 });
});

Copy after login

2. Hide the search text box text
Hide when clicked in the search field, the value. (example can be found below in the comment fields)

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
 textFill($(&#39;input.text1&#39;));
});
 
 function textFill(input){ //input focus text function
 var originalvalue = input.val();
 input.focus( function(){
  if( $.trim(input.val()) == originalvalue ){ input.val(&#39;&#39;); }
 });
 input.blur( function(){
  if( $.trim(input.val()) == &#39;&#39; ){ input.val(originalvalue); }
 });
}

Copy after login

3. Open the link in a new window

XHTML 1.0 Strict doesn't allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
 //Example 1: Every link will open in a new window
 $(&#39;a[href^="http://"]&#39;).attr("target", "_blank");
 
 //Example 2: Links with the rel="external" attribute will only open in a new window
 $(&#39;a[@rel$=&#39;external&#39;]&#39;).click(function(){
 this.target = "_blank";
 });
});
// how to useopen link

Copy after login

4. Detect browser
Note: In version jQuery 1.4, $.support Replaced the $.browser variable

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
 // do something
}

// Target Safari
if( $.browser.safari ){
 // do something
}

// Target Chrome
if( $.browser.chrome){
 // do something
}

// Target Camino
if( $.browser.camino){
 // do something
}

// Target Opera
if( $.browser.opera){
 // do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version  6){
 // do something
}
});

Copy after login

5. Preload images
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});

Copy after login

6. Page style switching

$(document).ready(function() {
 $("a.Styleswitcher").click(function() {
 //swicth the LINK REL attribute with the value in A REL attribute
 $(&#39;link[rel=stylesheet]&#39;).attr(&#39;href&#39; , $(this).attr(&#39;rel&#39;));
 });
// how to use
// place this in your header// the linksDefault ThemeRed ThemeBlue Theme});

Copy after login

7. The column heights are the same
If two CSS columns are used, this method can be used to The columns are the same height.

$(document).ready(function() {
function equalHeight(group) {
 tallest = 0;
 group.each(function() {
 thisHeight = $(this).height();
 if(thisHeight > tallest) {
  tallest = thisHeight;
 }
 });
 group.height(tallest);
}
// how to use
$(document).ready(function() {
 equalHeight($(".left"));
 equalHeight($(".right"));
});
});

Copy after login

8. Dynamically control page font size
Users can change page font size

$(document).ready(function() {
 // Reset the font size(back to default)
 var originalFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
 $(".resetFont").click(function(){
 $(&#39;html&#39;).css(&#39;font-size&#39;, originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
 var currentFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*1.2;
 $(&#39;html&#39;).css(&#39;font-size&#39;, newFontSize);
 return false;
 });
 // Decrease the font size(smaller font)
 $(".decreaseFont").click(function(){
 var currentFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*0.8;
 $(&#39;html&#39;).css(&#39;font-size&#39;, newFontSize);
 return false;
 });
});

Copy after login

9. Return to the top of the page function
For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$(&#39;a[href*=#]&#39;).click(function() {
 if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
 && location.hostname == this.hostname) {
 var $target = $(this.hash);
 $target = $target.length && $target
 || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
 if ($target.length) {
 var targetOffset = $target.offset().top;
 $(&#39;html,body&#39;)
 .animate({scrollTop: targetOffset}, 900);
 return false;
 }
 }
 });
// how to use
// place this where you want to scroll to// the linkgo to top});

Copy after login

10. Get the mouse cursor value
Want to know where your mouse cursor is?

$(document).ready(function() {
 $().mousemove(function(e){
 //display the x and y axis values inside the div with the id XY
 $(&#39;#XY&#39;).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use});

Copy after login

11. Back to top button
You can use animate and scrollTop to implement the animation of returning to the top without using other plug-ins.

// Back to top
$(&#39;a.top&#39;).click(function () {
 $(document.body).animate({scrollTop: 0}, 800);
 return false;
});
Back to top

Copy after login

Changing the value of scrollTop can adjust the distance between the return and the top, and the second parameter of animate is the time required to perform the return action (unit: milliseconds).

Today I will introduce some jQuery skills to you. For more related tutorials, please visit jQuery Video Tutorial!