一：jq補(bǔ)充
<!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同時(shí)選中多個(gè)標(biāo)簽窄驹，
//同時(shí)處理 - 直接操作選中的jquery對(duì)象，就是操作被選中的所有標(biāo)簽
//$('p').css('')
$('p').on('click',function(){
console.log(this)
$(this) //將js對(duì)象轉(zhuǎn)換成jq對(duì)象
})
pNodes=$('p')
//這個(gè)取出來(lái)的都是js對(duì)象
//jq標(biāo)簽.on（事件名沾谜，選擇器陨仅，回調(diào)函數(shù)）-- 給父標(biāo)簽添加事件，將事件傳遞給選擇器選中的子標(biāo)簽寓调。函數(shù)中的this是子標(biāo)簽
//jq標(biāo)簽 - 父標(biāo)簽
//選擇器 - 在父標(biāo)簽中去選中子標(biāo)簽
//給
</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>
