js 操作class属性、事件、传递机制、表单事件、字符串常用api

classList 操作class属性

add() : 添加class属性
h1.classList.add('red');
contains() : 判断是否有xx属性
console.log(h1.classList.contains('red'));
replace(‘原属性’,’新属性’) : 替换
h1.classList.replace('red','blue');
remove() : 移除样式
h1.classList.remove('blue');
toggle() : 自动切换,如果有这个样式就去掉,如果没有就加上
h1.classList.toggle('blue');

事件 : 1.名称 2.目标 3.方法

1.on+type : 添加和取消

const btn =document.querySelector('button');
        // 事件添加
        btn.onclick = function(){
            // event : 预定义对象,保存了绑定到当前事件主体上的事件对象详情
            console.log(event);
            alert('hello');
        }
        // 事件移除
        btn.onclick = null;

2.addEventListener(事件名称,事件回调方法,触发阶段) : 事件监听

const show = function() {
        console.log(event);
    }
    const btn2 = document.querySelector('button:nth-of-type(2)');
    btn2.addEventListener('click', show, false);
    // 事件取消
    // 使用了事件监听时,如果需要取消事件,就不能用回调函数来声明事件的方法
    btn2.removeEventListener('click', show, false);

3.dispatchEvent() : 事件派发
4.定时器 1.setTimeout(执行的操作,时间) 单次执行 2.setInterval() 多次执行

const btn3 = document.querySelector('button:nth-of-type(3)');
    /*
    1.创建一个自定义事件
    2.将这个元素自动派发给指定的元素并触发它
    */
    let i = 0;
    btn3.addEventListener('click', function() {
        if (i >= 10) {
            return false;
        } else {
            i += 0.5;
            console.log(`已经赚了${i}元`);
        }
    }, false);
    // 创建一个自定义事件 : 可以基于预定义事件
    const myEvent = new Event('click');
    btn3.dispatchEvent(myEvent);
    // 定时器 分两种
    // 1.
    // setTimeout(执行的操作,时间单位毫秒)  单次执行
    setTimeout(function(){
        btn3.dispatchEvent(myEvent);
    },5000)
    // 2.
    // setInterval
    let timer =  setInterval(function(){
        btn3.dispatchEvent(myEvent);
    },3000);
    // 清空定时器 clearInterval()
    if(i>=10){
        clearInterval(timer);
    };

事件传递机制

事件对象 event

console.log(event);

事件主体 : 把这个事件绑定到了那个元素上
console.log(event.currentTarget);
事件目标
console.log(event.target);

事件冒泡 : 当前元素的事件会向上(父级)进行传递,当父级有同名事件时会自动触发

<!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>Document</title>
</head>
<body>
    <ul>
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
    </ul>
    <script>
        const li = document.querySelectorAll('li');
        li.forEach((li) => li.onclick = () =>console.log(event.currentTarget));
        // li的父级ul
        document.querySelector('ul').onclick = () =>console.log(event.currentTarget);
        // ul的父级body
        document.querySelector('body').onclick = () =>console.log(event.currentTarget);
        // body的父级html
        document.documentElement.onclick = () =>console.log(event.currentTarget);
        // html的父级document
        document.onclick = () =>console.log(event.currentTarget);
        // document的父级window
        window.onclick = () =>console.log(event.currentTarget);
    </script>
</body>
</html>

阻止冒泡 : stopPropagation()

const li = document.querySelectorAll('li');
li.forEach((li) => li.onclick = () =>console.log(event.currentTarget) + event.stopPropagation());

事件委托/事件代理 : 将子元素的事件,委托在父元素上触发,以简化代码

const ul = document.querySelector('ul');
ul.onclick = () => console.log(event.target.dataset.index) + console.log(event.currentTarget);
// 事件目标 target : li    事件的触发者
// 事件主体 currentTarget : ul  事件的绑定者/事件的拥有者

表单事件

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <form action="login.php" method="post" id="login">
      <label class="title">用户登录</label>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" value="" autofocus />
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" />
      <button name="submit" onclick="check(this)">登录</button>
    </form>
  </body>
</html>

禁用button的直接提交
1. 修改button类型 : type=”button”
  <button type="button" name="submit" onclick="check(this)">登录</button>
2. 取消form表单元素的默认提交行为
  <form action="login.php" method="post" id="login" onsubmit="return false"></form>
3. 禁用提交按钮的默认行为
```
function check(ele){
event.preventDefault();
}
```
非空验证

每一个表单控件 input, button, select…都有一个属性form,是当前表单的引用

function check(ele) {
    console.log(ele.form);
    // email
    let email = ele.form.email;
    // password
    let password = ele.form.password;
    if (email.value.length === 0) {
      alert('邮箱不能为空');
      email.focus();
      return false;
    } else if (password.value.length === 0) {
      alert('密码不能为空');
      password.focus();
      return false;
    }
}

字符串常用api

1.根据索引获取值 : str[0]/str.charAt(1)

console.log(str[0]);

console.log(str.charAt(1));

2.根据值获取索引 : indexOf(p)/scarch(p)

console.log(str.indexOf(p));

console.log(str.scarch(p)); 没有返回-1

3.字符串拼接 : concat(‘value’)

通常用 ‘+’ 或模板字面量(反引号) ``

console.log(str.concat('value')); //逗号分割

console.log(str.concat('(','value',')'));

4.字符串替换 : replace(‘需要修改的值’,’内容’)

console.log(str.replace('php','value'));

5.从左侧截取字符串 : slice(开始位置0,结束位置3) / 右侧 substr(开始位置0,截取字符数量3)

支持负数,最右边是-1,以此向左类推 substr(-3,3) 必须从左向右获取

6.大小写

小写转成大写：toUpperCase()/toLocaleUpperCase()
大写转成小写：toLowerCase()/toLocaleLowerCase()

首字母大写 : str.slice(0,1).toUpperCase() +str.slice(1).toLowerCase();

7.去掉字符串前后的空格 : trim()

console.log(str.trim());

8.将字符串分割成数组 : split()

console.log(str.split('h'));