<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生querySelector()与querySelectorAll()获取元素实例</title>
<!--引入jquery静态库,用cdn方式-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
ul{padding: 0;margin: 0;}
li{list-style: none;padding-left: 20px;}
/*弹窗*/
.mei { position: fixed; width: 500px; height: 500px; z-index: 100000; left: 50%; top: 50%; margin: -100px 0 0 -150px; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 1px 1px 2px #aaa; }
.mei .c { position: absolute; width: 30px; height: 30px; right: 0; top: 0; font-size: 20px; font-style: normal; text-align: center; cursor: pointer; z-index: 2; }
.mei .img { padding: 10px; text-align: center; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; }
.mei .img img { width: 400px; height: 400px; }
</style>
<script>
$(document).ready(function () {
// 原生queryselector()添加样式
document.querySelector('.main').setAttribute("style","width: 800px;height: 800px; margin: auto; box-shadow: 2px 2px 2px 5px #888;overflow:hidden;")
document.querySelector('.list').setAttribute("style","width: 98%; background-color: #000;margin:10px auto")
//原生queryselectorall()获取所有a元素
var a = document.querySelectorAll('a')
// 2.循环a元素并去掉a默认样式
for (var i=0; i<a.length ;i++){
//两种写法经测试都可以使用
// a[i].style.cssText="text-decoration: none;line-height: 40px;color: #fff;"
// a[i].setAttribute("style","text-decoration: none;line-height: 40px;color: #fff;")
//用jQuery方法写
$('a').css({"line-height": "40px", "text-decoration": "none","color": "#fff",})
}
//鼠标经过list块变色
$('.list').on('mouseenter',function () {
$(this).css('background','#888')
})
//鼠标移除变回原来样式
$('.list').on('mouseleave',function () {
$(this).css('background','red')
})
// 鼠标点击第一条信息显示一张图片
$(".wechat").click(function () {
var url = $(this).attr("data-img")
//alert(url)
img = "<div class='mei'>"
img += "<i class='c'>x</i>"
img += "<div class='img'><img src='" + url + "'></div>"
img += "</div>"
$("body").append(img)
})
//关闭弹出图片
$(document).on("click", ".mei .c", function () {
//alert(0)
$(".mei").remove();
})
//点击第二条移除第一条的美女弹出
$(".wechat2").click(function () {
$(".wechat").off("click");
})
})
</script>
</head>
<body>
<div class="main">
<div class="list">
<ul>
<li><a href="javascript:void(0)" class="wechat" data-img="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1513663374&di=326ae2a1e7012f5e7af05047cc7928e4&src=http://img3.duitang.com/uploads/item/201605/27/20160527205144_8Kh3w.jpeg">这是个美女,不信点下看！</a></li>
<li><a href="javascript:void(0)" class="wechat2">点击这一条，上面的弹出美女就不会弹出了！</a></li>
<li><a href="javascript:void(0)">使用PHP快速构建命令行应用程序的方法</a></li>
<li><a href="javascript:void(0)">JavaScript 中数组操作注意点基础</a></li>
<li><a href="javascript:void(0)">HTML5中 Canvas 的 3D 压力器反序列化</a></li>
<li><a href="javascript:void(0)">three.js实现炫酷的3d影院实例分享</a></li>
</ul>
</div>
</div>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
