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.弹幕效果