<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/js/jquery-3.3.1.js"></script>
</head>
1.改变元素样式
<body>
<div id="parent">
<p>hello world</p>
</div>
<script>
$(document).ready(function(){
//coding
// jquery选择器--支持所有的css选择器
// $(selector).css() --改变元素的样式
$("#parent p").css({color:"red",backgroundColor:"green"});
})
</script>
</body>
改变元素样式.png
2.事件
<body>
<div>div</div>
<button>btn</button>
<script>
/*
1.点击事件click
2.mouseover,mouseout
*/
$(document).ready(function(){
//$("button").click(function(){
//$("div").toggle(200)
// })
//this --正在执行事件的对象
$("div").mouseover(function(){
$(this).css({backgroundColor:"red"});
}).mouseout(function(){
$(this).css({backgroundColor:"green"});
})
})
</script>
</body>
togglt: 切换 （显示或隐藏）
mouseout: 鼠标未移动到div上
mouseover: 鼠标移动到div上
3.遍历
<body>
<ul>
<li>1</li>
<li id="test">2</li>
<li>3</li>
</ul>
<script>
/* 元素之间的关系 父子，兄弟 */
/*
$(document).ready(function(){
})
可以简写为
$(function(){
}) */
/*
parent()-->获取父元素
children()-->获取子元素
siblings()-->获取兄弟元素
eq(index)-->找到对应的下标元素
index()-->找到元素的下标
*/
$(function(){
var parent = $("#test").parent();
var child = $("#test").children();
var sibs = $("#test").siblings();
console.log(sibs);
child.css({color:"#fff"}); //test的子元素为白色
parent.css({backgroundColor:"red"}); //test的父元素即ul的背景颜色为红色
sibs.css({color:"green"}); //test的兄弟元素为绿色，此时1,3为绿色
$("li").eq(1).css({color:"red"}); //使下标为1的元素为红色，即2为以红色
var lis = $("li");
console.log(lis); //获取各个li的下标
lis.click(function(){
alert($(this).index()) //点击各个li时，弹出对话框显示它的下标
})
})
</script>
</body>
4.addClass, removeClass,toggleClass
<style>
.current{
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>div</div>
<button>btn</button>
<script>
/*
addClass
removeClass
toggleClass
*/
$("li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
}) //点击li时使它变为红色，其他li不变
$("button").click(function(){
$("div").toggleClass("current"); //点击button时，使div切换颜色为红色
})
</script>
</body>
5.偏移量
<style>
.test{
width: 100px;
height: 100px;
background: red;
margin-top: 400px;
}
#one{
width: 200px;
height: 200px;
background: gray;
position: relative;
}
#child{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="test">
</div>
<div id="one">
<div id="child">
</div>
</div>
<script>
/*
offset().top //相对于文档顶部的偏移量
offser().left //相对于文档左边的偏移量
scrollTop() //滚动条距离顶部的距离
position()
*/
var offsetTop = $(".test").offset().top;
var offsetLeft = $(".test").offset().left;
$(window).scroll(function(){
var scroll = $(window).scrollTop();
console.log(scroll);
}) //滑动鼠标时，显示距离顶部的距离变化
console.log(offsetTop);
console.log(offsetLeft);
var left = $("#child").position().left;
console.log(left);
</script>
</body>
偏移量.png
6.移动
点击h1时移动到one
<style>
h1{
text-align: center;
}
div{
height: 100px;
background: #ff2d51;
font-size: 30px;
color: #fff;
text-align: center;
margin-top: 1600px;
}
</style>
</head>
<body>
<h1>关于我</h1>
<div class="one">
one
</div>
<div class="two">
two
</div>
<script>
$(function(){
$("h1").click(function(){
var offset = $(".one").offset().top;
$("html,body").animate({scrollTop:offset});
console.log(offset);
})
})
</script>
</body>
7.banner
<script src="../lib/js/jquery-3.3.1.js"></script>
<style>
*{margin: 0;padding: 0;}
.banner{
width: 992px;
height: 420px;
border: 1px solid #333;
position: relative;
}
.banner-content img{
position: absolute;
}
.banner-content img:not(:first-child){
display: none;
}
.btns{
position: absolute;
z-index: 100;
right: 10px;
bottom: 10px;
}
.btns button{
width: 30px;
height: 30px;
background: #464444;
border: 1px solid #eee;
color: #fff;
border-radius: 50%;
outline: none;
}
.btns .current{
color: #333;
background: #ff2d51;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner-content">
<img src="../images/banner1.png" alt="">
<img src="../images/banner2.png" alt="">
<img src="../images/banner3.png" alt="">
<img src="../images/banner4.png" alt="">
<img src="../images/banner5.png" alt="">
</div>
<div class="btns">
<button class="current">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
</div>
<script>
/*
1.当正在点击的按钮增加current样式，让它的兄弟元素移动current样式
2.点击按钮，让对应下标值得图片显示，技术要点 index() -->获取元素的下标
*/
$(function(){
$(".btns button").click(function(){
$(this).addClass("current").siblings().removeClass("current");
/*$(".banner-content img").eq($(this).index()).show(300).siblings().hide(300)*/
var imgs = $(".banner-content img");
var index = $(this).index();
imgs.eq(index).show(500).siblings().hide(300)
console.log(imgs);
console.log(index);
})
})
</script>
8.scroll ： 从上到下移动
<script src="../lib/js/jquery-3.3.1.js"></script>
<style>
.one{
width: 1440px;
height: 2000px;
background: pink;
position: relative;
}
.fix{
width: 40px;
height: 70px;
background: #ff2d51;
position: fixed;
z-index: 100;
bottom: 100px;
right: 10px;
display: none;
}
</style>
</head>
<body>
<div class="one">
</div>
<div class="fix">
</div>
<script>
$(window).scroll(function(){
var scroll = $(window).scrollTop();
console.log(scroll);
if(scroll>70){
$(".fix").fadeIn(300)
}else{
$(".fix").fadeOut(300)
}
})
$(".fix").click(function(){
$("html,body").animate({scrollTop:0},300) //animate：赋予
})
</script>
网友评论