Comment manipuler le DOM avec jQuery

1. Style d'opération jQuery

2. Attributs de l'opération jQuery

3. Opération simple d'animation jQuery

4.

1. style d'opération jq

Opération 1.css :

Fonction : Paramètres Ou modifiez le style, utilisez l'attribut de style

a. Définissez un seul style, css (nom/nom de l'attribut, valeur/valeur de l'attribut

$('#box').css(‘background’,'#000')

b. styles, les paramètres sont Object css(obj);

$('#box').css({'background':'gray',
'width':'400px',
'height':'200px'
})

Get style :

.css(name)

Fonctionnalités, les méthodes CSS de jQ sont toutes des styles en ligne ;

Lors de l'itération implicite jq, lors de l'obtention d'un attribut d'une collection, JQ imprimera automatiquement le 0ème attribut.

Lors de la configuration des opérations, s'il y a plusieurs éléments, définissez la même valeur sur tous les éléments

box.eq(0).css('width',190);
box.eq(1).css('width',110);

....

2. opération de classe

Fonction : Classe pour le traitement des styles

a.添加addClass（name）；参数类名不用带点,并且不会覆盖之前的作用;
$("box").addClass("one");
b.移除removeClass("name");
$("box").removeClass("one");
c.判断hasClass是否有具体的类，返回值为布尔值
$("box").hasClass("one");//false
d.切换样式类toggleClass，需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$("box").toggleClass("one");切换样式类

2. 🎜>Opération 1.attr

1 Lors de l'obtention des attributs, seuls les attributs correspondant au premier élément seront obtenus, les mêmes que le css. méthode.2. Lors de l'obtention d'un attribut, si l'attribut n'existe pas, undefined sera renvoyé.

a.设置单个属性,attr(name,value);
$(“img”).attr(“title”,”哎哟，不错哦”);
b.设置多个属性（attr(obj)）;
$("img").attr({
title:"哎呦，不错哦“，
alt:"你很棒棒哟”,
style:"opacity:.5"
});
c.获取属性attr(name)
$(“img”).attr("title");

d Supprimez l'attribut removeAttr(name);

Paramètre. : Le nom de l'attribut qui doit être supprimé. Si vide est passé, aucune opération ne sera effectuée. Tous les attributs ne sont pas supprimés. Distinguer RemoveClass.

2. Attributs booléens de l'opération prop

$("img").removeAttr("title");

Pour les attributs de formulaire booléen tels que coché, sélectionné et désactivé, attr ne peut pas être utilisé. Méthode, seule la méthode prop peut être utilisée. Définir les attributs

Ajouter les attributs sélectionnés à toutes les sélections, paramètres (nom de l'attribut, vrai/faux)

Obtenir les attributs

$(“:checked”).prop(“checked”,true);

3. Animation de base jQuery

$(“:checked”).prop(“checked”);//返回true或者false;

jquery fournit trois ensembles d'animations de base. Ces animations sont des effets standard et jquery fournit également des fonctions personnalisées.

1. Afficher et masquer

afficher ([vitesse], [rappel]) et masquer ();

show() Si aucun paramètre n'est passé, afficher et masquer directement Paramètres : vitesse : temps (valeur en milliseconde), chaîne fixe 'rapide') = 200 nomal = 400 slow=600;

callback : fonction de rappel exécutée après la fin de l'animation

hide()同show()方法一致

show/hide修改的是元素的width、height、opacity。

2.滑入与滑出

slideUp()与slideDown()

*如果不传参数，默认为nomal!（与show和hide区分 ）

参数：时间，固定字符串

callback:执行动画结束后执行的回调函数

滑入滑出切换slideToggle(speed,callback)

$(selector).slideToggle(speed,callback);

//如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

3.淡入与淡出

fadeIn()与fadeOut()

用法与show好fadeOut一致

淡入淡出切换：

fadeToggle(speed,callback);

//如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

fade系列方法：修改的是元素的opacity

4.基本动画小结

1. jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut

2. 动画切换方法：slideToggle、fadeToggle，toggle()。

3. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。

4. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

5.自定义动画animate

animate:自定义动画

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

// {params}：要执行动画的CSS属性，带数字可以是对象（必写）

// speed：执行动画时长

时间和速度：毫秒数，字符串’swing‘两边慢，中间快/’linner‘匀速

// callback：动画执行完后立即执行的回调函数

例：

设置数值型的属性做动画

box.animate({

left:800;

width:800;

height:800 逐渐变大

transform:'rotate(360deg)'

},1000,'swing'，function)

6.动画队列问题

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。

7.停止动画

stop()函数暂停当前执行动画

stop(clearQueue,jumpToEnd)

第一个参数：是否清楚队列，第二个参数：是否跳转最终效果，最后一帧

四、jQuery操作dom节点增删操作

1.创建元素

$(htmlStr)//html格式的字符串

$(“<span>这是一个span元素</span>”);

2.添加元素append/prepend

append方法：添加到当前的最后面。

参数：字符串（标签）或者jq对象

字符串：$(“p”).append(“这是一个span元素”);
JQ对象：var $span = $(“<span>这是一个span元素</span>”);
$(“p”).append($span);

prepend：追加到当前元素的最前面。

*如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。

3.清空元素empty

empty：清空指定节点的所有元素，自身保留(清理门户)

1）$(“p”).empty();//清空p的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
2）$(“p”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

4.删除元素remove

remove:相比于empty,自身也删除（自尽）

$(“p”).remove();

5.克隆元素clone

$(selector).clone();

复制$(selector)所匹配到的元素（深度复制）和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

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!