jQuery操作DOM

一、jQuery操作样式

二、jQuery操作属性

三、jQuery动画简单操作

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

一、jq操作样式

1.css操作：

功能：设置或者修改样式，操作style属性

a.设置单个样式，css(name/属性名,value/属性值);

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

b.设置多个样式，参数是对象css(obj);

$('#box').css( {'background':'gray',

'width':'400px',

'height':'200px'

})

获取样式：

.css(name)

特点，jQ的css方法都是行内样式；

jq隐式迭代时，当获取的是一个集合的某个属性的时候，JQ会自动将第0个属性打印。

 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值

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

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

.......

2.class操作

功能：处理样式的类

a.添加addClass（name）；参数类名不用带点,并且不会覆盖之前的作用;

$("box").addClass("one");

b.移除removeClass("name");

$("box").removeClass("one");

c.判断hasClass是否有具体的类，返回值为布尔值

$("box").hasClass("one");//false

d.切换样式类toggleClass，需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

$("box").toggleClass("one");切换样式类

二、jq操作属性

1.attr操作

a.设置单个属性,attr(name,value);

$(“img”).attr(“title”,”哎哟，不错哦”);

b.设置多个属性（attr(obj)）;

$("img").attr({

title:"哎呦，不错哦“，

alt:"你很棒棒哟”,

style:"opacity:.5"

});

c.获取属性attr(name)

$(“img”).attr("title");

1. 获取属性时，只会获取到第一个元素对应的属性，与css方法一样.

2. 获取属性时，如果该属性不存在，那么会返回undefined.

d.移除属性removeAttr(name);

参数：需要移除的属性名，如果传空，那么不会有任何操作，注意，并不是移除所有的属性。区分removeClass。

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

2.prop操作布尔属性

对于checked、selected、disabled这类boolean类型的表单属性，不能使用attr方法，只能使用prop方法。

设置属性

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

所有选择添加选中属性，参数（属性名，true/false)

获取属性

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

三、jQuery基本动画

jquery提供了三组基本动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。

1.显示和隐藏

show（[speed],[callback]）与hide（）；

show()如果不传递参数，直接显示和隐藏

参数:speed：时间（毫秒值），固定字符串'fast'） = 200 nomal = 400 slow=600;

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

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对象

字符串：$(“div”).append(“<span>这是一个span元素</span>”);

JQ对象：var $span = $(“<span>这是一个span元素</span>”);

$(“div”).append($span);

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

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

3.清空元素empty

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

1）$(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）

2）$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

4.删除元素remove

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

$(“div”).remove();

5.克隆元素clone

$(selector).clone();

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