1 Présentation 1. Qu'est-ce que JQuery ? JQuery est une bibliothèque JavaScript qui simplifie les opérations JS et étend les fonctions JS. 2. Principe de séparation JQuery suit le principe de séparation de l'importation et de l'utilisation, c'est-à-dire utiliser un et créer une autre balise < ;script> </span></p> <h2><span style="font-size: 18px"> 3. Syntaxe de base </span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).action();</pre><div class="contentsignin">Copier après la connexion</div></div></div> <p><span style="font-size: 18px"> Obtenez l'élément HTML et effectuez l'opération spécifiée sur l'élément. </span></p> <h1><span style="font-size: 14pt">Deux sélecteurs </span></h1> <h2><span style="font-size: 18px"> 1. Sélecteur de base </span></h2> <p><span style="font-size: 18px"> Identique au sélecteur CSS, sélecteur de base JQuery sélectionne les éléments HTML en fonction de la balise, de la catégorie et de l'identifiant. </span></p> <h2><span style="font-size: 18px"> 2. Sélecteur de combinaison </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">$(selector01,selector02,selectorN) : obtenez les articles qui satisfont à n'importe quelle condition Une collection d'éléments. </span></p></li> <li><p><span style="font-size: 18px">$(selector01selector02) : obtenez des éléments qui remplissent plusieurs conditions en même temps. </span></p></li> <li><p><span style="font-size: 18px">$(selector01 selector02) : Récupère l'élément qui satisfait à la deuxième condition parmi les éléments enfants de l'élément qui satisfait à la première condition. </span></p></li> </ul> <h2><span style="font-size: 18px"> 3. Le sélecteur d'attribut </span></h2> <p><span style="font-size: 18px"> sélectionne les éléments en fonction des attributs. </span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> $("[attr]") : Obtenez tous les éléments avec l'attribut attr. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr='value']") : Obtenez tous les éléments avec la valeur d'attribut spécifiée. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr!='value']") : Récupère tous les éléments avec l'attribut spécifié et dont la valeur n'est pas égale à la valeur spécifiée. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr$='value']") : Récupère tous les éléments avec l'attribut spécifié et dont la valeur se termine par la valeur spécifiée. </span></p></li> <li><p><span style="font-size: 18px"> $("[attr^='value']") : Obtenez tous les éléments avec l'attribut spécifié et dont la valeur commence par la valeur spécifiée. </span></p></li> </ul> <h2><span style="font-size: 18px"> 4.$(this) </span></h2> <p><span style="font-size: 18px"> est généralement utilisé dans une méthode pour obtenir l'objet actuel, c'est-à-dire , la méthode appelle who. </span></p> <h1><span style="font-size: 14pt">Opérations à trois éléments</span></h1> <h2><span style="font-size: 18px"> 1. Création d'éléments</span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$("<tag>")</pre><div class="contentsignin">Copier après la connexion</div></div></div> <p><span style="font-size: 18px"> La balise HTML utilisée par JQuery lors de la création d'un objet peut être simplement le début de la balise <tag>, ou elle peut inclure à la fois le début et la fin <tag></tag>, ou </span><span style="font-size: 18px"> peut inclure des détails, tels que </span></p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><tag style="xxxxx">content</tag></pre><div class="contentsignin">Copier après la connexion</div></div></div> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> 不能够直接使用标签名创建对象,即$("tagName")不能创建对象,这一点不同于JavaScript。</span></p></li> <li><p><span style="font-size: 18px"> 不能够单独使用标签结束标识创建对象,即$("</tag>")不能创建对象。</span></p></li> </ul> <h2><span style="font-size: 18px"> 2.获取内容 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">text():设置或者返回所选元素的文本内容。</span></p></li> <li><p><span style="font-size: 18px">html():设置或者返回所选元素的内容(包含HTML标签)。</span></p></li> <li><p><span style="font-size: 18px">val():设置或者返回所选字段的值。</span></p></li> </ul> <h2><span style="font-size: 18px"> 3.内部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> append():在结尾(后端)添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> prepend():在开头(前端)添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> appendTo():将操作对象作为子对象添加到参数对象结尾。</span></p></li> </ul> <h2><span style="font-size: 18px"> 4.外部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> before():在前面添加兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> after():在后面添加兄弟素。</span></p></li> <li><p><span style="font-size: 18px"> insertBefore():在前面插入兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> insertAfter():在后面插入兄弟元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 5.删除元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">remove():删除自身及子元素。</span></p></li> <li><p><span style="font-size: 18px">empty():删除子元素。</span></p></li> <li><p><span style="font-size: 18px">remove("根据基本选择器选择指定元素"):删除基本选择器中指定元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 6.获取子元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">children():获取全部子元素。</span></p></li> <li><p><span style="font-size: 18px">children("基本组合选择器"):获取具有自定标签与指定属性的子元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 7.筛选 </span></h2> <p><span style="font-size: 18px"> 如果一个选择器返回的结果不是一个对象,而是多个对象构成的集合,可以使用以下方法获取集合中的指定对象:</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> eq(index):获取集合中指定索引位置的对象,索引从0开始。</span></p></li> <li><p><span style="font-size: 18px"> filter(":even"):获取集合中所有索引为奇数的对象。</span></p></li> <li><p><span style="font-size: 18px"> filter(":odd"):获取集合中所有索引为偶数的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(index):获取索引大于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(0,index):获取索引小于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> not(selector):选择指定对象以外的全部对象。</span></p></li> </ul> <h1><span style="font-size: 14pt">四 属性操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">attr("attrName"):获取属性值。</span></p></li> <li><p><span style="font-size: 18px">attr("attrName","attrValue"):修改属性值。</span></p></li> <li><p><span style="font-size: 18px">removeAttr("atrrName"):删除属性。</span></p></li> </ul> <h1><span style="font-size: 14pt">五 常用操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">遍历对象:$.each(obj,function(i,n)),i是索引,n是当前遍历子对象。</span></p></li> <li><p><span style="font-size: 18px">获取单选按钮与复选框的选择状态:$(this).is(":checked")。</span></p></li> </ul> <h1><span style="font-size: 14pt">六 常用标签及其操作</span></h1> <h2><span style="font-size: 18px"> 1.select </span></h2> <h3><span style="font-size: 18px">⑴增加选项 </span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).options[index]=new Option(name,value);//按照索引增加$(selector).add(option,before);//按照指定位置增加</pre><div class="contentsignin">Copier après la connexion</div></div></div> <h3><span style="font-size: 18px">⑵删除选项</span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).length=0;//全部删除$(selector).remove(index);//按索引删除</pre><div class="contentsignin">Copier après la connexion</div></div></div> <h3><span style="font-size: 18px">⑶option</span></h3> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">option.index : définit et renvoie la valeur de l'attribut d'index. </span></p></li> <li><p><span style="font-size: 18px">option.text : Définir et renvoyer le texte. </span></p></li> <li><p><span style="font-size: 18px">option.value : définit et renvoie la valeur. </span></p></li> <li><p><span style="font-size: 18px">option.selected : définit et renvoie le statut de sélection, vrai/faux. </span></p></li> </ul> <p> </p>