review0611

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery入门</title>
    <script type="text/javascript" src="PhotoWallDemo/js/jQuery.js"></script>
    <script type="text/javascript">
        console.log($ === jQuery); // true
        $(document).ready(function(){
            $('.btn').click(function(){
                $('p').slideToggle();
            });
        });
    </script>
</head>
<body>
    <p>This is a paragraph</p>
    <button class="btn">按钮</button>
</body>
</html>

照片墙案例效果图

jQuery入门 -- 笔记 - 图3

照片墙案例HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目：照片墙案例</title>
    <link rel="stylesheet" type="text/css" href="css/photowall.css">
    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/photowall.js"></script>
</head>
<body>
    <span></span>
    <nav>
        <a href="#">泸沽湖</a>
        <a href="#">丽江水城</a>
        <a href="#">茶马古道</a>
        <a href="#">就这家·云逸客栈</a>
        <a href="#">西双版纳</a>
        <a href="#">云南红酒庄</a>
        <a href="#">轿子雪山</a>
        <a href="#">普者黑</a>
        <a href="#">海埂大坝</a>
        <a href="#">玉龙湾</a>
        <a href="#">昆明郊野公园</a>
        <a href="#">欧洲风琴小镇</a>
    </nav>
    <div>
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
        <img src="images/4.jpg">
        <img src="images/5.jpg">
        <img src="images/6.jpg">
        <img src="images/7.jpg">
        <img src="images/8.jpg">
        <img src="images/9.jpg">
        <img src="images/10.jpg">
        <img src="images/11.jpg">
        <img src="images/12.jpg">
    </div>
</body>
</html>

照片墙案例CSS部分

*{
    margin: 0px;
    padding: 0px;
    border: none;
}

html,body{
    height: 100%;
    background-color: #93b3c6;
    /*由于span中有margin 页面会出现滚动条 溢出部分隐藏*/
    overflow: hidden;
}

span{
    display: block;
    width: 16px;
    height: 16px;
    margin: 30px auto 40px;
    border-radius: 50%;
    background-color: white;
}

nav{
    /*设置相对定位 为下面的伪类定位*/
    position: relative;
    /*使用弹性布局 可以让页面缩小的时候也不失真*/
    display: flex;
    justify-content: space-between;
    /*vw是相对单位，1vw等于可视窗口宽度的1%*/
    width: 78.125vw;
    margin: 0 auto 45px;
}
/*用伪类实现白色横条*/
nav::before{
    display: block;
    content: '';
    /*绝对定位打破文档流*/
    position: absolute;
    top: 20px;
    width: 99%;
    height: 10px;
    background-color: white;
    z-index: 1;
}
nav>a{
    /*before是a标签之前的元素 设置相对定位防止覆盖*/
    position: relative;
    font-size: 20px;
    padding: 10px;
    border: 2px solid #5395b4;
    text-decoration: none;
    background-color: white;
    color: #255d7e;
    /*用z-index实现白条在超链接的下方*/
    z-index: 2;
}

div{
    width: 78.125vw;
    /*vh是相对单位，1vh等于可视窗口高度的1%*/
    height: 75vh;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 30px 0 rgba(8,1,3,0.3);
    overflow: hidden;
    /*设置相对定位 让每个图片参照div重叠起来*/
    position: relative;
}
div>img{
    width: 98%;
    height: 96%;
    /*用绝对定位固定img*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

照片墙案例JavaScript部分

$(document).ready(function(){
    $('a').click(function(){
        $('img')
        // 选中的链接的图片
        .eq($(this).index()).css({'opacity':'1'})
        // 其他兄弟的链接的图片
        .siblings().css({'opacity':'0'});
        // 链式结构语法
    });

    //     集体改变链接框的css
    // var alinks = $('a');
    // // alinks 是对象
    // for(var i=alinks.length-1;i>=0;i--){
    //     // 第一种方法 原生去做
    //     // alinks[i].style.background = 'red';
    //     // alinks[i].style.border = '5px solid yellow';
    //     // alinks[i].style.color = '#fff';
    //     // 第二种方法 对象去做 用eq()隐式迭代去获取jQuery对象
    //     alinks.eq(i).css({
    //         background : 'red',
    //         border : '5px solid yellow',
    //         color : '#fff'
    //     })
    //     // text直接修改文本
    //     // .text('云南旅游' + i)
    //     // html直接改标签
    //     .html('<em>七彩云南' + i + '</em>');
    // }
});