jQuery 01
导读
- 概念 入口函数 顶级对象
- 选择器 链式编程 样式操作 类操作
- 显示隐藏 滑动 淡入淡出 自定义动画 效果
jQuery 概述
1.1 JavaScript 库
-
javascript库：即library，是一个封装好的特定的集合(方法和函数)，预先封装了很多定义好的函数。
-
常见的js库
- Jquery
- Prototype
- YUI
- Dojo
- ExtJS
- 库是对原生js的封装，内部都是通过javascript实现的
1.2 jquery概念
- jQuery是一个快速简洁的javascript库，其设计的宗旨是"write less,Do More",即倡导写更少的代码做更多事情
- j 就是JavaScript；Query意思是查询，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能
- jQuery封装了JavaScript常用的功能代码，优化可DOM操作、事件处理、动画设计、Ajax交互
- 学习jQuery的本质就是学习调用这些函数方法
1.3 jQuery 优点
- 优点
- 轻量级。核心文件近几十kb，不会影响页面加载速度
- 跨浏览器兼容，基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发(如树形菜单、日期控件、轮播图等)
- 免费开源
2. jQuery的基本使用
2.2 jQuery的下载
-
官网地址: https://jquery.com/
-
版本 ：
-
1x 兼容 IE678等低版本浏览器，官网不再更新
-
2x 不兼容 IE678等低版本浏览器，官网不再更新
-
3x 不兼容 IE678等低版本浏览器，是官网主要更新维护的版本
2.3 jQuery 的入口函数
- DOM加载完毕后调用
$(function(){
....
})
$(document).ready(function(){
.....
})
- 等着DOM节后渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装
- 相当于原生js的DOMContentLoaded
- 不同于原生js中的load事件是等页面文档、外部的js文件、css文件呢、图片加载完毕才执行内部代码
2.4 jQuery的顶级对象 $
- $ 是 jQuery 的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常直接使用 $
- $ 是 jQuery 的顶级对象，相当于原生JavaScript中的window。把元素利用 $ 包装成 jQuery对象，就可以调用jQuery的方法
2.5 jQuery对象 和 DOM对象
- 用原生JS获取来的对象就是DOM对象
document.querySelector()
- 用 jQuery 获取来的对象就是 jQuery 对象
$(’’)
- jQuery对象的本质是：利用$对DOM包装后产生的对象(伪数组形式存储)
-
jQuery对象只能用jQuery方法，原生DOM对象只能用原生方法
-
DOM对象与jQuery对象之间是可以相互转换的
- DOM对象转换jQuery对象
var myvideo = document.querySelector('video');
$(myvideo)
- jQuery转换DOM对象(index索引号，默认0)
$('div')[index]
$('div').get(index)
jQuery 常用API
1. jQuery 选择器
1.1 基础选择器
- 原生JS元素方式很多很杂，很杂，而且兼容性情况不一致，因此jQuery做了封装，使获取元素统一标准
$("选择器") // 像css选择器一样
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一标签的元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“div.current”) | 交集元素 |
1.2 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li") | 使用>号获取亲儿子层级的元素；不会获取孙子层级 |
| 后代选择器 | $("ul li") | 使用空格代表后代，获取ul下所有li，包括子孙 |
1.3 隐式迭代 *
- 遍历内部DOM元素(伪数组形式存储)的过程叫做 隐式迭代
- 简单理解：将匹配到的所有元素进行循环遍历，执行相应的操作
1.4 jQuery 筛选选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li |
| :last | $(“li:last”) | 获取最后一个li |
| :eq(index) | $(“li:eq(2)”) | 获取到的li中索引为2的(0开始) |
| :odd | $(“li:odd”) | 获取到的li索引为奇数的 |
| :even | $(“li:even”) | 获取到的li索引为偶数的 |
1.5 筛选方法 *
| 名称 | 用法 | 描述 |
|---|---|---|
| parent() | $(“li”).parent() | 查找父级 |
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”) 最近一级 |
| find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”) 后代选择器 |
| siblings(selector) | $(“li”).siblings(“li”) | 查找兄弟节点，不包括自己 |
| nextAll([expr]) | $(“li”).nextAll() | 查找当前元素之后的所有同级元素 |
| prevAll([expr]) | $(“li”).prevAll() | 查找当前元素之前的所有同级元素 |
| hasClass(class) | $(“li”).hasClass(“protected”) | 查找当前的元素是否含有某个特定的类，如果有返回true |
| eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”) index从0开始 |
1.6 jQuery 里面的排他思想
- 想要多选一，排他思想：当前元素设置样式，其他的兄弟元素清除样式
$(function(){
$("button").click(function(){
$(this).css("background","pink");
$(this).siblings().css("background","");
})
})
$(function(){
$("#app ul li").mouseover(function(){
let index = $(this).index();
$(".content div").eq(index).siblings().hide();
$(".content div").eq(index).show();
})
})
1.7 jQuery 链式编程
- 链式编程是为了节省代码量，看起来更优雅
$(this).css(“color”,“red”).siblings().css(“color”,"")
- 使用链式编程一定注意是哪个对象执行样式
$(function(){
$("button").click(function(){
$(this).css("background","pink").siblings().css("background","");
})
})
$(function(){
$("#app ul li").mouseover(function(){
let index = $(this).index();
$(".content div").eq(index).show().siblings().hide();
})
})
2. jQuery 样式操作
2.1 操作css方法
- jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
- 参数只写属性名，则是返回属性值
$(this).css("color");
- 参数是 属性名,属性值 逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用单位和引号
$(this).css("color","red");
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({"color":"white","font-size":"20px"});
2.2 操作类方法
- 作用相当于以前的classList，可以操作类样式，注意操作类里面的参数不要加点
- 添加类
$("div").addClass("current");
- 删除类
$("div").removeClass("current");
- 切换类
$("div").toggleClass("current")
2.3 类操作与className区别
- 原生JS中className会覆盖元素原先的类名
- jQuery里面类操作只是对指定类进行操作，不影响原先的类名
3. jQuery 效果
- jQuery封装了很多动画，最为常见的如下
显示隐藏
- show()
- hide()
- toggle()
滑动
- slideDown()
- slideUp()
- slideToggle()
淡入淡出
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
自定义动画
- animate()
3.1 显示隐藏效果
1. 语法规范
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
2. 显示参数
- 参数可以省略，无动画直接显示
speed三种预定速度之一的字符串slow normal fast或 动画时长毫秒数值easing用来指定切换效果 默认swing可用linearfn回调函数，在动画完成时执行的函数，每个元素执行一次
3.2 滑动效果
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
3.3 事件切换
hover([over,]out)
- over 鼠标移到元素上要触发的函数 相当于mouseenter
- out 鼠标移出元素要触发的函数 相当于mouseleave
$(".nav>li").hover(function(){
....
},function(){
....
})
- 如果只写一个函数，那么鼠标经过和离开都会触发
$(".nav>li").hover(function(){
$(this).children("ul").slideToggle();
})
3.4 动画队列及其停止排队方法
1. 动画或效果队列
- 动画或者效果一旦触发就执行，如果多次触发，就造成多个动画或者效果排队执行
2. 停止排队
stop()
- stop()方法用于停止动画或效果
- 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画
$(".nav>li").hover(function(){
$(this).children("ul").stop().slideToggle();
})
3.5 淡入淡出效果
1. 淡入淡出语法规范
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([ [speed],opacity,[easing] ,[fn]])
2. 显示参数
- 参数可以省略，无动画直接显示
speed三种预定速度之一的字符串slow normal fast或 动画时长毫秒数值easing用来指定切换效果 默认swing可用linearfn回调函数，在动画完成时执行的函数，每个元素执行一次opacity透明度，必须，取值0-1
3.6 自定义动画 animate
1. 语法
animate(params,[speed],[easing],[fn])
2. 参数
params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略speed三种预定速度之一的字符串slow normal fast或 动画时长毫秒数值easing用来指定切换效果 默认swing可用linearfn回调函数，在动画完成时执行的函数，每个元素执行一次
扫一扫
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
