一, jq 的介绍
做什么? 作用
用更少的代码, 解决更多的需求
可以不用
个人建议: 现阶段 jq 能不用就不用
学习, 原生, 基础
jq 惯坏
jQuery 其实就是别人封装好的函数, 有很多功能, 可以直接使用, 不用考虑原理
怎么做? 语法
学习的内容
什么时候做? 场景
只要需要写 JS, 当前用 JS 实现的功能, jq 有提供, 就可以用 jq
jq 的介绍:
用更少的代码, 解决更多的需求
- jQuery
- https://jquery.com/
3. 介绍
4. 快速入门
下载
版本
v1.xx.xx 完善 ***
v2.xx.xx 删除兼容 **
v3.xx.xx 重构, bug *
重大修改
添加或删除某个功能
修复了某些 bug 完善了某些功能
第三方下载 CDN
"https://lib.baomitu.com/jquery/1.12.4/jquery.js"
引入
script 标签
开发环境: 离线未压缩
上线环境: 在线压缩
使用
.....
5. 完整文档, 有哪些方法
....
6. 找实例, 改改用(找插件)
7. 换, 自定义, 求助有经验的人
- console.log(jQuery);
- console.log($);
- console.log($ == jQuery); // true;
函数自身可以被执行
函数是一个特殊的对象, 所以, 也可以有方法和属性, 被作为对象操作
二, jq 选择器和原生选择器的区别
jq 的 DOM 对象和原生的 DOM 对象的转换:
"jq 转原生:"
解析数组
通过 get 方法
"原生转 jq:"
使用 jq 的函数包裹原生 DOM 对象
- <body>
- <div id="box1">123</div>
- <div id="box2">456</div>
- </body>
- <script src="../jquery.js"></script>
- <script>
- var obox1 = document.getElementById("box1");
- console.log(obox1);
- obox1.style.background = "red"; // 通过原生方式来设置属性
- obox1.CSS("background","yellow") "X" // 原生的 DOM 对象不能通过 jq 提供的方法来设置属性(obox1.CSS 不是一个函数)
- $(obox1).CSS("background","yellow") // 原生转 jq
- // ID 选择器:
- var obox2 = $("#box2");
- console.log(obox2); // 伪数组
- obox2.style.background = "blue"; "X"
- obox2[0].style.background = "blue"; // jq 的 DOM 元素转成原生的 DOM 元素 将原生的 DOM 元素通过 jq 的函数传参会返回一个 DOM 元素
- obox2.get(0).style.background = "blue";
- obox2.CSS("background","blue"); // 通过 jq 方式来设置属性 (obox2 是一个函数, 可以通过他的方法来设置)
- "原生的 DOM 元素与 jq 的 DOM 元素的方法, 不互通"
- "原生代码可以和 jq 代码同时存在, 只是互相之间对象的属性或方法不互通"
obox2 是一个伪数组, 第一个数据就是原生的 DOM 对象, 所以通过索引解析数组就得到原生的 DOM 对象
<script>
三, jq 选择器
jQuery 最有用的部分: jQuery 选择器引擎! jQuery 的选择器依赖 css1~css3 的选择器.
1. 简单选择器: 使用频率:*****
1)选择器写法:$( )>>>>> $('div') 字符串
根据 CSS 样式来进行选取. CSS 叫做添加样式, 但是 jQuery 叫做添加行为.
选择器 | CSS 模式 | jQuery 模式 | 描述 |
---|---|---|---|
标签名 | div{} | $(‘div‘) | 获取所有 div 标签的 DOM 元素 |
ID | #box | $(‘#box‘) | 获取一个 ID 为 box 的 DOM 对象 |
class(类名) | .box{} | $(‘.box‘) | 获取所有 class 名为 box 的 DOM 对象 |
一个小的知识点: ID 选择器的失明现象.
ID 在一个页面中只能出现一次, 这是一个唯一标识符. 在 jQuery 中就会存在问题.
选择器选择出的对象, 有一些属性和方法(length,.size())
jQuery 的兼容性 css3 的子选择器(不兼容 IE6)
但是到了 jQuery 中, jQuery 会自行将不兼容 IE 的问题解决掉.
jQueryDOM 对象和原生 JavaScriptDOM 对象之间的属性方法是否通用? 不通用!!!!!!!!
相互转换: $('DOM')[0].style.color=red; $('DOM').get(0).style.color=red;
进阶选择器:
选择器 | CSS 模式 | jQuery 模式 | 描述 |
---|---|---|---|
群组选择器 | div,span,p{} | $(‘div,span,p‘) | 略 |
后代选择器 | ul li a{} | $(‘ul li a‘) | 略 |
通配选择器 | *{} | $(‘*‘) | 略 |
通配选择器: 选择所有; 对性能有极大的浪费所以不能在全局范围内使用, 最好的方法就是在局部环境下使用;
$('ul li a,ul li em,ul li strong');
简化成通配选择器:$('ul li *')
高级选择器:
1)层次选择器
选择器 | css 模式 | jQuery 模式 | 描述 |
---|---|---|---|
后代选择器 | ul li a{} | $(‘ul li a‘) | 获取追溯到的所有元素 |
子选择器 | div>p{} | $(‘div>p‘) | 只获取子类节点 |
next 选择器 | div+p{} | $(‘div+p‘) | 只获取某节点后一个同级 DOM 元素 |
nextAll 选择器 | div~p{} | $(‘div~p‘) | 获取某节点后所有同级 DOM 元素 |
jQuery 为后代选择器提供了一个方法 find()这个 find 方法里面有一个参数, 就是想要找到的后代(可以是标签, 类名, ID)
$('div p').CSS('color','red') == $('div').find('p').CSS('color','red')
jQuery 为子选择器提供了一个方法, children(), 参数同上;
$('div>p').CSS('color','red') == $('div').children('p').CSS('color','red');
jQuery 提供了 next(), nextAll( ) 选择器, 参数同上: 注意 next()选择器, 只选择后一个元素.
- $('div+p').CSS('color','red') == $('div').next('p').CSS('color','red')
- $('div~p').CSS('color','red') == $('div').nextAll('p').CSS('color','red')
注意: children() , next() , nextAll() 这些方法如果不传递参数的话, 那么就默认传递一个通配符 *, 通常在使用这些选择器的时候, 我们需要精准的选择元素, 避免发生各种怪异结果.
属性选择器:
CSS 模式 | jQuery 模式 | 描述 |
---|---|---|
input[name] | $(‘input[name]‘) | 获取具有这个属性的 DOM 元素 |
input[name=XXX] | $(‘input[name=XXX]‘) | 获取具有属性且属性值为 XXX 的 DOM 元素 |
input[value][name=XXX] | $(‘input[value][name=XXX]‘) | 获取有 value 属性且 name 为 XXX 的 DOM 元素 |
更多组合等待你来发掘;
过滤选择器:
伪类选择器:
过滤器名 | jQuery 语法 | 说明 | 返回 |
---|---|---|---|
:first | $(‘li:first‘) | 选取第一个元素 | 单个元素 |
$(‘li:last‘) | 选取最后一个元素 | 单个元素 | |
:not(选择器) | $(‘li:not(.red)‘) | 选取 class 不是 red 的元素 | 一组元素 |
:even | $(‘li:even‘) | 选择偶数的所有元素 | 一组元素 |
:odd | $(‘li:odd‘) | 选择所有奇数元素 | 一组元素 |
:eq | $(‘li:eq(1)‘) | 选择对应下表的元素 | 单个元素 |
内容过滤器
过滤器名 | jQuery 语法 | 说明 | 返回 |
---|---|---|---|
:contains(text) | $(‘li:contains(123456)‘) | 选择有 123456 文本的元素 | 一组元素 |
:empty | $(li‘:empty‘) | 选取 li 中不包含子元素或空文本的元素 | 一组元素 |
:has(选择器) | $(‘ul:has(.red)‘) | 选择子元素含有类 red 的 ul | 一组元素 |
jQuery 为了优化: has 选择器性能, 提供了一个方法. has()
$('ul:has(.red)')==$('ul').has('.red')
可见性选择器
过滤器名 | jQuery 语法 | 说明 | 返回 |
---|---|---|---|
:hidden | $(li:hidden) | 选取所有不可见元素 | 集合元素 |
:visible | $(‘li:visible‘) | 选取所有可见元素 | 集合元素 |
注: 是否可见的判定因素为 display:block & display :none
其他方法:
jQuery 在选择器和过滤器的基础上提供了一些常用的方法, 方便我们开发时灵活使用.
方法名 | jQuery 语法 | 说明 | 返回 |
---|---|---|---|
is() | http://li.is/ (‘.red‘) | 传递选择器、DOM、jquery 对象 | true |
hasClass() | $(‘li‘).hasClass(‘red‘) | 就是 is(‘.‘+class) | true |
is()方法
- $('li').is('.red');
- $('li').hasClass('red');
.end()终止当前选择器的遍历, 回到上个选择条件;
四, jq 动画
jQuery 动画分为三个部分, 非自定义动画, 自定义动画, 和全局动画设置.
jq 内置 (非自定义) 动画
显示, 隐藏: show( ) ,hide( ),toggle( )
show(),hide(),toggle()方法有两种用法, 一种是不传参数, 代表直接显示隐藏.
另一种是向方法中传递一个参数, 这个参数为 number 类型, 代表动画的执行时间. 会有显示隐藏的动画效果.
示例: show(100),hide(100),toggle(100)
不仅如此, jQuery 还为动画方法提供了三种字符串形式的参数, 分别是: fast,slow, 和空字符串''show('fast'),hide('slow'),toggle('')
三种参数的执行时间, 分别为 ,'fast' :200 毫秒 ''(默认值):400 毫秒'slow':600 毫秒
滑 / 拉动:
slideUp(): 向上滑动(隐藏)
slideDown(): 向下滑动(显示)
slideToggle(): 滑动(自动)
淡入淡出:
fadeOut(): 淡出(隐藏)
fadeIn(): 淡入(显示)
fadeToggle(): 显示隐藏 () 自动
该方法是将元素的透明度从 1 变成零之后将元素的 display 属性设置为 none;
但是如果我们想要将透明度设置到一个固定值, 这些方法并不能实现, jQuery 为我们提供了一个方法 fadeTo(), 该方法接受两个参数. 第一个参数是动画执行的时间, 第二个参数是期望达到的透明度.
- <style>
- .box{width: 200px;height: 200px;background: red;}
- </style>
- <script src="jquery.js"></script>
- <body>
- <input type="button" value="隐藏" id="btn1">
- <input type="button" value="显示" id="btn2">
- <input type="button" value="显示 / 隐藏" id="btn3">
- <input type="button" value="上拉" id="btn4">
- <input type="button" value="下拉" id="btn5">
- <input type="button" value="上拉 / 下拉" id="btn6">
- <input type="button" value="淡出" id="btn7">
- <input type="button" value="淡入" id="btn8">
- <input type="button" value="淡出 / 淡入" id="btn9">
- <input type="button" value="半透明" id="btn10">
- <div class="box"></div>
- </body>
- <script>
- // 动画与动画之间是同步的, 动画与其它之间是异步的
- $("#btn1")[0].onclick = function(){
- $(".box").hide(3000,function(){
- alert("结束了"); // 放一个回调函数实现链式动画
- });
- }
- $("#btn2")[0].onclick = function(){
- $(".box").show(2000).hide(2000); // 动画可以连缀 (show,hide)动画与动画之间是同步的, 先执行完一个再执行下一个
- $(".box").show(2000).hide(2000).CSS("background","blue"); // 点击的一瞬间就变了颜色, 动画与其它之间是异步的
- $(".box").hide(2000).show(2000,function(){
- $(".box").CSS("background","red"); // 通过回调函数可以使 CSS 也同步
- })
- }
- $("#btn3")[0].onclick = function(){
- $(".box").toggle(2000);
- }
- // 上 / 下拉默认有 4 毫秒的时间, 括号里面可以传时间参数
- // 也支持回调函数, 动画与动画之间同步, 动画与其它之间异步
- $("#btn4")[0].onclick = function(){
- $(".box").slideUp(2000);
- }
- $("#btn5")[0].onclick = function(){
- $(".box").slideDown(1000);
- }
- $("#btn6")[0].onclick = function(){
- $(".box").slideToggle();
- }
- // 也有默认时间, 用法同上 淡入淡出即操作透明度
- $("#btn7")[0].onclick = function(){
- $(".box").fadeOut(2000);
- }
- $("#btn8")[0].onclick = function(){
- $(".box").fadeIn(2000);
- }
- $("#btn9")[0].onclick = function(){
- $(".box").fadeToggle(2000);
- }
- // 半透明
- $("#btn10")[0].onclick = function(){
- $(".box").fadeTo(2000,0.5);
- }
- </script>
2. 非内置 (自定义) 动画: animate()方法
animate()方法有三个参数. 分别是动画目标(target), 动画执行时间, 回调函数. 只有第一个参数是必填参数.
animate()方法的使用:
- 1.animate({
- 'width':'200px',
- 'height':'200px'
- })
将元素属性变换为自定义动画中的目标属性, 所有参数中的属性一起改变.
- 2.animate({
- 'width':'+=200px'
- })
设置的属性, 支持运算.
- <style>
- .box{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
- </style>
- <body>
- <div class="box"></div>
- <input type="button" id="btn" value="开始">
- </body>
- <script src="../jquery.js"></script>
- <script>
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- // left:500
- // left:"500px" // 当 + px 时要加 "" 号
- // width:"+=100"
- left:300
- }).animate({
- top:400
- })
- $(".box").animate({
- // 从哪个地方开始消失
- width:0,
- height:0,
- left:100,
- top:0
- })
- }
- </script>
3. 动画的执行顺序
如果想要动画按照顺序执行 (执行完第一个动画之后, 再执行下一个动画) 有三种方法:
借助动画的回调函数: 适用于操作不同元素, 先走一个元素再操作另一个元素, 用回调函数或者分开写
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left:600
- },2000,function(){
- $(".box").animate({
- top:500
- })
- })
- }
将动画效果分开写.
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left:600
- },2000)
- $(".box").animate({
- top:500
- })
- }
连缀: 适合于每个动画操作于同一个元素
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left:600
- },2000).animate({
- top:500
- })
- }
这几种方法在什么情况下使用呢?
在操作同一元素的时候, 推荐使用连缀. 在操作不同元素的时候, 推荐使用回调函数(或者分开写).
连缀: jQuery 的动画方法, 每次调用都会返回当前选择的元素, 从而可以让 jQuery 可以实现连缀.
动画的执行顺序:
当我想要执行一个其他方法的时候, 比如给当前元素加一个背景颜色.
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left:600
- },2000).animate({
- top:500
- }).CSS("background","yellow") // 瞬间变黄色, CSS 与 animate 之间是异步
- }
问题出现了: 当我按照连缀写法, 并没有出现我想要的效果所有方法都按照顺序执行, 而是将 CSS 方法提前执行了.
问题分析: 根据我们以往写运动框架的经验, 知道每个动画都是有定时器的, 发生这个问题原因就在于此, 定时器是异步的, 在运行动画的时候我们后面的方法会继续执行, 也就出现了上面的问题.
解决:
可以用回调函数解决:
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left:600
- },2000).animate({
- top:500
- },function(){
- $(".box").CSS("background","yellow") // 用回调函数变同步
- })
- }
jQuery 给我们提供了一个类似于回调函数的方法 queue():
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left:600
- },2000).animate({
- top:500
- }).queue(function(){
- $(".box").CSS("background","yellow")
- })
- }
注: queue()方法的问题: 当我想要在这个列队函数中再加一个动画的时候, 发现在 queue()方法后的函数无法执行.
jq 提供了一个方法, 给不支持同步的方法变为同步的, 用 queue(), 但是 queue()方法有一个弊端, 就是后面不能使用连缀, 需要连缀的话, 需要在 queue 里面加上一个回调函数
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left:600
- },2000).animate({
- top:500
- }).queue(function(next){
- $(".box").CSS("background","yellow")
- next();
- }).animate({
- left:0
- })
- }
原理: 连缀的原理是因为每个 jQuery 动画方法都会提供一个返回值, 这个返回值就是所选择的元素, queue()方法并不会提供一个返回值. 为了让连缀继续, 我们这时候应该让 queue()方法有一个返回值. jQuery 为 queue 提供了一个参数 next, 我们只需要在 queue()方法中传入这个参数并调用, 那么 queue()方法就有了一个返回值, 连缀就可以继续了.
五, 动画及其相关方法
1. 延迟
- <style>
- .box{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;}
- </style>
- <script src="jquery.js"></script>
- <body>
- <div class="box"></div>
- <input type="button" id="btn" value="开始">
- <input type="button" id="btn2" value="停止">
- </body>
- <script>
- // 正常
- $("#btn")[0].onclick = function(){
- $(".box").animate({
- left: 500
- },2000).animate({
- top: 500
- },2000).animate({
- left: 0
- }).animate({
- top: 0
- })
- }
- // 动画开启之前要延时, 即在 animate 之前加 delay;
- $("#btn")[0].onclick = function(){
- $(".box").delay(1000).animate({
- left: 500
- },2000).delay(2000).animate({
- top: 500
- },2000).delay(1000).animate({
- left: 0
- },2000).delay(2000).animate({
- top: 0
- },2000)
- }
- </script>
2. 停止
- $("#btn2")[0].onclick = function(){
- $(".box").stop();
- }
- // stop(): 两个参数, 都是布尔值, 默认为 false
- // 1. 动画堆列:(等待的动画) false: 不操作 true: 清空了
- // 2. 当前动画:(正在执行的动画) false: 立即停止 true: 立即到终点
- // 停在当前(真正的停止)
- $("#btn2")[0].onclick = function(){
- $(".box").stop(true,false);
- }
- // 立即到终点
- $("#btn2")[0].onclick = function(){
- $(".box").stop(true,true);
- }
- // 堆列没有清, 立即到终点就是立即开始下一个动画的操作
- $("#btn2")[0].onclick = function(){
- $(".box").stop(false,true);
- }
- // <font color=red></font>
- // <font face="宋体">宋体</font>
- // <font face="黑体" color=red > 红色黑体</font>
- // <font face="黑体" color=red size=7>7 号红色黑体</font>
例子:
- <style>
- ul ul{display: none;}
- </style>
- <body>
- <ul class="nav">
- <li>
- <span > 一级菜单</span>
- <ul>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- </ul>
- </li>
- <li>
- <span > 一级菜单</span>
- <ul>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- </ul>
- </li>
- <li>
- <span > 一级菜单</span>
- <ul>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- </ul>
- </li>
- <li>
- <span > 一级菜单</span>
- <ul>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- <li > 二级菜单</li>
- </ul>
- </li>
- </ul>
- </body>
- <script src="jquery.js"></script>
- <script>
- $(".nav").children("li").mouseover(function(){
- $(this).children("ul").stop().show(500) // 操作当前 ul 状态下的 li
- .parent().siblings().children("ul").stop().hide(500);
- })
- $(".nav").children("li").mouseout(function(){
- $(this).children("ul").stop().hide(500);
- })
- // stop(): 每次开启动画之前, 把上一个动画立即结束, 就不会产生堆列 结束当前, 立即开启下一个堆列
- // 动画开启之前先停止 等同于 计时器开启之前先清除, 防止动画堆列的产生
- // .parent()父元素选择器
- // .siblings()除了当前的所有同级(兄弟)
- </script>
来源: http://www.bubuko.com/infodetail-3207224.html