-
jQuery的基本使用
1. jQuery概念：
jQuery是一个快速、简洁的JavaScript 库
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。
学习jQuery本质：就是学习调用这些函数（方法）。
简单理解：
就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
其设计的宗旨是“write Less, Do More”，即倡导写更少的代码，做更多的事情。
j就是 JavaScript; Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
1.1 JavaScript库：
jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto
这些库都是：
对原生 JavaSeript的封装，内部都是用JavaSeript 实现的，我们主要学习的是jQuery。
1.2 jQuery的优点：
轻量级。核心文件才九十多kb，不会影响页面加载
速度
链式编程、隐式迭代
对事件跨浏览器兼容。基本兼容了现在主流的浏览
器
对于事件、样式、动画支持，大大简化了00M操作支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源
1.3 jQuery的下载
官网地址：S https://jquery.com/版本：
1x:兼容IE678等低版本浏览器，官网不再更新
2x:不兼容IE678等低版本浏览器，官网不再更新
3x：不兼容IE678等低版本浏览器，是官方主要更新维护的
其他版本：® https://code.jquery.com/
1.4 jQuery的使用步骤
1.下载jQuery
2.引入 jQuery 文件
3.使用即可
1.5 jQuery入门
1.5.1 jQuery的入口函数第一种：
$(function(){
// 此处是dom完成的入口
})
第二种：
$(document).ready(function(){
// 此处是dom完成的入口
})
注意点：
等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
不同于原生js中的load事件是等页面文档、外部的is文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。
1.6 jQuery的基本使用
1.6.1 jQuery 的顶级对象出
1.$是jQuery的别称，在代码中可以使用 jQuery 代替$，但一般为了方便，通常都直接使用$。
2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
2.jQuery 对象和DOM对象
js的对象只能用JS的属性和方法
jq的对象只能用JQ的属性和方法
用原生JS获取来的对象就是 DOM 对象【 document.getElement等方法】
jQuery 方法获取的元素就是 jQuery 对象【 $ (div')等】
jQuery 对象本质是：
利用$对DOM对象包装后产生的对象（伪数组形式存储）
<script>
//js加载事件
//只能写一个，后面覆盖前面的
// window.onload = function() {
// alert(1);
// }
// window.onload = function() {
// alert(2)
// }
//jq的页面加载事件 可以写多个 都会被执行
$(function() {
alert(1);
})
$(function() {
alert(2);
})
</script>
特别注意：
只有jQuery对象才能使用jQuery 方法，D0M对象则使用原生的JavaSeirpt方法。
相互转换：
DOM对象与 jQuery对象之间是可以相互转换的。因为原生js比 jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
DOM对象转换为 jQuery 对象：
$(DOM对象)
jQuery 对象转换为DOM对象（两种方式）
$('div') ) (index) index 是索引号
$('div') ) .get(index) index 是索引
2.1 jQuery 常用API
1.jQueru 选择器
2.iQueru 样式操作
3.jQuery 效果
4.jQuery 属性操作
5.iQueru 文本属性值
6.jQuery 元素操作
7.jQueryR寸、位置操作
<div class="myDiv"></div>
<script>
/*
dom对象--使用原生js获取过来的对象
jq对象--使用jq获取过来的对象 通过$进行包装（伪数组的形式存储）
jq的本质是一个数组
var jq={dom对象，dom对象，dom对象....}
在jq中不能使用js的属性和方法
在js中不能使用jq的属性和方法
二者之间可以相互转换
1.dom对象 -> jq对象
格式$(dom对象)
2.jq对象转换成dom对象
$对象[索引值]
*/
// var myDiv = document.querySelector("div");
// console.log(myDiv);
//myDiv.innerHTML="js修改了div的值"
// var $myDiv = $("#myDiv ");
// $myDiv.innerHTML = "js修改了div的值"
// $myDiv.html("jq修改了div的值")
// console.log($myDiv);
var $mm = $(myDiv)
//$mm.html("jq修改了div的值")
var mm = $myDiv[0];
console.log($myDiv[0])
mm.innerHTML = "js修改了div的值"
</script>
2.2 jQuery 选择器
<div>
<ul>
<li>我是第1个li</li>
<li class="aaa">我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<ul>
<ol>1</ol>
<ol>2</ol>
<ol>3</ol>
<ol>4</ol>
<ol>我是第5个</ol>
</ul>
</ul>
</div>
<script>
//$('li:first'):第一个元素
console.log($('li:first'));
//$('li:last'):最后一个元素
console.log($('li:last'));
//$('li:eq(2)'):索引为二 从0开始 重点
console.log($('li:eq(2)'));
// $('li:odd') 索引为偶数
console.log($('li:odd'));
// $('li:even') 索引为奇数
console.log($('li:even'));
// $('li').parent() 父级 重点
console.log($('li').parent());
// $('ul').children('li');
//子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】 重点
console.log($('ul').children('ol'));
// $('li').find('li') 后代 重点
console.log($('li').find('li'))
// $('.aaa').siblings('li') 兄弟 重点
console.log($('.aaa').siblings('li'));
// $('li').nextAll() 后面的
console.log($('li').nextAll());
// $('li').prevAll() 前面的
console.log($('li').prevAll())
// $('li').hasClass('aaa') 判断是不是有这个类名
console.log($('li').hasClass('aaa'))
// $("div").eq(index) 指定索引方法{eq推荐方法}
</script>
2.3案例下拉菜单
this==>JQ【 $(this)】
2.4 jQuery里面的排他思想
案例：多个按钮点击改变当前按钮颜色，其他的不变想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css("width", 100)
$(this).css("color", "red")
$(this).siblings().css({
"color": "",
"width": ""
})
2.5案例：淘宝服饰精品案例【 index()获取
索引值】
1.核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
2.需要得到当前小i的索引号，就可以显示对应索引
号的图片
3.jQuery 得到当前元素索引号 $ (this).index()
4.中间对应的图片，可以通过 eq(index)方法去选择
5.显示元素show() 隐藏元素hide()
$(function() {
$("ul>li").mouseover(function() {
$(this).css("backgroundColor", "red")
$(this).siblings().css({
"backgroundColor": ""
})
$(".con-item").eq($(this).index()).css(
"display", "block"
).siblings().css(
"display", "none"
)
})
$("ul>li").mouseout(function() {
$(this).css("backgroundColor", "red")
$(this).siblings().css({
"backgroundColor": ""
})
$(".con-item").eq($(this).index()).css(
"display", "block"
).siblings().css(
"display", "none"
)
})
})
2.6 jQuery的特性
$(this).css({
width: 100,
color: "red"
}).siblings().css({
"width": "",
"color": ""
2.7 jQuery 样式操作
jQuery 可以使用css方法来修改筒单元素样式；也可以操作类，修改多个样式。
2.8操作css方法
参数只写属性名，则是返回属性值
$(this).css({
width: 100,
color: "red"
})
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
.siblings().css({
"width": "",
"color": ""
参数可以是对象形式，方便设置多组样式。属性名
和属性值用冒号隔开，属性可以不用加引号
$(this).css({
width: 100,
color: "red"
}).siblings().css({
"width": "",
"color": ""
2.9设置类样式方法
作用等同于以前的classlist，可以操作类样式，注意操
作类里面的参数不要加点
添加类
$("div").click(function() {
$(this).addClass("box")
})
移除类
$("div").click(function() {
$(this).removeClass("box")
})
切换类
//3.切换类
$("div").click(function() {
$(this).toggleClass("box")
})
注意：
原生 JS 中 className 会覆盖元素原先里面的类名。jQuery里面类操作只是对指定类进行操作，不影响原先的类名
2.10案例：tab栏切换
点击上部的1i,当前li 添加current类，其余兄弟移除类。
点击的同时，得到当前1i 的索引号
让下部里面相应索引号的item显示，其余的item隐藏
$("li").click(function() {
$(this).addClass("current").siblings().removeClass("current")
})
console.log($(this).index())
$(".item").eq($(this).index().show().siblings().hide())
2.13 jQuery 效果
2.13.1显示隐藏效果
1. 现实与隐藏效果
show（ speed, [easing], [fn]） 显示标签
参数
1. 都可以不写
2. speed， 代表速度 slow缓慢地， normal正常的 fast快速地 还可以直接些毫秒值 比如1000
3. easling swing 摆动 linear 直线
4. fn 回调函数 在动画执行完执行
2.13.2滑动效果
$(".hidebtn").click(function() {
$('div').slideUp(1000, function() {
alert("隐藏好了")
})
})
$("showbtn").click(function() {
$('div').slideDown(1000)
})
$("togglebtn").click(function() {
$('div').slideToggle(1000)
})
2.13.3动画队列及其停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队：
stop()
11注意参数
(1) stop()方法用于停止动画或效果。
(2) 注意：stop) 写到动画或者效果的前面，相当于停止结束上一次的动画
2.13.4淡入淡出
$(".hidebtn").click(function() {
$('div').fadeOut(2000, function() {
alert("隐藏好了")
})
})
$(".showbtn").click(function() {
$('div').fadeIn(1000)
})
// $("togglebtn").click(function() {
// $('div').fadeToggle(1000)
// })
// 透明度 fadeTo(speed,opacity) 两个参数都得写
$(".togglebtn").click(function() {
$('div').fadeTo(1000, 0.5)
})
2.14练习：高亮显示
原理：鼠标结果让当前元素的所有兄弟透明度降低，
鼠标离开恢复既可
注意：动画排队问题
$(function() {
$(".con-item").hover(function() {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.5)
}, function() {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1)
})
})
2.15自定义动画 animate
animate(params, [speed], [easing], [fn])
(1)params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderleft。其余参数都可以省略。
(2)会speed：三种预定速度之一的字符串(“slow”, "normal ", or“fast”)或表示动画时长的毫秒数值（如：1000)。
(3) easing:(Optional)用来指定切换效果，默认是
“swing”，可用参数“linear"
(4) fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
<div></div>
<button>按钮</button>
<script>
$("button").click(function() {
$("div").animate({
width: "3000px",
backgroundColor: "red"
})
})
</script>
3案例：王者荣耀手风琴效果
鼠标经过某个小i有两步操作：
1.当前小i宽度变为224px，同时里面的小图片淡
出，大图片淡入
2.其余兄弟小i宽度变为69px，小图片淡入，大图片淡出
$(function() {
$("li").mousemove(function() {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
$(this).siblings().stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop.fadeOut()
})
})
- m").hover(function() {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.5)
}, function() {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1)
})
})
2.15自定义动画 animate
animate(params, [speed], [easing], [fn])
(1)params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderleft。其余参数都可以省略。
(2)会speed：三种预定速度之一的字符串(“slow”, "normal ", or“fast”)或表示动画时长的毫秒数值（如：1000)。
(3) easing:(Optional)用来指定切换效果，默认是
“swing”，可用参数“linear"
(4) fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
<div></div>
<button>按钮</button>
<script>
$("button").click(function() {
$("div").animate({
width: "3000px",
backgroundColor: "red"
})
})
</script>
3案例：王者荣耀手风琴效果
鼠标经过某个小i有两步操作：
1.当前小i宽度变为224px，同时里面的小图片淡
出，大图片淡入
2.其余兄弟小i宽度变为69px，小图片淡入，大图片淡出
$(function() {
$("li").mousemove(function() {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
$(this).siblings().stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop.fadeOut()
})
})
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1)
})
})
2.15自定义动画 animate
animate(params, [speed], [easing], [fn])
(1)params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderleft。其余参数都可以省略。
(2)会speed：三种预定速度之一的字符串(“slow”, "normal ", or“fast”)或表示动画时长的毫秒数值（如：1000)。
(3) easing:(Optional)用来指定切换效果，默认是
“swing”，可用参数“linear"
(4) fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
<div></div>
<button>按钮</button>
<script>
$("button").click(function() {
$("div").animate({
width: "3000px",
backgroundColor: "red"
})
})
</script>
扫一扫
2106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
