8.6

  • 看红宝书的第十一章DOM的扩展
1.选择符API
    （1）querySelector()方法
        a.接收一个CSS选择符，返回与该模式匹配的第一个元素，返回null。
        b.通过document类型调用时，会在文档元素的范围内查找匹配的元素；通过Element类型调用时，只会在该后代元素的范围内查找匹配的元素
    （2）querySelectorAll()方法
        a.能调用的类型：Element，Document，DocumentFragment。
        b.接收一个css选择符，返回所有匹配的元素，返回的是一个NodeList实例
    （3）matchesSelector()方法
        a.接收CSS选择符，如果调用元素与该选择符匹配则返回true，否则返回false。
2.元素遍历
    (1)五个增加的属性（详见288页）
3.HTML5
    （1）与类相关的扩充
        a.getElementByClassName()方法
            *接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList.
        b.classList属性（可以更好的操作类名）
            *定义了如下的方法：
                &.add（value）：将给定的字符串值添加到列表中，若已经存在则不添加
                &.contains（value）：列表中是否存在给定的值，存在返回true
                &.remove（value）：删除给定字符串
                &.toggle（value):若给定值列表存在则删除，若不存在则添加
    （2）焦点管理
        a.document.activeElement属性(始终会引用DOM中当前后的了焦点的元素)
            *元素获得焦点的方法有三个:
                &.页面加载
                &.用户输入通常按Tab键
                &.代码中调用focus()
            *默认情况下文档刚刚加载完成时，document.activeElement中保存的是document.body的引用；加载期间，值为null.
        b.document.hasFocus()方法：确定文档是否获得了焦点
    （3）HTMLDocument的变化
        a.readyState属性（可以通过它来实现一个指示文档已经加载完成的指示器）
            *两个可能值：loading与complete
        b.兼容模式
            *给document添加了一个名为compatMode属性，告诉开发者浏览器采用了哪种渲染模式
        c.head属性
    （4）字符集属性
        a.charset属性：表示文档中实际使用的字符集，也可以用来指定新的字符集
        b.dafaultCharset属是性表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么样。
    （5)自定义数据类型
        a.需要添加前缀data-，添加了自定义属性后可以使用dataset属性访问自定义属性值
    （6）插入标记
        a.innerHTML属性
            *读模式下，返回与调用元素的所有子节点对应的HTML标记
            *写模式，会根据指定的值创建的DOM树，然后用该树完全替换调用元素原先的所有节点。
            *不支持该属性的元素有<col>.<colgroup>.<frameset><html><style><tbody><thead><tfoot><tr><head>
            *若要使用innerHTML从外部插入HTML，提供了window。tostaticHTML()方法，接收一个参数即HTML字符串
        b.outerHTML属性
            *读模式，返回调用它的元素及所有的子节点的HTML标签
            *写模式，会根据指定的HTML字符串创建新的DOM子树，然后用该树完全替换调用元素。
        c.insertAdjacentHTML()方法（插入标记）
            *两个参数：插入位置与要插入的HTML文本，第一个值必须是下列值之一：
                &.beforebegin
                &.afterbegin：在当前元素之前插入一个同辈元素
                &.beforeend： &.afterend：在当前元素之后插入一个同辈元素
        d.内存与性能问题
    （7）scrollIntoView（）方法
4.专有扩展
    （1)文档模式
    （2）children属性
    （3）contains（）方法
        *调用该方法应该是祖先节点，接收一个参数，即要检测的后代节点
    （4）插入文本
        a.innerText属性
        b.outerText属性
    （5）滚动
        详见303页
  • 看网课：dom继承数以及dom的基本操作！
  • FreeCodeCamp上面开始做基础的题，今天刷了90道。

8.7

  • 红宝书第12章：DOM2.DOM3
1.dom的变化
    （1）针对XML命名空间的变化（命名空间要使用xmlns特性来指定）
        a.Node类型的变化
            *DOM2中包含下列特定于命名空间的属性：
                localName（不带命名前缀的节点名称）、  namespaceURL（命名空间URL或null），  prefix（命名空间前缀或者null）。
            *DOM3中引入了与命名空间有关的方法
                isDefaultNamespace（namespaceURL）：在指定的namespaceURL是当前节点的默认命名空间的情况下返回true。
                lookupNamespaceURL(prefix):返回给定的prefix命名空间
                lookupPrefix(namespaceURL):返回给定的namespaceURL前缀
        b.document类型的变化
            *包含下列与命名空间有关的办法：
                createElementNS（namespaceURI，tagName）：使用给定的tagName创建一个属于命名空间namespaceURI的新元素
                createAttributeNS(namespaceURL,attributeName):使用给定的attributeName创建一个属于命名空间namespaceURL的新特性。
                getElementsByTagNameNS（namespaceURL，tagName）：返回属于命名空间namespaceURL的tagName元素的NodeList。
        c.Element类型的变化
            *主要涉及操作特性，新增方法：
                详见308页
        d.nameNodeMap类型的变化
            *详见309页
    （2）其他方面的变化
        a.DocumentType类型的变化
            *新增了3个属性：publicID，systemID，internalSubset
  • 看网课：获取窗口属性，获取dom尺寸，脚本化CSS
  • 看网课：date对象以及定时器
  • 在FreeCodeCamp上刷题，刷了最后基础的30道

