孙肖宁 发布的文章

描述：鼠标放在一级导航的时候。二级导航显示。鼠标离开之后，二级导航隐藏。在制作导航的时候，用的是图片作为的背景图，为了节约服务器空间就不上传了，如果有需要的小伙伴，可以留言，我发给你们。使用的jQuery的版本是1.8的。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单的制作</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    .wrap {
        width: 330px;
        height: 30px;
        margin: 100px auto 0;
        padding-left: 10px;
        background-image: url(imgs/bg.jpg);
    }

    .wrap li{
        background-image: url(imgs/libg.jpg);
    }

    .wrap > ul > li {
        float: left;
        margin-right: 10px;
        position: relative;
    }

    .wrap a {
        display: block;
        height: 30px;
        width: 100px;
        text-decoration: none;
        color: #000;
        line-height: 30px;
        text-align: center;
    }

    .wrap li ul {
        position: absolute;
        top: 30px;
        display: none;
    }
</style>
<script src="../jquery.min.js"></script>
<script>
$(function () {
    //获取相关元素
    var wrapli = $(".wrap>ul>li");
    //鼠标经过的时候显示
    wrapli.mouseenter(function () {
        $(this).children("ul").show();
    });
    //鼠标经过的时候隐藏
    wrapli.mouseleave(function () {
        $(this).children("ul").hide();
    })
})
</script>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

基本选择器

符号（名称）说明用法(示例)
#Id选择器$(“#btnShow”).css(“color”, “red”);选择id为btnShow的一个元素（返回值为jQuery对象，下同）
.类选择器$(“.liItem”).css(“color”, “red”);选择含有类liItem的所有元素
element标签选择器$(“li”).css(“color”, “red”);选择标签名为li的所有元素

层级选择器

