Résumé des méthodes jQuery (avec exemples)

Cet article vous propose un résumé des méthodes jQuery (avec des exemples), qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Introduction à jQuery

jQuery est une bibliothèque JS légère pour faire fonctionner le DOM. Elle comprend principalement les fonctions suivantes :

Sélection et fonctionnement des éléments HTML

HTML. événements Fonctions

Parcours et modification HTML DOM

Opérations CSS

Effets spéciaux et animations JavaScript

AJAX

plug-in basé sur jQuery- ins

L'avantage de jQuery est qu'il est compatible avec tous les principaux navigateurs, y compris Internet Explorer 6 !

Syntaxe jQuery

$(selector).action()

Le document est prêt à charger La différence entre l'événement

$(document).ready(function() {
  // 代码...
});

// 简写方式
$(function() {
  // 代码...
});

$(document).ready et window.onload

$(document). ready et window.onload sont tous deux dans Les fonctions exécutées après le chargement de la page ne sont pas très différentes dans la plupart des cas.
$(document).ready : Il est exécuté après le dessin de la structure DOM, sans avoir à attendre son chargement. Cela signifie qu'il sera exécuté après le chargement de l'arborescence DOM, sans attendre le chargement des images ou autres fichiers externes de la page. Et vous pouvez écrire plusieurs .ready.
window.onload : Tous les éléments de la page ont été chargés, y compris les images et autres éléments. Ne peut être exécuté qu'une seule fois.

sélecteur jQuery

le sélecteur jQuery est basé sur le sélecteur CSS existant

$('*')
$('p')
$('ul li')
$('ul li:last-child')
...

événement jQuery

Événements de souris Événements de clavier Événements de formulaire th>Événements de document/fenêtre cliquez appuyez sur une touche soumettez charger dbclick keydown changer redimensionner tr>entrée de la souris touche focus défilement leave de la souris td>

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dbclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

flou décharger survol

Méthodes d'événements jQuery couramment utilisées

cliquez () événement de clic

dbclick() événement de double-clic

mouseenter() la souris passe à travers l'événement d'élément

mouseleave() la souris quitte l'événement d'élément

mousedown() Déplacez la souris sur l'élément et appuyez sur l'événement de la souris

mouseup() Maintenez la souris enfoncée et déplacez-la sur l'élément et relâchez l'événement de la souris

hover() Événement de survol de la souris

élément de formulaire focus() événement de focus

élément de formulaire flou() événement de perte de focus

événement de soumission de formulaire submit()

élément de formulaire changement() événement de changement de valeur

keypress() Événement de pression sur une touche du clavier

keydown() Événement de pression sur une touche du clavier

keyup() Événement de libération d'une touche du clavier

load( ) Événement d'exécution de fin de chargement d'élément spécifié (obsolète après la version 1.8)

événement de changement de taille de fenêtre resize()

événement d'écoute de défilement scroll()

Effet jQuery

变量	说明
selector	选择器
action	事件
speed	速度，毫秒，也可以为‘slow’、‘fast‘
callback	回掉函数

$(selector).action(speed,callback)

• Afficher le masquage
• hide() masquer l'élément
show() Afficher les éléments

toggle() Afficher les éléments cachés et masquer les éléments affichés

• Fondu entrant et sortant
• fadeIn() Fondu in
• fadeOut() Fondu sortant

• fadeToggle() L'élément estompé apparaît en fondu et l'élément estompé disparaît

  
  fadeTo() Fondu à l'opacité donnée

$(selector).fadeTo(speed,opacity,callback);

La valeur d'opacité est comprise entre 0 et 1

• Glissante
slideDown() Faites glisser vers le bas pour développer l'élément
• slideDown() Faites glisser vers le haut pour réduire l'élément

slideToggle() Faites glisser vers le haut pour réduire l'élément développé et faites glisser vers le bas pour afficher l'élément réduit element

Animation

参数	说明	是否必须
params	定义形成动画的 css 属性	必须
speed	速度，毫秒，也可以为‘slow’、‘fast‘	可选
callback	回掉函数	可选

$(selector).animate({params},speed,callback);

$("button").click(function() {
  $("p").animate({
    left: "250px",
    opacity: "0.5",
    height: "150px",
    width: "150px"
  });
});

Instance

Arrêter l'animation

参数	说明	是否必须
stopAll	是否应该清除动画队列，默认是 false	可选
goToEnd	是否立即完成当前动画	可选

$(selector).stop(stopAll, goToEnd);

jQuery 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上，浏览器就不必多次查找相同的元素。

$("#p1")
  .css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

// "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

jQuery HTML

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获取内容和属性

获取内容

• text() 设置或返回所选元素的文本内容
• html() 设置或返回所选元素的内容（包括 HTML 标记）
• val() 设置或返回表单字段的值

获取属性

• attr() 设置或者返回所选的属性的值

// 获取属性
$('#test').attr('href'）

// 设置属性
$('#test').attr('href','http://www.baidu.com')

$('#test').attr({
    href: 'http://www.baidu.com',
    title: '百度'
})

// 回掉函数
$('#test').attr('href', function(i, origValue){
    // i 被选元素列表中当前元素的下标
    // origValue 原始值
    return origValue + '/jquery'
  })

添加删除元素

• append() 在被选元素的结尾插入内容
• prepend() 在被选元素的开头插入内容
• after() 在被选元素之后插入内容
• before() 在被选元素之前插入内容
   
• remove() 删除被选元素（及其子元素）
• empty() 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素

$('p').remove('.italic')

获取并设置 css 类

• addClass() 向被选元素添加一个或多个类
• removeClass() 从被选元素删除一个或多个类
• toggleClass() 对被选元素进行添加/删除类的切换操作
• css() 设置或返回样式属性

// 返回样式属性
$("p").css("background-color");

// 设置样式属性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });

尺寸方法

• width() 元素宽度
• height() 元素高度
• innerWidth() 包含 padding 宽度
• innerHeight() 包含 padding 高度
• outerWidth() 包含 padding、border 宽度
• outerHeight() 包含 padding、border 高度
• outerWidth(true) 包含 padding、border、margin 宽度
• outerHeight(true) 包含 padding、border、margin 高度

元素遍历

祖先元素：

• parent() 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
• parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function() {
  // p > ul > li > span
  $("span").parentsUntil("p");
  // 返回 ul 和 li
});

后代元素：

• children() 返回被选元素的所有直接子元素。
• find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function() {
  $("p").find("span");
});

同胞元素：

• siblings() 返回被选元素的所有同胞元素。
• next() 返回被选元素的下一个同胞元素。
• nextAll() 返回被选元素的所有跟随的同胞元素。
• nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
• prev() 返回被选元素的上一个同胞元素。
• prevAll() 返回被选元素之前的所有的同胞元素。
• prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。

元素过滤：

• first() 返回被选元素的首个元素。
• last() 返回被选元素的最后一个元素。
• eq() 返回被选元素中带有指定索引号的元素。
• filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
• not() 方法返回不匹配标准的所有元素。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!