DOM

  • document对象有很多属性来描述文档信息

    • document.doctype
    • document.title
    • document.characterSet
    • document.head
    • document.body
    • document.images
    • document.readyState属性返回当前文档的状态,共有三种可能的值
      • loading:加载HTML代码阶段,尚未完成解析
      • interactive:加载外部资源阶段
      • complete:全部加载完成
    • document.location属性返回一个只读对象,提供了当前文档的URL信息
    • document.write()写入新内容,覆盖新文档。还没有用close方法关闭,它所写入的内容就会追加在已有内容的后面。
      • document.open方法用于新建一个文档,供write方法写入内容。它实际上等于清除当前文档,重新写入内容
      • document.close方法用于关闭open方法所新建的文档。一旦关闭,write方法就无法写入内容了。
  • Element对象表示HTML元素。

    • 主要属性

      • nodeName:元素标签名,还有个类似的tagName
      • nodeType:元素类型
      • className:类名
      • id:元素id
      • children:子元素列表(HTMLCollection)
      • childNodes:子元素列表(NodeList)
      • firstChild:第一个子元素
      • lastChild:最后一个子元素
      • nextSibling:下一个兄弟元素
      • previousSibling:上一个兄弟元素
      • parentNode、parentElement:父元素
    • 查询元素

      • getElementById()
      • getElementsByClassName() 返回一个类似数组的对象(HTMLCollection类型的对象)
      • getElementsByTagName()返回值是一个HTMLCollection对象
      • getElementsByName()()选择带name属性的标签,返回一个NodeList格式的对象
      • querySelector()
      • querySelectorAll()返回的是NodeList类型的对象
    • 创建元素

      • createElement()创建元素节点
      • createTextNode()创建文本节点
      • createDocumentFragment()创建一个存在于DOM内存但不属于当前文档的DocumentFragment对象,对他任何改动都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。
                    var body=document.body
        var cearteDiv =body.appendChild(document.createElement("div")).appendChild(document.crea            teTextNode("cearteDiv"))
        var cearteFragmentDIV =body.appendChild(document.createDocumentFragment()).appendChild(d            ocument.createTextNode("我和上面写法一样,但不存在"))
                                               //       document.createDocumentFragment().appendChild(doc         ument.getElementById('lg'))//不存在
        var cearteFragmentDIV2=body.appendChild(document.createDocumentFragment().appendChild(do            cument.createTextNode("要这样写才存在")))
                                                
        
        var cearteFragmentObj=document.createDocumentFragment()
        cearteFragmentObj.appendChild(document.createTextNode(" lalala"))
        body.appendChild(cearteFragmentObj)         
        
    • 修改元素

      • appendChild() 在元素末尾添加元素
      • insertBefore() 在某个元素之前插入元素
      • replaceChild()接受两个参数:要插入的元素和要替换的元素
    • 删除元素

      • parentNode.removeChild(childNode);parentNode是删除目标的父元素,childNode是删除目标
    • 克隆元素

      • node.cloneNode(true);方法用于克隆元素,方法有一个布尔值参数,传入true的时候会深复制,也就是会复制元素及其子元素(IE还会复制其事件),false的时候只复制元素本身
  • 属性操作

    • getAttribute()用于获取元素的attribute值
    • createAttribute()方法生成一个新的属性对象节点,并返回它。
    • setAttribute("","")方法用于设置元素属性
    • removeAttribute()用于删除元素属性
    • innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容
    • innerHTML属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM
  • 修改样式

    • dom.style.xxx=""
    • getComputedStyle(dom).XXX //获取样式
    • dom.classList.add('class') //新增 class
    • dom.classList.remove('class') //删除 class
    • dom.classList.toggle('class') //新增/删除切换
    • dom.classList.contains('class') // 判断是否拥有 class
  • 页面宽高

    • element.clientHeight 内容高度
    • element.offsetHeight 内容高度包括边框
    • element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条, scrollHeight等于 clientHeight
    • element.scrollTop 滚动的高度
    • window.innerHeight 窗口的高度
    • element.getBoundingClientRect() 获取元素在视窗中的位置
  • event对象

    • e.preventDefault() 取消事件默认行为
      • e.cancelable 属性表明该事件是否可以被取消默认行为
    • e.stopPropagation() 取消事件进一步捕获或冒泡
    • e.target 事件的目标元素 常用做事件代理
  • 常用事件

    • click 鼠标单击
    • dblclick 鼠标双击
    • mousedown 鼠标指针在目标元素上触发(包括子元素)
    • mouseout 鼠标指针在目标元素上离开触发(包括子元素)
    • mouseenter 鼠标指针在目标元素上触发(除了子元素)
    • mouseleave 鼠标指针在目标元素上离开触发(除了子元素)
    • focus 元素获取焦点触发
    • blur 元素失去焦点触发
    • keyup 按下去松开触发
    • change 元素失去焦点,并且里面的值发生改变时触发
    • input 元素value值发生变化时实时触发,常用于实时更新滑动条type="range"
    • 媒体事件
      • playing 当音乐开始播放,暂停后重新开始播放,设置currentTime后开始播放时触发
      • pause 当音乐暂停时和结束时触发
      • ended 当音乐结束时触发
      • timeupdate 当currentTime更新时会触发timeupdate事件,这个事件的触发频率由系统决定
      • volumechange 当音量改变时触发
  • DOM元素位置和尺寸大小

    • 高度
      • offsetHeight = content + border + padding = 200 + 2 * 2 + 10 * 2 = 224
      • clientHeight = content + padding = 200 + 2 * 10 = 220
      • window.getComputedStyle(dom).height = css设置的样式
      • dom.getBoundingClientRect()方法获取与元素相关的CSS属性边框集合。 返回对象中共有6个属性。(bottom,right,left,top,height,width)
    • element.scrollTop 滚动的高度
    • window.innerHeight 窗口的高度

