学习内容
- jQuery 简介
- jQuery 入门
- jQuery 入口函数
- jQuery 对象
- jQuery 选择器
- jQuery 样式操作
- jQuery 动画效果
- jQuery 属性操作
一、jQuery 简介
jQuery 是一个快速、简洁的 JavaScript 库(js文件),是一个封装好的特定的集合(方法和函数),学习 jQuery 本质就是学习调用这些函数和方法。
入门
- jQuery 官方地址:https://jquery.com/
- jQuery 优点:
- 轻量级,文件小,对页面加载速度几乎没有影响
- 有链式编程、隐式迭代的特点
- 跨浏览器兼容,基本兼容了现在主流的浏览器
- 样式、动画支持、大大简化了 DOM 操作
- 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
入口函数
- 第一种
$(function () {
... // 此处是页面 DOM 加载完成的入口
});
- 第二种
$(document).ready(function(){
... // 此处是页面 DOM 加载完成的入口
});
注意:
等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕,jQuery 帮我们完成了封装。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码
jQuery 对象和 DOM 对象
js 的对象只能用 js 的属性和方法
jq 的对象只能用 jq 的属性和方法
- DOM 对象可以与 jQuery 对象相互转换
- DOM 对象转换为 jQuery 对象:$(DOM对象)
- jQuery 对象转换为 DOM 对象
- $('div')[index] index 为索引
- $('div').get(index) index 为索引
二、jQuery 选择器
$('选择器') 里面直接写 css 选择器即可
- CSS 选择器
选择器 | 含义 |
---|---|
$('#id') | 指定 id 元素 |
$('*') | 所有元素 |
$('.class') | 指定 class 元素 |
$('div') | 根据标签获取元素 |
$('div,p,li') | 获取多个 |
$('li.class') | 交集获取 |
$('ul>li') | 子代(亲儿子)选择器 |
$('ul li') | 后代选择 |
- 筛选选择器
选择器 | 含义 |
---|---|
$('li:first') | 第一个元素 |
$('li:last') | 最后一个元素 |
$('li:eq(2)') | 索引为2的元素 |
$('li:odd') | 索引为奇数 |
$('li:even') | 索引为偶数 |
注意:索引是从 0 开始的,所以奇偶选择器可能会与实际效果相反
- jQuery 筛选方法
对象.方法()
方法 | 含义 |
---|---|
$('li').parent() | 获取父级元素 |
$('ul').children('li') | 子集(亲儿子),如果不加参数,获取所有的,如果添加指定的元素,按照指定的找 |
$('ul').find('li') | 获取所有后代,有参数则按照指定参数找 |
$('li').siblings('li') | 兄弟选择器,获取除自己外所有的亲戚,参数含义同上 |
$('li').nextAll() | 获取后面的 |
$('li').prevAll() | 获取前面的 |
$('div').hasClass('aaa') | 判断是否具有某个类名 |
$('div').eq(index) | 指定索引方法 |
- jQuery 利用 siblings 兄弟筛选的排他思想
$(this).css('color','red'); // 自己设置样式
$(this).siblings().css('color',''); // 他的兄弟设置其他的样式
三、jQuery 样式操作
jQuery 可以使用 css 方法来修改简单元素样式;也可以操作类,修改多个样式
-
操作 css 方法
- 语法:$(this).css(arguments);
- 参数只写属性名,则是返回属性值:$(this).css('color');
- 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号: $(this).css('color','red');
- 参数可以是对象形式,方便设置多组样式。属性名和属性值都用冒号隔开,属性可以不用加引号:$(this).css({'color':'white','font-size':'20px'});
-
设置类样式方法
操作类似于 document 的 classList
- 添加类:$('div').addClass('current');
- 移除类:$('div').removeClass('current');
- 切换类 $('div').toggleClass('current');
四、jQuery 的动画效果
-
显示隐藏效果
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]]) -
滑动效果
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]]) -
淡入淡出
fadeIn([speed,[easing],[fn]])【淡入】
fadeOut([speed,[easing],[fn]])【淡出】
fadeToggle([speed,[easing],[fn]])【切换】
fadeTo([[speed],opacity,[easing],[fn]])【到大某个位置】- 参数都可以省略,无动画则直接显示
- speed:三种预定速度之一的字符串(‘slow',‘normal’,`fast’)或 表示动画时长的毫秒数值
- easing:用来指定切换的效果,默认是 ‘swing’,可用参数 ‘linear’
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
-
事件切换:hover([over,]out)
- over:鼠标移到元素行要触发的函数(相当于mouseover/mouseenter)
- out:鼠标移出元素要触发的函数(相当于 mouseout/mouseleave)
- 如果只写一个函数,则鼠标经过和离开都会触发它
-
动画队列及停止排队的方法
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
- 停止排队:$('div').stop(),用于停止动画或效果
- 注意:stop() 写到动画或者效果的前面,相当于停止结束上一次的动画
-
自定义动画:
- 语法:animate(params,[speed],[easing],[fn])
- 参数:
- params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略
- speed:三种预定时间速度之一的字符串,(‘slow’,‘normal’,‘fast’)或表示动画时长的毫秒数值
- easing:用于指定切换效果,默认是‘swing’,可用参数‘linear’
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
需要注意的是 animate 是不能改变颜色的,所以不能把颜色变化做动画效果,不过可以使用自定义插件来完成。另外,animate 自定义属性一定要是 元素 才可以设置,像 document 这是文档对象,并非元素,也就是
<>
的元素才可使用 animate 自定义动画。
五、jQuery 属性操作
-
设置或获取元素固有属性值 prop()
- 语法:$().prop(‘属性’)
- 设置属性值:$().prop(属性,值)
- 注意:jQuery1.6 之后,对于 checked,selected,disabled 这类 boolean 类型的属性来说,不能用 attr 方法,只能使用 prop 方法。
-
设置或获取元素自定义属性 attr()
- 语法:$().attr('属性') 类似于原生 getAttribute()
- 设置属性值:$().attr(属性,值)
-
数据缓存 data()
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构,所以元素上无法查看,一旦页面刷新,之前存放的数据都将被移除
- 语法:$().data('name','value') 添加数据,$().data('name') 获取数据值
-
表单属性 val()
- 语法:$().val()获取值 相当于原生方法 value(),$().val('值') 设置值
-
设置元素内容:
- html()方法,相当于原生 innerHTML() $().html() 获取内容,$().html(context) 设置内容,可解析标签
- text()方法,相当于原生 innerText() $().text() 获取内容,$().text(context) 设置内容,不解析标签。