Home > Web Front-end > JS Tutorial > body text

Essential jQuery practical skills (Part 2)_jquery

WBOY
Release: 2016-05-16 15:33:47
Original
1267 people have browsed it

The examples in this article summarize classic and practical jQuery code development techniques. Share it with everyone for your reference. The details are as follows:
23. jQuery delayed loading function

Want to delay something?

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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. Count the number of elements

Count an element.

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

32. 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

33. Reference the Jquery class library on the Google host

 Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
 // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

Copy after login

34. Disable Jquery (animation) effect

Disable all jQuery effects

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

35. 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

The above is all about the practical skills of jQuery. I hope it will be helpful to everyone's learning.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template