JavaScript 系列博客

Posted Eurekaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 系列博客相关的知识,希望对你有一定的参考价值。

javascript 系列博客(五)

前言

本篇博客学习 js 选择器来控制 css 和 html、使用事件(钩子函数)来处理事件完成后完成指定功能以及js 事件控制页面内容。

js 选择器

在学习 js 选择器前需要了解几个概念。

  • 节点(一):在文档(document)中出现的所有内容都是 document 中的节点。
  • 节点(二):标签节点(元素 element) | 注释节点 | 文本节点 | <!doctype>节点。

js 选择器是将 js 与 html 建立起连接的桥梁,就好比 css 选择器是 css 与 html 的桥梁,不过js 中将 html 标签称为元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js选择器</title>
    <style>
        #d {
            color: red;
        }
    </style>
</head>
<body id="bd">
    <!--注释-->
    <div id="d" class="dd">我是ddd111</div>
    <div id="d" class="dd">我是ddd222</div>

    <div class="sup1">
        <div id="div"></div>
    </div>
    <div class="sup2">
        <div id="div"></div>
    </div>
</body>
</html>

通过 id 名进行匹配

<script>
    console.log(d); // 两个都可以匹配到
    </script>

通过 getElement

所有显示在页面中的内容都是属于文档(document)对象的内容,存放在文档中。

console.log(document)
// id 获取
getElementById(‘id 名‘); // 只能由 document 来调用

// class 获取
getElementByClassName(‘class 名‘); // 可以由 document 以及所有父级调用

// tag 获取
getElementByTagName(‘标签名‘); // 可以由 document 以及所属父级调用

querySelector

// 获取第一个满足要求的目标
querySelector()

// 获取所有满足要求的目标
querySelectorAll()

// 1. 参数:采用的为 css 选择器语法
// 2. 可以由 document 以及父级来调用
// 3. 对 id 检索不严谨,慎用 id 选择器

js 操作页面内容

  • 文本内容
box.innerText
// 可以设置,也可以直接获取值
  • 标签内容
box.innerHTML
// 可以设置,也可以获取值,能解析 html 语法代码

box.outerHTML
// 获取包含自身标签信息的所有子内容信息
  • 样式
/ box.style.样式名  ==> 可以设值,也可以获取,但操作的只能是行间式

// getComputedStyle(box, null).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式 与 计算后样式)

// 注: 获取计算后样式,需要关注值的格式
  • 页面标签全局属性操作
ele.getAttribute("alert");
// 获取页面标签ele的alert全局属性的值, 如果没有该全局属性值为null

ele.setAttribute("attr_key", "attr_value");
// 页面标签ele已有该全局属性,就是修改值, 没有就是添加该全局属性并赋相应值
// 注: 一般应用场景, 结合css的属性选择器完成样式修改

事件

// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
// 指定功能: 就是开发者根据实际需求完整相应的功能实现

// 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
// 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)

// 获取页面标签是前提
var div = document.querySelector(‘.div‘);
// 钩子条件: 双击 = 指定功能(自身背景颜色变红)
div.ondblclick = function () {
    this.style.backgroundColor = ‘red‘;
}

事件的绑定

// 第一种
box.onclick = function(){}
// 只能绑定一个实现体, 如果有多次绑定, 保留最后一次
// box.onclick = null来取消事件的绑定

// 第二种
var fn = function() {}
box.addEventListener(‘click‘, fn)
// 能绑定多个实现体, 如果有多次绑定, 按顺序依次执行
// box.removerEventListener(‘click‘, fn)来取消事件的绑定
// 了解: 第三个参数决定冒泡顺序(子父级谁先相应事件)

事件对象

// 系统回调事件函数时, 传递了一个 事件(event) 实参
// 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
box.onclick = function(ev){
    // 使用事件对象
    // 特殊按键 eg: ev.altKey: true | false
    // 鼠标触发点: ev.clientX | ev.clientY
    
    // 取消冒泡
    ev.cancelBubber = true;
    
    // 取消默认事件
    return false;
}

以上是关于JavaScript 系列博客的主要内容,如果未能解决你的问题,请参考以下文章

0003.深入理解JavaScript系列学习:编写高质量JavaScript代码的基本要点

JavaScript 系列博客

JavaScript 系列博客

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

为 Blogger 上的博客格式化代码片段 [关闭]