前端学习

JQuery的后代选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//后代（包括儿子，孙子，重孙子）

​    // $(function () {

​    //   $("#father p").css("color","blue")

​    // })



​    //子代（儿子）

​    // $(function(){

​    //   $("#child>p").css("color","blue")

​    // })



​    //同代节点(能够选择指定元素后面的所有兄弟元素，不包括自身)

​    // $(function(){

​    //   $("#n~p").css("color","blue")

​    // })

​    

​    //相邻选择器

​    // 在前面我们讲的 $("#child~p") 可以选择指定元素后面的所有兄弟 p 元素，而相邻选择器只能选到指定元素的邻居兄弟元素。

​    // $("M+N"); 选择下一个兄弟节点 N

​    $(function(){

​      $("#child+p").css("color","blue")

​    })

综合小练习，多级炫酷菜单渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
该练习综合了数组渲染、对象渲染，v-if、v-show、key 事件方法等知识。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      a {
        text-decoration: none;
        color: #fff;
      }
      ul {
        list-style: none;
      }
      nav,
      ul {
        width: 100%;
        display: flex; /* 开启弹性盒模型 布局方式*/
        flex-direction: row;
        justify-content: center;
        background: yellowgreen;
      }
      nav > ul > li {
        width: 20%;
        height: 100%;
        text-align: center;
        line-height: 50px;
      }
      nav > ul > li:hover {
        box-shadow: 1px 0px 10px #fff;
      }
      nav > ul > li > ul {
        display: flex;
        flex-direction: column;
      }
      nav > ul > li > ul > li {
        box-shadow: 1px 0px 10px #fff;
      }
      nav > ul > li > a {
        text-transform: uppercase;
      }
    </style>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <nav>
        <ul>
          <!-- 循环渲染一级菜单 -->
          <!-- 鼠标移入触发 currentIndex(index) 函数，更正 current 是当前菜单的 index，鼠标移出重置 current 为空，事件回调方法在 methods 中实现-->
          <li
            v-for="(nav,index) in navbar"
            :key="index"
            @mouseover="currentIndex(index)"
            @mouseout="changeIndex"
          >
            <!-- nav.name 一级菜单名字 -->
            <a href="javascript:;">{{nav.name}}</a>
            <!-- 如果 nav.child 存在，说明有子菜单，再次循环渲染子菜单 -->
            <!-- 子菜单 v-show  如果当前菜单的 index 等于 鼠标移入那个菜单的下标我们就展示出子菜单-->
            <ul v-if="nav.child" v-show="current===index">
              <li v-for="item in nav.child">
                <a href="javascript:;">{{item}}</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          // navbar 模拟后台获取到的菜单列表
          navbar: [
            {
              name: "home",
              child: ["homeItem", "homeItem"],
            },
            {
              name: "contact",
              child: ["contactItem", "contactItem"],
            },
            {
              name: "about",
            },
          ],
          // current 当前鼠标在那个菜单上，初始时没有值
          current: null,
        },
        methods: {
          // 更正 当前鼠标移入的是哪个菜单的 index
          currentIndex: function (index) {
            this.current = index;
          },
          // 鼠标移出 重置 current 值
          changeIndex: function () {
            this.current = null;
          },
        },
      });
    </script>
  </body>
</html>

JS的学习

对象的学习

对象的创建

obj 
1
var obj = {}

对象的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 第一种方式：
   //增加
    var obj = {}
    obj.name = "zwx";
    obj.age = 20;
    //修改
    obj.name = "张伟雄";
    //查找
    console.log(obj.name)
    //删除
    delete obj.name;
第二种方式：
	//增加
    var obj = {}
    obj["name"] = "zwx" 等价于 var obj = {name:"zwx"} 需要加上双引号。

对象的遍历

1
2
3
4
5
6
7
8
9
var obj = {
           name:"zwx",
           age:21,
           sex:"男"
       }
       for(let key in obj){
           console.log("key: ",key);
           console.log("value: ",obj[key]);
       }

数组的学习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var arr = [1,7,56,6,52]
//1、增加
// arr.push(100);
// //2、删除
// arr.pop()
//3、头部增加数据
// arr.unshift(1000)
//4、splice
// arr.splice(0,3,"ko")
// let arr1 = arr.slice(0,1)
// arr1 = arr.concat(12)
let index = arr.indexOf(56)
console.log(index);

//数组的遍历
第一种方法
var arr = [1,7,56,6,52]
        arr.forEach(function(item,index){
           console.log(item,index)
})
第二种方法
for(let i=0;i<arr.length;i++){
    
}

数组常用方法：
        var arr = [1,7,56,6,52]
        // arr.forEach(function(item){
        //     return item*2
        // })
        //map映射
        let arr1 = arr.map(function(item){
            return "<li>"+item+"</li>";
            pp1.innerHTML = "<p>55</p>"
        })
        //forEach循环 累加，过滤，
        let total = 0
        arr.forEach(item => {
           total += item
        })
        console.log(total);

        let newArr = []
        arr.forEach(item => {
            if(item>10){
                newArr.push(item)
            }
        })
        let newArr1 = arr.filter(item=>{
            return item>10
        })
        let newArr2 = arr.map(item=>{
            return item>10
        })

        console.log(newArr,newArr1,newArr2);

        let arr2 = arr.findIndex(item=>{
            return item == 56
        })
        console.log(arr2);

