Home > List of blog posts > 操作class属性、事件、传递机制、表单事件、字符串常用api

Blogger Information

Blog 19

fans 0

comment 0

visits 8370

Special Recommendation

More>

Related recommendations

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'));

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdown语法与emmet语法

2022-08-02 15:05:07