贺佳磊_20210119贺佳磊
知识点总结
1、eg：图片翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片翻转</title>
<style type="text/css">
.box {
width: 155px;
height: 155px;
overflow: hidden;
}
.flash {
position: relative;
top: 0px;
transition: all 1s linear;
}
img {
width: 100%;
float: left;
height: 155px;
}
</style>
</head>
<body>
<div class="box">
<div class="flash" onmouseover="stop()" onmouseout="start()">
<img src="img/0.jpg" />
<img src="img/1.jpg" />
<img src="img/2.jpg" />
</div>
</div>
<button type="button" onclick="qian()">上一页</button>
<button type="button" onclick="hou()">下一页</button>
<script type="text/javascript">
var box = document.querySelector(".box");
var flash = document.querySelector(".flash");
var imgs = document.querySelectorAll(".flash img");
var t = 0;
var height = box.offsetHeight;
var max = height*imgs.length;
var timer;
tesk();
function tesk(){
timer=setInterval('down()', 2000);
}
function down(){
t = t - height;
if (Math.abs(t) >= max) {
t = 0;
flash.style.transition = "0s";
}else{
flash.style.transition = "1s";
}
flash.style.top = t + "px";
}
function up(){
if (Math.abs(t) == 0) {
t = -max+155;
flash.style.transition = "0s";
}else{
t=t+height;
flash.style.transition = "1s";
}
flash.style.top = t + "px";
}
function stop(){
clearInterval(timer);
}
function start(){
tesk();
}
function qian(){
clearInterval(timer);
up();
}
function hou(){
clearInterval(timer);
down();
tesk();
}
</script>
</body>
</html>
2、抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖</title>
<style type="text/css">
#box{
float: left;
}
#small-box{
width: 200px;
height: 200px;
}
#small-box,#big-box img{
width: 100%;
height: 100%;
}
#big-box{
width: 400px;
height: 400px;
border: 1px solid;
margin: 0 auto;
}
.img2{
transition: 1s;
opacity: 0;;
}
</style>
</head>
<body>
<div id="box">
<div id="small-box">
<img src="img/0.jpg" class="img1"/>
</div>
<button onclick="start()" id="start" >开始</button>
<button onclick="stop()" id="stop" disabled="disabled">暂停</button>
</div>
<div id="big-box">
<img src="img/0.jpg" class="img2"/>
</div>
<script type="text/javascript">
var imgs=[
"img/0.jpg",
"img/1.jpg",
"img/2.jpg",
];
var timer;
var img=document.querySelector(".img1");
var kaishi=document.querySelector("#start")
var zanting=document.querySelector("#stop")
var bigimg=document.querySelector(".img2");
function start(){
bigimg.style.opacity = 0;
timer=setInterval(function(){
kaishi.disabled=true;
zanting.disabled=false;
var index = Math.floor(Math.random() * 3);
img.src=imgs[index];
},100)
}
function stop(){
kaishi.disabled=false;
zanting.disabled=true;
clearInterval(timer);
bigimg.src=img.src;
bigimg.style.opacity = 1;
}
</script>
</body>
</html>
3、JQuery
（1）简介、概述、自定义JS框架
（2）jQuery与JS区别
- ###### jQuery对象与js对象相互转换
js --> jq
$(js对象) 或 jQuery(js对象)
jq --> js
jq对象[索引] 或 jq对象.get(索引)
注意：jq对象本质上是js数组
- ###### 页面加载事件
js
window.onload=function(){}
jq
$(function(){})
$(document).ready(function(){})
区别
js：只能定义一次，如果定义了多次，后加载的会覆盖先加载的
jq：可以定义多次
- ###### 事件绑定
js
js对象.onclick=function(){}
jq
jq对象.click(function(){}) 回调函数
- ###### css样式设置：通过对象直接修改
js
js对象.style.样式名=样式值
jq
jq对象.css('样式名','样式值')
jq对象.addClass()
样式名：驼峰式，css横杠 都支持
（3）jQuery选择器
基本选择器、层级选择器、属性选择器、基本过滤选择器、表单过滤选择器、
4、jQuery的DOM操作
内容操作、属性操作、css样式操作、文档CRUD操作
5、综合案例
eg:表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格隔行换色</title>
<style type="text/css">
table{
margin: 200px auto;
width: 400px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>哈哈</td>
<td>3</td>
</tr>
<tr>
<td>嘿嘿</td>
<td>5</td>
</tr>
<tr>
<td>呵呵</td>
<td>7</td>
</tr>
</table>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('tr:gt(0):even').css('background-color','lightblue');
$('tr:gt(0):odd').css('background-color','lightgreen');
})
</script>
</body>
</html>
eg: 复选框全选全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框全选全不选</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="goods"/>苹果
<input type="checkbox" name="goods"/>香蕉
<input type="checkbox" name="goods"/>橘子
<input type="checkbox" name="goods"/>葡萄
<hr />
<input type="checkbox" id="check"/>全选/全不选
<script>
$(function(){
$('#check').click(function(){
$('input[name="goods"]').prop('checked',$(this).prop('checked'));
})
})
</script>
</body>
</html>
心得体会
又是脑子懵懵的一天，早上老师讲了剩下的JavaScript知识，做了几个例子，下午开始讲jQuery，完全没有接触过jQuery的我一下午像听天书，脑子乱乱的，学的很吃力，语法啥的都不知道，自己知道要实现怎样的效果，但就是不会自己写代码，太生了。唉，还是加油吧！
点赞
评论