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
Release: 2016-05-16 15:23:25
Original
1227 people have browsed it

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>
 
');
});
Copy after login

23. jQuery delayed loading function

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

24. Remove word function

$(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

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

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

$(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

$(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

$(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

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

32. Use your own 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 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>
Copy after login

34. Disable Jquery (animation) effect

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

35. Solution to conflicts with other Javascript libraries

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

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

Related labels:
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