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. Z-Stack - Modification of Zigbee Device Object for better network access management

    写一份赏心悦目的工程文档,是很困难的事情.若想写得完善,不仅得用对工具(use the right tools),注重文笔,还得投入大把时间,真心是一件难度颇高的事情.但,若是真写好了,也是善莫大焉: ...

  2. JAVA数据结构之链表

    JAVA数据结构之链表 什么是链表呢? 链表作为最基本的数据结构之一,定义如下: 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的. 简单来说呢,链 ...

  3. spak数据倾斜解决方案

    数据倾斜解决方案 数据倾斜的解决,跟之前讲解的性能调优,有一点异曲同工之妙. 性能调优中最有效最直接最简单的方式就是加资源加并行度,并注意RDD架构(复用同一个RDD,加上cache缓存).相对于前面 ...

  4. iOS 数据归档----温故而知新

    #import "StudyViewController.h" #import "person.h" @interface StudyViewControlle ...

  5. 6-使用requests库封装类处理get/post请求

    1.request安装 1)pip安装,直接pip install requests 2)下载离线包安装,加压后,命令行进入路径,执行python setup.py install 2.创建工程 注意 ...

  6. html-有趣的标签-会移动的文字

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. [转] KVM虚拟化技术生态环境介绍

    KVM虚拟化技术生态环境介绍 http://xanpeng.github.io/wiki/virt/kvm-virtulization-echosystem-intro.html kvm和qemu/q ...

  8. 数值计算 的bug：（理论）数学上等价，实际运行未必等价

    1. 计算表达式的值(lambda 表达式) fun1 和 fun2 理论上是等价的:同样的输入情形下,两种输出结果不一致. # fun1 定义 fun1=lambda x:sqrt(x+1)-sqr ...

  9. 卷积神经网络中的channel 和filter

    在深度学习的算法学习中,都会提到 channels 这个概念.在一般的深度学习框架的 conv2d 中,如 tensorflow .mxnet,channels 都是必填的一个参数. channels ...

  10. postgresql 日常sql

    查看服务进程: select pid,usename,client_addr,client_port from pg_stat_activity;   查看当前数据库实例的版本:  select ve ...