wtite Less , Do more |
jQuery 入口函数
1.等页面DOM加载完毕后再执行
- $(document.ready(function(){}))
- $(function(){} )
jQuery 的顶级事件
$(function(){} )等同于Query(function(){} )
jQuery对象和DOM对象
- DOM对象 用原生js获取的元素对象
- jQuery对象 用jQuery获取的元素对象—利用$符号对DOM元素进行封装 区别
- jQuery对象只能用jQuery方法,不能使用原生js的影响
两种对象的转换
DOM对象转换为jQuery对象
$(DOM对象)
代码示例
var video = document.querySelector('video);
$(video)
jQuery对象转换为DOM对象(获取索引)
- $(’’).[索引].方法()
- $(’’).get(索引).方法()
常用API
1.jQuery选择器
-
1.1基础选择器
$("选择器")
------基本的css选择器都可以写 -
1.2设置样式
$("选择器").css()
–既使是一个伪数组,jq里面也会将里面所有的元素css改变 元素(伪数组形式存储)的过程就叫做隐式迭代 -
1.3隐式迭代
就是把匹配的所有元素内部进行遍历循环,给每一个元素添加方法
-
1.4筛选选择器
:first
获取第一个元素 $(‘li:first’)
:last
获取最后一个元素 $(‘li:last’)
:eq(index)
获取索引为index的元素 $(‘li:eq(2)’)
:odd
获取索引号为奇数元素 $(‘li:odd’)
:even
获取索引号为偶数元素 $(‘li:even’) -
1.5筛选方法
.parent()
查找父级 最近一级的父级元素 亲爸爸
.children(selector)
查找亲儿子 类似自带选择器 ul>li
.find(selector)
类似后代选择器 所有孩子 包括儿子和孙子以及…
.siblings(selector)
查找兄弟节点,不包括自己本身 selector-指定的选择器
.nextAll([expr])
查找当前元素之后所有的同辈元素
.prevtAll([expr])
查找当前元素之前所有的同辈元素
.hasClass(class)
检查当前元素是否含有某个特定的类,返回布尔值
.eq(index)
相当与:eq(index)
获取索引为index的元素 -
1.6补充
$(this)
当前元素
hide()
隐藏
show()
显示
2.排他思想
当前元素的样式值设置
当前元素的兄弟元素的样式不设置.siblings()
获取当前元素的索引
$(this).index()
链式编程
对象调用完一个方法后可以调用另一个方法
$(this).css('color','red');
$(this).siblings('button').css('color','');
等价于
$(this).css('color','red').siblings('button').css('color','');
断链
调用完一个方法后 ,返回的元素发生了改变
$(this).siblings('button').css('color','').css('color','red');
$(this).siblings('button').css('color','') //返回的是兄弟元素
.end()
恢复断链 恢复对象发生改变之前的指向(返回的元素)
操作样式
css()
-
$(this).css("width")
获取的是元素的属性值 -
$(this).css("width","300px")
------>$(this).css("width",300)
-
css参数可以是对象–改变多组值
$(this).css({"width","300px","height","300px"})
;属性和值可以不加引号,如果是复合属性,必须采取驼峰命名法
设置单个时名称可以使用css的也能使用驼峰命名法
代码实例
var a = $(this).css("width");//只能写一个,一次只能获取一个
console.log(a);
//对象的方法设置
$(this).css({'width':400,'height':400,'backgroundColor':'yellow'});
//链式编程的方法设置
$(this).css('width',400).css('height',400).css('backgroundColor','yellow');
操作样式–通过类名
$(this).addClass("类名");
添加$(this).removeClass("类名");
移除$(this).toggleClass("类名");
切换$(this).hasClass("类名");
判断是否有这个类型
jQuery的类操作和className的区别
jQuery类操作不影响原型的类名—jQuery类操作相当于追加类名
jQuery效果
-
显示隐藏
1.1 显示
$('div').show(speed,easing,callback);
1.1 隐藏
$('div').hide(speed,easing,callback);
1.1切换
$('div').toggle(speed,easing,callback);
一般显示隐藏不做动画,不加参数就是没有动画效果的显示隐藏
-
滑动效果
2.1 下拉
slideDown(speed,easing,callback)
2.2 上拉
slideUp(speed,easing,callback)
2.1 切换
slideToggle(speed,easing,callback)
speed-----速度slow normal fast 也可以设置数值 数值的单位是ms
easing-----速度曲线,一般不设置,需要时可以查手册
callback-----回调函数,动画执行之后再执行的函数 -
事件切换
3.1
.hover(over,leave)
over鼠标经过触发事件
leave鼠标离开触发事件3.2 hover如果只写一个函数,那么鼠标经过和鼠标离开都会触发
代码实例
$('.nav>li').hover(function() { $(this).children('ul').slideToggle(); });
-
动画队列及其停止动画排队
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
stop()
stop()必须写在动画的前面代码实例
$('.nav>li').hover(function() { $(this).children('ul').stop().slideToggle();});
-
淡入淡出效果
5.1 淡入
fadeIn(speed,easing,callback)
5.2 淡出fadeOut(speed,easing,callback)
5.3 切换fadeToggle(speed,easing,callback)
5.4 渐进方式调整淡入淡出(修改透明度)fadeTo(speed,opacity,easing,callback)
速度和透明度这两个参数一定要写 -
自定义动画
animate(json,[speed],[easing],[fn])
json中的一般只能改数字类型的样式
mouseenter()、mouseleave()没有冒泡,也可以参考hover()