Guide d'apprentissage des bases de jQuery_jquery

Ouvrez une page Web. Si le HTML n'a pas été entièrement chargé, il est dangereux d'utiliser les éléments de la page. Mais qu'en est-il de la surveillance si le HTML a été chargé ? jQuery fournit une méthode $(document).ready(). Tout code prêt ne sera exécuté que lorsque le code HTML sera complètement chargé.

$(document).ready(function() {
  console.log('ready!');
});

En outre, il a un raccourci

$(function() {
  console.log('ready!');
});

$(document).ready() n'exécute pas seulement des méthodes anonymes, mais exécute également une méthode nommée :

function readyFn() {
  // code to run when the document is ready
}


$(document).ready(readyFn);

Sélectionner un élément

Le concept le plus basique de jQuery est de "sélectionner certains éléments puis d'en faire quelque chose". jQuery prend en charge la plupart des sélecteurs CSS3, ainsi que certains sélecteurs non standard. Pour plus de détails, voir http://api.jquery.com/category/selectors/ Voici les utilisations de certains sélecteurs courants :

$('#myId');         // 此 ID 在页面中必须唯一
$('div.myClass');      // 如果指定了元素类型，那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢，尽量避免这种用法
$('#contents ul.people li');

$('a.external:first');
$('tr:odd');
$('#myForm :input');     // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)');       // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated');      // 所有正在执行动画的 DIV

Choses à noter

Lors de l'utilisation de pseudo-sélecteurs tels que :visible et :hidden, jQuery détecte en fait s'ils sont visibles sur la page, pas la valeur d'affichage dans leur CSS. C'est-à-dire que lorsque la largeur et la hauteur physiques d'un élément sur la page sont toutes deux supérieures à 0, alors il est visible. Cependant, est une exception. jQuery déterminera si l'élément est visible en fonction de l'attribut display dans le CSS de l'élément

Pour l'implémentation spécifique de jQuery, veuillez vous référer au code :

jQuery.expr.filters.hidden = function( elem ) {
  var width = elem.offsetWidth, height = elem.offsetHeight,
    skip = elem.nodeName.toLowerCase() === "tr";

  // does the element have 0 height, 0 width,
  // and it's not a <tr>&#63;
  return width === 0 && height === 0 && !skip &#63;

    // then it must be hidden
    true :

    // but if it has width and height
    // and it's not a <tr>
    width > 0 && height > 0 && !skip &#63;

      // then it must be visible
      false :

      // if we get here, the element has width
      // and height, but it's also a <tr>,
      // so check its display property to
      // decide whether it's hidden
      jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
  return !jQuery.expr.filters.hidden( elem );
};

Si le jeu de résultats du sélecteur contient des éléments

Après avoir exécuté un sélecteur, comment déterminer si le sélecteur a sélectionné un élément Vous pouvez le prendre pour acquis et écrire :

if ($('div.foo')) { ... }

En fait, c'est mal à écrire, car peu importe que le sélecteur sélectionne un élément ou non, il renverra un objet, et la valeur booléenne de l'objet doit être vraie, donc cette méthode ne fonctionnera pas. En fait, il y a un attribut de longueur dans l'objet renvoyé par le sélecteur. Grâce à cet attribut, vous pouvez déterminer le nombre d'éléments qu'il y a dans le sélecteur. Si aucun élément n'est sélectionné, 0-false est renvoyé. le nombre réel d'éléments est renvoyé nombre vrai.

if ($('div.foo').length) { ... }

Cache le sélecteur

Chaque fois que vous créez un sélecteur, jQuery doit exécuter beaucoup de code. Si vous devez utiliser le même sélecteur plusieurs fois, il est préférable de mettre le sélecteur en cache pour éviter de l'exécuter à plusieurs reprises.

var $divs = $('div');

Notez que le nom de variable utilisé comme variable de cache dans ce code commence par $. Ce signe dollar n'est qu'un caractère ordinaire en JavaScript et n'a aucune autre signification particulière. L'utilisation de $ ici n'est qu'une habitude courante. obligatoire.

Une fois le sélecteur mis en cache dans la variable, vous pouvez appeler les méthodes jQuery sur la variable, tout comme appeler le sélecteur.

Il convient également de noter que le sélecteur ne peut sélectionner que les éléments actuellement sur la page. Si des éléments sont ajoutés à la page après l'exécution du sélecteur, les éléments ajoutés après-demain ne sont pas inclus dans le sélecteur précédent. le sélecteur est à nouveau exécuté après avoir ajouté des éléments à la page.
Sélecteur avec fonction filtre

Parfois, après l'exécution d'un sélecteur, tous les éléments de l'ensemble de résultats ne correspondent pas à ce que nous voulons, nous devons donc filtrer à nouveau l'ensemble de résultats :

