PHP全栈开发之jQuery初体验

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.min.js"></script>
<title>1.原生querySelector()与querySelectorAll()获取元素实例</title>
</head>
<style>
ul li {
float: left;
display: inline;
margin-left: 10px;
}
</style>
<body>
<ul>
<li><img src="img1.jpg" alt=""></li>
<li><img src="img2.png" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
<li><img src="img4.jpg" alt=""></li>
<li><img src="img5.jpg" alt=""></li>
</ul>
<script>
//// 1.原生querySelector()与querySelectorAll()获取元素实例
// var img =document.querySelector("img")
//// 将第一个img,设置为50px圆角
// img.style.borderRadius = '50px'

// 1.2 将所有img 设置为500px圆角
var img2 = document.querySelectorAll('img')
// 将所有的img，设置为500px
for (var i = 0; i < img2.length; i++) {
img2[i].style.borderRadius = '500px'
}

//2.jQuery对象的参数与基本语法，ready()事件注册实例
// jQuery是一个函数库，不是框架，（在文档头部使用本地和远程引入两种方法都可以），jQuery是一个工厂函数，简写:$
$('img')[0].style.borderRadius = '50px' //相等于$('img',document)[0].style.borderRadius
$('img').css('width', '100px')//选中所有img，宽度设置为100

var img =$('img')
for (var i = 0; i < img.length; i++) {
img[i].style.borderRadius = '10px'
}//用jQuery方法对img,设置圆角为10px

//3. jQuery中的事件注册与删除： on()和off()方法的使用
$(document.images).mouseenter(function () {//普通事件添加
$(this).hide(1000)
}).mouseleave(function () {
$(this).show(2000)
})
//on('click',function () {}是点击触发事件 off('mouseenter')关闭鼠标进入的功能
$('img').on('click',function () {
$(this).css('width','1000px')
}).off('mouseenter')

//4.reday()事件注册，放在head中和放在这里，速度差不多。
$(document).ready(function () {
alert('准备完成')
})
</script>
</body>
</html>

相关文章