符号（名称）说明用法(示例)
空格后代选择器$(“#j_wrap li”).css(“color”, “red”);选择id为j_wrap的元素的所有后代元素li
>子代选择器$(“#j_wrap > ul > li”).css(“color”, “red”);选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器

符号（名称）说明用法(示例)
:eq(index)选择匹配到的元素中索引号为index的一个元素，index从0开始$(“li:eq(2)”).css(“color”, ”red”);选择li元素中索引号为2的一个元素
:odd选择匹配到的元素中索引号为奇数的所有元素，index从0开始$(“li:odd”).css(“color”, “red”);选择li元素中索引号为奇数的所有元素
:even选择匹配到的元素中索引号为偶数的所有元素，index从0开始$(“li:odd”).css(“color”, “red”);选择li元素中索引号为偶数的所有元素

筛选选择器（方法）

符号（名称）说明用法(示例)
find(selector)查找指定元素的所有后代元素$(“#j_wrap”).find(“li”).css(“color”, “red”);选择id为j_wrap的所有后代元素li
children()查找指定元素的直接子元素$(“#j_wrap”).children(“ul”).css(“color”, “red”);选择id为j_wrap的所有子代元素ul
siblings()查找所有兄弟元素$(“#j_liItem”).siblings().css(“color”, “red”);选择id为j_liItem的所有兄弟元素
parent()查找父元素（亲的）$(“#j_liItem”).parent(“ul”).css(“color”, “red”);选择id为j_liItem的父元素
eq(index)查找指定元素的第index个元素，index是索引号，从0开始$(“li”).eq(2).css(“color”, “red”);选择所有li元素中的第二个

  • 原生js，入口函数。页面上所有内容加载完毕，才会执行。不仅文本加载完毕，而且图片也要加载完毕，在执行函数。
window.onload = function () {

 }

  • jquery的入口函数。文档加载完毕，图片不加载的时候就可以执行这个函数。

     $(document).ready(function () {

})
    • jquery的入口函数。文档加载完毕，图片不加载的时候就可以执行这个函数。
    $(function () {

});

  • jquery的入口函数。文档加载完毕，图片也加载完毕的时候在执行这个函数。

     $(window).ready(function () {

})

  • jQuery入口函数与js入口函数的区别

    • 书写个数不同

      • Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。
      • jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

    • 执行时机不同

      • Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
      • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
    • 文档加载的顺序：从上往下，边解析边执行。

注意：jQuery函数跟$函数的关系：jQuery ===$;

正则表达式（RegExp）

本质：用来记录文本规则的代码（为字符串定义规则，为输入内容定义规则！）
定义：
方式一：
通过构造函数定义var 变量名= new RegExp(/表达式/);
方式二：
通过直接量定义var 变量名= /表达式/;
组成：有一些普通字符和元字符组成，普通字符就是字母和数字，元字符具有特殊意义的字符。
test() 方法
正则对象方法，检测测试字符串是否符合该规则，返回true和false，参数（测试字符串）
使用语法： Boolean = 表达式.test("要验证的内容");
正则内部类
预定义类

符号描述
.[^\n\r] 除了换行和回车之外的任意字符（“”不行）
\d[0-9] 数字字符
\D[^0-9] 非数字字符
\s[ \t\n\x0B\f\r] 空白字符
\S[^ \t\n\x0B\f\r] 非空白字符
\w[a-zA-Z_0-9] 单词字符
\W[^a-zA-Z_0-9] 非单词

简单类
正则：//中什么特殊符号都不写，和[]的加入,//里面必须是完整的，只多不能少。[]只要包含里面的任何一个就可以

负向类
不能是其中的整体或者一部分。中括号内，前面加个元字符^进行取反，不是括号里面的字符（一部分也不行）。可以不够，但是不能多。不够和正好，返回false；多了或者没有返回true。这个符号 ^ 一定是写到方括号里面。

范围类

有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以在中间加了个横线。

组合类
用中括号匹配不同类型的单个字符。

正则边界
^ 会匹配行或者字符串的起始位置
注：^在[]中才表示非！这里表示开始
$ 会匹配行或字符串的结尾位置
^$在一起 表示必须是这个（精确匹配）

量词

符号描述
*(贪婪) 重复零次或更多 (>=0)
+(懒惰) 重复一次或更多次 (>=1)
?(占有) 重复零次或一次 （0 ll1） 要么有 要么没有
{}重复多少次的意思 , 可以有多少个
{n}n次 （x=n）
{n,}重复n次或更多 (x>=n)
{n,m}重复出现的次数比n多但比m少 (n<=x<=m)
*{0,}
+{1,}
?{0,1}
xly一个 l x 或者 y（没有&，用的是，代替的）
（）提高权限，有限计算

封装自己的trim 函数

function trim(str) {
       return str.replace(/（^\s+）|（\s+$）/g,"");  // 去掉前面和后面的空格
}

描述：页面动态展示旋转木马的轮播图形式，用户鼠标放在轮播图区域内的时候，显示左右按钮，点击可移动切换图片。当一次切换完成后，才能进行下一次的切换，否则无效。鼠标离开区域后，左右按钮隐藏。
注意：小编用的是图片，在这里就不提供给大家了。包括左右的按钮也是图片。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转木马</title>
</head>
<style>
    ul{
        list-style: none;
    }
    .wrap{
        width:1200px;
        margin:10px auto;
    }
    .slide {
        height:500px;
        position: relative;
    }
    .slide li{
        position: absolute;
        left:200px;
        top:0;
    }
    .slide li img{
        width:100%;
    }
    .arrow{
        opacity: 0;
    }
    .prev,.next{
        width:76px;
        height:112px;
        position: absolute;
        top:50%;
        margin-top:-56px;
        background: url(./images/prev.png) no-repeat;
        z-index: 99;
    }
    .next{
        right:0;
        background-image: url(./images/next.png);
    }
</style>
<script>
    window.onload = function () {
        var arr = [
            {
                width:400,
                top:70,
                left:50,
                opacity:20,
                zIndex:2
            },
            {
                width:600,
                top:120,
                left:0,
                opacity:80,
                zIndex:3
            },
            {
                width:800,
                top:100,
                left:200,
                opacity:100,
                zIndex:4
            },
            {
                width:600,
                top:120,
                left:600,
                opacity:80,
                zIndex:3
            },
            {
                width:400,
                top:70,
                left:750,
                opacity:20,
                zIndex:2
            }
        ];

        //获取元素
        var slide = document.getElementById("slide");
        var liArr = slide.getElementsByTagName("li");
        var arrow = slide.children[1];
        var arrowChildren = arrow.children;
        //设置一个开闭原则变量，点击以后修改这个值。
        var flag = true;

        //鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
        slide.onmouseenter = function () {
            //arrow.style.opacity = 1;
            animate(arrow,{"opacity":100});
        }
        slide.onmouseleave = function () {
            //arrow.style.opacity = 1;
            animate(arrow,{"opacity":0});
        }
        //初始化页面，打开页面的时候，直接动画的方式展现
        move();
        //把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
        arrowChildren[0].onclick = function () {
            if(flag){
                flag = false;
                move(true);
            }
        }
        arrowChildren[1].onclick = function () {
            if(flag){
                flag = false;
                move(false);
            }
        }

        //书写函数。
        function move(bool){
            //判断：如果等于undefined,那么就不执行这两个if语句
            if(bool === true || bool === false){
                if(bool){
                    arr.unshift(arr.pop());
                }else{
                    arr.push(arr.shift());
                }
            }
            //在次为页面上的所有li赋值属性，利用缓动框架
            for(var i=0;i<liArr.length;i++){
                animate(liArr[i],arr[i], function () {
                    flag = true;
                });
            }
        }

    }
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }
        return ele.currentStyle[attr];
    }
    function animate(ele,json,fn){
        //先清定时器
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            //开闭原则
            var bool = true;


            //遍历属性和值，分别单独处理json
            //attr == k(键)    target == json[k](值)
            for(var k in json){

                var leader;
                //判断如果属性为opacity的时候特殊获取值
                if(k === "opacity"){
                    leader = getStyle(ele,k)*100 || 1;
                }else{
                    leader = parseInt(getStyle(ele,k)) || 0;
                }

                //获取步长
                var step = (json[k] - leader)/10;
                //二次加工步长
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                //赋值
                //特殊情况特殊赋值
                if(k === "opacity"){
                    ele.style[k] = leader/100;
                    //兼容IE678
                    ele.style.filter = "alpha(opacity="+leader+")";
                    //如果是层级，一次行赋值成功，不需要缓动赋值
                }else if(k === "zIndex"){
                    ele.style.zIndex = json[k];
                }else{
                    ele.style[k] = leader + "px";
                }
                //清除定时器
                //判断: 目标值和当前值的差大于步长，就不能跳出循环
                //目标位置和当前位置不相等，就不能清除清除定时器。
                if(json[k] !== leader){
                    bool = false;
                }
            }

            console.log(1);
            //只有所有的属性都到了指定位置，bool值才不会变成false；
            if(bool){
                clearInterval(ele.timer);
                //所有程序执行完毕了，现在可以执行回调函数了
                //只有传递了回调函数，才能执行
                if(fn){
                    fn();
                }
            }
        },25);
    }
</script>
<body>
    <div class="wrap" id="wrap">
        <div class="slide" id="slide">
            <ul>
                <!--五张图片-->
                <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
            </ul>
            <!--左右切换按钮-->
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>
</body>
</html>

描述：当用户打开页面的右下角显示一个广告，当用户点击关闭按钮的时候，广告底部先消失，然后整个广告全部消失。如果用户不点击关闭，在页面打开5秒之后，广告也会按照上述关闭方式进行关闭。
示例代码：
<!DOCTYPE html>

<meta charset="UTF-8">
<title>模拟屏幕右下角广告</title>
<style>
    .box{
        width: 322px;
        position: fixed;
        bottom:0;
        right:0;
    }
    span{
        position: absolute;
        top:0;
        right:0;
        width:30px;
        height: 20px;
        cursor: pointer;
    }
</style>
<script>
    window.onload = function () {
        var guanbi = document.getElementById("guanbi");
        var box = guanbi.parentNode;
        var b = document.getElementById("b");
        guanbi.onclick =close;
        setTimeout(close,5000);
        function close() {
            console.log(1);
            animate(b,{"height":0},function () {
                animate(box,{"width":0});
            })
        }
        function animate(ele,json,fn) {
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                var bool = true;
                for(var k in json){
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    var step = (json[k] - leader)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    ele.style[k] = leader + "px";
                }
                if(json[k] !== leader){
                    bool = false;
                }
                if(bool){
                    clearInterval(ele.timer);
                    if(fn){
                        fn();
                    }
                }
            },1);
        }
        function getStyle(ele,attr) {
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }
    }
