Cet article résume principalement les compétences classiques et pratiques en matière de développement de code jQuery. peut aider tout le monde à se développer rapidement. Les amis intéressés peuvent se référer à . Les détails sont les suivants :
1. Le clic droit est interdit
$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
2. Masquer le texte de la zone de texte de recherche
Masquer lorsque vous cliquez dans le champ de recherche, la valeur (un exemple peut être trouvé ci-dessous dans les champs de commentaire)
$(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); } }); }
3. Ouvrez le lien dans une nouvelle fenêtre
XHTML 1.0 Strict n'autorise pas cet attribut dans le code, alors utilisez-le pour garder le code valide.
$(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
4. Détecter le navigateur
Remarque : dans la version jQuery. 1.4, $.support Remplacement de la 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 } });
5 Précharger les images
Ce morceau de code sera empêcher le chargement de toutes les images, ce qui peut être utile si vous avez un site avec beaucoup d'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"); });
Changement de style de page
$(document).ready(function() { $("a.Styleswitcher").click(function() { //swicth the LINK REL attribute with the value in A REL attribute $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); // how to use // place this in your header// the linksDefault ThemeRed ThemeBlue Theme});
7. Les hauteurs de colonnes sont les mêmes
Si deux colonnes CSS sont utilisées, cette méthode peut être utilisé pour Les colonnes ont la même hauteur.
$(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")); }); });
8. Contrôler dynamiquement la taille de la police de la page
Les utilisateurs peuvent modifier la taille de la police de la page
$(document).ready(function() { // Reset the font size(back to default) var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Increase the font size(bigger font0 $(".increaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $('html').css('font-size', newFontSize); return false; }); // Decrease the font size(smaller font) $(".decreaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $('html').css('font-size', newFontSize); return false; }); });
9. Fonction de retour en haut de la page
Pour un retour en douceur (animé) vers le haut (ou n'importe quel endroit).
$(document).ready(function() { $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body') .animate({scrollTop: targetOffset}, 900); return false; } } }); // how to use // place this where you want to scroll to// the linkgo to top});
10. Obtenez la valeur du curseur de la souris
Vous voulez savoir où se trouve le curseur de votre souris ?
$(document).ready(function() { $().mousemove(function(e){ //display the x and y axis values inside the div with the id XY $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); // how to use});
11. Bouton Retour en haut
Vous pouvez utiliser animer et scrollTop pour implémenter l'animation de retour en haut sans utiliser d'autres des plug-ins.
// Back to top $('a.top').click(function () { $(document.body).animate({scrollTop: 0}, 800); return false; }); Back to top
Changer la valeur de scrollTop peut ajuster la distance entre le retour et le haut, et le deuxième paramètre d'animate est le temps nécessaire pour effectuer l'action de retour (unité : millisecondes ).
Aujourd'hui, je vais vous présenter quelques compétences jQuery. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !