本地存储,元素属性,正则

佳佳830
108 阅读1分钟

console.log和console.dir 的区别

<body>
    <button></button>
    <script>
      /* 
      区别在于  
      有时候 我们使用console.log 打印dom元素的时候 输出一个标签格式 而不是一个对象格式
      console.dir 输出dom元素的元素 总是 对象格式
       */
      const btn=document.querySelector("button");
      // console.log(btn);
      console.dir(btn);
    </script>
  </body>

本地存储

loccalStorage

1650098702541

1650098736829

1650098750388

 <script>
      // 存储日期
      // localStorage.setItem("自定义",值-必须是字符串的格式)
       localStorage.setItem("date","二〇二二年四月十五日 09:06:48")

      // 获取它
      const date=localStorage.getItem("date");
      console.log(date);
    </script>

    <script>
      /* 
      本地存储 
      1 存  localStorage.setItem(key,value)
      2 取  localStorage.getItem(key)
      3 删除一个 localStorage.removeItem(key)
      4 清空 localStorage.clear(); 
       */
      for (let index = 0; index <100; index++) {
         localStorage.setItem(`abc${index}`,index);
       }
      localStorage.clear(); 

    </script>

1650098791635

sessionStorage

1650099444092

    <script>
      /* 
      本地存储的技术 sessionStorage  会话（打开页面到关闭页面之间过程 一次会话  ajax node）存储
      登录的时候 
      它的用法和 localStorage 用法一样 
      区别只有一个 
      sessionStorage 关闭页面后 数据就丢失 
      localStorage 除非是用户主动删除 否则一直存在 直到天荒地老
       */

      //  存数据
      // sessionStorage.setItem("ss",123);
      //  取数据
      // console.log(sessionStorage.getItem("ss"));
      // 删除一个
      // sessionStorage.removeItem("ss")
      // 清空
      // sessionStorage.clear();
    </script>

元素属性

固有属性

标签天生自带的属性 比如class id title等.可以直接使用点语法操作

自定义属性

1650099723239

 <body>
    <a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >

    <script>
      // 获取 dom元素的固有属性  通过点语法来获取
      const a = document.querySelector('a');
      // 获取固有属性
      // console.log(a.href);
      // console.log(a.id);

      // 直接修改
      // a.href="http://www.qq.com";
      // a.id="top";

      // 自定义属性 不能直接通过点语法来获取和设置
      // 获取 getAttribute("属性名")
      // console.log(a.hello);
      // console.log(a.aa);
      // console.log( a.getAttribute("hello") );
      // console.log( a.getAttribute("aa") );

      // 设置 setAttribute(key,value)
      // a.setAttribute("hello","123");

      // 删除掉属性 removeAttribute(key)
      // a.removeAttribute("hello");

      //  自定义属性 -> h5建议的 自定义属性
      // 属性的时候 data-xxx 开头
      //  获取的时候  a.dataset.xxx
      //  设置  a.dataset.index = 3;

      // console.log(a.dataset.index);
      // a.dataset.index = 3;

      /* 
      
      小结 
      标签的属性 有两种分为
      1 固有属性  比如 id href src     点语法的方式获取和设置 方便
      2 自定义属性
        1 随机自己瞎命名  
          <a  abc="123" >  
            获取 （getAttribute） 设置 setAttribute(key,value)  删除   removeAttribute(key)
        2 h5建议 data- xxx
          <a  data-abc="123" >  
            获取（a.dataset.abc）  设置（a.dataset.abc=456）;
      3 最强大是  （getAttribute）  setAttribute removeAttribute 
            上述的这个方式，可以获取到任意的属性（固有属性和h5建议的自定义属性）
            <a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >
      */
    //  console.log( a.getAttribute("data-index") );
    //  console.log( a.getAttribute("id") );
    //  console.log( a.getAttribute("href") );
    //  console.log( a.getAttribute("hello") );
    //  console.log( a.getAttribute("aa") );
    </script>
  </body>

高阶函数

 <body>
    <button>按钮</button>
    <script>
      /*高阶函数
      把一个函数 看成是个普通数据，应用在 参数 或者返回值  技术  
       */
        function f1(callback) {
         callback();
       }
        function f2() {
          console.log("我就是高阶函数");
       }
        f1(f2);// f2 当成是一个普通的参数来使用（形参来使用）
      // setInterval(f2,1000);// 把f2 当成是一个普通参数  传递给别人使用
      //  const btn=document.querySelector("button");
      //  btn.addEventListener("click",f2);// f2 也是高阶函数
    </script>

浏览器渲染页面的流程

1650102488020

重排,重绘

1650102510018

1650102525165

事件

事件的绑定和取消绑定

 <body>
    <button>点击我 输出时间</button>
    <script>
       const btn = document.querySelector('button');
      // // 普通函数
       function func() {
         console.log('2022-04-15 14:32:26');
       }
       function func2() {
         console.log("func2");
       }

      // // 绑定事件
       btn.addEventListener('click', func);

      // // addEventListener 可以绑定多个同名事件
       btn.addEventListener('click', func2);

      setTimeout(function () {
      //   // 取消这个事件绑定
         btn.removeEventListener('click', func);
       }, 5000);


      /* 
      1 addEventListener 可以绑定多个同名事件
      2 removeEventListener 可以取消对应的事件类型和事件处理函数

      3 无法取消 addEventListener 事件 对应的匿名函数 
      
       */

       const btn=document.querySelector("button");
       
       btn.addEventListener("click",function () {
         console.log("你好");
       })

      //  想要取消 这个 输出你好的行为无法取消匿名函数
    //  btn.removeEventListener("click",???);

    </script>
  </body>

事件的三个阶段

1650100843736

字符串

转大写toUpperCase()

<script>
       let msg = 'aaksfkjfaj';
       console.log(msg.toUpperCase());
    </script>

转小写 toLowerCase()

<script>
let msg = 'AJSJAEKJE';
       console.log(msg.toLowerCase());
    </script>

转数组 str.split('')

<script>
 const str="abcdefg"; //=> ["a","b","c","d","e","f","g"]
      // // split("")   分割
       console.log(str.split(""));
     const strr = 'a-b-c-d-e-f-g'; // ["a","b","c","d","e","f","g"]
      console.log(strr.split('-'));

       console.dir(strr);

 </script>

数组

转字符串

<script>
      const arr = ['a', 'b', 'c', 'd'];
      console.log(arr.join('')); // join 数组转字符串
       console.log(arr.join('-')); // a-b-c-d 数组转字符串
     </script>

拼接

  <script>
// 连接  数组和数组之间连接
       const arr1 = ['1', '2', '3'];
       const arr2 = ['a', 'b', 'c'];
      // 将两个数组合并成一个数组
       console.log(arr1.concat(arr2));

      //字符串也有一个 concat 也是表示合并
      const str1 = '123';
      const str2 = 'abc';
      console.log(str1.concat(str2));// 很少用  有什么用？ 当你的键盘 + 键坏  使用它 
      console.log(str1 + str2); // 更加简单好理解
    </script>

正则表达式

1650101542313

作用

1650101559396

语法

1650101624039

  <script>
      const str = `金钱对你意味着什么？你有梦想吗？等等等等。一下子都让我陷入了沉思。真的需要好好的想想，然后写下来`;
      const reg = /刘同学/;
      console.log(reg.test(str)); // 有 返回true 没有返回false
    </script>

1650101670035

两种语法的区别

test 方法,用于判断是否有符合规则的字符串,返回的是布尔值,找到返回true,否则返回false

exec方法用于检索符合规则的字符串,找到返回数组,否则返回null

元字符

1650101853250

边界符

1650101873541

<script>
      const str = `金来123`;
      // const reg = /梦想/; // 只要字符串中 包含有 梦想  返回true
      // 你检测的字符串 必须要以 “梦” 开头  以 “想” 结尾
      // const reg = /^金来$/; // 只能匹配 "金来"
      const reg = /^金来/; // `金来123`;
      // const reg = /金来$/; //  `1234323金来`; 
      // console.log(reg.test(str));
      /* 
      边界符 
      开头 ^ 
      结尾 $ 
       */

    </script>

量词

1650101889711

