Heim > Web-Frontend > js-Tutorial > Hauptteil

35 jQuery-Codefragmente, die Programmierer kennen müssen

PHPz
Freigeben: 2018-09-29 09:16:33
Original
1210 Leute haben es durchsucht

jQuery ist mittlerweile die beliebteste JavaScript-Bibliothek in der Webentwicklung. Mit jQuery und einer großen Anzahl von Plug-Ins können Sie ganz einfach verschiedene großartige Effekte erzielen. Dieser Artikel führt Sie in einige praktische jQuery-Kenntnisse ein und soll Ihnen dabei helfen, jQuery effizienter zu nutzen.

35 jQuery-Tipps/Codeausschnitte gesammelt, die Ihnen bei der schnellen Entwicklung helfen.

1. Rechtsklick deaktivieren

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

2. Den Suchtextfeldtext ausblenden

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); }
   });
}
Nach dem Login kopieren

3. Öffnen Sie den Link in einem neuen Fenster

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 useopen link
Nach dem Login kopieren

4. Browser erkennen

Hinweis: In Version jQuery 1.4 ersetzte $.support die Variable $.browser

$(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
}
});
Nach dem Login kopieren

5. Bilder vorladen

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(?").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});
Nach dem Login kopieren

6. Seitenstilwechsel

$(document).ready(function() {
  $("a.Styleswitcher").click(function() {
    //swicth the LINK REL attribute with the value in A REL attribute
    $(&#39;link[rel=stylesheet]&#39;).attr(&#39;href&#39; , $(this).attr(&#39;rel&#39;));
  });
// how to use
// place this in your header// the linksDefault ThemeRed ThemeBlue Theme});
Nach dem Login kopieren

7. Die Spaltenhöhen sind gleich

Wenn zwei CSS-Spalten verwendet werden, kann diese Methode verwendet werden, um die Höhen der beiden Spalten anzupassen Dasselbe .

$(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"));
});
});
Nach dem Login kopieren

8. Steuern Sie die Schriftgröße der Seite dynamisch

Benutzer können die Schriftgröße der Seite ändern

$(document).ready(function() {
 // Reset the font size(back to default)
 var originalFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
  $(".resetFont").click(function(){
  $(&#39;html&#39;).css(&#39;font-size&#39;, originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
  var currentFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $(&#39;html&#39;).css(&#39;font-size&#39;, newFontSize);
  return false;
 });
 // Decrease the font size(smaller font)
 $(".decreaseFont").click(function(){
  var currentFontSize = $(&#39;html&#39;).css(&#39;font-size&#39;);
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $(&#39;html&#39;).css(&#39;font-size&#39;, newFontSize);
  return false;
 });
});
Nach dem Login kopieren

9. Zurück zur oberen Funktion der Seite

For a smooth(animated) ride back to the top(or any location).
$(document).ready(function() {
$(&#39;a[href*=#]&#39;).click(function() {
 if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
 && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target
  || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
  if ($target.length) {
 var targetOffset = $target.offset().top;
 $(&#39;html,body&#39;)
 .animate({scrollTop: targetOffset}, 900);
  return false;
  }
 }
 });
// how to use
// place this where you want to scroll to// the linkgo to top});
Nach dem Login kopieren

10 🎜>

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
  $(&#39;#XY&#39;).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use});
Nach dem Login kopieren

11. Schaltfläche „Zurück nach oben“

Sie können animate und scrollTop verwenden, um die Animation für die Rückkehr nach oben zu implementieren ohne andere Plug-Ins zu verwenden.

// Back to top
$(&#39;a.top&#39;).click(function () {
 $(document.body).animate({scrollTop: 0}, 800);
 return false;
});
Back to top
Nach dem Login kopieren
Durch Ändern des Werts von scrollTop kann der Abstand zwischen der Rückkehr und der Oberseite angepasst werden, und der zweite Parameter von animate ist die Zeit, die zum Ausführen der Rückkehraktion erforderlich ist (Einheit: Millisekunden). ).

12. Bilder vorab laden

Wenn Ihre Seite viele unsichtbare Bilder verwendet (z. B. Hover-Anzeige), müssen Sie diese möglicherweise vorab laden:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
  $(&#39;&#39;).attr(&#39;src&#39;, arguments[i]);
 }
};
$.preloadImages(&#39;img/hover1.png&#39;, &#39;img/hover2.png&#39;);
Nach dem Login kopieren

13. Überprüfen Sie, ob das Bild geladen ist

Manchmal müssen Sie sicherstellen, dass das Bild geladen ist, um die folgenden Vorgänge auszuführen:

$(&#39;img&#39;).load(function () {
 console.log(&#39;image load successful&#39;);
});
Nach dem Login kopieren
Sie können img durch eine andere ID oder Klasse ersetzen, um zu überprüfen, ob das angegebene Bild geladen ist.

14. Defekte Bilder automatisch ändern

Wenn Sie auf Ihrer Website einen defekten Bildlink finden, können Sie ihn durch ein Bild ersetzen, das nicht einfach ersetzt werden kann . Das Hinzufügen dieses einfachen Codes kann Ihnen viel Ärger ersparen:

$(&#39;img&#39;).on(&#39;error&#39;, function () {
 $(this).prop(&#39;src&#39;, &#39;img/broken.png&#39;);
});
Nach dem Login kopieren
Auch wenn Ihre Website keine defekten Bildlinks enthält, kann das Hinzufügen dieses Codes nicht schaden.

15. Mauszeiger (Hover) zum Wechseln des Klassenattributs

Wenn Sie den Effekt ändern möchten, wenn der Benutzer mit der Maus über ein anklickbares Element fährt, verwenden Sie den folgenden Code kann ein Klassenattribut hinzufügen, wenn es mit der Maus über ein Element fährt, und das Klassenattribut automatisch löschen, wenn der Benutzer mit der Maus wegfährt:


$(&#39;.btn&#39;).hover(function () {
 $(this).addClass(&#39;hover&#39;);
 }, function () {
  $(this).removeClass(&#39;hover&#39;);
 });
你只需要添加必要的CSS代码即可。如果你想要更简洁的代码,可以使用 toggleClass 方法:
$(&#39;.btn&#39;).hover(function () { 
 $(this).toggleClass(&#39;hover&#39;); 
});
Nach dem Login kopieren
Hinweis: Verwenden Sie CSS direkt, um dies zu erreichen Dieser Effekt ist möglicherweise eine bessere Lösung, Sie müssen jedoch die Methode kennen.

16. Eingabefelder deaktivieren

Manchmal müssen Sie möglicherweise die Schaltfläche „Senden“ eines Formulars oder ein Eingabefeld deaktivieren, bis der Benutzer eine Aktion ausführt (z. B. „Lesen“ aktivieren). Kontrollkästchen „Bedingungen aktivieren“). Sie können das deaktivierte Attribut hinzufügen, bis Sie es aktivieren möchten:


$(&#39;input[type="submit"]&#39;).prop(&#39;disabled&#39;, true);
Nach dem Login kopieren
Sie müssen lediglich die Methode „removeAttr“ ausführen und das zu entfernende Attribut als Parameter übergeben:


$(&#39;input[type="submit"]&#39;).removeAttr(&#39;disabled&#39;);
Nach dem Login kopieren

17. Verhindern Sie das Laden von Links

Manchmal möchten Sie nicht auf eine Seite verlinken oder sie neu laden, sondern möchten vielleicht, dass sie etwas anderes tut oder etwas auslösen. Für andere Skripte können Sie Folgendes tun:


$(&#39;a.no-link&#39;).click(function (e) {
 e.preventDefault();
});
Nach dem Login kopieren

18. Fade/Slide umschalten

Fade und Slide sind das, was wir verwenden. Animationseffekte werden in jQuery häufig verwendet, um Elemente besser erscheinen zu lassen. Wenn Sie jedoch möchten, dass der erste Effekt verwendet wird, wenn das Element angezeigt wird, und der zweite Effekt, wenn es verschwindet, können Sie Folgendes tun:


// Fade
$(&#39;.btn&#39;).click(function () {
 $(&#39;.element&#39;).fadeToggle(&#39;slow&#39;);
});
// Toggle
$(&#39;.btn&#39;).click(function () {
 $(&#39;.element&#39;).slideToggle(&#39;slow&#39;);
});
Nach dem Login kopieren

19. Einfacher Akkordeoneffekt

Hier ist eine schnelle und einfache Möglichkeit, einen Akkordeoneffekt zu erzielen:


// Close all panels
$(&#39;#accordion&#39;).find(&#39;.content&#39;).hide();
// Accordion
$(&#39;#accordion&#39;).find(&#39;.accordion-header&#39;).click(function () {
 var next = $(this).next();
 next.slideToggle(&#39;fast&#39;);
 $(&#39;.content&#39;).not(next).slideUp(&#39;fast&#39;);
 return false;
});
Nach dem Login kopieren

20. Stellen Sie sicher, dass zwei DIVs die gleiche Höhe haben

Manchmal müssen Sie zwei Divs auf die gleiche Höhe bringen, unabhängig vom Inhalt darin. Sie können das folgende Code-Snippet verwenden:

var $columns = $(&#39;.column&#39;);
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
  height = $(this).height();
 }
});
$columns.height(height);
Nach dem Login kopieren
Dieser Code durchläuft eine Gruppe von Elementen und setzt deren Höhe auf die maximale Höhe unter den Elementen.

21. Überprüfen Sie, ob das Element leer ist

This will allow you to check if an element is empty.
$(document).ready(function() {
 if ($(&#39;#id&#39;).html()) {
  // do something
  }
});
Nach dem Login kopieren

22. Ersetzen Sie das Element

$(document).ready(function() {
  $(&#39;#id&#39;).replaceWith(&#39;I have been replaced&#39;);
});
Nach dem Login kopieren

23. jQuery-Funktion zum verzögerten Laden

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

24. Wortentfernungsfunktion

$(document).ready(function() {
  var el = $(&#39;#id&#39;);
  el.html(el.html().replace(/word/ig, ""));
});
Nach dem Login kopieren

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

$(document).ready(function() {
  if ($(&#39;#id&#39;).length) {
 // do something
 }
});
Nach dem Login kopieren

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 usehome});
Nach dem Login kopieren

27. ID与Class之间转换

当改变Window大小时,在ID与Class之间切换

$(document).ready(function() {
  function checkWindowSize() {
  if ( $(window).width() > 1200 ) {
    $(&#39;body&#39;).addClass(&#39;large&#39;);
  }
  else {
    $(&#39;body&#39;).removeClass(&#39;large&#39;);
  }
  }
$(window).resize(checkWindowSize);
});
Nach dem Login kopieren

28. 克隆对象

$(document).ready(function() {
  var cloned = $(&#39;#id&#39;).clone();
// how to use});
Nach dem Login kopieren

29. 使元素居屏幕中间位置

$(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();
});
Nach dem Login kopieren

30. 写自己的选择器

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

31. 统计元素个数

$(document).ready(function() {
  $("p").size();
});
Nach dem Login kopieren

32. 使用自己的 Bullets

$(document).ready(function() {
  $("ul").addClass("Replaced");
  $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});
Nach dem Login kopieren

33. 引用Google主机上的Jquery类库

//Example 1
Nach dem Login kopieren

34. 禁用Jquery(动画)效果

$(document).ready(function() {
  jQuery.fx.off = true;
});
Nach dem Login kopieren

35. 与其他Javascript类库冲突解决方案

$(document).ready(function() {
  var $jq = jQuery.noConflict();
  $jq(&#39;#id&#39;).show();
});
Nach dem Login kopieren

以上就是本章的全部内容,更多相关教程请访问jQuery视频教程

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage