前端基础 -- WebAPI快速入门

Moyo203

已于 2024-04-19 11:43:14 修改

阅读量202

点赞数 1

分类专栏：前端文章标签： javascript

于 2020-03-06 16:34:50 首次发布

本文链接：https://blog.csdn.net/weixin_44289670/article/details/104677853

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、开关思想

 let bl = true;
        btn.onclick = function () {
            // 三元表达式： 条件 ? true执行1 : false执行2;
            // console.log(bl, bl ? '隐藏密码' : '显示密码');
            btn.value = bl ? '隐藏密码' : '显示密码';
            pwd.type = bl ? 'text' : 'password';
            // 3. ! 取反运算符，先把 bl 的值取反，再赋值给自己
            bl = !bl;
        }

2、排他思想

// 事件处理函数内部实现排他思想 !!!
//  1. 排除清空同级所有样式
//  2. 确立当前元素样式
 inputs.forEach(function (item) {
            item.onclick = function () {
                // 事件处理函数内部实现排他思想 !!!
                //  1. 排除清空同级所有样式
                inputs.forEach(function (item2) {
                    item2.className = '';           // 清空了所有类名
                });
                //  2. 确立当前元素样式
                item.className = 'active';          // 自己添加了类名
            }
        });

3、元素的操作标签属性的方法

获取属性`getAttribute()`一个参数：属性名作为参数有返回值
设置属性`setAttribute()`两个参数：属性名 和 属性值undefined
移除属性`removeAttribute()`一个参数：属性名作为参数undefined
是否有属性`hasAttribute()`一个参数：属性名作为参数有返回值，布尔类型

let bl = true;
	btn.onclick = function(){
	btn.setAttribute('value', bl? '隐藏密码' : '显示密码')；
	pwd.setAttribute('type', bl? 'text' : 'password');
	bl=!bl;
}

4、classList 对象操作类名

添加类`element.classList.add()`
移除类`element.classList.remove()`
切换类`element.classList.toggle()`
替换类`element.classList.replace()`
是否包含类`element.classList.contains()`

item.classList.remove('active')//移除类
item.classList.add('active')//添加类

5、创建标签三种方式

document.createElement('标签名')
element.innerHTML = '标签字符串';
document.write('标签字符串');

document.createElement(‘标签名’)` - 常用于创建一个新的标签，并后添加到页面的情况，如：消息发布，聊天
element.innerHTML - 适用于快速创建一个默认列表或内容，后追加就不太合适，因为 innerHTML 会覆盖原内容。
document.write('标签字符串') - 了解即可，因为只能在 body 后添加内容而已，局限性太大。

6、增删改查节点

removeChild()` 移除子节点
replaceChild()` 替换子节点
insertBefore()` 插入节点
cloneNode() 克隆节点

<body>

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<p id="demo">点击按钮来删除列表中的首个项目。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>

</body>

7、节点查找元素

父级 parent ：
parentNode===parentElement
子级 children ：
firstElementChild：第一个孩子
lastElementChild：最后一个孩子
childNodes 子元素集合
children 子元素集合
兄弟关系 sibling ：
nextSibling 下一个子节点
nextElementSibling 下一个子元素
previousSibling 上一个子节点
previousElementSibling 上一个子元素

8、鼠标事件类型和对象

click鼠标单击
dblclick鼠标双击
mouseenter鼠标移入
mouseleave鼠标移出
mouseover鼠标移入
mouseout鼠标移出
mousemove鼠标移动
mousedown鼠标按下
mouseup鼠标弹起
 divs[0].onclick = function () {
            alert('鼠标单击');
        }

mouseover 和 mouseout 是早期就有的语法，但是如果分区内部有元素遮挡了指针，会快速触发一次移出，再触发移入。
mouseenter 和 mouseleave 是后期添加的更好的鼠标移入和移出事件类型，避免以上元素内移动多次触发的小问题。

clientX鼠标在可视区的 X 轴坐标
clientY鼠标在可视区的 Y 轴坐标
 document.onmousemove = function (e) {
       console.log('鼠标移动了', 'X:', e.clientX, 'Y:', e.clientY);
}  //鼠标的坐标

9、键盘事件类型和对象

keydown键盘按下
keyup键盘弹起
keypress键盘按下并弹起
 document.onkeydown = function () {
            console.log('键盘某个按键被按下了');
        }

        document.onkeyup = function () {
            console.log('键盘某个按键被弹起了');
        }

