• JS函数BOOM、DOM、事件


    screen对象
    */
    console.log(screen.width);//屏幕宽度
    console.log(screen.height);//屏幕高度
    console.log(screen.availWidth);//可用宽度
    console.log(screen.availHeight);//可用高度 屏幕高度-任务栏高度
     
    /*
    * location对象
    *
    * 完整的URL路径:
    * 协议://主机名(IP地址):端口号/文件路径?传递参数(参数名=参数值&参数名2=参数值2)#锚点
    */
    console.log(location.href);//完整路径
    console.log(location.protocol);//使用协议 http:https:ftp:file:mailto:
    console.log(location.pathname);//文件路径
    console.log(location.port);//端口号
    console.log(location.search);//从?开始往后的部分
    console.log(location.hostname);//主机名(IP地址)
    console.log(location.host);//主机名+端口号
    console.log(location.hash);//从#开始的锚点
     
    //使用JS设置页面跳转
    //window.location="http://www.baidu.com";
     
    重点 window对象的常用方法
    * >>>window对象中的所有方法,均可以省略前面的window.,比如close();
    * 1、prompt:弹窗接收用户输入
    * 2、alert:弹窗警告
    * 3、confirm:带有确认/取消 按钮的提示框;
    * 4、close:关闭当前浏览器选项卡
    * 5、open:重新打开一个窗口
    *
    * //比较重点
    * 6、setTimeout:设置延时执行,只会执行一次
    * 7、setInterval:设置定时器,循环每个N毫秒执行一次
    * 两个参数:需要执行的function/毫秒数
    *
    * 8、clearTimeout:清楚延迟
    * 9、clearInterval:清除定时器
    * 传入参数,调用setInterval时返回一个ID,通过变量接受ID,传入clearInterval.
     
    【DOM树节点】
    DOM节点分为三大类:元素节点、文本节点、属性节点
     
    文本节点、属性节点,为元素节点的两个子节点;
     
    通过getElement系列方法,可以去到元素节点。
     
     
    【查看节点】
    1、getElementById:通过ID获取唯一的节点;多个同名ID,只会取第一个;
    2、getElementsByName:通过Name取到一个数组,包含1到多个节点;
    使用方式:通过循环,取到每一个节点。循环次数:从0开始,<数组.length
     
    【查看和设置属性节点】
    1、查看属性节点: getAttribute("属性名");
    2、设置属性节点: setAttribute("属性名","属性值");
     
     
    【JS修改样式总结】
    1、.className : 为元素设置一个新的class名字;
    div1.className = "class1";
     
    2、.style : 为元素设置一个新的样式,注意驼峰命名法;
    div1.style.backgroundColor = "red";
     
    3、.style.cssText : 为元素同时修改多个样式;
    div1.style.cssText = "100px;height100px;";
     
    【查看节点】
    1、tagName属性:获取节点的标签名;
    2、innerHTML:设置或者获取节点内部的所有HTML代码;
    3、innerText:设置或者获取节点内部的所有文字;
     
    【获取层次节点的常用属性】
    * 1、.childNodes:获取UL里面的所有子节点(包含元素节点/文本节点)
    * 2、.firstchild:获取元素第一个子节点
    * 3、.lastchild:获取元素左后一个子节点
    * 4、.ownerDocument:获取当前文档根节点,在HTML文档中,为document节点
    * 5、.parentNode:获取当前节点的父节点
    * 6、.previousSibling:获取当前节点的前一个兄弟节点
    * 7、.nextSibling:获取当前节点的后一个兄弟节点
    *
    * 注:上述属性,均会获得所有的元素节点和文本节点,如果只需元素节点,需要
    * 使用对应的Element属性,例如:firstChild--->firstElementChild
    *
    * 8、.attributes:获取当前元素节点的所有属性节点
    [创建并新增节点]
    * 1、.createElement("标签名"):创建一个新的节点,需要配合.setAttribute()方法设置新节点的相关属性
    * 2、.appendChild(节点名):在某元素后面追加一个新的节点
    * 3、.insertBefore(新节点名):在某元素之前追加一个新的节点
    * 4、克隆对象.cloneNode(true/false):需要克隆谁,就用谁去调用克隆对象;
    * >>>传参可以为true或者false:
    * ①true表示:克隆当前节点及所有子节点;
    * ②false表示:只克隆当前节点,不克隆子节点(默认)
    *
    * 【删除/替换节点】
    *
    * 1、.removeChild(需删除节点):从父容器中,删除指定节点;
    * 2、.replaceChild():需替换点
     
    [表格属性]
    * 1、rows属性:返回表格中的所有行、数组;
    * 2、insertRow(index):在表格的第index+1行,插入一个新行
    * 3、deleteRow(index):删除表格的第index+1行
    *
    * [表格的行对象]
    * 1、cells属性:返回当前行中的所有单元格,数组;
    * 2、rowIndex属性:返回当前行,在表格中索引顺序,从0开始
    * 3、insertCell(index):在当前行的第index+1处插入一个<td>
    * 4、deleteCell(index):删除当前行的第index+1个<td>
    *
    * [表格的单元格对象]
    * 1、cellIndex属性:返回单元格在改行的索引顺序,从0开始
    * 2、innerHTML属性:返回或设置当前单元格中的HTML代码
    * 3、align属性:设置当前单元格的水平对齐方式
    * 4、className属性:设置单元格的class名称
     
    [JS中的事件分类]
    * 1、鼠标事件:
    * click/dbclick/mousedown/mousemove/mouseout/mouseover/mouseup
    *
    * 2、键盘事件
    * keydown:键盘按下去触发
    * keypress:键盘按下并松开的瞬间
    * keyup:键盘抬起时触发
    *
    * [注意事项:(了解)]
    * ①执行顺序:keydown-keypress-keyup
    * ②长按时,会循环不断执行keydown-keypress
    * ③有keydown事件时,不一定有keyup事件(事件触发过程,鼠标移开,就不触发 )
    * ④keypress只能捕获字母、数字、符号键,不能捕获功能键;keydown/keyup基本可以捕获所有功能键(特殊除外)
    * ⑤keypress区分大小写,keydown和keyup不区分
    * ⑥keydown/keyup区分主键盘和小键盘,keypress不区分;
    *
    * [确定键盘触发按键]
    * ①在触发函数中传入参数e,代表按键事件
    * ②通过e.keyCode,确定按键Ascii码值,进而确定按键;
    * ③所有浏览器系统的写法(一般不必要);
    * var evn=e||event;//取到键盘事件
    var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码
     
    [JS中的事件流]
    *
    * 1、事件冒泡:当某DOM元素触发某事件时,会从当前DOM元素开始,逐个触发其祖先元素的同类型事件,直到DOM根节点;
    * DOM0模型,均为事件冒泡;
    * IE中使用.attachEvent()添加的事件,均为冒泡;
    * 其他浏览器,.addEventListener添加的事件,当第三个参数为false时,为冒泡;
    *
    * 2、事件捕获:当某DOM元素触发某事件时,会从DOM根节点开始,逐个触发其祖先元素的同类型事件,直到触发到当前元素为止;
    * 只有使用.addEventListener添加事件,并设置第三个参数为true时,才进行捕获;
    *
    * ↓ 当前元素 ↑
    * ↓ ↑
    * 冒 父元素 捕
    * ↓ ↑
    * 泡 爷爷元素 获
    * ↓ ↑
    * DOM根节点
    *
    * 3、阻断事件冒泡:
    * IE浏览器中:将e.cancelBubble属性设为true;
    * 其他浏览器:调用e.stopPropagation();方法
    * 兼容写法:function myParagraphEventHandler(e) {
    * e = e || window.event;
    * if (e.stopPropagation) {
    * e.stopPropagation(); //IE以外
    * } else {
    * e.cancelBubble = true; //IE
    * }
    * }
    *
    * 3、阻止默认事件:
    * IE浏览器中:将e.returnValue属性设为false;
    * 其他浏览器:调用e.preventDefault();方法
    * 兼容写法:function eventHandler(e) {
    * e = e || window.event;
    * // 防止默认行为
    * if (e.preventDefault) {
    * e.preventDefault(); //IE以外
    * } else {
    * e.returnValue = false; //IE
    * }
    * }
  • 相关阅读:
    MPP架构简介
    redis5.0 集群卡槽混乱解决方案
    python 批量删除文件扩展名
    【组原】微命令、微指令、微操作和微程序
    从零部署.NetCoreAPI到Linux 下
    gnom(ubuntu) 随机更换桌面壁纸软件(脚本)
    vscode 更换背景图片的 python 脚本
    打开 vscode 随机更换背景
    WebRTC M91 DShow Camera Jabra PanaCast 50 绿屏问题修复
    ES学习笔记
  • 原文地址:https://www.cnblogs.com/zhang11424/p/6717624.html
Copyright © 2020-2023  润新知