1、jQuery概念
-
js库(js文件)
-
优点
- 轻量级
- 链式编程、隐式迭代
- 对跨浏览器兼容
- 样式、动画支持
- 支持插件扩展
- 免费、开源
-
版本
- 1x
- 2x
- 3x
2、jQuery入门
-
对象为空是 null
-
jQuery入口函数
-
// 第一种入口函数 $(function () { }); // 第二种入口函数 $(document).ready(function() { });
-
-
script标签出现在前面时使用入口函数
3、jQuery的顶级对象 $
- 设置css样式
$('').css('属性名', '属性值')
4、jQuery对象和DOM对象相互转换
-
jQuery只能用jQuery的东西,DOM对象只能用DOM对象的东西
-
DOM对象转成jQuery对象
- $(DOM对象)
-
jQuery对象转成DOM对象
- $(‘标签名’)[索引下标]
- $(‘标签名’).get(索引下标)
5、jQuery常用API
-
选择器
- $(‘css选择器’)
-
隐式迭代
- 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
-
筛选选择器
//第一个元素 $('li:first').css('background', 'blue'); //最后一个元素 $('li:last').css('background', 'red'); //选取索引为2的元素 $('li:eq(2)').css('color', 'red'); //odd获取的索引为奇数 $('li:odd').css('background', 'aqua'); //even获取的索引为偶数 $('li:even').css('background','yellow');
-
筛选方法
-
对象.方法()
-
父级
.parent()
-
只找儿子 子代
-
.children()
-
不加参数获取所有的子集,添加指定元素,按指定的找
-
-
后代
- .find()
- 不加参数获取所有的子集,添加指定元素,按指定的找
-
兄弟
- .siblings()
-
后面的
.nextAll()
-
前面的
.prevAll()
-
判断是否具有某个类名
.hasClass(‘要判断的类名’);
-
指定索引
.eq(index)
-
-
-
jQuery小知识点
-
添加事件
- 获取的元素.事件名(事件处理程序)
-
.hide()
- 隐藏
-
.show()
- 显示
-
.toggle() 有就隐藏,没有就显示
-
6、jQuery里的排他思想
-
dir 打印对象的属性和方法
-
排他使用
- 当前元素设置样式
- 其他的兄弟们清除样式
-
获取索引 .index()
7、jQuery样式操作
-
css样式
-
一个参数获取
-
两个参数设置
-
$(‘标签’).css({width: 300, height: 200, background: ‘blue’})
-
-
设置类样式方法
- .addClass(‘类名’)
- .removeClass(‘类名’)
- .toggleClass(‘类名’)
8、jQuery效果
-
基本动画
-
.show([speed,[easing],[fn]])
-
.hide([speed,[easing],[fn]])
-
.toggle([speed,[easing],[fn]])
-
-
参数可以都省略,无动画直接显示
-
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
-
easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
-
fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
-
-
-
滑动动画
- slideDown([speed,[easing],[fn]])
- slideUP([speed,[easing],[fn]])
- slideToggle([speed,[easing],[fn]])
9、事件切换
- hover([over,] out)
- hover(function(){}, function(){})
- over:鼠标移到元素上要触发的函数(相当于mouseenter)
- out:鼠标移出元素要触发的函数(相当于mouseleave)
- 如果只写一个函数,则鼠标经过和离开都会触发它
10、动画队列及停止排队方法
-
只要触发动画,就会执行完毕,如果触发多次,就会造成多个动画或排队执行
-
.stop()
-
写到动画或者效果的前面, 相当于停止结束上一次的动画
-
先停再启动
-