Summary of Jquery tips_jquery-JS Tutorial-php.cn

Listed below are some Jquery usage tips. For example, there are functions such as disabling right-clicking, hiding search text box text, opening links in new windows, detecting browsers, preloading images, switching page styles, equal heights of all columns, dynamically controlling page font size, and obtaining the X value and Y value of the mouse pointer. , verify whether the element is empty, replace the element, lazy load, verify whether the element exists in the Jquery collection, make the DIV clickable, clone the object, center the element, count the number of elements, use the Jquery class library on the Google host, disable Jquery The effect is to solve the conflict between Jquery class library and other Javascript class libraries.

1. Right-clicking is prohibited

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

Copy after login

2. Hide 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($('input.text1'));
});
 
  function textFill(input){ //input focus text function
  var originalvalue = input.val();
  input.focus( function(){
    if( $.trim(input.val()) == originalvalue ){ input.val(''); }
  });
  input.blur( function(){
    if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
  });
}

Copy after login

3. Open link in 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
  $('a[href^="http://"]').attr("target", "_blank");
 
  //Example 2: Links with the rel="external" attribute will only open in a new window
  $('a[@rel$='external']').click(function(){
   this.target = "_blank";
  });
});
// how to use
<A href="http://www.opensourcehunter.com" rel=external>open link</A>

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
}
 
// Target anything above IE6
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(&#63;<img { i++)>").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
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
  });
// how to use
// place this in your header
<LINK rel=stylesheet type=text/css href="default.css">
// the links
<A class="Styleswitcher" href="#" rel=default.css>Default Theme</A>
<A class="Styleswitcher" href="#" rel=red.css>Red Theme</A>
<A class="Styleswitcher" href="#" rel=blue.css>Blue Theme</A>
});

Copy after login

7. Columns have the same height
If two CSS columns are used, this method can be used to make the heights of the two columns the same.

$(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 = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $('html').css('font-size', newFontSize);
  return false;
 });
 // Decrease the font size(smaller font)
 $(".decreaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $('html').css('font-size', newFontSize);
  return false;
 });
});

Copy after login

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

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

Copy after login

11. Get mouse pointer XY 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
  $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use
<DIV id=XY></DIV>
 
});

Copy after login

12. Verify whether the element is empty
This will allow you to check if an element is empty.

$(document).ready(function() {
 if ($('#id').html()) {
  // do something
  }
});

Copy after login

13. Replace elements
Want to replace a div, or something else?

$(document).ready(function() {
  $('#id').replaceWith('
<DIV>I have been replaced</DIV>
 
');
});

Copy after login

14. jQuery delayed loading function
Want to delay something?

$(document).ready(function() {
  window.setTimeout(function() {
   // do something
  }, 1000);
});

Copy after login

15. Remove word function
Want to remove a certain word(s)?

$(document).ready(function() {
  var el = $('#id');
  el.html(el.html().replace(/word/ig, ""));
});

Copy after login

16. Verify whether the element exists in the jquery object collection
Simply test with the .length property if the element exists.

$(document).ready(function() {
  if ($('#id').length) {
 // do something
 }
});

Copy after login

17. Make the entire DIV clickable
Want to make the complete div clickable?

$(document).ready(function() {
  $("div").click(function(){
   //get the url from href attribute and launch the url
   window.location=$(this).find("a").attr("href"); return false;
  });
// how to use
<DIV><A href="index.html">home</A></DIV>
 
});

Copy after login

18. Conversion between ID and Class.
When changing the Window size, switch between ID and Class

$(document).ready(function() {
  function checkWindowSize() {
  if ( $(window).width() > 1200 ) {
    $('body').addClass('large');
  }
  else {
    $('body').removeClass('large');
  }
  }
$(window).resize(checkWindowSize);
});

Copy after login

19. Clone object
Clone a div or an other element.

$(document).ready(function() {
  var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>
 
});

Copy after login

20. Position the element in the middle of the screen
Center an element in the center of your screen.

$(document).ready(function() {
 jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
   this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
   return this;
 }
 $("#id").center();
});

Copy after login

21. Write your own selector
Write your own selectors.

$(document).ready(function() {
  $.extend($.expr[':'], {
    moreThen1000px: function(a) {
      return $(a).width() > 1000;
   }
  });
 $('.box:moreThen1000px').click(function() {
   // creating a simple js alert box
   alert('The element that you have clicked is over 1000 pixels wide');
 });
});

Copy after login

22. Count the number of elements
Count an element.

$(document).ready(function() {
  $("p").size();
});

Copy after login

23. Use your own Bullets
Want to use your own bullets instead of using the standard or images bullets?

$(document).ready(function() {
  $("ul").addClass("Replaced");
  $("ul > li").prepend("&#8210; ");
 // how to use
 ul.Replaced { list-style : none; }
});

Copy after login

24. Reference the Jquery class library on Google host
Let Google host the jQuery script for you. This can be done in 2 ways.

[code]//Example 1
[/code">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">[/code ]

25. Disable Jquery (animation) effect
Disable all jQuery effects

$(document).ready(function() {
  jQuery.fx.off = true;
});

Copy after login

26. Solution to conflicts with other Javascript libraries
To avoid conflict with other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$(document).ready(function() {
  var $jq = jQuery.noConflict();
  $jq('#id').show();
});

Copy after login

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Summary of Jquery tips_jquery