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 系列博客（五）的更多相关文章

  1. JavaScript 系列博客（一）

    JavaScript 系列博客(一) 前言 本系列博客为记录学习 JavaScript 的学习笔记,会从基础开始慢慢探索 js.今天的学习笔记主要为 js 引入.定义变量以及 JavaScript 中 ...

  2. JavaScript 系列博客（七）

    JavaScript 系列博客(七) 前言 本篇博客介绍页面节点概念.文档结构以及如何使用 js 操作文档节点还有事件 target 以及 BOM 操作. 节点 dom与dom属性 // DOM: 文 ...

  3. JavaScript 系列博客（六）

    JavaScript 系列博客(六) 前言 本篇博客介绍 js 操作高级,通过 js 获取标签的全局属性.设置标签的全局属性,以及事件的绑定与取消.js 盒模型与 js 动画. 对象使用的高级 对象的 ...

  4. JavaScript 系列博客（四）

    JavaScript 系列博客之(四) 前言 本篇介绍 JavaScript 中的对象.在第一篇博客中已经说到 JavaScript 是一种''对象模型''语言.所以可以这样说,对象是 JavaScr ...

  5. JavaScript 系列博客（三）

    JavaScript 系列博客(三) 前言 本篇介绍 JavaScript 中的函数知识. 函数的三种声明方法 function 命令 可以类比为 python 中的 def 关键词. functio ...

  6. JavaScript 系列博客（二）

    JavaScript 系列博客(二) 前言 本篇博客介绍 js 中的运算符.条件语句.循环语句以及数组. 运算符 算术运算符 // + | - | * | / | % | ++ | -- consol ...

  7. JavaScript学习系列博客_1_JavaScript简介

    这个系列博客主要用来记录本人学习JavaScript的笔记,从0开始,即使有些知识我也是知道的.但是会经常忘记,干脆就写成博客,没事的时候翻来看一看,留下一点学习的痕迹也好.可能写博客的水平暂时不太好 ...

  8. 窥探Swift系列博客说明及其Swift版本间更新

    Swift到目前为止仍在更新,每次更新都会推陈出新,一些Swift旧版本中的东西在新Swift中并不适用,而且新版本的Swift会添加新的功能.到目前为止,Swift为2.1版本.去年翻译的Swift ...

  9. Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

    前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...

随机推荐

  1. Python开发——8.模块

    一.模块 1.模块 (1)定义:一个.py文件就是一个模块 (2)原因:为了防止程序代码越来越长,对函数进行分组放到不同的文件夹里. (3)优点:提高代码的可维护性:模块编写完毕可以被别人引用,也可以 ...

  2. 20155326《网路对抗》Exp8 WEB基础实践

    20155326<网路对抗>Exp8 WEB基础实践 实践内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写 ...

  3. 安装virtualbox出现2503、2502的错误提示解决方法

    安装virtualbox右键选择以管理员的身份打开即可

  4. 华为SSH认证配置

    [设备型号]华为switch-S5700s ————1: [SW1] rsa/dsa local-key-pair create #创建本地密钥对 The key name will be: SW1_ ...

  5. Django开发目录

    Django开发[第一章]:Django基础和基本使用 Django开发[第二章]:Django URLConf 进阶 Django开发[第三章]:Django View 进阶 Django开发[第四 ...

  6. C#算法与数据结构之线性结构

    线性结构是什么? 线性结构是一种数据结构,它有一对一的关系,就像一个长对,一个接一个,特点是,除第一个元素和最后一个元素外,其它元素前后只有一个元素. 简单示例1: static void Main( ...

  7. 背水一战 Windows 10 (113) - 锁屏: 将 Application 的 Badge 通知和 Tile 通知发送到锁屏, 将 secondary tile 的 Badge 通知和 Tile 通知发送到锁屏

    [源码下载] 背水一战 Windows 10 (113) - 锁屏: 将 Application 的 Badge 通知和 Tile 通知发送到锁屏, 将 secondary tile 的 Badge ...

  8. 谈一款MOBA类游戏《码神联盟》的服务端架构设计与实现（更新优化思路）

    注:本文仅用于在博客园学习分享,还在随着项目不断更新和完善中,多有不足,暂谢绝各平台或个人的转载和推广,感谢支持. 一.前言 <码神联盟>是一款为技术人做的开源情怀游戏,每一种编程语言都是 ...

  9. apollo入门demo实战（二）

    1. apollo入门demo实战(二) 1.1. 下载demo 从下列地址下载官方脚本和官方代码 https://github.com/nobodyiam/apollo-build-scripts ...

  10. [转载]PHP中PSR-[0-4]规范

      PHP是世界上最伟大的语言,这一点是毋庸置疑的吧.哈哈哈哈哈哈 .这个霸气的开头不错!(^__^) 但是正是因为伟大,所以用的人也就多了,人一多,再牛逼再伟大的东西,都会产生问题,逐渐就造成了很多 ...