数组的排序

1
2
3
4
5
6
//return a-b是从小到大排序
//return b-a是从大到小排序
arr.sort(function(a,b){
    return a-b
})
console.log(arr);

数组的去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
第一种方法：使用indexOf获取新数组中是否有
let newArr = []
for(let i=0;i<arr.length;i++){
    if(newArr.indexOf(arr[i])==-1){
        newArr.push(arr[i])
    }
}

第二种方法：利用对象
let obj = {}
let newArr2 = []
for(let i=0;i<arr.length;i++){
    obj[arr[i]] = 0
}
for(let key in obj){
    newArr2.push(key-0)//减0是为了让字符变成整型
}

第三种方法：new Set(ES6语法)
let set1 = new Set(arr)
let newArr3 = Array.from(set1)

字符串的学习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 //字符统计
 let str = "abcabcad";
        let obj = {}
        for(let i=0;i<str.length;i++){
            let key = str[i]
            if(obj[key] == undefined){
                obj[key] = 1;
            }else{
                obj[key]++
            }
        }
        console.log(obj);
//模糊查询
        let input = prompt("请输入值：")
        let str1 = ["aaa","abx","bjh","lk"]
        let str2 = str1.filter(item=>{
            return item.indexOf(input)>-1
        })
        console.log(str2);

正则表达式的学习

1、基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
  // /\d/一个数字 /\d\d/两个数字
      // var reg = /\d/;
      // console.log(reg.test("abc"));
      // console.log(reg.test("12l"));

        // /\D/一个非数字 /\D\D/两个非数字
      // var reg = /\D/;
      // console.log(reg.test("abc"));
      // console.log(reg.test("12l"));
      // console.log(reg.test("1"));

      // /\s/一位空白 (空白 缩进 换行)
      // var reg = /\s/;
      // console.log(reg.test("a bc"));
      // console.log(reg.test("abc"));
      // console.log(reg.test("12l"));
      // console.log(reg.test("1"));

      
      // /\s/一位非空白 (空白 缩进 换行)
      // var reg = /\S/;
      // console.log(reg.test("  "));
      // console.log(reg.test("abc"));
      // console.log(reg.test("12l"));
      // console.log(reg.test("1"));

      //   // /\w/字母 数字 下划线 
      // var reg = /\w\w/;
      // console.log(reg.test("￥%"));
      // console.log(reg.test("abc"));
      // console.log(reg.test("12l"));
      // console.log(reg.test("1_"));

      // /\W/非字母数字下划线 
      // var reg = /\W/;
      // console.log(reg.test("￥%"));
      // console.log(reg.test("abc"));
      // console.log(reg.test("12l"));
      // console.log(reg.test("1_"));

       // .任意内容（换行不算）
       var reg =/./
      console.log(reg.test("￥#$%^&*(%"));
      console.log(reg.test("\n"));
      console.log(reg.test("12l"));
      console.log(reg.test("1_"));


//边界符
      //^开始
      //结尾$
      // var reg = /^\d$/
      // console.log(reg.test("dasf1"));

//限定符 限制重复次数
      // * 代表重复0~多次
      var reg = /\d*/
      console.log(reg.test("aaaf"));
      console.log(reg.test("222vvsdaaaf"));


   // + 代表重复1~多次
      //  var reg = /\d\d+/
      // console.log(reg.test("1aaaf"));
      // console.log(reg.test("222vvsdaaaf"));

      // ? 代表重复0~1
      // var reg = /\d?/
      // console.log(reg.test("1aaaf"));
      // console.log(reg.test("2a2a2vvsdaaaf"));

       // {n} 指定数字
      //  var reg = /\d{3}/
      // console.log(reg.test("1aaaf"));
      // console.log(reg.test("2a342a2vvsdaaaf"));

       // {n，m} 指定数字 大于等于n小于等于m
       var reg = /\d{3,5}/
      console.log(reg.test("1aaaf"));
      console.log(reg.test("2a342a2vvsdaaaf"));
      console.log(reg.test("1254567893jskl"));
      // console.log(reg.exec("1253jskl"));


// 限定符只限定前一个
      // var reg = /c{5}/
      // console.log(reg.test("1aaaf")); 		 			//console.log(reg.test("2a342a2vvscccccccccccdaaaf"));
      // console.log(reg.test("1254567893jskl"));




2、案例分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码加强</title>
</head>

<body>
    <label>输入密码：</label>
    <input type="text" value="" />
    <script>
       var input = document.querySelector("input");
       var reg = new RegExp("^1(86|3[4-9]|5[0-2])\\d{8,}?");
       var reg1 = new RegExp("^(\\w{5,10})@\\w+(\.com|\.net|\.org)$");
       console.log(reg1);

       console.log(reg);
       input.addEventListener("input",function(){
          var value = this.value;
           console.log(reg1.test(value));
       })
         //验证规则：5-10个字符@1个或多个以上字符，以com、net、org结尾
    </script>
</body>

</html>

Promise的学习

1、Promise的基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Promise的基本语法
       var p = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve()
           },2000)
       })
       p.then(()=>{
           //成功调用
           console.log("sucess");
       }).catch(()=>{
           //失败调用
           console.log("fail");
       })