Home >Web Front-end >JS Tutorial >A collection of commonly used JavaScript methods and functions that I have to share (Part 2)_javascript skills

A collection of commonly used JavaScript methods and functions that I have to share (Part 2)_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:23:251231browse

In this article, we have collected some commonly used Javascript functions, hoping to be helpful to friends who are learning JS.

22. Replace elements

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

23. jQuery delayed loading function

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

24. Remove word function

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

25. Verify whether the element exists in the jquery object collection

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

26. Make the entire 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>});

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

28. Clone object

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

29. Position the element in the middle of the 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();
});

30. Write your own selector

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

31. Count the number of elements

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

32. Use your own Bullets

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

33. Reference the Jquery class library on Google host

//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>

34. Disable Jquery (animation) effect

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

35. Solution to conflicts with other Javascript libraries

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

The above is the entire content of this article. If you like it, just collect it!

Statement:
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