传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[技术笔记] js总结

© 杨东9527 初级黑马   /  2019-1-12 16:38  /  138 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

JavaScript 大总结

JavaScript分为三大块 ECMAScript DOM BOM

ECMAScript 是js的一些基础语法,包括 变量,五大基础数据类型,三种数据类型的转换,运算符,流程控制,数组,函数,对象内置对象.
DOM 操作页面中的元素
元素的操作
        获取元素
                基础选择器
                        id选择器(document.getElementById()) 标签选择器 (document.getElementsByTagName())
                通过节点获取元素
                        获取父节点  子节点.parentNode
                        获取子元素  父元素.children
                        获取兄弟元素 元素.previousElementSibling 元素.nextElementsSiblings 有兼容问题
        操作元素样式
                设置 元素.style.样式名 = 值
                获取 元素.style.样式名
                给元素添加类 元素.className = 值
        操作元素内容
                元素.innerHTML = 值
                元素.innerText = 值 存在兼容问题 在火狐2016版以前使用textContent
        操作元素的属性
                普通属性 元素.属性名
                表单三个特殊属性 checked selected disable 在js中值为布尔类型
                在js中class属性是关键字 所以使用ClassName代替
                自定义属性
                        设置 元素.setAttribute(属性名 , 属性值 )
                        获取 元素.getAttribute(属性名) 注意获取到的是字符型
        创建元素
                document.write()
                元素.innerHTML
                document.creatElement(标签名)
        添加元素
                元素.appendChild(新元素)
        移除某个子元素
                父元素.removeChild
        克隆某个元素
                元素.cloneNode
        元素的属性中的三大家族
                offset系列        offsetWidth 和 offsetHeight 盒子内容+边框
                                        offsetTop 和 offsetLeft 距离最近的定位父元素的位置
                client系列  clientWidth 和 clientHeight 盒子的内容
                                        clientTop 和 clientLeft 边框宽度
                scroll系列  scrollWidth 和 scrollHeight 获取事件内容的宽高包括隐藏的内容
                                        scrollTop 和 scrollLeft 卷出去的距离
事件操作
        事件绑定
                元素.on+事件名 = 事件处理函数;
                元素.addEventListener(事件名 , 事件处理函数 , 默认false(冒泡)); 有兼容问题 在IE低版本中使用的是元素.attachEvent(on+事件名 ,事件处理函数)
        事件解绑
                元素.on+事件名 = null
                元素.removeEventListener(事件名 , 有名事件函数);
        事件冒泡
                有嵌套关系的标签注册了相同的事件, 内部事件触发,触发效果从内往外的效果就是事件冒泡
        事件委托
                利用事件冒泡给父元素添加事件
        事件对象
                定义: 所有的事件函数系统都会传入一个参数记录事件发生时的参数
                获取 给事件处理函数添加一个形参接受  有兼容问题在低版本的IE中使用的是window.event
        事件对象的属性
                e.target 触发事件的目标元素 低版本中时 e.srcElement
                e.clienX e.clienY 鼠标在可视窗口的位置
                e.pageX e.pageY 鼠标在整个页面中的位置 兼容问题在IE低版本不支持
                        解决方法 pageX = e.pageX || e.clienX + document.documentElement.scrollLeft
                        解决方法 pageY = e.pageY || e.clienY + document.body.scrollTop
        事件对象的方法
                阻止事件冒泡 e.stopPropgation() 有兼容问题
                阻止标签默认行为 e.preverseDefault() 有兼容问题
BOM 操作浏览器的功能
        window 对象
                注意点: 在全局作用域中声明的变量函数都属于window对象
                                name 和 top 这两个属性在window对象中存在 所有在定义变量名时不能使用
                window方法: 定时器 setInterval setTimeOut
                                        页面加载事件 window.onload=function(){}

分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马