一：jq补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div id="">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
</html>
<script type="text/javascript">
//1.jquery同时选中多个标签，
//同时处理 - 直接操作选中的jquery对象，就是操作被选中的所有标签
//$('p').css('')
$('p').on('click',function(){
console.log(this)
$(this) //将js对象转换成jq对象
})
pNodes=$('p')
//这个取出来的都是js对象
//jq标签.on（事件名，选择器，回调函数）-- 给父标签添加事件，将事件传递给选择器选中的子标签。函数中的this是子标签
//jq标签 - 父标签
//选择器 - 在父标签中去选中子标签
//给
</script>
二：图片轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
div{
margin: 0 auto;
}
#an1a1{
width: auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#an1{
color: red;
}
#num2{
width: auto;
position: absolute;
top: 275px;
left: 50%;
transform: translateX(-50%);
color: black;
}
#an1{
color: red;
}
</style>
</head>
<body>
<div id="">
<img id='an1a1' src="img/picture-1.jpg"/>
</div>
<div id="num2">
<font id='an1'>●</font>
<font id='an2'>●</font>
<font id='an3'>●</font>
</div>
</body>
<script type="text/javascript">
var fontId = 'an1'
imgs = {"an1":"img/picture-1.jpg","an2":"img/picture-2.jpg","an3":"img/picture-3.jpg"}
$('body').on('mouseover','font',function(){
var color1 = $(this).css('color')
if(color1=='rgb(255, 0, 0)'){
return
}
$(this).css('color','red')
$('#'+fontId).css('color','black')
fontId = this.id
imgskey = this.id
$('img').attr('src',imgs[imgskey])
})
</script>
</html>
网友评论