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;
}

原文地址:https://www.cnblogs.com/zuanzuan/p/10163737.html

时间: 2024-11-05 06:02:44

JavaScript 系列博客(五)的相关文章

JavaScript 系列博客(四)

JavaScript 系列博客之(四) 前言 本篇介绍 JavaScript 中的对象.在第一篇博客中已经说到 JavaScript 是一种''对象模型''语言.所以可以这样说,对象是 JavaScript 语言的核心概念,也是最重要的数据类型. 概述 生成方法 在 JavaScript 中声称对象相当方便,直接定义一个空字典就 ok.想要添加属性或者方法的话可以在定义结束之后动态添加.注意:对象时无序的复合数据集合. 上面代码中,大括号就可以直接定义一个对象,被赋值给变量 a,所以 a 就指向

JavaScript 系列博客(七)

JavaScript 系列博客(八) 前言 本篇博客介绍页面节点概念.文档结构以及如何使用 js 操作文档节点还有事件 target 以及 BOM 操作. 节点 dom与dom属性 // DOM: 文档对象模型 => 提高给用户操作document obj的标准接口 // DOM树: 以document为根, 树状展开所有子节点 节点分类 // 节点分类: 6个 // document | doctype | element | text | attr | comment 节点常规操作 var

关于算法导论系列博客的说明

本系列博客主要为练习<算法导论(第三版)>的记录.发表目的在于希望通过大家的帮助,不断地改进程序,使其在时间和空间方面效率不断提高.由于水平有限,错误在所难免.但是,我一定尽力消除.另外, 欢迎大家指出错误,提出宝贵的建议,感谢大家的指点和帮助. 特别注明: 你们的评论对我是一种莫大的鼓励,哪怕一个字也好,万分感谢. 在开始之前,对各练习的程序作出统一说明,以后不再重复. 一  程序一般用C语言写,编译为GCC. 二   程序一般为子程序的形式,不提供调用主程序,只完成要求的功能. 三   不

Django 系列博客(二)

Django 系列博客(二) 前言 今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳. 命令行搭建 Django 项目 创建纯净虚拟环境 在上一篇博客中已经安装好了虚拟环境,所以用虚拟环境来安装指定版本的 Django.为了可以从头到尾的走一遍流程,我重新创建了一个虚拟环境. 激活虚拟环境并安装 Django 首先进入虚拟环境路径下的 bin 目录 使用命令激活虚拟环境 安装指定版本 Django 首先使用 pip3 list 命令查看 可以看到

Django 系列博客(七)

Django 系列博客(七) 前言 本篇博客介绍 Django 中的视图层中的相关参数,HttpRequest 对象.HttpResponse 对象.JsonResponse,以及视图层的两种响应方式 CBV 和 FBV,还有简单的文件上传. 视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . . 是任何东西都可以.无论视图本身包含什么逻辑,都要返回

Django 系列博客(十四)

Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译成中文就是''异步 JavaScript 和 XML''.即使用 JavaScript 语言与服务器进行异步交互,传输的数据为 XML(现在更多地使用 json). 同步交互:客户端发出一个请求后,需要等待服务器响应结束,才能发出第二个请求: 异步交互:客户端发出一个请求后,无需等待服务器响应结束,

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

Swift到目前为止仍在更新,每次更新都会推陈出新,一些Swift旧版本中的东西在新Swift中并不适用,而且新版本的Swift会添加新的功能.到目前为止,Swift为2.1版本.去年翻译的Swift书籍是1.0版本,所以上面一些东西并不在适用.虽然Swift语言仍在更新,但是其整体的基础框架已经形成,大的改动应该不会有,版本的更新更多的是语言新功能的添加和完善,所以并不用担心现在学的Swift会过时.更新也就是在原有的基础上去更新,所以学学Swift还是很有必要的.新的Swift版本中引入了好

Linux系列博客开篇

自从决定做开发,已经好久没有配置过Linux系统了.再不尝试着写一下博客,可能真的要还给老师了.本着一边复习,一边记录的原则,将一些Linux的配置和维护记录在此,不要贻笑大方才好. 为了完成接下来的这些博客,我可能会参考众多前辈的文章,我会尽量留下参考的出处,但是要是因为某些原因未能留下出处,还请原作者见谅.您可以联系我,我将及时改正. 按照我的计划,我会从Linux的安装.基本配置.常用命令开始,一直写到各种网络服务以及Linux存储集群.数据库集群等.基本思路按照尚观主机班的培训思路,不过

MVC系列博客之排球计分(一)需求分析

项目简介: 这是MVC系列博客之排球计分程序,该程序可以是对教练或者裁判使用的,让教练有权限对队员进行查询得分情况,让教练对队员的优势劣势进行了解,以便对队伍进行调整. 让裁判更好的判定比赛输赢. 需求分析:     作为一名排球教练,我需要统计对方球队的队员信息,得分情况,技能得分,以便能做出针对性的训练. 进入本程序后,需要选择身份,然后就可以对队员信息进行操作了.(增删改查) 本身份只能对本队队员进行操作,要想操作对方队员,只能退出程序,重新选择身份. 作为一名裁判,我需要对场上两队得分进