8.8

  • 因为第12章有些没看懂，所以先学习13章：事件（用户或浏览器自身执行的某种动作）
1.事件流（描述的是从页面中接收数据的顺序）
    （1）事件冒泡（IE事件流）
        a.事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
    （2）事件捕捉（netscape Communicator团队提出）
        a.由不太具体的节点更早的接收事件，而最具体的节点最后接收到事件
    （3）DOM事件流
        a.“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
2.事件处理程序（响应某个事件的函数，名字都以on开头）
    （1）HTML事件处理程序
        
    （2）DOM0级事件处理程序
        a.要使用js指定时间处理程序首先要取得一个要操作的对象的引用。
        b.这里添加的事件处理程序是在其依附的元素的作用域中运行，就是程序中的this引用当前元素。
        c.删除的话，只需要将事件处理程序属性设置为null即可。
    （3）DOM32级事件处理程序
        a.定义了两个方法：
            *addEventListener():指定事件处理程序
            *removeEventListener（）：删除事件处理程序
            *三个参数：要处理的事件名，作为时间处理程序的函数，布尔值
                布尔值为true时：表示在捕获阶段调用时间处理程序
                布尔值为false：表示在冒泡阶段调用事件处理程序
        b.这里添加的事件处理程序是在其依附的元素的作用域中运行，就是程序中的this引用当前元素。
        c.好处：可以添加多个事件处理函数，按照添加他们的顺序触发
        d.利用addEventListener（）添加的匿名函数无法通过removeEventListener（）移除。
    （4）IE事件处理程序
        a.两个方法：
            *attachEvent（）：
            *detachEvent（）：
            *两个参数:事件处理程序名称与事件处理程序函数，都会被添加到冒泡阶段。
        b.事件处理程序会在全局作用域中运行，其中的this等于window。
        e.好处：也可以同时添加多个事件处理程序，只不过是以添加的相反的顺序被触发。
        f.利用attachEvent（）添加的可以用detachEvent（）移除，只不过要提供相同的参数。，所以不能移除添加的匿名函数
    （5）跨浏览器的事件处理程序（只需要关注冒泡阶段）
        a.两个方法：
            *addHandler（）：视情况分别使用DOM0方法、DOM2方法或IE事件来添加事件。属于EventUntil对象
            *removeHandler():移除之前添加的事件处理程序
            *3个参数：要操作的元素、事件名称、事件处理程序函数。
3.事件对象
    (1)DOM中的事件对象
        a.event对象包含与创建它的特定事件有关的属性与方法。，具体见355页
        b.type属性
        c.preventDefault()方法：阻止特定事件的默认行为，只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。
        d.stopPropagation():用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕捉或冒泡。
        e.eventPhase属性：确定时间当前位于事件流的那个阶段，捕获阶段返回1，处于目标对象上返回2，冒泡阶段返回3.
    （2）IE中的事件对象
        a.returnVaule属性，取消给定事件的默认行为，将它设置为false，就可以阻止。
        b.cancelBUbble属性：停止事件冒泡。将它设置为true。
    （3）跨浏览器的事件对象
        a.封装了四种方法，详见360页。
  • 看网课：事件（上）（下）看的不透彻

8.9

  • 红宝书的13.3节事件对象
1.事件类型
   （1）UI事件(不一定与用户操作有关的事件)
       a.load事件（当页面完全加载后，就会触发window上的load事件。）
           *两种定义onload事件处理程序的方式）
       b.unload事件（在文档被完全卸载后触发）
       c.resize事件（当浏览器窗口被调整到一个新的高度或宽度时，就会触发）
       d.scroll事件（表示的是页面中相应元素的变化）
   (2)焦点事件
       a.blur:在元素失去焦点时触发
       b.focus:在元素获得焦点时触发
   (3)鼠标与滚轮事件（click,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseup,mouseover)
       a.客户区坐标位置
           *clientX与clientY：事件发生时鼠标指针在视口的水平垂直坐标
       b.页面坐标位置
           *pageX与pageY属性：告诉事件是在页面的什么位置发生的。即表示鼠标光标在页面中的位置。是从页面本身而非视口的左边和顶边计算的。
       c.屏幕坐标位置
           *screenX与screeY:确定鼠标事件发生时鼠标指针相对于整个电脑屏幕的位置。
       d.修改键
       e.相关元素
       f.鼠标按钮
       g.更多事件信息
       h.鼠标滚轮事件
       i.触摸设备
       j.无障碍性问题
   (4)键盘与文本事件(keydown,keypress,keyup)
       a.键码
       b.字符编码
       c.DOM3级变化
       d.textInput事件
       e.设备中的键盘事件
   (5)复合事件
   (6)变动事件
       a.删除节点
       b.插入节点
   (7)HTML5事件
       a.contextmenu事件
       b.beforeunload事件
       c.DOMContentLoaded事件
       d.readystatechange事件
       e.pageshow和pagehide事件
       f.haschange事件
   （8）设备事件
       a.orientationchange事件：以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向

8.10

  • 在网上学习轮播图的制作，有个大概
  • 在w3scool上学习css3
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区