动画

优化 requestAnimationFrame()

 document.querySelector('.box').animate([
    {width:'0px'},
    {width:'100px'}
  ],1000)

jQuery

选择器

  • .eq 获取指定下标的jQuery对象,与之类似的有.get会jQuery对象转DOM对象
    • .eq(index), .get([index]) get()不写参数把所有对象转为DOM对象返回
  • .next / .prev 选择相邻的下一个元素/选择相邻的下一个元素
    • .next([selector])/.prev([selector]) 紧跟着的兄弟元素满足选择器时,才会返回此元素
  • .nextAll / .prevAll 选择相邻的下面全部元素/选择相邻的上面全部元素
    • .nextAll([selector]), .prevAll([selector]) 筛选出满足选择器的元素,返回此元素
  • .siblings 匹配相邻的所有元素
    • .siblings([selectors]) 筛选出满足选择器的元素,返回此元素
  • .parent / .parents 匹配对象的每个父元素/匹配对象的每个祖先元素
    • $('li.item-a').parent()/$('li.item-a').parents('div') 筛选出满足选择器的元素,返回此元素
  • .children / .find 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
    • .children([selector])/.find([selector])
  • .filter 遍历元素对每个元素进行过滤
    • .filter(selector) / $('li').filter(function(index,node) {return index % 3 == 2;})
  • .not 从匹配的元素集合中移除指定的元素,和filter相反
    • .not(selector), .not(function(index))
  • .has 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
    • .has(selector), .has(dom)
  • .is 判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象.
    • .is(selector), is(function(index)), is(dom/jqObj) 如果这些元素至少一个匹配给定的参数,那么返回true

DOM操作

  • .append() 向对象头部追加内容,可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象
    • .append(content[,content]) / .append(function(index,html))
  • .prepend() 向对象头部追加内容,用法和append类似,内容添加到最开始
    • .prepend(content[,content]) / .prepend(function(index,html))
  • .before() 在对象前面(不是头部,而是外面,和对象并列同级)插入内容,参数和append类似
    • .before([content][,content]) / .before(function)
  • .after() 在对象后面(不是尾部,而是外面,和对象并列同级)插入内容,prepend类似
    • .after([content][,content]) / .after(function(index))
  • .remove() 删除被选元素(及其子元素)
    • .remove([selector]) 可以添加一个可选的选择器参数来过滤匹配的元素
  • .empty() 清空被选择元素内所有子元素(不包括被选择元素)
    • $('body').empty();
  • .html() 这是一个读写两用的方法,用于获取/修改元素的innerHTML
    • $('div').html() 当没有传递参数的时候,返回元素的innerHTML
    • $('div').html('123') 当传递了一个string参数的时候,修改元素的innerHTML为参数值
  • .text() 和html方法类似,操作的是DOM的innerText值
    • $('div').text()

属性操作

  • .val() 用来读取或者修改input的value值
    • .val([value])
  • .attr() 读取或者修改元素特定属性的值
    • .attr(attributeName) 读取
    • .attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 修改
  • .removeAttr() 为匹配的元素集合中的每个元素中移除一个属性(attribute)
    • $('div').removeAttr('id');
  • .prop()主要用来操作元素的property的,property和attibute是非常相似的概念
  • .css() 处理元素的css样式
    • 例如 $('.box').css('color','pink')
    • .css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
  • .addClass() 给指定元素添加class类名
    • .addClass(className) / .addClass(function(index,currentClass))
  • .removeClass() 移除元素单个/多个/所有class
    • removeClass([className]) / ,removeClass(function(index,class))
  • .hasClass() 检查元素是否包含某个class,返回true/false
    • $( "#mydiv" ).hasClass( "foo" )
  • .toggleClass() 切换类,如果元素对象有这个类名则去除,没有则添加
    • .toggleClass(className)

方法

  • .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 类似元素forEach()
    • $("li").each(function(index,node) {})
  • .$.each() 一个通用的迭代函数,它可以用来无缝迭代对象和数组。
    • jQuery.each( collection, callback(indexInArray, valueOfElement) )
  • $.extend() 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
    • jQuery.extend([deep,] target [, object1 ] [, objectN ] )
  • .clone() 方法深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点
    • .clone( [withDataAndEvents ] ) //可用于DOM元素的复制
  • .index() 从给定集合中查找特定元素index
    • .index() 没参数返回第一个元素index
    • .index(selector)如果参数是DOM对象或者jQuery对象,则返回参数在集合中的index
    • .index(element) 如果参数是选择器,返回第一个匹配元素index,没有找到返回-1
  • .ready() 当DOM准备就绪时,指定一个函数来执行。与原生DOMContentLoaded类似
    • $(document).ready(handler)和$(handler)完全等价

动画

  • hide() 隐藏 display:none
  • show() 显示 display:block
  • .fadeIn()
  • .fadeOut()
  • .fadeTo()
  • .animate()自定义动画
  • 清除动画
    • .clearQueue() 停止当前动画,清除动画队列中未执行的动画
    • .finish()停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
    • .stop(true,true ) 停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
    • .stop(true,true ) 停止当前动画,清除动画队列中未执行的动画