サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jQuery/jquery-3.3.1.min.js"></scr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/jQuery/jquery-3.3.1.min.js"></script>
<title>Document</title>
<style>
a,p{
text-decoration: none;
width:100px;
height:100px;
border-radius: 50px;
display: inline-block;
line-height: 100px;
text-align: center;
color:red;
margin-right:50px;
}
.but{
display:block;
margin-left: 300px;
padding: 10px;
font-size:20px;
font-weight:bold;
}
</style>
<script>
//改變標(biāo)簽的背景顏色
function aa(tag) { //建立自定義函數(shù) 函數(shù)名aa 參數(shù)名tag
var len=document.getElementsByTagName(tag).length //獲得到參數(shù)標(biāo)簽的的長(zhǎng)度賦值給變量len
for(var i=0;i<len;i++){ //for循環(huán) 值小于參數(shù)標(biāo)簽變量len 時(shí)變量i增加1
//參數(shù)標(biāo)簽數(shù)組長(zhǎng)度的CSS樣式顏色為 rgb顏色'（值1，值2，值3)' Math.floor（）四舍五入； Math.random（）0-1的隨機(jī)值；
document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
}
}
$(document).ready(function(){
$('.but').click(function(){ //點(diǎn)擊變色及更改數(shù)字
aa('p') //給函數(shù)aa參數(shù)傳參 點(diǎn)擊此時(shí)變色
aa('a')
$('p,a').text(Math.floor(Math.random()*100)) //Math.floor四舍五入、Math.random隨機(jī)0-1之間數(shù)值、 點(diǎn)擊更改數(shù)字
})
$('p,a').mouseover(function(){ //獲得p和a標(biāo)簽 鼠標(biāo)移上事件
$bg=$(this).css('backgroundColor') //獲取當(dāng)前元素標(biāo)簽CSS 背景顏色的屬性值并賦值給變量bg
$(this).css('boxShadow','0px 0px 50px '+$bg) //給當(dāng)前元素添加外部陰影為當(dāng)前元素背景色 注：變量值在引號(hào)外部+添加
$(this).css('borderRadius','20px ') //給當(dāng)前標(biāo)簽元素添加圓角效果到20px;
})
$('p,a').mouseleave(function(){ //鼠標(biāo)移出事件
$(this).css('box-shadow','none')
$(this).css('border-radius','50px ')
})
})
</script>
</head>
<body>
<a href="">0</a>
<a href="">0</a>
<a href="">0</a>
<a href="">0</a>
<p>0</p>
<p>0</p>
<p>0</p>
<button class="but">點(diǎn)擊變色及更改數(shù)字</button>
</body>
</html>
添削の先生：天蓬老師添削時(shí)間：2019-02-14 09:34:08
先生のまとめ：獲取元素, 可以統(tǒng)一用jquery, 不要混寫