Heim >Web-Frontend >js-Tutorial >Eine Sammlung häufig verwendeter JavaScript-Methoden und -Funktionen, die ich teilen muss (Teil 2)_Javascript-Kenntnisse

Eine Sammlung häufig verwendeter JavaScript-Methoden und -Funktionen, die ich teilen muss (Teil 2)_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:23:251234Durchsuche

In diesem Artikel haben wir einige häufig verwendete Javascript-Funktionen zusammengestellt, in der Hoffnung, Freunden, die JS lernen, hilfreich zu sein.

22. Elemente ersetzen

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

23. jQuery-Funktion zum verzögerten Laden

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

24. Wortfunktion entfernen

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

25. Überprüfen Sie, ob das Element in der JQuery-Objektsammlung vorhanden ist

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

26. Machen Sie das gesamte DIV anklickbar

$(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. Umrechnung zwischen ID und Klasse
Wechseln Sie beim Ändern der Fenstergröße zwischen ID und Klasse

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

28. Objekt klonen

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

29. Positionieren Sie das Element in der Mitte des Bildschirms

$(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. Schreiben Sie Ihren eigenen Selektor

$(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. Zählen Sie die Anzahl der Elemente

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

32. Verwenden Sie Ihre eigenen Kugeln

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

33. Verweisen Sie auf die Jquery-Klassenbibliothek auf dem 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. Deaktivieren Sie den JQuery-Effekt (Animation)

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

35. Lösung für Konflikte mit anderen Javascript-Bibliotheken

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

Das Obige ist der gesamte Inhalt dieses Artikels. Wenn es Ihnen gefällt, sammeln Sie es einfach!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn