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. SimpleCursorAdapter使用代码

    package com.kale.cursoradapter; import android.app.Activity; import android.database.Cursor; import ...

  2. Convert Spaces to Tabs

    :set tabstop=2 " To match the sample file :set noexpandtab " Use tabs, not spaces :%retab! ...

  3. OpenGIS

    OpenGIS(Open Geodata Interoperation Specification,OGIS-开放的地理数据互操作规范)由美国OGC(OpenGIS协会,Open Geospatial ...

  4. es6的几种写法

    语法:1.只有一个参数,可以不用写小括号: var single = a => a; //相当于var single = function(a){return a;}console.log(si ...

  5. pycharm断点应用

    1.在需要打断点行处,单击鼠标左键打断点 2.调试程序开始,在第一个断点之前停止 3.跳过第一个断点进入到下一个断点

  6. win7中调试Hotspot

    预置: 1.Visual Studio 2010 2.CYGWIN(设置到path中) 3.jdk(设置到path中) 4.Framework4(系统如果有就不需要安装) 5.win7 sdk 7.1 ...

  7. Javascript高级编程学习笔记（47）—— 元素遍历

    元素遍历 为了方便我们使用JS来遍历文档中的元素,W3C在原来的基础之上提出了 Element Traversal 规范 这一规范主要就是为了统一浏览器对文档中节点解析不一致的问题. 比如在某些浏览器 ...

  8. 14.不同条目的listview

    分类界面 整个项目的逻辑就是这样的 CategoryInfo  public class CategoryInfo { private String title; private String url ...

  9. Python爬虫2-检测编码（使用chardet）

    GitHub代码练习地址:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac02_chardet.py 网页编码问题解决 c ...

  10. 终于明白word-break属性——break-all和break-word的区别

      其实一直不明白,也没有认真去想过 word-break 属性的 break-all 和 break-word 有什么区别 后来看了一个大神写的一篇博客,写得很详细,看了豁然开朗. 所以,我也就不在 ...