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

webAPI

00-复习

  1. 内置对象中的方法

01-JavaScript组成

  1. 知识点-ECMASCRIPT

    • 重点回顾
      • 存储容器
        • 变量
        • 数组
        • 对象
      • 逻辑语法
        • 分支语句
        • 循环语句
        • switch语句

  2. 知识点-BOM

    • 概念

      Browser Object Model (浏览器器对象模型)  操作浏览器将浏览器看做是一个对象.

    • 作用

      通过js操作浏览器中相关操作

  3. 知识点-DOM

    • 什么是DOM?

      Document Object Model(文档对象模型)

    • 详解DOM

      • 什么是文档

        HTML文件就是一个文档

在这里插入图片描述

 - 什么是文档对象```js将整个网页封装成一个对象,这个对象叫文档对象(document)```- 为什么要学DOM?```js在网页中常常涉及到需要用户操作网页,比如点击, 鼠标进入, 鼠标离开等,ECMASCRIPT是无法实现,只能通过DOM操作实现目的: 通过js操作网页.```- **JS操作网页的原理**- DOM树操作```js浏览器在加载html文件时，会把文档、文档中的标签、属性、文本、注释转换成对象，然后按照标签的关系（父子、兄弟、祖孙）以树状结构存储到内存中。```

在这里插入图片描述

在这里插入图片描述

   - 元素```js元素特指: HTML标签```- 节点```jsHTML文档中的所有元素的总称称为节点,每一个标签,每一个文本,每一个符号(回车,空格)都称为一个节点```

  1. 知识点-什么是API

    • API（Application Programming Interface）应用程序编程接口（暴露出来的工具）。

      api: 通俗理解就是一个方法或属性

    • 浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM）

      webAPI: 网页中提供的一些方法,用来操作网页的.webAPI阶段重点: 记住各种方法用来操作网页

02-DOM学习路径

  1. 找对象(获取元素)
  2. 设置元素属性
  3. 设置元素样式
  4. 动态创建元素和删除元素
  5. 事件的触发响应: 事件源,事件,事件驱动

03-获取页面元素[重点]

  1. 通过ID获取元素

    • 语法

      document.getElementById('元素id');

    • 总结

      1. document.getElementById得到就是一个html标签对象
      2. document.getElementById得到的结果只有一个对象
      3. 不推荐标签的id值重复

  2. 通过标签名获取元素

    • 语法

      document.getElementsByTagName('html标签名字');注意:
标签的名字, 不是html标签

    • 总结

      1. 返回的结果是一个伪数组对象
      2. 这个数组对象中保存的就是每一个具体的html标签对象
      3. 如果要获取每一个html标签对象,可以遍历这个数组得到

  3. 通过选择器获取单个元素

    • 语法

      document.querySelector('css选择器');  备注: 所有的css选择器都可以用

    • 总结

      1. document.querySelector()方法返回的结果只有一个对象
      2. 返回的这个对象还是满足条件的第一个

  4. 通过选择器获取多个元素

    • 语法

      document.querySelectorAll('CSS选择器')备注: 所有的css选择器都可以用

    • 总结

      1. document.querySelectorAll() 得到的结果伪数组对象
      2. document.querySelectorAll() 返回值数组中存放的就是每一个具体的html标签对象
      3. 可以通过循环遍历的方式获取具体的每一个html标签对象

  5. 课堂练习

    1. 在如下代码结构中将第一个列表中所有的li标签输出到控制台中
2. 在如下代码结构中将第二个列表中第3个li标签输出到控制台中

在这里插入图片描述

04-事件

  1. 什么是事件?

    事件 : 其实就是用户在网页中的一个具体的动作为什么要学事件: 在网页中有些效果是需要用户执行完动作(事件)后才有对应的效果的

  2. 事件组成的三要素

    • 事件源

      事件源: 源头,给谁加的事件.      ----->  具体的DOM对象(html标签对象)

    • 事件类型

      事件类型:  用户动作是什么

    • 处理程序

      处理程序:  用户执行完动作后要干什么?    -----> 处理程序是一个函数

  3. 事件语法

    事件源.事件类型 = function() {//处理程序
}

  4. 事件类型

    • onclick —> 用户的点击事件

  5. this关键字介绍

    • 在普通函数中的this

      this 指向 window

    • 在构造函数中的this

      this 指向的是 创建的对象

    • 事件中的this

      在事件中的 this 指向谁?  指向事件源

  6. 事件处理程序什么时候执行

    当事件被用户触发后,处理程序中的代码才会执行

  7. 课堂练习

    1. 给id名为'one'的标签注册一个点击事件, 点击后弹出 '你好'
