How to manipulate DOM with jQuery

1. jQuery operation style

2. jQuery operation attributes

3. jQuery animation simple operation

4. jQuery operation dom node addition and deletion operations

1. jq operation style

1.css operation:

Function: Setting Or modify the style and operate the style attribute

a. Set a single style, css (name/attribute name, value/attribute value);

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

b. Set multiple styles, the parameter is the object css (obj);

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

Get style:

.css(name)

Features, jQ’s css methods are all inline styles;

jqhidden When iterating through the formula, when a certain attribute of a collection is obtained, JQ will automatically print the 0th attribute.

When setting the operation, if there are multiple elements, then set the same value to all elements

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

..........

2.class operation

Function: processing style class

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

2. jq operation attribute

1.attr operation

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

1. When obtaining attributes, only the attributes corresponding to the first element will be obtained, the same as the css method.

2. When getting an attribute, if the attribute does not exist, undefined will be returned.

d. Remove the attribute removeAttr(name);

Parameters: need to be removed If the attribute name is passed empty, no operation will be performed. Note that not all attributes are removed. Distinguish removeClass.

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

2.prop operation Boolean attribute

For boolean form attributes such as checked, selected, and disabled, the attr method cannot be used. Only prop methods can be used.

Set attributes

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

Add selected attributes to all selections, parameters (attribute name, true/false)

Get attributes

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

三、jQuery basic animation

jquery provides three sets of basic animations. These animations are standard and regular effects. jquery also provides the function of custom animation.

1. Show and hide

show([speed],[callback]) and hide();

show() If no parameters are passed, display and hide directly

Parameters: speed: time (millisecond value), fixed string 'fast') = 200 nomal = 400 slow=600;

callback: callback function executed after the animation ends

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

The above is the detailed content of How to manipulate DOM with jQuery. For more information, please follow other related articles on the PHP Chinese website!