js(Dom+Bom)第三天（2）

webAPI

0-操作标签属性

  1. 系统属性

    • 作用:

      1. 可以操作标签身上的任何一个系统中的自带属性 (id, class, name ....)
2. 还可以操作用户自定义的属性

    • dom.getAttribute(属性名)；

      作用: getAttribute(属性名) 方法 就是用来获取标签身上属性的备注:
1. getAttribute() 方法中放的是一个属性的名字
2. getAttribute() 方法中只能获取对应的一个属性
3. getAttribute() 方法如果没有获取到对应的属性值,那么就返回 null ,代表没有

    • dom.setAttribute(属性名,值);

      作用: 给标签设置属性(系统属性 + 自定义属性)例如:
div.setAttribute('id', 'one');
div.setAttribute('myage', '18');

    • dom.removeAttribute(属性名)；

      作用: 将标签身上的属性移除(系统属性 + 自定义属性)例如:
div.removeAttribute('myname');
div.removeAttribute('id');

  2. 自定义属性

    • 标签属性(自定义属性)的作用是什么?

      属性就是用来保存数据的.

    • 什么是自定义属性?

      • 自定义属性: 程序员自己定义的一个属性

      • 为什么会有自定义属性?

        自定义属性: 为了保存程序自己的一些数据.

    • 最新的最标准的自定义属性的写法

      所有的自定义的属性, 以  'data-'开始<div myname='dhl'   data-myname='zs'></div>

    • 设置自定义属性

      dom.dataset.自定义属性名称 = 值;

    • 获取自定义属性

      dom.dataset备注:
1. 只能获取自定义属性, 不能获取系统属性
2. dataset 存放的结果是一个对象
3. 访问dataset对象中的值,不能 带有 'data-';

  3. 总结

  4. 课堂练习-自定义属性tab栏切换案例

1-文本框事件

  1. onfocus事件

    当输入框获取鼠标焦点的时候,就会触发该事件

  2. onblur事件

    当输入框失去焦点的时候,就会触发onblur事件

  3. 课堂案例-搜索框案例

2-鼠标事件

  1. onmouseenter 事件

    当鼠标进入时候触发的一个事件

  2. onmouseleave 事件

    当鼠标离开时候触发的一个事件

  3. onmouseover 事件

    当鼠标悬停到标签之上触发的一个事件

  4. onmouseout 事件

    当鼠标离开时候触发的一个事件

  5. 课堂案例-鼠标进入隔行变色案例

  6. 课堂案例-ta栏切换

3-回顾获取页面元素

  1. 通过标签ID
  2. 通过标签名称
  3. 通过选择器

4-通过DOM节点方式获取元素

4-0注意事项

下面的内容都在在文档树上直接操作的 (节点 + 元素)重点是: 与元素相关的内容

4-1与父节点相关的操作方式

4-1-1.知识点-判断父元素中是否有子节点

语法:
DOM.hasChildNodes();
  • 总结:
    1. 该方法返回的是一个布尔类型的结果
    2. 该方法会将元素中所有的节点都获取（包括空格，回车符，文字，标签等）

4-1-2.知识点-获取父元素中所有子元素

语法:
DOM.children
  • 总结:
    1. chiledren是一个属性，不是一个方法
    2. 该属性返回父元素中所有子元素（只包含标签），不包括空格，回车符，纯文本等
    3. 返回一个伪数组
    4. 通过dom.children.length来判断是否存在子元素(长度是为0)

4-1-3.知识点-获取父元素中第一个子元素

语法:
DOM.firstElementChild
  • 总结:
    1. 通过该属性可以将父元素中的第一个子元素获取到【标签】
    2. 该属性只能获取标签，无法获取文字，空格，回车符等节点

4-1-4.知识点-获取父元素中最后一个子元素

语法:
DOM.lastElementChild
  • 总结
    1. 通过该属性可以将父元素中最后一个子元素获取到【标签】
    2. 该属性只能获取标签，无法获取文字，空格，回车符等节点

4-1-5.知识点-获取父元素中所有子节点(了解)

语法:
DOM.childNodes
  • 总结
    1. childNodes是一个属性，不是一个方法
    2. 该属性将父元素中所有节点返回（包括回车，空格等特殊符号）
    3. 该属性将回车符看做是一个空的文本

4-1-6.知识点-获取父元素中第一个子节点(了解)

语法:
DOM.firstChild
  • 总结
    1. 通过该属性可以将父元素中第一个节点得到
    2. 节点中包括文字，回车符，换行符等