$('div.foo').has('p');     // 所有包含有 <p> 的 div.foo
$('h1').not('.bar');      // 没有被标记 bar 这个类的 h1 元素
$('ul li').filter('.current'); // 带有类 current 的无序列表
$('ul li').first();       // 无序列表中的第一个元素
$('ul li').eq(5);        // 第六个

Sélectionner les éléments du formulaire

jQuery fournit des pseudo-sélecteurs pour sélectionner les éléments du formulaire, qui sont très utiles.

•  :bouton de sélection
• :case à cocher sélectionner plusieurs cases à cocher
• :checked sélectionne l'élément de formulaire sélectionné
•  :disabled sélectionne les éléments de formulaire désactivés
•  :enabled sélectionne les éléments de formulaire activés
• :file sélectionne les éléments du formulaire avec type="file"
• :image sélectionne les éléments du formulaire avec type="image"
• … …

$('#myForm :input'); // 选择所有可输入的表单元素

Comment utiliser les sélecteurs

Après avoir exécuté le sélecteur, vous pouvez appeler les méthodes dans le sélecteur. Ces méthodes sont divisées en deux catégories : getter et setter. Le getter renvoie les propriétés du premier élément du jeu de résultats et le setter peut définir les propriétés de tous les éléments du jeu de résultats.
Fonctionnement en chaîne

La plupart des méthodes du sélecteur jQuery renverront l'objet jQuery lui-même, donc après avoir appelé une méthode, vous pouvez continuer à appeler d'autres méthodes sur cette méthode, tout comme un combo :

$('#content').find('h3').eq(2).html('new text for the third h3!');

Pour les opérations chaînées, il est important de garder le code lisible :

$('#content')
  .find('h3')
  .eq(2)
  .html('new text for the third h3!');

Si les éléments du sélecteur changent pendant l'opération de chaîne, vous pouvez utiliser la méthode $.fn.end pour revenir à l'ensemble de résultats d'origine :

$('#content')
  .find('h3')
  .eq(2)
    .html('new text for the third h3!')
  .end() // 返回最初的结果集
  .eq(0)
    .html('new text for the first h3!');

链式操作非常好用，以至于现在很多其它 JavaScript 库都加入了类似特性。但是对于链式操作也要小心使用，过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定 — 只要你觉得能 Hold 住。

jQuery 对有些方法进行了“重载”，所有对某元素赋值或取值的时候所用的方法名是一样的，只是参数列表不同。当用 jQuery 方法对元素赋值的时候，它称为 setter，取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值，getter 只取得选择器中第一个元素的值。

$('h1').html('hello world'); // setter
var str = $('h1').html();  // getter

setter 返回的是 jQuery 对象，可以继续在这个对象上调用 jQuery 方法（链式操作），getter 仅放回我们想要的值，返回值不是 jQuery 对象，所以不能继续链式操作了。
jQuery 操作 CSS

jQuery 可以很方便的设置或取得元素的 CSS 属性。

CSS 属性如果要想在 JavaScript 中使用，多要转换成骆驼命名法（camel cased），例如 CSS 中的 font-size 属性，在 JavaScript 中对应的是 fontSize，但是 jQuery 的 $.fn.css 方法对此做了特殊处理，无论使用哪种写法都可以。

例如：

var strsize1 = $('h1').css('fontSize'); // 返回 "19px"
var strsize2 = $('h1').css('font-size'); // 同上

$('h1').css('fontSize', '100px');   // 给单个属性赋值
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 给多个属性赋值

上面可以看到，一次性给多个属性赋值的时候，实际上传入的是一个对象，这个对象中包含了一些可以表示 CSS 属性的键-值对，在 jQuery 的很多 setter 方法中都有类似用法。
jQuery 操作元素的 class 属性

作为一个 getter，$.fn.css 确实很好用，但是应该尽量避免将其作为 setter 使用，因为一般不建议在 JavaScript 代码中包含太多的样式代码。比较靠谱的方法是把样式规则单独分开写成类（class），然后用 JavaScript 将类应用到元素上即可：

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

尺寸

jQuery 中有很多方法可以用来获取或者修改元素的尺寸或者位置信息。

$('h1').width('50px');  // 设置所有 h1 元素的宽度
$('h1').width();     // 得到第一个 h1 元素的宽度

$('h1').height('50px'); // 设置所有 h1 元素的高度
$('h1').height();    // 得到第一个 h1 元素的高度

$('h1').position();   // 返回第一个 h1 元素
             // 的位置信息，此返回值是一个对象
             // 此位置是相对其父元素的位置的偏移量

这里只是对 jQuery 操纵元素大小及位置信息的简单举例。