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(){}

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(){}