4-1-7.知识点-获取父元素中最后一个子节点(了解)

语法:
DOM.lastChild
  • 总结
    1. 通过该属性将父元素中最后一个节点得到
    2. 节点中包括文字，回车符，换行符等

4-2与子节点相关的操作方式

4-2-1.知识点-获取上一个兄弟元素

语法:
DOM.previousElementSibling

4-2-2.知识点-获取下一个兄弟元素

语法:
DOM.nextElementSibling

4-2-3.知识点-获取下一个兄弟节点

语法:
DOM.nextSibling

4-2-4.知识点-获取上一个兄弟节点

语法:
DOM.previousSibling

4-2-5.知识点-根据子节点获取父元素

语法:
DOM.parentNode

4-3节点属性

4-3-1.知识点-获取节点类型

语法:
DOM.nodeType总结:
1.  如果nodeType返回值是1，那么代表当前节点是一个标签
2.  如果nodeType返回值是3，那么代表当前节点是一个文本
3.  如果nodeType返回值是2，代表标签中的一个属性

4-3-2.知识点-获取节点名称

语法:
DOM.nodeName总结:
1. 如果当前节点是一个标签，那么通过该属性返回该标签的名称
2. 如果当前节点是一个文本，那么通过该属性返回 #text

5-动态创建元素

  1. 知识点-通过document.write动态创建元素

  2. 知识点-通过innerHTMl动态创建元素

  3. 知识点-通过document.createElement()方式创建元素

    • 步骤:
      • document.createElement(‘标签名’)
      • 通过appendChild(‘子元素’)添加到父元素中

  4. 课堂练习-根据数组动态创建列表

    var ary = ['张三', '李四', '王五', '赵六'];

  5. 课堂案例-根据数组动态创建英雄列表

    var heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作'];