</script>


<div class="box">
    <span id="guanbi"></span>
    <div class="hd" id="t">
        <img src="images/t.jpg" alt=""/>
    </div>
    <div class="bd" id="b">
        <img src="images/b.jpg" alt=""/>
    </div>
</div>


描述：默认状态为几张图片显示最左侧的部分，其余部分处于隐藏的状态。鼠标经过的时候，经过的图片变宽，其余图片全部变窄。由于变窄的速度大于图片变宽的速度。所有最右面的一个图片，在默认状态的时候，显示的要比其他部分少一些。鼠标离开之后，图片回复为原来的样子。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 1150px;
            height: 400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;
        }
        div li{
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul{
            width: 1300px;
        }
    </style>
    <script>
        window.onload = function () {
            //获取相关元素
            var div = document.getElementsByTagName("div")[0];
            var liArr = div .getElementsByTagName("li");
            //循环为每一个li添加背景图片以及添加鼠标经过事件
            for(var i = 0;i<liArr.length;i++){
                //添加图片
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
                //添加鼠标经过时候的事件
                liArr[i].onmouseover = function () {
                    for (var j = 0;j<liArr.length;j++){
                        animate(liArr[j],{"width":100});
                    }
                    animate(this,{"width":800})
                }
            }
            //鼠标离开之后，复原
            div.onmouseout = function () {
                for(var j=0;j<liArr.length;j++){
                    //引用框架实现宽度变窄
                    animate(liArr[j],{"width":240});
                }
            }
            function animate(ele,json,fn) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function () {
                    var bool = true;
                    for(var k in json){
                        var leader = parseInt(getStyle(ele,k)) || 0;
                        var step = (json[k] - leader)/10;
                        step = step>0?Math.ceil(step):Math.floor(step);
                        leader = leader + step;
                        ele.style[k] = leader + "px";
                    }
                    if(json[k] !== leader){
                        bool = false;
                    }
                    if(bool){
                        clearInterval(ele.timer);
                        if(fn){
                            fn();
                        }
                    }
                },1);
            }
            function getStyle(ele,attr) {
                if(window.getComputedStyle){
                    return window.getComputedStyle(ele,null)[attr];
                }
                return ele.currentStyle[attr];
            }
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

