javascript-jQuery(选择器、排他思想、样式操作、动画效果)
javascript库：一个封装好的特定的集合（方法和函数），比如动画animate、hide、show，比如获取元素等。
一个js文件，对原生js代码进行封装。
比如jQuery就是快速方便的操作DOM
常见js库： Jquery、YUI、移动端的zepto
这些库都是对原生js的封装
jQuery概述
一个快速的简洁的js库，封装了js常用的代码功能，优化DOM操作、事件处理、动画设计、ajax操作。
引入jQuery库
第一步：进入官网下载https://jquery.com/download/
第二步：复制production内容https://code.jquery.com/jquery-3.6.0.min.js
第三步：在vs中创建js文件粘贴复制内容
第四步：在所需html文件中引入jQuery文件即可。
测试njQuery是否引入成果
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
// $('div').hide();
//1.等着页面DOM加载完毕再去执行js代码。
// $(document).ready(function () {
// $('div').hide();
// })
//2.等着页面DOM加载完毕再去执行js代码。
$(function () {
$('div').hide();
})
</script>
<div></div>
jQuery顶级对象$
注：$是jQuery的别称
相当于原生代码中的window
jQuery对象和DOM对象
1，用原生js获取的就是DOM对象
2。用jQuery获取的就是jQuery对象
<script>
//1.DOM 对象
var mydiv=document.querySelector('div');
console.dir(mydiv)
//2.jQuery对象
$('div');
console.dir($('div'));
//3.jQuery对象只能使用jQuery方法，DOM对象只能使用原生的js属性和方法
</script>
DOM对象与jQuery对象之间可以相互转换的。
<video src="mov.mp4" muted></video>
<script>
//1.DOM对象转换为jQuery对象
//（1）直接获取视频，得到就是jQuery对象
$('video');
//(2)已经使用原生js 获取过来DOM对象
var myvideo=document.querySelector('video');
// $(myvideo).play();jQuery里面没有play方法
//2.jQuery对象转DOM对象
// myvideo.play();
$('video')[0].play();//方法一
$('video').get(0).play();//方法二
</script>
jQuery常用API
jQuery基础选择器
<div>我是div</div>
<div class="nav">我是nav</div>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li>6</li>
<li>7</li>
</ul>
<script>
$(function () {
console.log($(".nav"));
console.log($("ul li"));获取ul里面的li
})
</script>
隐式迭代
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script>
//1.获取四个div元素
console.log($("div"));
//2.给四个div设置背景颜色
// for (var i = 0; i < $("div").length; i++) {
// $("div")[i].style.backgroundColor = 'blue';
// }
$("div").css("background", "red");
//3.隐式迭代就是把匹配所以元素内部进行遍历循环 给每一个元素添加CSS这个方法
$("ul li").css("color", "pink");
</script>
jQuery筛选选择器
<script> $("ul li:first").css("color", "red");//第一个 $("ul li:last").css("color", "blue");//最后一个 $("ul li:eq(3)").css("color", "yellow");//索引从0开始 $("ol li:odd").css("color", "green"); </script>
<div class="father">
<div class="son">儿子</div>
</div>
<div class="nav">
<p>woshi</p>
<div>
<p>pppp</p>
</div>
</div>
<script>
//父
$(function () {
console.log($(".son").parent());
})
//子
//(1)亲儿子
$(".nav").children("p").css("color", "blue");
//（2）选择所有的孩子，包括儿子和孙子 find（）类似于后代选择器
$(".nav").find("p").css("color", "yellow”)
//兄
$(function () {
//1.兄弟元素siblings 除了自己元素之外的所有亲兄弟
$("ol .item").siblings("li").css("color", "red");
//2.第n个元素
var index = 2;
//（1）利用选择器
$("ul li:eq(2)").css("color", "blue");
//(2)利用选择方法 推荐
$("ul li").eq(index).css("color", "yellow");
//3.判断是否有某个类名
console.log($("div:first").hasClass("current"));
})
</script>
新浪下拉菜单jQuery版
<script src="jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
//鼠标经过
$(".nav>li").mouseover(function () {
//$(this) jQuery 当前元素显示出来
$(this).children("ul").show();
})
//鼠标离开
$(".nav>li").mouseout(function () {
$(this).children("ul").hide();
})
})
</script>
jQuery排他思想
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<script>
$(function () {
//1.隐式迭代 给所有按钮绑定点击事件
$("button").click(function () {
//2.当前元素变化背景颜色
$(this).css("background", "pink");
//3.其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
})
})
</script>
链式编程
<body>
123
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<button>1</button>
<script>
$(function () {
//1.隐式迭代 给所有按钮绑定点击事件
$("button").click(function () {
// //2.当前元素变化背景颜色
// $(this).css("background", "pink");
// //3.其余的兄弟去掉背景颜色 隐式迭代
// $(this).siblings("button").css("background", "");
$(this).css("color", "red").siblings().css("color", "");
$(this).siblings().parent().css("color", "red")
})
})
</script>
</body>
jQuery样式操作
操作css方法
样式简单用css方法
1.只写属性名，返回属性值
2.参数是属性名，属性值，逗号分离，是设置同样一组属性，属性必须加引号，值如果是数字可以不用跟单位和引号
3.参数可以是对象形式做，可以修改多种样式
<div></div>
<script>
$(function () {
console.log($("div").css("width"));
// $("div").css("width", "300px");
$("div").css({
width: 400,
height: 200,
backgroundColor: "green"
})
})
</script>
设置类样式方法
<div class="current">123</div>
<script>
$(function () {
//1.添加类addClass（）
// $("div").click(function () {
// $(this).addClass("current");
// })
//2.删除类removeClass（）
// $("div").click(function () {
// $(this).removeClass("current");
// })
//3.切换类toggleClass（）
$("div").click(function () {
$(this).toggleClass("current");
})
})
</script>
案例：Tab栏切换
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
$(function () {
//点击上部的li。当前li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
$(this).addClass("current").siblings().removeClass("current");
//2.点击的同时，得到当前li的索引号
var index = $(this).index();
//3.让下部分里面相应索引号的itme显示，其余的item隐藏。
$(".tab_con .item").eq(index).show().siblings().hide();
})
})
</script>
注：jQuery类操作不影响原先的类名，而js类操作会覆盖原先的类名。
jQuery效果
显示隐藏：show()\hide()\toggle()
Show([speed]):speed 三种预定速度之一字符串“slow” “normal”“fast”
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(1).click(function () {
$("div").hide(1000)
});
$("button").eq(0).click(function () {
$("div").show(1000)
});
$("button").eq(2).click(function () {
$("div").toggle(1000)
});
//一般情况下，不增加参数直接显示隐藏就可以了
})
</script>
滑动效果
slideDown
slideUp
slideToggle
<button>上拉滑动</button>
<button>下拉滑动</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").slideDown(500);
});
$("button").eq(1).click(function () {
$("div").slideUp(500)
});
$("button").eq(2).click(function () {
$("div").slideToggle(1000)
});
//一般情况下，不增加参数直接显示隐藏就可以了
})
</script>
注：stop停止队列方法，必须写在动画前面。
淡入淡出效果
<button>淡入效果</button>
<button>淡出效果</button>
<button>切换</button>
<button>修改透明度</button>
<div></div>
<script>
$("button").eq(0).click(function () {
$("div").fadeIn(1000);
})
$("button").eq(1).click(function () {
$("div").fadeOut(1000);
})
$("button").eq(2).click(function () {
$("div").fadeToggle(1000);
})
$("button").eq(3).click(function () {
$("div").fadeTo(1000, 0.5);
})
</script>
自定义动画animate
<button>动起来</button>
<div></div>
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: 600,
top: 300,
opacity: 0.4
})
})
})
</script>
浙公网安备 33010602011771号