一、JQuery的导入方法
https://editor.csdn.net/md/?articleId=132214798
二、JQuery介绍
-
JQuery(JQ)：JS的一个类库（方法库：包含了大量的、有助于项目开发的属性和方法）
-
第一代版本1.xx.xx: 1.11.3 兼容所有浏览器的（包含IE6~8）
- -> 没有vue / react / angular 等框架之前（数据驱动），项目都是基于操作DOM完成的，基本上项目中都是使用JQ来完成的
-
第二代版本2.xx.xx: 放弃了低版本浏览器的兼容处理，迎合了一些移动端的开发处理（同时诞生一个比JQ更懂移动端的类库Zepto，所以第二代版本是一个鸡肋
-
第三代版本3.xx.xx: 没有处理低版本浏览器的兼容，但是此时项目进入到框架开发的时代，传统操作DOM的思想zu步被摒弃，所以JQ已经没落下来了
-
API手册：《锋利的JQ第二部》https://jquery.cuishifeng.cn
三、JQuery中需要了解的
1. 选择器：获取需要操作的元素（JQ对象 -> 类数组集合）
- 只有JQ对象才可以调取JQ提供的一些操作DOM的方法
2. 操作DOM的方法
- 筛选方法：
children / find / filter / eq(get) / prev / prevAll / next / nextAll / siblings / index...
- 操作样式：
css / addClass / removeClass / toggleClass / hasClass / width / height / innerWidth / innerHeight / outerWidth / outerHeight / offset...
- 操作内容：
html / text / val / append /appendTo / insertAfter / insertBefore / attr...
- 控制动画
animate / stop / finish / fadeIn / fadeOut / hidde / show / slideDown / slideUp / slideToggle...
- 控制事件绑定
on / off / bind / unbind / delgate / one...
3. 工具类方法
each / ajax…
4. 实例
- 实例1: 控制盒子的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 这里先清除浏览器的默认样式，这里没有这个文件 -->
<!-- 自定义样式 -->
<style>
html,
body {
height: 100%;
overflow-x: hidden;
background: #f3f3f3;
}
.asideImageBtn {
position: fixed;
right: 50px;
bottom: 150px;
z-index: 999;
box-sizing: border-box;
width: 60px;
height: 60px;
background: rgba(255, 255,255,1);
}
.asideImageBtn:hover{
background: #C6DFF8;
}
.asideImageBtn .icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 80%;
height: 80%;
}
.asideImageBtn .detail {
display: none;
position: absolute;
left: -176px;
top: -70;
box-sizing: border-box;
padding: 25px 0 20px;
width: 150px;
background: #fff;
}
.asideImageBtn .detail img{
display: block;
margin: 0 auto 5px;
width: 100px;
height: 100px;
}
.asideImageBtn .detail p {
line-height: 25px;
font-size: 14px;
text-align: center;
}
.asideImageBtn .detail:after {
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-left-color: #fff;
}
/* 鼠标划过按钮盒子，控制详情显示隐藏 */
/* .asideImageBtn:hover .detail {
display: block;
} */
</style>
</head>
<body>
<div class="asideImageBtn">
<!-- ICON图标 -->
<img src="image/屏幕快照 2023-08-02 下午9.42.15.png" alt="" class="icon">
<div class="detail">
<div class="content">
<img src="image/屏幕快照 2023-08-02 下午9.50.15.png" alt="">
<p>下载腾讯体育</p>
<p>随时随地看直播</p>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script>
// $ 是jquery 的专属写法，获取元素
let $asideImageBtn = $('.asideImageBtn'),
$detail = $asideImageBtn.children('.detail');
// 法一：
/* $asideImageBtn.click(function(){
// toggle:hide / show 根据当前显示和隐藏状态自动切换
$detail.toggle();
}) */
// 法二：
//JQ中的事件绑定 " .on('click', [callback])" 标准写法, " .click([callback])" 快捷事件绑定方法
// 也可以这样写：$asideImageBtn.on(‘click',function() {});
$asideImageBtn.click(function(){
//css
// JQ对象.css([attr]) : 获取元素的样式 -> 内部基于getComputedStyle获取
// JQ对象.css([attr], [value]) : 设置元素的样式 -> 内部基于.style.xxx 设置行内样式
// JQ对象.css({width:100, height:200...}) : 批量设置元素的样式
let state = $detail.css('display');
if(state==='none'){
$detail.css('display','block');
}else{
$detail.css({
display:'none'
});
}
});
</script>
</body>
- 实例2: 选项卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 这里先清除浏览器的默认样式，这里没有这个文件 -->
<link rel="stylesheet" href="index.css">
<script src="jquery.js"></script>
<style>
.tabBox {
box-sizing: border-box;
margin: 20px auto;
width: 360px;
}
.tabBox .tab {
box-sizing: border-box;
height: 36px;
line-height: 36px;
border: 1px solid #DBDDE1;
background: #EEE;
display: flex;
justify-content: flex-start;
align-items: center;
}
.tabBox .tab li {
box-sizing: border-box;
height: 34px;
padding: 0 13px;
padding: 0 13px;
border-top: 3px solid transparent;
}
.tabBox .tab li.active {
border-top-color: #FF8400;
background: #FFF;
margin-top: -1px;
}
.tabBox .tab li a {
font-size: 18px;
color: #000;
font-weight: 300;
}
.tabBox .tab li a:hover {
color: #FF8400;
}
.tabBox .content {
display: none;
box-sizing: border-box;
padding-top: 15px;
height: 220px;
overflow:hidden;
}
.tabBox .content.active {
display: block;
}
.tabBox .content img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<section class="tabBox">
<!-- 页卡 -->
<ul class="tab">
<li class="active"><a href="#">图片</a></li>
<li><a href="#">专栏</a></li>
<li><a href="#">热点</a></li>
</ul>
<!-- 内容 -->
<div class="content active" ><img src="image/lyf1.jpeg" alt=""></div>
<div class="content"><img src="image/lyf2.jpeg" alt=""></div>
<div class="content"><img src="image/lyf3.jpeg" alt=""></div>
</section>
<script>
let $tabBox = $('.tabBox'),
$tabList = $tabBox.find('.tab>li'),
$contentList = $tabBox.children('.content');
// 法一：
// JQ中有一个内置循环机制：给一个JQ对象集合直接的事件绑定或者修改样式等，则JQ内部会默认帮助我们做循环处理，分别会为集合中的每一项都做处理...
$tabList.mouseenter(function(){
// this->当前操作的这一项（原生DOM对象）
// index()->获取当前项的索引（在其兄弟中的排名）
// silbings()->获取当前元素所有的兄弟
// addClass、removeClass-> 新增或者移除样式类
let $this = $(this),
index = $this.index();
$this.addClass('active').siblings().removeClass('active');
$contentList.eq(index).addClass('active').siblings('.content').removeClass('active');
});
// 法二：
// 依然是按照循环事件绑定的思路
// -> each 用来循环集合中的每一项（有点类似于数组的 forEach )
/* $tabList.each(function(index,item){
// index -> 当前循环这一项的索引
// item -> 当前循环的这一项（原生DOM对象）
// this -> item
// $(this).on('mouseenter',function(){});
$(this).mouseenter(function(){});
})
*/
</script>
</body>
