收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
