Skip to content

Commit fc6cb3c

Browse files
amydevyaamydevya
committed
new
1 parent e452539 commit fc6cb3c

23 files changed

Lines changed: 10929 additions & 0 deletions

‎10期JS正式课/jquery补课/1.JS和JQ的关系.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
li{
8+
height: 40px;
9+
}
10+
div{
11+
width: 200px;
12+
height: 200px;
13+
background: red;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="div">珠峰培训</div>
19+
<ul>
20+
<li></li>
21+
<li></li>
22+
<li></li>
23+
<li></li>
24+
</ul>
25+
<script src="js/jquery-1.11.3.js"></script>
26+
<script>
27+
//只要DOM加载完毕，就可以执行JS/JQ代码；
28+
//window.onload:DOM,IMG,音频，视频...
29+
var aLi=$('li');
30+
var $div=$('#div');
31+
for(var i=0; i<aLi.length; i++){
32+
aLi[i].style.background='red'; //JQ转JS get(索引)
33+
}
34+
$div.click(function(){
35+
//alert($(this).html()) //html()方法：当不传参数的时候，是获取
36+
$(this).html('如果不懂的话，可以微信问我：18611959267')
37+
//this->原生的this；
38+
//this.style.background='green';
39+
//$(this).css('background','green');
40+
//this.css('background','green');//JQ和JS不能混淆
41+
})
42+
43+
</script>
44+
</body>
45+
</html>

‎10期JS正式课/jquery补课/1.回到顶部-点击立即隐藏版.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
body,html{
8+
height: 1000%;
9+
}
10+
*{
11+
margin:0;
12+
padding:0;
13+
}
14+
body{
15+
background: lightgreen;
16+
background: -webkit-linear-gradient(top,lightgreen,lightsteelblue,lightgrey);
17+
background: -moz-linear-gradient(top,lightgreen,lightsteelblue,lightgrey);
18+
background: -ms-linear-gradient(top,lightgreen,lightsteelblue,lightgrey);
19+
}
20+
div{
21+
width: 80px;
22+
height: 80px;
23+
border-radius: 50%;
24+
text-align: center;
25+
line-height: 80px;
26+
font-size: 30px;
27+
color: white;
28+
background: darkgreen;
29+
box-shadow: 4px 4px 10px #333;
30+
position: fixed;
31+
right: 10px;
32+
bottom: 50px;
33+
display: none;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div id="div">toTop</div>
39+
<script src="js/jquery-1.11.3.js"></script>
40+
<script src="js/toTop.js"></script>
41+
</body>
42+
</html>

‎10期JS正式课/jquery补课/1.回到顶部-随时停下版.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
body,html{
8+
height: 1000%;
9+
}
10+
*{
11+
margin:0;
12+
padding:0;
13+
}
14+
body{
15+
background: lightgreen;
16+
background: -webkit-linear-gradient(top,lightgreen,lightsteelblue,lightgrey);
17+
background: -moz-linear-gradient(top,lightgreen,lightsteelblue,lightgrey);
18+
background: -ms-linear-gradient(top,lightgreen,lightsteelblue,lightgrey);
19+
}
20+
div{
21+
width: 80px;
22+
height: 80px;
23+
border-radius: 50%;
24+
text-align: center;
25+
line-height: 80px;
26+
font-size: 30px;
27+
color: white;
28+
background: darkgreen;
29+
box-shadow: 4px 4px 10px #333;
30+
position: fixed;
31+
right: 10px;
32+
bottom: 50px;
33+
display: none;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div id="div">toTop</div>
39+
<script src="js/jquery-1.11.3.js"></script>
40+
<script src="js/toTop2.js"></script>
41+
</body>
42+
</html>

‎10期JS正式课/jquery补课/2.完整版左右切换轮播图.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
list-style: none;
11+
}
12+
.box{
13+
width: 1000px;
14+
height: 300px;
15+
margin:50px auto;
16+
position: relative;
17+
overflow: hidden;
18+
background: url("img/default.gif") no-repeat center center #e1e1e1;
19+
}
20+
.box .boxInner{
21+
position: absolute;
22+
left:0;
23+
top:0;
24+
width:4000px;
25+
height: 100%;
26+
clear:both;
27+
}
28+
.box .boxInner img{
29+
display: block;
30+
width: 1000px;
31+
height:100%;
32+
float:left;
33+
}
34+
.box ul{
35+
position: absolute;
36+
bottom:20px;
37+
right:20px;
38+
}
39+
.box ul li{
40+
width: 20px;
41+
height:20px;
42+
float: left;
43+
background: #aaa;
44+
border-radius: 50%;
45+
margin-left: 10px;
46+
cursor:pointer;
47+
48+
}
49+
.box ul li.on{
50+
background: blue;
51+
}
52+
.box a{
53+
width: 30px;
54+
height: 45px;
55+
background-image: url("img/pre.png");
56+
background-repeat: no-repeat;
57+
position: absolute;
58+
top:127.5px;
59+
opacity: 0.5;
60+
filter:'alpha(opacity:50)';
61+
display: none;
62+
}
63+
.box a:hover{
64+
opacity: 1;
65+
filter:'alpha(opacity:100)'
66+
}
67+
.box a.left{
68+
background-position: 0 0;
69+
left:30px;
70+
}
71+
.box a.right{
72+
background-position: -52px 0;
73+
right:30px;
74+
}
75+
</style>
76+
<script src="js/jquery-1.11.3.js"></script>
77+
<script src="js/banner.js"></script>
78+
</head>
79+
<body>
80+
<div id="box" class="box">
81+
<div class="boxInner">
82+
<!--<img src="img/banner1.jpg" alt="">
83+
<img src="img/banner2.jpg" alt="">
84+
<img src="img/banner3.jpg" alt="">
85+
<img src="img/banner4.jpg" alt="">-->
86+
</div>
87+
<ul>
88+
<!--<li class="on"></li>
89+
<li></li>
90+
<li></li>
91+
<li></li>-->
92+
</ul>
93+
<a href="javascript:;" id="left" class="left"></a>
94+
<a href="javascript:;" id="right" class="right"></a>
95+
</div>
96+
</body>
97+
</html>

‎10期JS正式课/jquery补课/3.$()下常用方法.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
li{
8+
height: 40px;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<ul>
14+
<li></li>
15+
<li></li>
16+
<li></li>
17+
<li></li>
18+
</ul>
19+
<script src="js/jquery-1.11.3.js"></script>
20+
<script>
21+
var aLi=$('li');//$().xxx(); 实例.方法名(); $.xxx() 类.方法名();
22+
var ary=[12,34,54,28];
23+
var obj={name:'zhufeng',age:9}
24+
/* aLi.each(function(index,item){
25+
//item:原生；
26+
/!*item.style.background='red';*!/
27+
$(item).html('珠峰培训')
28+
29+
})*/
30+
$.each(obj,function(){ //原生的数组，JQ元素，对象
31+
console.log(arguments)
32+
});
33+
/*ary.each(function(){
34+
console.log(arguments)
35+
})*/
36+
</script>
37+
</body>
38+
</html>

‎10期JS正式课/jquery补课/4.选项卡.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
}
11+
.box{
12+
width: 450px;
13+
height: 300px;
14+
}
15+
.box input{
16+
float: left;
17+
height: 40px;
18+
width: 150px;
19+
}
20+
.box input.on{
21+
background: green;
22+
}
23+
.box div{
24+
width: 100%;
25+
height: 100%;
26+
background: green;
27+
display: none;
28+
font-size: 50px;
29+
color:white;
30+
}
31+
.box div.show{
32+
display: block;
33+
}
34+
#div1{
35+
width: 200px;
36+
height: 200px;
37+
background: red;
38+
}
39+
40+
</style>
41+
<script src="js/jquery-1.11.3.js"></script>
42+
<script src="js/tab2.js"></script>
43+
<script>
44+
$(function(){
45+
/*$('#box').tab();//$('li').each()
46+
$('#box1').tab();
47+
$('#div1').changeColor('blue');*/
48+
$.tab('#box')
49+
$.tab('#box1')
50+
})
51+
</script>
52+
</head>
53+
<body>
54+
<div id="div1"></div>
55+
<div id="box" class="box">
56+
<input type="button" value="按钮1" class="on">
57+
<input type="button" value="按钮2">
58+
<input type="button" value="按钮3">
59+
<div class="show">内容1</div>
60+
<div>内容2</div>
61+
<div>内容3</div>
62+
</div>
63+
<div id="box1" class="box">
64+
<input type="button" value="按钮1" class="on">
65+
<input type="button" value="按钮2">
66+
<input type="button" value="按钮3">
67+
<div class="show">内容1</div>
68+
<div>内容2</div>
69+
<div>内容3</div>
70+
</div>
71+
</body>
72+
</html>

‎10期JS正式课/jquery补课/img/banner1.jpg‎

192 KB
Loading

‎10期JS正式课/jquery补课/img/banner2.jpg‎

216 KB
Loading

‎10期JS正式课/jquery补课/img/banner3.jpg‎

194 KB
Loading

‎10期JS正式课/jquery补课/img/banner4.jpg‎

60.7 KB
Loading

0 commit comments

Comments
 (0)