第一天学习JQuery

<!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>
相关文章