keyCode获取键盘按键编码重点
ctrlKey是否同时按了组合键 Ctrl了解
altKey是否同时按了组合键 Alt了解
shiftKey是否同时按了组合键 Shift了解

textarea.onkeyup = function (e) {
            console.log('键盘事件触发了', e);
            // 当用户按下回车键的时候，发布新闻
            if (e.keyCode === 13) {
                alert('你按了回车键');
            }
        }

10、表单事件

focus获取焦点
blur失去焦点blur 模糊就是失去焦点
submit提交表单后面 AJAX 阶段要用到

input.onfocus = function () {
            tips.style.display = 'block';
        }
input.onblur = function () {
            tips.style.display = 'none';
        }

11、对象与字符串的相互转换

将对象转换为字符串 JSON.stringify(obj);
将字符串转换为对象 JSON.parse(json);

12、localStorage

setItem()存放数据
 对象通过 setItem() 把数据保存到本地存储中
        // 由于保存的时候自动隐式转换成字符串不会保留数据，通过 JSON.stringify() 转成 JSON 字符串再保存 localStorage.setItem('obj', JSON.stringify(obj));

parse()取出数据
 const relust = JSON.parse(localStorage.getItem('obj'));

getItem()`获取一条数据

`removeItem()` 删除数据
`localStorage.removeItem('money');`

`clear()`清空所有数据

 // 获取 URL 的 href 信息
location.href = 'https://www.baidu.com/';

search设置或返回从问号 (?) 开始的 URL（查询部分）

reload()刷新页面，重新加载当前文档

存数据到本地存储

 const obj = {
            'name': '小明',
            age: 10,
            gender: '男',
            single: true,
            sayHi: function () {
                alert('我能sayHi');
            }
        }
        // ls 对象通过 setItem() 把数据保存到本地存储中
        // 由于保存的时候自动隐式转换成字符串不会保留数据，通过 JSON.stringify() 转成 JSON 字符串再保存
        localStorage.setItem('obj', JSON.stringify(obj));

从本地存储取出数据

  const relust = JSON.parse(localStorage.getItem('obj'));

13、定时器

多次定时器

	const timerId = setInterval(定时执行的函数地址, 毫秒时间);
 	例如:setInterval(times, 1000);

清除多次定时器：clearInterval(定时器启动时候的编号);

单次定时器

	const timerId = setTimeout(定时执行的函数地址, 毫秒时间);
	例如：const timerId = setTimeout(function () {
            document.body.style.backgroundColor = kits.randomHexColor();
        }, 1000);

清除单次定时器：clearTimeout(定时器启动时候的编号);

 优先级：从上往下 外部的console.log>promise中的console.log>promise中的then>外部的setTimeout>promise中的setTimeout

14、获取元素所有计算样式

const result = window.getComputedStyle(元素);
返回值 result 是一个对象，对象记录元素所有的样式，包括默认样式

例如：   console.log(result.width);          // 点语法获取宽度

 const div = document.querySelector('div');
 div.addEventListener('click', function () {
            // 获取 div 元素的宽度
            //      getComputedStyle()    获取元素的所有计算样式
            //      ['width']             获取一个宽度属性 通过 .width 也可以
            //      parseInt()            把带单位的字符串转换成数值型
        let boxWidth = parseInt(getComputedStyle(div)['width']);        // 方括号获取宽度
            // let boxWidth = parseInt(getComputedStyle(div).width);        // 点语法获取宽度
            // 值累加
            boxWidth += 10;
            // 把累加的值赋值给样式，记得添加会单位 px
            div.style.width = boxWidth + 'px';
        });

15、移动端触摸事件

touchstart触摸开始
touchmove触摸移动手指在屏幕上移动
touchend触摸结束

例如
box.addEventListener('touchstart', function (event) {
            console.log('touchstart触摸被触发了', event);
        });

第三方手势库

fastclick.js ，主要封装快速触摸，修改了封装了快速触摸事件。
zepto.touch.js ,需要依赖 zepto.js , 需要引入两个文件，封装了快速触摸，滑动系列。
AlloyTouch.js，国内腾讯团队开源的，封装了快速触摸，滑动系列。

Moyo203

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端基础 -- WebAPI快速入门

1、开关思想 let bl = true; btn.onclick = function () { // 三元表达式：条件 ? true执行1 : false执行2; // console.log(bl, bl ? '隐藏密码' : '显示密码'); btn.value = bl ? '隐藏密码' : '显...
复制链接

扫一扫