<script>
      // const str="路飞";
      // const reg=/路飞/;
      // console.log(reg.test(str));

      //  *  表示 放在它前面那一个字符 可以出现0次或者多次
      // /^路*$/   => ""，  路，路路，路路路
      // console.log(/^路*$/.test('')); // true
      // console.log(/^路*$/.test('路')); // true
      // console.log(/^路*$/.test('路路')); // true
      // console.log(/^路*$/.test('路路路')); // true

      // + 表示 放在它前面那一个字符 可以出现1次或者多次
      // console.log(/^路+$/.test(''));
      // console.log(/^路+$/.test('路'));
      // console.log(/^路+$/.test('路路'));
      // console.log(/^路+$/.test('路路路'));

      // ？ 表示出现0次或者1次
      // console.log(/^路?$/.test(''));// true
      // console.log(/^路?$/.test('路')); // true
      // console.log(/^路?$/.test('路路')); // false
      // console.log(/^路?$/.test('路路路')); // false

      // {n} 放在它前面的那一个字符 出现n次
      // console.log(/^路{2}$/.test('')); // false
      // console.log(/^路{2}$/.test('路')); // false
      // console.log(/^路{2}$/.test('路路')); // true
      // console.log(/^路{2}$/.test('路路路')); // false

      // {n,} 放在它前面的字符 最少出现n次
      // console.log(/^路{2,}$/.test('')); // true
      // console.log(/^路{2,}$/.test('路')); // true
      // console.log(/^路{2,}$/.test('路路'));// true
      // console.log(/^路{2,}$/.test('路路路')); // true

      // {n,m} 放在它前面的字符 最少出现n次，最大是m次
      console.log(/^路{0,2}$/.test('')); // true
      console.log(/^路{0,2}$/.test('路'));  // true
      console.log(/^路{0,2}$/.test('路路')); // true
      console.log(/^路{0,2}$/.test('路路路'));  // false 

    </script>

字符

1650101970969

1650101959518

1650102337353

    <script>
      //  . 表示除了（换行符之外）任意字符
      // console.log(/路/.test('飞')); // false
      // console.log(/./.test('飞')); // true
      // console.log(/路.飞/.test('路大飞')); // true
      // console.log(/路.飞/.test('路小飞')); // true
      // console.log(/路.飞/.test('路中飞')); // true
      // console.log(/路.飞/.test('路不飞')); // true
      // console.log(/路.飞/.test('路飞')); // false
      // console.log(/路.飞/.test('路 飞')); // false

      // \d 表示数字
      // console.log(/\d/.test("路飞"));// false

      // console.log(/\d/.test("1路飞"));// true
      // console.log(/\d/.test("路3飞"));// true

      // \D 不是数字之外的任意1个字符
      // console.log(/\D/.test("123"));// false
      // console.log(/\D/.test("12a3"));// true
      // console.log(/\D/.test("12a3"));// true

      // \w  字母、数字、下划线
      // console.log(/\w/.test("123"));//  true
      // console.log(/\w/.test("%%"));//  false
      // console.log(/\w/.test("%1%"));//  true
      // console.log(/\w/.test("%a%"));//  true
      // console.log(/\w/.test("%_%"));//  true

      // \W  除去了 字母 、数字、下划线 之外字符
      // console.log(/\W/.test("123"));// false
      // console.log(/\W/.test("1%23"));// true

      // \s  匹配空格
      // console.log(/\s/.test("123"));// false
      // console.log(/\s/.test("1 23"));// true

      // \S 除了空格之外的字符
      // console.log(/\S/.test('123'));// true
      // console.log(/\S/.test(' '));// false
      // console.log(/\S/.test('   '));// false
    </script>


 <script>
      // [ab]  => 可以匹配 a  或者 b
      // console.log(/[ab]/.test('a'));// true
      // console.log(/[ab]/.test('b'));// true
      // console.log(/[abc]/.test('c'));// true

      // 表示 a-z 任意的一个字母
      // console.log(/[a-z]/.test('c'));// true
      // console.log(/[a-z]/.test('d'));// true
      // console.log(/[a-z]/.test('123'));// false
      // console.log(/[a-d]/.test('a'));// true
      // console.log(/[a-d]/.test('g'));// false

      // 0-9 任意的一个数字
      // console.log( /[0-9]/.test("1") );// true
      // console.log( /[0-9]/.test("2") );// true
      // console.log( /[0-9]/.test("0") );// true

      // A-Z
      // console.log(/[A-Z]/.test("a"));// false
      // console.log(/[A-Z]/.test("B"));// true

      // 同时满足 0-9a-zA-Z
      console.log(/[0-9a-zA-Z]/.test('1'));// true
      console.log(/[0-9a-zA-Z]/.test('a'));// true
      console.log(/[0-9a-zA-Z]/.test('A'));// true
      console.log(/[0-9a-zA-Z]/.test(' '));// false
    </script>

      // 就想要表示. 本身   加一个反斜杠

修饰符

1650102391558

1650102402977

avatar
文章
阅读
粉丝