Heim > Web-Frontend > js-Tutorial > Grundlegende praktische jQuery-Kenntnisse (Teil 1)

Grundlegende praktische jQuery-Kenntnisse (Teil 1)

PHPz
Freigeben: 2018-09-28 16:20:21
Original
990 Leute haben es durchsucht

Dieser Artikel fasst hauptsächlich die klassischen und praktischen Fähigkeiten zur Entwicklung von jQuery-Code zusammen. kann jedem helfen, sich schnell weiterzuentwickeln. Interessierte Freunde können sich an wenden. Die Details lauten wie folgt:

1. Rechtsklick ist verboten

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

2. Den Text des Suchtextfelds ausblenden
Beim Klicken in das Suchfeld wird der Wert ausgeblendet (Beispiel finden Sie unten in den Kommentarfeldern)

$(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 erlaubt dieses Attribut nicht Code, also verwenden Sie diesen, um den Code gültig zu halten.

$(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, $.support Die Variable $.browser ersetzt

$(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
Dieser Code wird Verhindern Sie das Laden aller Bilder, was nützlich sein kann, wenn Sie eine Website mit vielen Bildern haben.

$(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, ist diese Methode kann verwendet werden, um die Säulen auf die gleiche Höhe zu bringen.

$(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. Die Schriftgröße der Seite dynamisch steuern
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. Funktion „Zurück zum Seitenanfang“
Für eine reibungslose (animierte) Fahrt zurück nach oben (oder an einen beliebigen Ort).

$(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. Holen Sie sich den Mauszeigerwert
Möchten Sie wissen, wo sich Ihr Mauszeiger befindet?

$(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 zum Anfang“
Sie können animate und scrollTop verwenden, um die Animation der Rückkehr nach oben zu implementieren, ohne andere zu verwenden Plug-Ins.

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

Heute werde ich Ihnen einige jQuery-Kenntnisse vorstellen. Weitere verwandte Tutorials finden Sie im jQuery-Video-Tutorial!

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