var datas = [
{name:'欧阳霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'},
{name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'诸葛霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'南京'},
{name:'西门霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'深圳'},
{name:'鸠摩智',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'段延庆',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'段正淳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'容子矩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'崔绿华',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'梅超风',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'鲁有脚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'焦木和尚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'韩小莹',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'侯通海',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'欧阳克',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'欧阳峰',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'玄真道人',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'司徒伯雷',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'陈近南',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'张康年',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'吴大鹏',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'西奥图三世',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'任盈盈',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'林远图',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'郑镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'张金鏊',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'陈歪嘴',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'洪人雄',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'余人彦',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'劳德诺',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'玉钟子',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'史镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
{name:'东方不败',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}];

    • 移除子元素

      父元素.removeChild(子元素);

  6. 课堂案例-动态创建英雄图片

6-其他方式创建元素

  1. 父节点.insertBefore(“新的节点”,“旧的子节点”)

    通过insertBefore可以在父元素中某一个子元素的前面添加一个新元素

  2. 父节点.replaceChild(“新节点”,“旧节点”)

    通过新节点将原来的节点替换掉

  3. 元素.cloneNode(true| false)

    true: 代表克隆元素内部的所有信息
false: 默认。只克隆外边的标签

  4. 课堂案例-微博案例

  5. oninput事件

    DOM.oninput = function() {}

7-注册事件

  1. 知识点-通过 on 方式给元素注册事件

  2. 知识点-通过addEventListener方式注册事件

    • 语法

      DOM.addEventListener('事件类型',function(){});例如:
div.addEventListener('click', function(){});注意:
通过addEventListener元素注册事件的时候,事件类型前不需要加 'on'

    • 特点

  3. 知识点-移除事件

    • 移除 on方式注册的事件

      DOM.事件类型 = null;

    • 移除addEventListener注册的事件

      DOM.removeEventListener('事件类型', 函数名)注意:
如果要通过removeEventListener移除事件的时候,那么addEventListener注册事件的时候需要是命名函数

8-事件流

  1. 知识点-事件冒泡
  2. 知识点-事件捕获
  3. 知识点-事件执行
  4. 知识点-事件委托
  5. 知识点-事件对象参数
    • e.target : 获取真正触发事件的对象
    • e.type： 事件类型
    • e.clientX
      • 特点: 相对body
    • e.clientY
    • e.offsetX
      • 特点:相对父元素左上角
    • e.offsetY
    • e.pageX
      • 特点:相对整个页面包括滚动出去的位置
    • e.pageY
    • e.screenX
      • 特点:相对整个电脑屏幕
    • e.screenY
    • e.stopPropagation() 阻止事件冒泡
  6. 课堂案例-鼠标移动案例

9.键盘事件

  1. 知识点-onkeydown事件

  2. 知识点-onkeyup事件

  3. 知识点-onkeypress事件

  4. 键盘事件对象参数

    • e.key

    • e.keyCode

  5. 课堂案例-键盘移动案例

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/248225.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

xshell使用指南

xshell使用指南

shell使用指南 ZMODEM功能 yum install lrzsz rz 上传 sz 下载 快捷键 alt o 打开终端 alt 1-9 切换 ctrl alt 切换 ctrl shift n 打开新选项卡 vim的小键盘不能使用的问题 在会话的属性中&#xff0c;将VT模式的初始数字键盘设置为普通 配色方案 保存成xcs文件&#xff0c…
阅读更多...
C#Socket编程详解（一）TCP与UDP简介

C#Socket编程详解（一）TCP与UDP简介

一、TCP与UDP&#xff08;转载&#xff09; 1、TCP 1.1 定义 TCP&#xff08;TransmissionControl Protocol&#xff09;传输控制协议。 是一种可靠的、面向连接的协议&#xff08;eg:打电话&#xff09;、传输效率低全双工通信&#xff08;发送缓存&接收缓存&#xff09;、…
阅读更多...
动态创建表格数据

动态创建表格数据

<input type"button" value"创建"><style>*{margin: 0;padding: 0;}table{width: 980px;margin: 50px auto;}table,th,tr,td{text-align: center;border: 1px solid #ccc;}</style><script>var heads [姓名, 年龄, 性别, 学号, 薪…
阅读更多...
第四节：EF Core的并发处理

第四节：EF Core的并发处理

1.说明 和EF版本的并发处理方案一致&#xff0c;需要知道乐观并发和悲观并发的区别&#xff0c;EF Core只支持乐观并发&#xff1b;监控并发的两种方案&#xff1a;监测单个字段和监测整条数据&#xff0c;DataAnnotations 和 FluentApi的两种配置方式。 &#xff08;PS&#x…
阅读更多...
js(Dom+Bom)第四天（1）

js(Dom+Bom)第四天（1）

webAPI 1-通过DOM节点方式获取元素 1-0注意事项 下面的内容都在在文档树上直接操作的 (节点 元素)重点是: 与元素相关的内容1-1与父节点相关的操作方式 1-1-1.知识点-判断父元素中是否有子节点 语法: DOM.hasChildNodes();总结: 该方法返回的是一个布尔类型的结果该方法会…
阅读更多...
vue官方eslint插件配置eslint-plugin-vue-libs

vue官方eslint插件配置eslint-plugin-vue-libs

由于eslint-config-vue已经被废弃&#xff0c;于是总结了一下eslint-plugin-vue-libs的eslint config配置&#xff0c;如下&#xff1a; module.exports {extends: [plugin:vue/essential],plugins: [vue-libs],parserOptions: {parser: require.resolve(babel-eslint),ecmaVe…
阅读更多...
JS中的prototype

JS中的prototype

JS中的phototype是JS中比较难理解的一个部分(转自出处&#xff1a;&#xff08;http://www.cnblogs.com/yjf512/&#xff09;) 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是&#xff0c;现在有1个类A,我想要创建一个类B,…
阅读更多...
微博发布案例

微博发布案例

推荐在写动态生成标签数据的时候&#xff0c;提前写一遍htmlcss的结构&#xff0c;方便提供写照模板 <div class"box"><!-- 顶部搜索框 --><div class"inputBox"><textarea maxlength"200"></textarea></div&…
阅读更多...
1.3 Go语言基础之数据类型

1.3 Go语言基础之数据类型

Go语言中有丰富的数据类型&#xff0c;除了基本的整型、浮点型、布尔型、字符串外&#xff0c;还有数组、切片、结构体、函数、map、通道&#xff08;channel&#xff09;等。Go 语言的基本类型和其他语言大同小异。 一、整型 1.1 基本类型 整型分为以下两个大类&#xff1a; 按…
阅读更多...
Oracle新建用户并授权

Oracle新建用户并授权

使用拥有dba权限的用户都可以新建用户以及授权 1、新建用户 create user 用户名 identified by 密码&#xff1b; 2、授权 grant connect, resource to 用户名; grant dba to 用户名; 转载于:https://www.cnblogs.com/langgj/p/11387485.html
阅读更多...
【网络安全】关于ARP攻击的原理以及在Kali Linux环境下的实现

【网络安全】关于ARP攻击的原理以及在Kali Linux环境下的实现

转自&#xff1a;https://www.cnblogs.com/rebrust/p/6096101.html 全文摘要 本文讲述内容分为两部分&#xff0c;前半部分讲述ARP协议及ARP攻击原理&#xff0c;后半部分讲述在Kali Linux环境下如何实现ARP攻击以及ARP欺骗&#xff0c;如果对于ARP攻击的背景和原理不感兴趣的话…
阅读更多...
动态创建英雄图片

动态创建英雄图片

推荐在写动态生成标签数据的时候&#xff0c;提前写一遍htmlcss的结构&#xff0c;方便提供写照模板 <input type"button" value"按钮"><style type"text/css">* {margin: 0;padding: 0;list-style: none;}ul {width: 600px;margin…
阅读更多...
第五节：EF Core中的三类事务(SaveChanges、DbContextTransaction、TransactionScope)

第五节：EF Core中的三类事务(SaveChanges、DbContextTransaction、TransactionScope)

一. 说明 EF版本的事务介绍详见&#xff1a; 第七节: EF的三种事务的应用场景和各自注意的问题(SaveChanges、DBContextTransaction、TransactionScope)。 本节主要介绍EF Core下的三种事务的用法和各自的使用场景&#xff0c;其中SaveChanges和DBContextTransaction事务与EF版…
阅读更多...
教你简单理解分布式与传统单体架构的区别

教你简单理解分布式与传统单体架构的区别

教你简单理解分布式与传统单体架构的区别 原文:教你简单理解分布式与传统单体架构的区别分布式是一种系统架构方式&#xff0c;而在分布式系统中一般基于中间件进行开发&#xff0c;消息中间件是分布式系统中比较核心的中间件之一。这三样东西随便拿出一个来都可能要说上半天&a…
阅读更多...
js(Dom+Bom)第五天（1）

js(Dom+Bom)第五天（1）

JavaScript BOM介绍 概念 BOM&#xff08;Browser Object Model&#xff09;即浏览器对象模型。 本质&#xff1a; 通过对象抽象浏览器中的一些功能 例如&#xff1a;&#xff08;刷新页面&#xff0c;alert,confirm,pormpt,跳转 ...&#xff09;BOM顶级对象 window对象是js中…
阅读更多...
第六节：深究事务的相关性质、隔离级别及对应的问题、死锁相关

第六节：深究事务的相关性质、隔离级别及对应的问题、死锁相关

一. 相关概念 前面系列中的章节的&#xff1a; 第二十二节: 以SQLServer为例介绍数据库自有的锁机制(共享锁、更新锁、排它锁等&#xff09;和事务隔离级别 介绍了各种锁以及事务的隔离级别&#xff0c;是从数据库的角度进行介绍的&#xff0c;本章节是通过EF Core为载体&…
阅读更多...
js(Dom+Bom)第五天（2）

js(Dom+Bom)第五天（2）

webAPI 01-事件监听 为什么要学事件监听 之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质 通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉.知识点-通过 on 方式给元素注册事件 之前注册事件的方式:事件源.onclick function() {}on是一种…
阅读更多...
UIAutomator简介

UIAutomator简介

简介 Android 4.3发布的时候包含了一种新的测试工具–uiautomator&#xff0c;uiautomator是用来做UI测试的。也就是普通的手工测试&#xff0c;点击每个控件元素 看看输出的结果是否符合预期。比如 登陆界面 分别输入正确和错误的用户名密码然后点击登陆按钮看看是否能否登陆以…
阅读更多...
从零开始实现ASP.NET Core MVC的插件式开发(五) - 插件的删除和升级

从零开始实现ASP.NET Core MVC的插件式开发(五) - 插件的删除和升级

标题&#xff1a;从零开始实现ASP.NET Core MVC的插件式开发(五) - 使用AssemblyLoadContext实现插件的升级和删除 作者&#xff1a;Lamond Lu 地址&#xff1a;https://www.cnblogs.com/lwqlun/p/11395828.html 源代码&#xff1a;https://github.com/lamondlu/Mystique 前景回…
阅读更多...
JDBC Druid式link

JDBC Druid式link

准备工作&#xff1a;导入包------druid-1.0.9.jar src文件夹下放下druid.properties文件 且其中的url和数据库名要配置完备 import JdbcUtils.JDBCUtils;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.PseudoColumnUsage;import java.sql…
阅读更多...
最新文章

Copyright @ 2022~2023