Maison > interface Web > js tutoriel > Compétences pratiques essentielles de jQuery (Partie 1)

Compétences pratiques essentielles de jQuery (Partie 1)

PHPz
Libérer: 2018-09-28 16:20:21
original
990 Les gens l'ont consulté

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;
 });
});
Copier après la connexion

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); }
 });
}
Copier après la connexion

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
Copier après la connexion

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
}
});
Copier après la connexion

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");
});
Copier après la connexion

Changement de style de page

$(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});
Copier après la connexion

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"));
});
});
Copier après la connexion

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 = $(&#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;
 });
});
Copier après la connexion

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() {
$(&#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});
Copier après la connexion

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
 $(&#39;#XY&#39;).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use});
Copier après la connexion

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
$(&#39;a.top&#39;).click(function () {
 $(document.body).animate({scrollTop: 0}, 800);
 return false;
});
Back to top
Copier après la connexion

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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal