1.使用jquery.js(开发环境)或者jquery.min.js(生产环境下使用)
使用第一步 :
1.引包 .<script src="jquery.js"></script>
2.使用入口函数:
$(document).ready(function(){ }); 基本写法
$(function(){ }); 简写 , 功能一样
三步走:
1.事件对象: $(选择器)返回的是jquery对象
2.js转jquery $(js对象)
jquery转js $(选择器)[0]
小心this
3.jquery链式编程 : 每次返回jquery对象 , 例 : $(this).css({"backgroundColor":"green","width":"300px"}).attr("id","box");
4.jquery的筛选选择器和基本过滤器:
siblings 选中兄弟元素,除了自己,使用它来做选项卡,排他思想;
5.jquery的动画:
show() , hide() , slideDown() , slideUp() , fadeIn() , fadeOut() , animate()自定义动画;
代码练习 :
1.锚点值跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<div id="app"></div>
<script>
// 锚点值得跳转
window.onhashchange=function(){
console.log(location.hash);
var oDiv=document.getElementById("app");
switch(location.hash){
case "#/login":
// 未来要与后端进行的交互的代码
oDiv.innerHTML="<h2>我是登陆页面</h2>";
break;
case "#/register":
oDiv.innerHTML="<h2>我是注册页面</h2>";
break;
default:
break;
}
}
</script>
</body>
</html>
2.-client -offset -scroll
-client内容 clientTop(border边框的高度) clientLeft(border边框的宽度) clientWidth(盒子的宽度去掉border的宽度的值) clientHeight(盒子的高度减去border宽度的值)
<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>Title</title>-->
<!--<style>-->
<!--.box{-->
<!--200px;-->
<!--height:200px;-->
<!--position:absolute;-->
<!--border:30px solid red;-->
<!--/*margin:10px 0 0 0;*/-->
<!--padding:80px;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="box">-->
<!--哈哈哈哈哈啊哈哈哈哈呵呵呵呵呵呵或或或或或或或或或或或或或或-->
<!--或或或或或或或或或或或或或或或呵呵呵呵呵呵或或或或或或或或或或或或或或或或或或或-->
<!--或或或或或或或或或或或或或或呵呵呵呵呵呵或或或或或或或或或或或或-->
<!--呵呵呵呵呵呵或或或或或或或或或或或或或或呵呵呵呵呵呵或或或或或或或或或或或或或或或或或或或或-->
<!--或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或-->
<!--呵呵呵呵呵呵或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或-->
<!--或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或-->
<!--</div>-->
<!--<script>-->
<!--// clientTop 内容区域到边框顶部的距离,说白了就是边框的高度-->
<!--// clientLeft 内容区域到边框左部的距离,说白了就是边框的宽度-->
<!--// clientWidth 内容区域+左右padding 可视宽度不包含border-->
<!--// clientHeight 内容区域+上下padding 可视高度 不包含border-->
<!--var oBox=document.getElementsByClassName("box")[0];-->
<!--console.log(oBox.clientTop);-->
<!--console.log(oBox.clientLeft);-->
<!--console.log(oBox.clientWidth);-->
<!--console.log(oBox.clientHeight);-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
-offsetWidth(盒子的宽度) offsetHeight(盒子的高度) offsetTop(盒子距离参考点顶部的距离) offsetLeft(盒子距离参考点左边的距离)
<!--<!doctype html>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>Document</title>-->
<!--<style>-->
<!--*{-->
<!--padding:0;-->
<!--margin:0;-->
<!--}-->
<!--.wrap{-->
<!--300px;-->
<!--height:300px;-->
<!---->
<!--margin-top:50px;-->
<!--margin-left:50px;-->
<!--position:relative;-->
<!--}-->
<!--.wrap #box{-->
<!--200px;-->
<!--height:200px;-->
<!--border:5px solid red;-->
<!--top:50px;left:30px;-->
<!--padding:10px;-->
<!--position:absolute;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div>-->
<!--<div class="wrap">-->
<!--<div id="box">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</body>-->
<!--<script>-->
<!--window.onload=function(){-->
<!--var box=document.getElementById("box");-->
<!--// offsetWidth占位宽 内容+padding+border-->
<!--// offsetHeight占位高-->
<!--// offsetTop:单独设置该盒子(子)为定位和没有定位 那么是到body顶部的距离-->
<!--// 如果父盒子设置了相对定位,以父辈盒子为基准-->
<!--console.log(box.offsetTop);-->
<!--console.log(box.offsetLeft);-->
<!--console.log(box.offsetWidth);-->
<!--console.log(box.offsetHeight)-->
<!--}-->
<!--</script>-->
<!--</html>-->
-scroll(监听事件) s.scrollTop(监听的高度) s.scrollLeft(监听宽度) scrollHeight : 内容的高度 + padding scrollWidth :内容的宽度 + paddi<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
div{
height:200px;
}
</style>
</head>
<body style="2000px;height:2000px;">
<div style="background-color:red;"></div>
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:gray;"></div>
<div id="scroll" style="200px;border:1px solid red;overflow:auto;padding:10px;margin:5px 0 0 0;">
<p>
路飞学诚大健康打开看看扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩
扩扩扩扩扩扩扩扩扩扩扩扩坎坎坷坷扩扩扩扩扩扩扩扩扩扩扩
扩扩扩扩扩扩扩扩扩扩扩扩扩 坎坎坷坷扩扩扩扩扩扩扩扩扩
扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩坎坎坷坷扩扩扩扩扩扩扩
扩扩扩扩扩扩扩扩达到达到军军军军军军军军军军军军军军
军军军军军军军军军军军军军军军军军军军军军军军军军军
军军军军军军军军军
</p>
</div>
<script>
window.onload=function(){
// 实施监听滚动事件
// window.onscroll=function(){
// console.log(1111)
//scrollTop卷起的高度
// console.log("上"+document.documentElement.scrollTop);
// console.log("左"+document.documentElement.scrollLeft);
// console.log("宽"+document.documentElement.scrollWidth);
// console.log("高"+document.documentElement.scrollHeight)
// };
var s=document.getElementById("scroll");
s.onscroll=function(){
// scrollHeight:内容的高度+padding 不包含边框
console.log("上"+s.scrollTop);
console.log("左"+s.scrollLeft);
console.log("宽"+s.scrollWidth);
console.log("宽"+s.clientWidth);
console.log("高"+s.scrollHeight);
}
}
</script>
</body>
</html>
3.固定导航栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
input{
border:0;
outline:none;
}
.header{
100%;
height:70px;
background-color:black;
/*display:none;*/
}
.w{
1210px;
overflow:hidden;
margin:0 auto;
}
.header ul li{
float:left;
242px;
height:70px;
line-height:70px;
text-align:center;
background-color:blue;
}
.header ul li a{
display:block;
242px;
height:70px;
color:#fff;
}
/*固定导航栏*/
.header-fix{
100%;
height:80px;
background-color:white;
box-shadow:0 0 5px #888;
display:none;
position:fixed;
top:0;
left:0;
z-index:999999;
/*margin-bottom:10px;*/
}
.header-fix .logo{
float:left;
117px;
height:57px;
padding-top:23px;
}
.header-fix .fm{
float:left;
700px;
height:80px;
margin-left:100px;
}
.fm input[type="text"]{
float:left;
578px;
height:50px;
border-top:1px solid #999;
border-left:1px solid #999;
border-bottom:1px solid #999;
margin-top:15px;
padding-left:20px;
font-size:20px;
}
.fm input[type="submit"]{
float:left;
100px;
height:52px;
background-color:#38f;
position:relative;
top:15px;
color:#fff;
line-height:52px;
font-size:18px;
}
.box1{
100%;
height:200px;
background-color:red;
}
.box2{
100%;
height:300px;
background-color:green;
}
</style>
</head>
<body style="height:2000px">
<div class="header">
<div class="w">
<ul>
<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>
</div>
<div class="header-fix">
<div class="w">
<div class="logo">
<img src="1.jpg" alt="">
</div>
<form class="fm">
<input type="text" name="">
<input type="submit" name="" value="百度一下">
</form>
</div>
</div>
<div class="box1"></div>
<div class="box2"></div>
<!--javscript:void(0); 阻止默认事件-->
<a href="javscript:void(0);">百度</a>
</body>
<script>
window.onload =function(){
var box2Height=document.getElementsByClassName("box2")[0];
var fixBox=document.getElementsByClassName("header-fix")[0];
var headerBox=document.getElementsByClassName("header")[0];
// onscroll是在元素轴滚动时触发的。window.onscroll或document.onscroll是在浏览器滚动条滚动时触发的
window.onscroll=function(){
console.log(box2Height.offsetTop);
console.log(document.documentElement.scrollTop)
// scrollTop卷起的高度
// offsetTop:单独设置该盒子(子)为定位和没有定位 那么是到body顶部的距离
// 如果父盒子设置了相对定位,以父辈盒子为基准
if(document.documentElement.scrollTop >=box2Height.offsetTop){
fixBox.style.display="block";
document.body.style.paddingTop="80"+"px";
}else{
fixBox.style.display="none";
document.body.style.paddingTop="0"+"px";
headerBox.style.diaplay="block";
}
}
}
</script>
</html>
4.使用jquery:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
<!--<div class="box"></div>-->
<script src="jquery.js"></script>
<script>
// window
// console.log($)
// 入口函数 window.onload
// consloe.log(document);
// jquery对象
// console.log($(document));
// 1.jquery的入口函数 文档加载完成之后 1.文档加载 2.图片加载
// $(document).ready(function(){
// alert(1);
// });
// $(document).ready(function(){
// alert(2);
// })
// 2.入口函数2 简便写法 一定要写
$(function(){
// 1.事件对象 2.事件 3.事件驱动
// console.log($(".box"));
$(".box").click(function(){
// 添加一个属性的写法
// $("#box").css("background-color","green");
// 添加多个属性的写法,用字典的方式
// $("#box").css({
// "backgroundColor":"green",
// "width":300
// });
// jquery转化js对象
// console.log($(".box")[0]);
// $("#box")[0].style.backgroundColor="green";
// console.log(this);
// js对象转化jquery对象 $(js对象)就可以使用jquery的属性和方法
// console.log($(".box"));
// console.log($(this));
// console.log($(this)[0]);
// this.css 没有此方法,会报错的Uncaught TypeError: this.css is not a function
// jquery链式编程
$(this).css({
"backgroundColor":"green",
"width":300
// attr 是jquery里的方法,添加id
}).attr("id","box");
// console.log(this);
// console.log($(this).css({
// "backgroundColor":"green",
// "width":300
// }))
// hide是隐藏,里面的参数是时间,1000毫秒,等于1秒
$(this).hide(1000)
})
})
</script>
</body>
</html>
5.选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"><h3>alex1</h3></div>
<div class="box">alex2</div>
<div class="box">alex3</div>
<div id="wrap">nvshen</div>
<div>太亮</div>
<ul>
<li>太亮1</li>
<li>太亮2</li>
<li>太亮3</li>
</ul>
<div class="Box">
<div class="box">
<p>123</p>
<div class="child">
<span></span>
alex</div>
<a href="#">路飞</a>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$(function(){
$(".box").click(function(event){
// 只显示被点击jquery对象下的文本
console.log($(this).text());
// 显示被点击jquery对象的文本以及标签
console.log($(this).html());
});
$("#wrap").css({
color:"red"
});
// console.log($("div"));
// console.log("ul li");
$("ul li").click(function(event){
// console.log($(this).index());
var i = $(this).index();
// $(`ul li:eq(${i})`).css({
// color:"green"
// });
// eq是按照索引去找
// $("ul li").eq(i).css({
// color:"green"
// })
});
// gt是索引大于0的
// $("ul li:gt(0)").css({
// color:"green"
// });
// find筛选
// $("ul").find("li:eq(0)").css({
// color:"yellow"
// });
// 显示.box下的子(孙子不行)元素
console.log($(".box").children());
// 显示的的是亲爹
console.log($("a").parent());
console.log($("ul li").eq())
})
</script>
</body>
</html>
6.jquery的排他思想
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<ul>-->
<!--<li>-->
<!--<button>按钮1</button>-->
<!--</li>-->
<!--<li>-->
<!--<button>按钮2</button>-->
<!--</li>-->
<!--<li>-->
<!--<button>按钮3</button>-->
<!--</li>-->
<!--<li>-->
<!--<button>按钮4</button>-->
<!--</li>-->
<!--</ul>-->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script src="jquery.min.js"></script>
<script>
$(function(){
$("button").click(function(event){
排他思想的关键 siblings
$(this).css("backgroundColor","red").siblings("button").css("backgroundColor","white")
})
// $("button").click(function(event){
//链式编程
// $(this).css("backgroundColor","red").parent().siblings("li").children("button").css("backgroundColor","white")
// })
})
</script>
</body>
</html>
7.选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
<ul>
<li class="list">1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
$(function(){
$("#box button").click(function(event){
var i =$(this).index();
选项卡就是利用了排他思想
$(this).css("backgroundColor","red").siblings("button").css("backgroundColor","#fff")
$("ul li").eq(i).css("color","yellow").siblings("li").css("color","black")
})
})
</script>
</body>
</html>
8.jquery中的动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
300px;
height:300px;
background-color:red;
display:none;
}
</style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
// var isHide=true;
// $("button").click(function(){
// if(isHide){
// $(".box").stop().show(1000,function(){
// alert("alex");
// });
// isHide=false;
// }else{
// $(".box").stop().hide(1000);
// isHide=true;
// }
// })
$("button").click(function(event){
//stop()解决延迟效果
// $(".box").stop().toggle(1000);
// slideUp只是收回去
$(".box").slideUp(1000,function(){})
// slideDown只是放下来
// $(".box").slideDown(1000,function(){})
// slideToggle放下来又放回去
// $(".box").slideToggle(1000);
// fadeIn只显示
// $(".box").fadeIn(1000,function(){
//
// })
$(".box").fadeToggle(1000,function(){});
})
})
</script>
</body>
</html>
9.自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position:absolute;
left:20px;
top:30px;
100px;
height:100px;
background-color:green;
}
</style>
<script src="jquery.min.js"></script>
<script>
jQuery(function(){
$("button").click(function(){
var json={"width":500,"height":500,"left":300,"top":300,"border-radius":100};
var json2={
"width":100,
"height":100,
"left":100,
"top":100,
"border-radius":100,
};
//animate是自定义动画
$("div").animate(json,1000,function(){
// $("div").css("backgroundColor","red");
$("div").animate(json2,2000,function(){
// alert("动画执行完毕")
})
$("div").css("backgroundColor","red")
})
})
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>