作业内容
原生querySelector()与querySelectorAll()获取元素实例
jQuery对象的参数与基本语法，ready()事件注册实例
jQuery中的事件注册与删除： on()和off()方法的使用
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>querySelector()与querySelectorAll()获取元素</title>
<script>
// 练习二 ready的使用//////////////////////////////////////////////////////////
$(document).ready(function () {
//练习一 querySelector()与querySelectorAll()获取元素//////////////////////////////////////////////////
var btn=document.querySelectorAll('button')
//检测按钮querySelector是否已经执行
btn[0].onclick=function () {
//使用querySelector（）单选第一张图片
var img=document.querySelector('img');
img.style.width='200px'
img.style.borderRadius='100px'
img.style.height='140px'
}
btn[1].onclick=function () {
//使用querySelectorALL（）获取全部图片并统一第一张格式
var imgs=document.querySelectorAll('img')
var img=document.querySelector('img');
for(i=1;i<imgs.length;i++) {
imgs[i].style.width=img.style.width
imgs[i].style.borderRadius=img.style.borderRadius
imgs[i].style.height=img.style.height
}
}
//练习一 querySelector()与querySelectorAll()获取元素//////////////////////////////////////////////////end
//练习三 on off用法
btn[2].onclick=function () {
//清除点击特效，添加鼠标进入特效
$('img').off('click').on('mouseenter',function () {
$(this).css({
'height':'200px',
'width':'200px',
'borderRadius':'100px'
})
})
}
btn[3].onclick=function () {
//清除鼠标进入特效，添加鼠标进入特效
$('img').off('mouseenter').on('click',function () {
$(this).css({
'height':'200px',
'width':'200px',
'borderRadius':'0px'
})
})
}
})
</script>
</head>
<body>
<button>querySelector</button>
<button>querySelectorALL(统一为图一格式)</button>
<button>变圆(鼠标移到图片上)on变方（点击图片）off</button>
<button>变圆(鼠标移到图片上)off变方（点击图片）on</button>
<ul style="list-style-type: none">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
</ul>
</body>
</html>提供测试图片1.jpg 1.jgp ...6.jpg
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
