zoukankan      html  css  js  c++  java
  • 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
    * }
    * }
  • 相关阅读:
    Max Sum Plus Plus HDU
    Monkey and Banana HDU
    Ignatius and the Princess IV HDU
    Extended Traffic LightOJ
    Tram POJ
    Common Subsequence HDU
    最大连续子序列 HDU
    Max Sum HDU
    畅通工程再续
    River Hopscotch POJ
  • 原文地址:https://www.cnblogs.com/zhang11424/p/6717624.html
Copyright © 2011-2022 走看看