So manipulieren Sie DOM mit jQuery

1. jQuery-Operationsstil

3. jQuery-Operations-Dom-Knoten-Hinzufügungs- und -Löschoperation

1. jq-Operationsstil

1.css-Operation:

Funktion : Einstellungen Oder ändern Sie den Stil, bedienen Sie das Stilattribut a. Legen Sie einen einzelnen Stil fest, CSS (Name/Attributname, Wert/Attributwert); Stile, die Parameter sind Object css(obj);

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

Funktionen, die CSS-Methoden von jQ sind alle Inline-Stile;

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

....

2. Klassenoperation

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

2. jq-Operationsattribute

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

1.attr-Operation

1 Beim Abrufen von Attributen werden nur die Attribute abgerufen, die dem ersten Element entsprechen, genau wie beim CSS Methode.2. Wenn ein Attribut nicht vorhanden ist, wird „undefiniert“ zurückgegeben.d Entfernen Sie das Attribut „removeAttr(name);“

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

2.prop-Operation Boolesche Attribute

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

Attribute festlegenAusgewählte Attribute zu allen Auswahlen und Parametern hinzufügen (Attributname, wahr/falsch)

Attribute abrufen

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

3. jQuery-Basisanimationen

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

1. Ein- und ausblenden

ein- und ausblenden ([Geschwindigkeit], [Rückruf]);

Parameter: Geschwindigkeit: Zeit (Millisekundenwert), feste Zeichenfolge „schnell“) = 200 nomal = 400 langsam=600;Rückruf: Rückruffunktion wird ausgeführt, nachdem die Animation endet

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)所匹配到的元素（深度复制）和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

Das obige ist der detaillierte Inhalt vonSo manipulieren Sie DOM mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!