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. ASP.NET MVC项目实现BasePage基类用作ASPX.CS网页继承

    在ASP.NET MVC项目开发,还是需要创建一些Web Page来实现一些功能,如呈现报表等... 但是一旦项目的.ASPX网页太多了,其中的程序代码也会有代码冗余,出现这些情况,我们得需要对这些代 ...

  2. Java虚拟机：内存分配策略

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! Java中提倡的自动内存管理机制最终可以归结为自动化的解决两个问题:给对象分配内存和回收分配给对象的内存.在之前的博客中已经详细讲解了内存 ...

  3. Android JNI 学习(一)：JNI 简介

    JNI 即 Java Native Interface 是 native 编程接口,它允许在Java虚拟机(VM)内运行Java代码与其他编程语言(主要是C和C++)编写的应用程序和库进行交互操作. ...

  4. 《http权威指南》读书笔记6

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  5. Spark基础-scala学习（一、入门）

    Scala解析器的使用 REPL:Read(取值)-> Evaluation(求值)-> Print(打印)->Loop(循环).scala解析器也被称为REPL,会快速编译scal ...

  6. Python档案袋（字符串与二进制的编码与解码)

    字符串 字符串支持像列表似得用下标进行取值操作,和进行切片 字符串格式化: #内容相当于字符串,也可以用双引号包裹 str=''' 111 2222 33333 ---------东小东------- ...

  7. 使用.NET Hardware Intrinsics API加速机器学习场景

    ML.NET 0.6版本刚刚发布不久,我们知道ML.NET代码已经依赖于使用本机代码库的性能矢量化.这是一个重新实现托管代码中现有代码库的机会,使用.NET Hardware Intrinsics进行 ...

  8. intellij idea maven project 无法显示dependencies

    Intellj 自动载入Mave依赖是一个很人性化的功能,但不排除有时候会碰到问题,导致pom文件修改却没有触发自动重新载入的动作或者加载中途出现弱网的情况中断载入的,此时需要手动强制更新依赖. 如下 ...

  9. Java集合框架总结—超详细-适合面试

    Java集合框架总结—超详细-适合面试   一.精简: A.概念汇总 1.Java的集合类主要由两个接口派生而出:Collection和Map,Collection和Map是Java集合框架的根接口, ...

  10. DWR第四篇之对象传参

    1. 本示例在第一篇架构基础上添加代码 2. 首先,在dwr.xml文件里添加对象转换器 3. 编写Person实体类 package com.skyer.vo; import java.util.A ...