图片代码等相关资源请访问:https://gitee.com/di-mingda/java-script_learning
1.1JavaScript库
jQuery实际上就是库,封装了一些我们经常使用的以下函数,方法等代码。可以调用。想使用jQuery,就是去学习如何调用这些封装好的函数。
1.2使用jQuery
可以去官网下载,分为生产环境和开发环境。生产环境是压缩后的,可能看不懂。然后把内容放在我们新建的js文件中。
使用之前先在我们的文件引入,就可以使用了。
1.3jQuery对象和DOM对象的区别
DOM对象,只能使用原生js的方法和属性
jQuery对象,只能使用jQuery的方法
两者可以进行相互转换
<script>
// DOM对象,只能使用原生js的方法和属性
var mydiv = document.querySelector('div');
// jQuery对象,只能使用jQuery的方法
$('div');
// 互相转换
$(mydiv);
$('div')[0];
$('div'),get(0);
</script
jQuery的选择器就是$()
<script>
// jQuery选择器和css一样
// 外面的函数相当于DOMContentLoad,先加载DOM元素
$(function() {
$('.nav')
// jquery设置样式,两个都会设置,隐式迭代操作,进行内部遍历
$('div').css("background", "pink");
})
</script>
jQuery的隐式迭代
隐式的进行遍历操作,都设置了相同操作。
<!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>
<script src="./jquery_min.js"></script>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>哈哈</li>
<li>嘎嘎</li>
<li>啪啪</li>
</ul>
<script>
$(function() {
// 注意,jQuery对象设置样式,就不能采取DOM对象的方式
// 此操作把四个li都设置了颜色,为什么不需要循环设置了呢?
// 因为会隐式的进行遍历操作,都设置了相同操作
$("li").css('color', 'red');
})
</script>
</body>
</html>
1.4jQuery筛选选择器
<!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>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul>
<li>筛选选择器钱钱钱钱钱钱</li>
<li>筛选选择器钱钱钱钱钱钱</li>
<li>筛选选择器钱钱钱钱钱钱</li>
<li>筛选选择器钱钱钱钱钱钱</li>
</ul>
<ol>
<li>筛选选择器钱钱钱钱钱钱</li>
<li>筛选选择器钱钱钱钱钱钱</li>
<li>筛选选择器钱钱钱钱钱钱</li>
<li>筛选选择器钱钱钱钱钱钱</li>
</ol>
<script>
$(function() {
// 第一个
$("ul li:first").css('color', 'red');
// 最后一个
$("ul li:last").css('color', 'blue');
// 任意
$("ul li:eq(2)").css('color', 'pink');
// 奇数或偶数odd even
$("ol li:odd").css('color', 'skyblue');
})
</script>
</body>
</html>
还有一些jQuery的方法来获取元素
淘宝案例(练习jQuery选择器)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1. 鼠标经过左侧的小li
$("#left li").mouseover(function() {
// 2. 得到当前小li 的索引号
var index = $(this).index();
console.log(index);
// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
// $("#content div").eq(index).show();
// 4. 让其余的图片(就是其他的兄弟)隐藏起来
// $("#content div").eq(index).siblings().hide();
// 链式编程
$("#content div").eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>
2.1jQuery操作CSS
利用css()方法实现。
<!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>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 150px;
background-color: pink;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
// $("div").css('width');//获得宽度
// $("div").css('width', 300);//修改宽度
// // 修改多个
// $("div").css({
// width: 500,
// height: 500,
// backgroundColor: "blue"
// });
// 通过添加类名
$("div").click(function() {
// 切换类名,有的话就删除,没有就加
// $(this).toggleClass("current");
// 移除类名
// $(this).removeClass("current");
$(this).addClass("current");
})
})
</script>
</body>
</html>
3.1jQuery效果
显示隐藏:show(),hide(),toggle()
// 显示show(速度,切换效果,函数)参数可以省略
$("div").show("slow", "linear", function() {
console.log(1);
})
// 隐藏hide(速度,切换效果,函数)参数可以省略
$("div").hide("fast", "linear", function() {
console.log(2);
})
// 切换toggle(速度,切换效果,函数)参数可以省略
$("div").toggle(1000, "linear", function() {
console.log(3);
})
滑动效果:slideDown(),slideUp(),slideToggle()
<!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>
div {
display: none;
width: 200px;
height: 150px;
background-color: skyblue;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>come</button>
<button>go</button>
<button>come-go</button>
<div></div>
<script>
// 向上滑动slideDown()参数和显示隐藏一样
$(function() {
$("button").eq(0).click(function() {
$("div").slideDown();
})
})
// 向上滑动slideUp()参数和显示隐藏一样
$(function() {
$("button").eq(1).click(function() {
$("div").slideUp();
})
})
// 向上滑动slideDown()参数和显示隐藏一样
$(function() {
$("button").eq(2).click(function() {
$("div").slideToggle();
})
})
</script>
</body>
</html>
事件切换
// 事件切换hover(鼠标经过函数,鼠标离开函数)
// 如果hover只写一个函数,离开经过都会触发$("div").hover(fuction() {}, fuction() {})
如果多次触发动画效果,那么jQuery会将动画队列都执行完毕,所以我们可以停止让他排队,用stop()
方法。
淡入淡出效果
//淡入淡出效果
$(function() {
$("button").eq(0).click(function() {
$("div").fadeIn();
})
})
$(function() {
$("button").eq(1).click(function() {
$("div").fadeOut();
})
})
// $(function() {
// $("button").eq(2).click(function() {
// $("div").stop().fadeToggle();
// })
// })
// 去到哪个透明度,必须写时间哥透明度
$(function() {
$("button").eq(2).click(function() {
$("div").fadeTo(1000, 0.5);
})
})
淡入淡出案例
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
border: 1px solid #fff;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
}
.wrap ul li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="../jQuery/jquery.min.js"></script>
<script>
$(function() {
$(".wrap li").hover(function() {
$(this).siblings("li").stop().fadeTo(500, 0.4);
}, function() {
$(this).siblings("li").stop().fadeTo(500, 1);
})
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="../image/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../image/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../image/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../image/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../image/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../image/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
自定义动画
animate(对象,速度,样式,回调函数)
<!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>
<script src="./jquery.min.js"></script>
<style>
div {
position: absolute;
width: 200px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 200,
top: 200,
width: 500
});
})
})
</script>
</body>
</html>
动画案例,王者荣耀手风琴
<!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>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
display: block;
}
.king {
width: 852px;
margin: 100px auto;
overflow: hidden;
background: url(../image/bg.png) no-repeat;
padding: 10px;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king ul {
overflow: hidden;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
<script src="../Jquery/jquery.min.js"></script>
</head>
<body>
<script>
$(function() {
// 无动画效果
// $(".king li").hover(function() {
// $(this).addClass("current").siblings().removeClass("current");
// })
$(".king li").mouseenter(function() {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
});
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="../image/m1.jpg" alt="" class="small">
<img src="../image/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../image/l1.jpg" alt="" class="small">
<img src="../image/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../image/c1.jpg" alt="" class="small">
<img src="../image/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../image/w1.jpg" alt="" class="small">
<img src="../image/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../image/z1.jpg" alt="" class="small">
<img src="../image/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../image/h1.jpg" alt="" class="small">
<img src="../image/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../image/t1.jpg" alt="" class="small">
<img src="../image/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
4.1jQuery属性操作
prop()方法
<!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>
<script src="./jquery.min.js"></script>
</head>
<body>
<a href="www.baidu.com"></a>
<script>
// 获得固有属性值
$("a").prop("href");
// 设置属性值
$("a").prop("title", "good");
// 获取自定义属性,不能通过prop()获取
$("a").attr("title");
// 数据缓存。DOM看不到
$("a").data("name", "dada");
</script>
</body>
</html>
5.1jQuery内容文本值
html()方法
<!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>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<input type="text" value="ss">
<script>
// 获取标签及内容
console.log($("div").text());
// 修改内容
$("div").html("<strong>kakakaka</strong>");
// 获取内容
$("div").text();
// 获取值
$("input").val();
// 修改值
$("input").val("eee");
</script>
</body>
</html>
6.1jQuery遍历
each(function(index, domEle){})方法,index是自动生成的索引,domEle是DOM对象
<!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>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
arr = ["red", "pink", "skyblue"];
$(function() {
console.log($("div").html());
// each方法内要有回调函数,index是索引,代表第几个元素,domEle代表这个元素的DOM对象
$("div").each(function(index, domEle) {
$(domEle).css("color", arr[index]);
})
})
</script>
</body>
</html>