2. 给页面中的每一个li标签注册点击事件, 单击后弹出当前li的索引值(第几个就弹出几)<ul><li>我是第一个li</li> <li>我是第二个li</li> <li>我是第三个li</li> </ul>

05-操作图片标签中的属性

  1. src属性
  2. alt属性
  3. 课堂案例-切换图片

06-操作a标签的属性

  1. href属性

    获取a标签中的网址信息:
DOM.href

  2. 阻止a标签跳转方式

    在 a 标签的点击事件中 设置  return  false;a.onclick = function() {//阻止a 标签跳转  return false;
}

07-标签设置/获取文字

  1. innerText

    • innerText获取内容

      获取DOM对象(标签对象)中的文字
DOM.innerText

    • innerText设置内容

      给标签赋值:DOM.innerText = 值;

  2. innerHTML

    • innerHTML获取内容

      获取DOM对象(标签对象)中的文字
语法: DOM.innerHTML

    • innerHTML设置内容

      给标签赋值:DOM.innerHTML  =  值;

  3. innerText 和 innerHTML的区别

    • innerHTML 在获取标签中文字信息的时候,包括了回车符,html标签等内容
    • innerText在获取标签中文字信息的时候,只获取文字,不包括其他内容
    • innerHTML给标签赋值的时候,可以将标签渲染成对应的HTML标签
    • innerText给标签赋值的时候,不能将标签渲染成HTMl标签的

  4. 课堂练习-点击标签切换文字

08-操作标签样式

  1. 通过className方式操作
    • 通过className设置一个类名
    • 通过className设置多个类名
    • 通过className移除类名
  2. 课堂案例-设置标签动画样式

HTML的区别**

  • innerHTML 在获取标签中文字信息的时候,包括了回车符,html标签等内容
  • innerText在获取标签中文字信息的时候,只获取文字,不包括其他内容
  • innerHTML给标签赋值的时候,可以将标签渲染成对应的HTML标签
  • innerText给标签赋值的时候,不能将标签渲染成HTMl标签的
  1. 课堂练习-点击标签切换文字

08-操作标签样式

  1. 通过className方式操作
    • 通过className设置一个类名
    • 通过className设置多个类名
    • 通过className移除类名
  2. 课堂案例-设置标签动画样式

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

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

相关文章

华为架构师8年经验谈：从单体架构到微服务的服务化演进之路

华为架构师8年经验谈：从单体架构到微服务的服务化演进之路

本次分享的技术大纲如下&#xff1a; 传统应用开发面临的挑战服务化实践服务化不是银弹服务化架构的演进方向一 、传统应用开发面临的挑战 挑战1-- 研发成本高 主要体现在如下几个方面&#xff1a; 代码重复率高在实际项目分工时&#xff0c;开发都是各自负责几个功能&#xff…
阅读更多...
轮播图制作(1)

轮播图制作(1)

轮播图制作 <body><div><img src"img/1.jpg" class"imgs" alt""><a href"#" class"left"><</a> //此处的箭头也可以用图标做出来<a href"#" class"right">>…
阅读更多...
StringUtils工具类的常用方法

StringUtils工具类的常用方法

StringUtils 方法的操作对象是 java.lang.String 类型的对象&#xff0c;是 JDK 提供的 String 类型操作方法的补充&#xff0c;并且是 null 安全的(即如果输入参数 String 为 null 则不会抛出 NullPointerException &#xff0c;而是做了相应处理&#xff0c;例如&#xff0c…
阅读更多...
放大镜制作（1）

放大镜制作（1）

放大镜制作 <div class"box" id"box"><!--左侧的盒子--><div class"small"><!--图片--><img src"images/big.jpg" width"350" class"aaa" alt""/><!--黄色小盒子--&…
阅读更多...
从零开始实现ASP.NET Core MVC的插件式开发(四) - 插件安装

从零开始实现ASP.NET Core MVC的插件式开发(四) - 插件安装

标题&#xff1a;从零开始实现ASP.NET Core MVC的插件式开发(四) - 插件安装 作者&#xff1a;Lamond Lu 地址&#xff1a;https://www.cnblogs.com/lwqlun/p/11343141.html 源代码&#xff1a;https://github.com/lamondlu/Mystique 前情回顾 从零开始实现ASP.NET Core MVC的插…
阅读更多...
立体导航翻转案例

