jQuery-02

jQuery操作样式

1.css操作
	//设置样式
	1).css("name","value")	//修改单个样式	name--样式名		value--样式值
	2).css({键值对})		//对象--一次性修改多个样式
	//获取样式
	3).css("name")			//获取样式	name--样式名 若是对象有多个,则返回第一个的值
	隐式迭代:
     	// 设置操作的时候:会给jq内部的所有相同对象都设置上相同的值。
     	// 获取的时候:只会返回第一个元素对应的值。
 			
2.class操作	
	//添加类
	.addClass("name")		//在原有的基础上添加一个类	name--类名
	//移除类
	.removeClass("name")	//在原有的基础上移除指定的类	name--类名
	//判断类
	.hasClass("name")		//判断元素是否有指定类	name--类名	返回值--boolean
	//切换类
	.toggle("name")			//判断元素是否有指定类;有则移除,无则添加	name--类名

	<!--样式:在style里面写的,用css来操作。-->
	<!--属性:在标签里面写的,用attr方法操作。-->
3.属性操作
	//设置属性
	1).attr("name","value");		//设置单个属性	name--属性名	value--属性值
	2).attr({键值对})				//对象--一次性修改多个属性
	//获取属性
	3).attr("name")				//获取属性	name--属性名 若是对象有多个,则返回第一个的值

4.属性操作例外
	对于布尔类型的属性,不要attr方法(只会生效一次),应该用prop方法 prop用法跟attr方法一样。
	
	//设置属性---checked、selected、readonly、disabled、focused、
	1).prop("name",true/false);		//设置单个属性	name--属性名	value--属性值
	2).prop({键值对})				//对象--一次性修改多个属性
	//获取属性
	3).prop("name")				//获取属性	name--属性名 若是对象有多个,则返回第一个的值

jQuery动画

三组基本动画
显示、隐藏(左上角到右下角)
1.	show(speed)、hide(speed)		//speed时间、不传参数没有动画效果
淡入、淡出
2.	fadeIn(speed)、fadeOut(speed)、fedeToggle(speed)--如果是淡入,则转为淡出
滑入、滑出(由上到下)
3.	slideDown(speed)、slideUp(speed)、slideToggle(speed)--如果是滑入状态,则滑出
自定义动画
第一个参数:对象--{"width",800},里面可以传需要动画的样式
第二个参数:speed 动画的执行时间
第三个参数:动画的执行效果----swing秋千、摇摆(默认),linear线性、匀速
第四个参数:回调函数
animate(elem,speed,"easing",callback);
stop函数
动画队列---不会丢失已触发的动画,但有时会影响用户体验
stop()停止当前正在执行的动画---一般写在即将执行的动画前--用于去除动画队列
	stop(true,true);
	可写参数:
    //clearQueue:是否清除动画队列 true  false
    //jumpToEnd:是否跳转到当前动画的最终效果 true false



!!!! jQuery没有对audio进行封装所以不可用eq(),改用get().来获取相同下标元素

jQuery创建与添加节点

//创建jq对象	--直接将要创建的元素写在append()函数里追加到目标父元素
$("div").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');

$("p") = $("<p>lalalalalal</p>");
//添加到子级
	//末尾
    $("div").append($("p"));
    $("p").appendTo($("div"));
    //开头
    $("div").prepend($("p"));
    $("p").prependTo($("div"));

//同级--兄弟元素
    //前
	$('div').after($("p"));
	//后
	$('div').before($("p"));

jQuery清空、删除和克隆节点

//清空元素
$("div").html("");	//可以清空一个元素的内容	//会发生内存泄漏(不会清除事件),不推荐使用
$("div").empty();	//清空元素的内容及事件	//推荐使用

//删除元素节点
$("div").remove();

//元素节点复制(深拷贝)克隆
$("div").clone(true/false);
	//false:不传参数也是深度复制,不会复制事件
	//true:也是深复制,会复制事件

练手案例

1.tab栏切换
2.美女相册
3.表格全选反选
4.下拉菜单(缓动动画)
5.京东轮播图(呼吸灯)
6.手风琴
7.音乐导航
8.城市选择
9.微博发布
10.弹幕效果

猜你喜欢

转载自blog.csdn.net/weixin_42966943/article/details/88720169