目录
1.jQuery入口函数
- 引入jQuery文件
- 入口函数
- 功能实现
//第一种 $(document).ready(function() {}) //第二种 $(function() {})
2.jQuery对象和DOM对象
- DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
- jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
-
jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
// 1. DOM对象转换为 jQuery对象
$('div');
// 2. jQuery对象转换为DOM对象
//第一种
$('video')[0].play()
//第二种
$('video').get(0).play()
3.隐式迭代
把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法
4.筛选选择器
5.筛选方法
6.操作CSS方法
jQuery可以使用CSS方法来修改简单元素样式;也可以操作类,修改多个样式。
1.参数只写属性名,则是返回属性值
$(this).css("color");
2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red");
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({"color":"white";"font-size":"20px"});
7.设置类样式方法
作用等同于classList,可以操作类样式,注意操作类里面的参数不要加点。
1.添加类
$(this).addClass("current");
2.移除类
$(this).rmoveClass("current");
3.切换类
$(this).toggleClass("current");
注意:jQuery类操作只会对指定类进行操作,不影响原先的类名
8.jQuery动画效果
显示与隐藏效果
1.显示
show([speed,[easing],[fn]])
2.隐藏
hide([speed,[easing],[fn]])
3.切换
toggle([speed,[easing],[fn]])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
参数一般不写
滑动效果
1.上滑动
slideUp([speed,[easing],[fn]])
2.下滑动
slideDown([speed,[easing],[fn]])
3.上下滑动切换
slideToggle([speed,[easing],[fn]])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
参数一般也不写
事件切换
hover([over,]out)
over:鼠标移到元素上面要触发的函数(相当于mouseenter)
out:鼠标移出元素上面要触发的函数(相当于mouseleave)
动画队列停止排队
stop()
stop()用于停止动画效果,但是一定要写下动画效果前面。
淡入淡出效果
1.淡入
fadeIn([speed],[easing],[fn])
2.淡出
fadeOut([speed],[easing],[fn])
3.切换
fadeToggle([speed],[easing],[fn])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
参数一般也不写
4.改变不透明度
fadeTo([[speed],opacity,[easing],[fn]])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) 必须写
opacity:一个0至1之间表示透明度的数字。必须写
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
自定义动画
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合 必须写
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。
9.属性操作
设置或获取元素固有属性值
所谓元素固有属性值就是元素本身自带属性值,比如<a>元素里面有href。
1.获取属性
prop("属性")
2.设置属性
prop("属性","属性值")
设置或获取元素自定义属性值
所谓元素自定义属性值就是用户添加的属性
1.获取属性
attr("属性")//类似原生getAttribute()
2.设置属性
attr("属性","属性值")//类似原生setAttribute()
10.内容文本值
1.普通元素内容
html() //获取元素的内容
html("内容") //设置元素内容
2.普通文本内容
text() //获取元素文本内容
text("内容") //设置元素文本内容
3.表单内容
val() //获取表单元素内容
val("内容") //设置表单元素内容