1. Méthodes de base des objets jquery :
(1) get(); Obtenez tous les éléments correspondants
(2) get(index); get(0) est équivalent à $(this)[0]
(3) Number index(jqueryObj); Rechercher des sous-objets
(4) each(callback) Similaire à foreach, mais itère sur le element array
Par exemple :
$("img".each(function(index){
this.src = "test" + index + ".jpg";
});Copier après la connexion
Utilisez return false; return true; pour représenter les fonctions break et continue
(5) length, size(); des éléments
(6) jQuery.noConflict(true); Réinitialiser le symbole par défaut de jquery
tel que :
var dom = {};
dom.query = jQuery.noConflict(true);Copier après la connexion
Dans ce cas, dom.query sera utilisé à la place de $
2. , sélecteur JQuery
(1) De base :
* correspond à tous les éléments DOM
.classname correspond aux éléments DOM avec le nom de classe spécifié
élément (DOM nom de la balise) correspond à tous ceux portant le nom spécifié. L'élément DOM
id correspond à l'élément DOM
avec l'ID spécifié, séparé par , pour indiquer qu'il correspond à l'une des multiples conditions de sélection
(2) Niveau :
Sélectionnez-en un [Espace]Choisissez deux signifie tous les éléments de la sélection qui remplissent la condition deux
Sélectionnez-en un[>]Sélectionnez deux signifie le premier élément de la sélection qui remplit la condition deux
Sélectionnez-en un[+]Sélectionnez deux Représente l'élément suivant
qui en sélectionne un immédiatement après la condition deux. Sélectionnez un [~] Représente tous les éléments qui suivent la condition deux après en avoir sélectionné un. >
(3) Opérateur
: animé Élément animé
:eq(index) Position de l'index, telle que : $("div:eq(1)"
:even Élément pair
dd Élément impair
:first Le premier
: GT (Index) est supérieur à tous les éléments de l'index
: LT (Index) inférieur à tous les éléments de l'index
: en-tête H1, H2 ... Ces éléments de titre
: Dernier dernier
: non (non (non (non (non (non (non (non Sélecteur)) Exclut
: contient (chaîne) Le contenu de l'objet sélectionné contient
:empty Le contenu de l'objet sélectionné est vide
:has(Selector) Contient
:parent Contrairement à vide
:first-child:last-child
:nth-child(index) Numéro
nly-child Le seul élément enfant
Formulaire
:text :checkbox :radio :image :file :submit :reset : mot de passe :bouton
Statut du formulaire
:coché :désactivé :activé :sélectionné
Visibilité
:caché :visible
Attributs et leurs opérateurs
[nom de l'attribut] Correspond aux éléments qui contiennent l'attribut donné
[att=value] Comme ci-dessus
[att*=value] Correspondance floue
[att!=value] Ne peut pas être cette valeur
[att$=value] Se termine par cette valeur
[ att^=value] Commence par cette valeur
[att1][att2][att3 ]... Correspond à l'une des multiples conditions d'attribut
3 Opérations courantes du DOM JQuery
(Fait référence aux opérations courantes qui peuvent être effectuées après avoir filtré le DOM via le sélecteur, c'est-à-dire la méthode de l'instance d'objet JQuery)
1. Opérations d'attribut (remarque : attr(name), html(), val() est une méthode qui n'opère que sur le premier élément correspondant, d'autres opèrent sur tous)
attr(name); Récupère l'attribut spécifié par le premier élément de l'élément correspondant
attr(key , fn), attr(key, value) définit une valeur d'attribut pour tous les éléments correspondants . Le deuxième paramètre du premier est une fonction, et la valeur est la valeur de retour de cette
fonction attr(properties ) Utilisez des paires clé-valeur pour définir une ou plusieurs valeurs d'attribut pour tous. éléments correspondants, tels que : $("img".attr({ src: "test.jpg", alt: "Test Image" });
removeAttr(name) Supprime la valeur d'attribut spécifiée de l'élément correspondant
addClass(classname) Ajoutez le nom de la classe, c'est-à-dire ajoutez l'attribut de classe
removeClass(classname)
toggleClass(classname) Basculez le nom de la classe (supprimez s'il existe, s'il n'existe pas) puis augmentez)
html()
html(setvalue)
text()
text(setvalue)
val()
val(val) Pour les éléments ordinaires, utilisez La méthode devrait être un object.val (valeur définie); pour select, radio, etc., la valeur est utilisée pour indiquer l'objet pour sélectionner cette valeur, tel que :
; Implémentation de l'opérateur, seules certaines méthodes de fonctionnement spéciales sont répertoriées ici .
EQ (INDEX), Filter (EXPR), Hasclass (Class), IS (EXPR), NOT (EXPR),
Filter (Fn) Elected Element Collection (Fn) pour correspondre à la fonction spécifiée renvoyée collection d'éléments (Cette fonction calculera en interne
une fois pour chaque objet (similaire à '$.each'). Si la fonction appelée renvoie false, l'élément est supprimé, sinon il sera conservé. )
slice(start, [end]) Sélectionnez un sous-ensemble correspondant
map(callback) Convertit un ensemble d'éléments en d'autres tableaux (qu'il s'agisse d'un tableau d'éléments ou non)
andSelf() Ajouter la sélection à l'ensemble d'éléments actuel
end() 🎜>
3. Traitement du document : Un parmi String, Element, jQuery, le même ci-dessous.
appendTo(content) Le contraire de ce qui précède, ce qui précède consiste à ajouter à l'objet sélectionné, il s'agit d'ajouter l'objet sélectionné à la sélection de contenu
prepend(content), prependTo( content), after(content), before(content)
replaceWith(content) Remplacer l'élément sélectionné par content
replaceAll(selector) Remplacer l'objet sélectionné par l'objet actuel
vide ()
remove([expr])
clone()
clone(true) Cloner l'événement ensemble lors du clonage
4. Traitement CSS
css. (name) Accédez aux propriétés de style du premier élément correspondant
css(name,value) Dans tous les éléments correspondants, définissez la valeur d'une propriété de style
css(properties) Donnez-lui une valeur en utilisant des paires clé-valeur
offset() Récupère le déplacement de l'élément sélectionné. La valeur de retour est l'objet Object{top,left}
height(), height(val), width(), width(val )
4.
Traitement des événements de l'objet JQuery
Opération globale
(1) prêt(fn)
Événement. lorsque le DOM est prêt, pour le document L'événement peut être abrégé en $(function(){ … });
(2) bind(type,[data],fn) lie un événement aux données correspondantes en tant qu'objet supplémentaire passé à cette fonction d'événement
Par exemple :
$("p".bind("click", function(){
alert( $(this).text() );
});
function handler(event) {
alert(event.data.foo);
}
$("p".bind("click", {foo: "bar" }, handler)
(3) one(type,[data],fn) La différence ci-dessus est que cet événement ne répond qu'une seule fois
(4) trigger(type,[data]) déclenche un certain événement une fois sur chaque élément Event
(5) triggerHandler(type,[data]) déclenche uniquement la fonction d'événement, mais ne déclenche pas le même événement dans le navigateur
(6) unbind([type] ,[data]) supprime l'événement lié
(7) hover(overFn, outFn) répond à l'événement de passage de la souris
(8) toggle(fn1,fn2…) répond aux différentes fonctions à chaque fois que la souris est cliqué
2. Événements fixes
Sans paramètres, cela signifie exécuter un événement. Avec des paramètres, cela signifie définir un événement
Les événements suivants peuvent être déclenchés et peuvent également être définis :
blur(), change(), click(), dblclick(), error(), focus(), keydown(), keypress(), keyup(), select(), submit()
Les événements suivants peuvent uniquement être définis et ne peuvent pas être déclenchés par JS :
load(fn), mousedown(fn), mousemove(fn), mouseout(fn), mouseover (fn), mouseup(fn), resize(fn) , scroll(fn), unload(fn)
Effet
hide()
hide(speed,[callback]) Masquer avec animation, callback Fonction exécutée lorsque l'animation est terminée
show()
show(speed,[callback])
toggle() Switch state
slideDown(speed,[callback]) Affiche dynamiquement tous les éléments correspondants via des changements de hauteur (augmentant vers le bas) et déclenche éventuellement une
fonction de rappel
après l'affichage est terminé.
slideUp(speed,[callback]) Masque dynamiquement tous les éléments correspondants en modifiant la hauteur (en diminuant vers le haut), déclenchant éventuellement une fonction de rappel une fois le masquage terminé. slideToggle(speed,[callback]) Bascule la visibilité de tous les éléments correspondants lors des changements de hauteur et déclenche éventuellement une fonction de rappel une fois le changement terminé.
fadeIn(speed,[callback]) Implémente l'effet de fondu entrant de tous les éléments correspondants via des changements d'opacité et déclenche éventuellement une fonction de rappel une fois l'animation terminée.
fadeOut(speed,[callback]) Réalise l'effet de fondu de tous les éléments correspondants grâce à des changements d'opacité et déclenche éventuellement une fonction de rappel une fois l'animation terminée.
fadeTo(speed,opacity,[callback]) Ajuste progressivement l'opacité de tous les éléments correspondants à l'opacité spécifiée et déclenche éventuellement une fonction de rappel une fois l'animation terminée.
animate(params,options) Fonction utilisée pour créer des animations personnalisées.
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
options (Options) : 一组包含动画选项的值的集合。
animate(params[,duration[,easing[,callback]]])
duration、 easing 是预设的动画动作
duration (String,Number) : (可选) 三种预定速度之一的字符串(“slow”, “normal”, or > “fast”或表示动画时长的毫秒数值(如：1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).> 默认jQuery提供”linear” 和 “swing”.
dequeue() 从动画队列中移除一个队列函数
queue() 返回指向第一个匹配元素的队列(将是一个函数数组)
queue(callback) 在匹配的元素的动画队列中添加一个函数
queue(queue) 将匹配元素的动画队列用新的一个队列来代替(函数数组)
stop()
六、AJAX
1、jQuery.ajax(options) 通过 HTTP 请求加载远程数据。
参数列表：
(1) async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
(2) beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 是Function的唯一参数
(3) cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
(4) complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。
(5) contentType (String) : (默认: “application/x-www-form-urlencoded” 发送信息至服务器时内容编码类型。
(6) data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为
Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1″, “bar2″]} 转换为 ‘&foo=bar1&foo=bar2’。
(7) dataFilter (Function) :给Ajax返回的原始数据的进行预处理的函数。
(8) dataType (String) : 预期服务器返回的数据类型，”xml”、”html”、”script”、”json”、”jsonp”、”text”。
(9) error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。
(10) global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件
(11) ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
(12) jsonp (String) : 在一个jsonp请求中重写回调函数的名字。
(13) password (String) : 用于响应HTTP访问认证请求的密码
(20) username (String) : 用于响应HTTP访问认证请求的用户名
(14) processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。如
果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
(15) scriptCharset (String) : 只有当请求时dataType为”jsonp”或”script”，并且type是”GET”才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
(16) success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。
(17) timeout (Number) : 设置请求超时时间（毫秒），此设置将覆盖全局设置。
(18) type (String) : (默认: “GET” 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。
(19) url (String) : (默认: 当前页地址) 发送请求的地址。
参数用 : 分开，如：
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});Copier après la connexion
2、封装好的简易方法(callback是成功时执行的函数，参数是返回的数据)
jQuery.get(url,[data],[callback])
jQuery.getJSON(url,[data],[callback])
jQuery.getScript(url,[callback]) 载入远程JS并执行
jQuery.post(url,[data],[callback])
load(url,[data],[callback]) 把远程的HTML载入当前选中的DOM中
3、事件(事件参数为event, XMLHttpRequest, ajaxOptions, thrownError)
ajaxError(callback) Exécute la fonction lorsqu'une erreur se produit dans la requête AJAX.
ajaxSend(callback) Exécute la fonction avant l'envoi de la requête AJAX
ajaxComplete(callback) Exécute la fonction lorsque la requête AJAX est terminée
ajaxStart(callback) Exécute la fonction lorsque la requête AJAX démarre
ajaxStop(callback) Lorsque la requête AJAX se termine Exécuter la fonction
ajaxSuccess(callback) Exécuter la fonction
jQuery.ajaxSetup(options) lorsque la requête AJAX réussit et définir la valeur globale par défaut d'Ajax
serialize( ) Le contenu du formulaire de séquence est une chaîne
serializeArray() Les éléments de la table de séquence (similaires à la méthode '.serialize()') renvoient des données de structure de données JSON
7. Statique couramment utilisé méthodes
jQuery.boxModel Indique si le navigateur utilise des boîtes standard dans la page actuelle Page de rendu du modèle
jQuery.browser Identifiant du noyau du navigateur. Dépend de navigator.userAgent.
Valeur disponible : Safari Opera Msie Mozilla
jquery.Browser.Version Numéro de version du moteur de rendu du navigateur.
jQuery.each(obj,callback) est une méthode d'itération générale qui peut être utilisée pour itérer des objets et des tableaux.
jQuery.inArray(value,array) détermine la position du premier paramètre dans le tableau (renvoie -1 s'il n'est pas trouvé).
jQuery.map(array,callback) Convertit un objet de type tableau en objet tableau. La valeur de retour est data. Le rappel peut traiter l'ancien tableau individuellement.
jQuery.unique(array) Supprime les éléments en double. le tableau.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
