时间:2021-07-01 10:21:17 帮助过:11人阅读
一、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对象
字符串:$(“p”).append(“<span>这是一个span元素</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)所匹配到的元素(深度复制)和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
以上就是jQuery操作DOM的方法的详细内容,更多请关注Gxl网其它相关文章!