立体导航翻转案例

<div class"box"><!-- 立方体 --><ul><li><img src"img1/1.jpg" alt""></li><li><img src"img1/2.jpg" alt""></li><li><img src"img1/3.jpg" a…
阅读更多...
Uncontrolled memory mapping in camera driver (CVE-2013-2595)

Uncontrolled memory mapping in camera driver (CVE-2013-2595)

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主同意不得转载。https://blog.csdn.net/hu3167343/article/details/34434235 /* 本文章由 莫灰灰 编写&#xff0c;转载请注明出处。 作者&#xff1a;莫灰灰 邮箱&#xff1a; minzhenfei163.com */ 1漏洞描写…
阅读更多...
表格隔行变色

表格隔行变色

<body><table border"0" align"center" cellspacing"1" cellpadding"0"><caption>恭喜发财</caption><thead><tr><th>代码</th><th>名称</th><th>最新公布净值<…
阅读更多...
项目管理的测试版发布

项目管理的测试版发布

最近有时间将以前没有写完的项目管理程序进一步完善&#xff0c;加入了项目任务之间的关连。功能&#xff1a;1、任务的关连Start to finishStart to startFinish to startFinish to finish2、任务关连表环路检测3、采用MVC模式进行开发4、自动导出XML5、双击连接线可以设置、删…
阅读更多...
Tab栏切换布局分析

Tab栏切换布局分析

<body><div class"tab"><div class"tab_list"><ul><li class"current">商品介绍</li><li>规格与包装</li><li>售后包装</li><li>商品评价(50000)</li><li>手机社…
阅读更多...
CLR基础，CLR运行过程，使用dos命令创建、编译、运行C#文件，查看IL代码

CLR基础，CLR运行过程，使用dos命令创建、编译、运行C#文件，查看IL代码

CLR是Common Language Runtime的缩写&#xff0c;是.NET程序集或可执行程序运行的一个虚拟环境。CLR用于管理托管代码&#xff0c;但是它本身是由非托管代码编写的&#xff0c;并不是一个包含了托管代码的程序集&#xff0c;所以不能使用IL DASM进行查看&#xff0c;但CLR以dll…
阅读更多...
表单的全选取消全选

表单的全选取消全选

<div class"wrap"><table border"1" cellspacing"0" cellpadding"0"><caption>恭喜发财</caption><thead><tr><th><input type"checkbox" id"j_cbAll" checked&quo…
阅读更多...
HDU 4339 Query

HDU 4339 Query

算法: 比赛时没有想到好的算法&#xff0c;暴力是O&#xff08; Q * N &#xff09;肯定超时。 赛后&#xff0c;线段树&#xff0c;树状数组&#xff0c;HASH都能AC&#xff0c;想了下&#xff0c;的确用树状数组 时间复杂度就可以优化到O&#xff08;Q * lgN * lgN) 2000msAC…
阅读更多...
201904快速阅读术

201904快速阅读术

在看过了几本数之后&#xff0c;发现原来培养读书的习惯好像也不太难&#xff0c;“将读书融入生活&#xff0c;框定读书时间” 生活中&#xff0c;我确实也是这样执行了。利用每天上下班的时间听书&#xff0c;有些觉得可以读快的书籍用了1.5倍速度在听&#xff0c;难懂的部分…
阅读更多...
最简方式 表格编辑 基于 el-table

最简方式 表格编辑 基于 el-table

共下面5点1.新增一个显示和隐藏的参数2.在显示那边新增一个input框&#xff0c;用v-model绑定数据&#xff0c;用v-if来显示和隐藏3.给之前的显示的span标签添加v-else 和上面形成if else4.编辑和保存按钮同理&#xff0c;然后编辑按钮触发的任务将所有输入打开。即seen置为tru…
阅读更多...
Spring Boot 自动配置原理

Spring Boot 自动配置原理

自动配置原理配置文件到底能写什么&#xff1f;怎么写&#xff1f;自动配置原理&#xff1b; 参考&#xff1a;https://docs.spring.io/spring-boot/docs/1.5.9.RELEASE/reference/htmlsingle/#common-application-properties配置文件能配置的属性参照1、自动配置原理&#xff…
阅读更多...
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中的prototype

JS中的prototype

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

Copyright @ 2022~2023