CentOS的网卡默认是关闭的，所以刚安装的CentOS连不上网络，需要更改配置文件
vi /etc/sysconfig/network-scripts/ifcfg-ens33(名字可能不同)
打开之后把ONBOOT的值改成yes
wl.png
保存之后
重启网卡就可以连接外网了
service network restart
关闭防火墙
systemctl stop firewalld.service

描述：当用户点击登录的时候，弹出一片区域，中间空白区域与其他区域不同，其他区域为半透明状态。点击透明状态的时候，弹出区域关闭，点击中间区域，无效。
技术难点：取消冒泡
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏模态框</title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
</body>
</html>
<script>
    //模态框
    var mask = document.getElementsByClassName("mask")[0];
    //点击a链接
    var a = document.getElementsByTagName("a")[1];

    //a的点击事件，点击之后弹出模态框
    a.onclick = function (event) {

        event = event || window.event;

        mask.style.display = "block";
        //取消冒泡
        if(event || event.stopPropagation){
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }

    document.onclick = function (event) {
        event = event || window.event;

        //获取点击的区域
        var box = event.target?event.target:event.srcElement;
        if(box.id !== "login"){
            mask.style.display = "none";
        }
    }
</script>

冒泡机制（event）

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。简言之：子元素事件被触动，父盒子的同样的事件也会被触动。

事件传播阶段

事件传播的三个阶段是：捕获、冒泡和目标阶段
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
目标阶段：目标正在被执行的阶段

冒泡顺序

  • IE 6.0:
    div -> body -> html -> document
  • 其他浏览器:
    div -> body -> html -> document -> window
  • 不是所有的事件都能冒泡。以下事件不冒泡：`blur、focus、load、unload、onmouseenter

onmouseleave`

阻止冒泡

  • w3c的方法是：（火狐、谷歌、IE11）event.stopPropagation()
  • IE10以下则是使用：event.cancelBubble = true
  • 兼容代码如下：
 var event = event || window.event;
 if(event && event.stopPropagation){
            event.stopPropagation();
  }else{
            event.cancelBubble = true;
  }

  • addEventListenner(参数1，参数2，参数3)

    • 调用者是：事件源。
    • 参数1：事件去掉on 参数2 ：调用的函数
    • 参数3：可有可无。没有默认false。（false情况下，支持冒泡。True支持捕获）。
  1. 1
  2. ...
  3. 32
  4. 33
  5. 34
  6. 35
  7. 36
  8. 37
  9. 38
  10. ...
  11. 54