14 astuces Jquery utiles shared_jquery

1. Renvoyez l'instance de l'objet Jquery via la méthode

Utilisez var someDiv = $('#someDiv').hide(); au lieu de var someDiv = $('#someDiv');

2. Utilisez rechercher pour trouver

Utilisez $('#someDiv').find('p.someClass').hide(); au lieu de $('#someDiv p.someClass').hide(); Le moteur Sizzle de Jquery. En même temps, lors de l'écriture de sélecteurs, essayez de garder vos sélecteurs simples et d'optimiser le sélecteur le plus à droite

.

3. N'abusez pas de $(this)

Utilisez $('#someAnchor').click(function() { alert( this.id ); }); au lieu de $('#someAnchor').click(function() {alert($(this) . attr('id'));});

4. L'abréviation de prêt

Utilisez $(function() { }); au lieu de $(document).ready(function() {});

5. Sécurisez votre code

Méthode 1 (en utilisant noConflict)

Copier le code Le code est le suivant :

var j = jQuery.noConflict();
j('#someDiv').hide();
// La ligne ci-dessous fera référence à la fonction $ d'une autre bibliothèque.
$('someDiv').style.display = 'aucun';

Méthode 2 (passer en paramètre Jquery)

Copier le code Le code est le suivant :

(fonction ($) {
// Au sein de cette fonction, $ fera toujours référence à jQuery
})(jQuery);

Méthode 3 (via la méthode prête)

Copier le code Le code est le suivant :

jQuery(document).ready(function($) {
// $ fait référence à jQuery
});

6. Simplifiez le code

Utilisez each au lieu de for, utilisez des tableaux pour enregistrer des variables temporaires et utilisez des fragments de document. C'est en fait la même chose à laquelle vous devez faire attention lors de l'écriture de Javascript natif.

7. Comment utiliser Ajax

Jquery fournit des méthodes ajax utiles telles que get getJSON post ajax

8. Accéder aux propriétés et méthodes natives
Par exemple, la méthode d'obtention de l'identifiant de l'élément est

Copier le code Le code est le suivant :

// OPTION 1 – Utiliser jQuery
var id = $('#someAnchor').attr('id');
// OPTION 2 – Accéder à l'élément DOM
var id = $('#someAnchor')[0].id;
// OPTION 3 – Utiliser la méthode get de jQuery
var id = $('#someAnchor').get(0).id;
// OPTION 3b – Ne pas passer d'index pour obtenir
AnchorsArray = $(‘.someAnchors’).get();
var ThirdId = AnchorsArray[2].id;

9. Utilisez PHP pour vérifier les requêtes Ajax

En utilisant xhr.setRequestHeader(“X-Requested-With”, “XMLHttpRequest”); Le côté serveur tel que PHP peut passer

Copier le code Le code est le suivant :

fonction isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
>

Pour vérifier s'il s'agit d'une requête Ajax, elle peut être utilisée dans certaines situations où Javascript est désactivé

10.La relation entre Jquery et $

Au bas du code Jquery, vous pouvez voir le code suivant

window.jQuery = window.$ = jQuery; $ est en fait un raccourci de Jquery

11. Chargement conditionnel de Jquery

Copier le code Le code est le suivant :

Si CDN ne se télécharge pas sur Jquery, lisez depuis le local

12.Filtres Jquery

Copier le code Le code est le suivant :

<script><br> $('p:first').data('info', 'value'); // remplit l'objet de données de $ pour avoir quelque chose avec lequel travailler<br> $.extend(<br> jQuery.expr[":"], {<br> bloc : fonction (elem) {<br> return $(elem).css("display") === "block";<br> },<br> hasData : fonction(elem) {<br> return !$.isEmptyObject( $(elem).data() );<br> ><br> ><br> );<br> $("p:hasData").text("has data"); // récupère les paragraphes contenant des données attachées<br> $("p:block").text("are block level"); // récupère uniquement les paragraphes qui ont un affichage de "block"<br> </script>

Remarque : $.expr[":"] est équivalent à $.expr.filters

Méthode 13.hover

Copier le code Le code est le suivant :

$('#someElement').hover(function() {
//Vous pouvez utiliser la méthode bascule ici pour obtenir l'effet de glisser et de glisser
});

14. Passer l'objet attribut

Lors de la création d'un élément, Jquery1.4 peut transmettre un objet attribut

Copier le code Le code est le suivant :

$('', {
identifiant : 'someId',
nom de classe : 'someClass',
href : 'somePath.html'
});

Même les propriétés ou les événements spécifiés par Jquery tels que le texte, cliquez