JS与jQuery及H5

关于js和jQuery以及H5新增api的综合文档，陆续更新中。

DOM

• 获取元素
  • DOM原生
    • 通过id获取元素：document.getElementbyId('id值')，因为一个页面中只允许存在一个id，所以获取的是该id的元素，即返回值是一个元素对象。
    • 通过标签名获取元素:document.getElementsByTagName('tagname')，获取的是当前页面所有的‘tagname’标签，返回值是一个伪数组。
    • 通过类名获取元素：document.getElementsByClassName('class属性值')，获取的是当前页面中所有类名等于‘class属性值’的元素，返回值是一个伪数组。
    • 通过name值获取元素：document.getElementsByName('name值')，这种方式需要首先设置自定义属性name，然后通过获取自定义属性name值获取元素，返回值是一个伪数组。
  • jQuery
    • jQuery获取元素的方式都是通过jQuery('选择器')/$('选择器')的方式获取，选择器的类型有基本选择器、层级选择器、过滤选择器。
    • 基本选择器：
    • 层级选择器：
    • 过滤选择器：
    • 筛选选择器：
    • 除了以上几种，其实还有属性选择器、表单、层级过滤等等多种选择器，详情可以看帮助文档。
  • H5新增api
    • document.queryselector('选择器')：选择器必须是合法的CSS选择器，也就是说使用的是与CSS一样的选择器。返回与指定的选择器组匹配的元素的后代的第一个元素。
    • document.queryselectorAll('选择器'):选择器必须是合法的CSS选择器，也就是说使用的是与CSS一样的选择器。返回与指定的选择器组匹配的所有元素。
• 操作类(class属性)
  • DOM原生
    • 获取属性值：var value = Ele.className; 返回所有属性值的字符串，各个属性值之间通过空格隔开。注意！class是js的保留关键字，所以不能用来获取和设置类的属性值。
    • 添加属性值：Ele.className = '属性值1 属性值2 ...'; 注意！这样设置类属性值会将原来的属性值覆盖掉！所以如果是添加需要先获取然后拼接字符串再赋值！
    • 删除属性值：Ele.className = ''; 注意！这样会将所有的class的值都删除，但是HTML中还会保留class这个属性，但是没有值。所以如果只删除某个值需要先获取然后拼接字符串的方式来删除。
    • 除了以上的方式来对类进行增删改查，还有一个attribute系列的属性可以操作，详情可以看自定义属性DOM原生系列。
  • jQuery
    • 添加属性值：Ele.addClass(className); 为每个匹配的元素添加一个或多个样式名，如果是多个，使用空格隔开。使用这种方式添加新的属性值是追加模式，即不会覆盖原有的属性值。
    • 删除属性值：Ele.removeClass(className);为每个匹配元素删除一个或多个用空格隔开的属性值。如果是删除所有的属性值，还是会保留class这个属性
    • 查询属性值：Ele.hasClass(className);为每个匹配元素查询是否存在一个或多个用空格隔开的属性值，存在返回true，否则返回false。注意！如果选择器选择的是多个元素，只要其中有一个元素中存在符合参数的属性值那么就会返回true！
    • 切换属性值：Ele.toggleClass(className);为每个匹配的元素添加或删除一个或多个属性值，如果参数是多个属性值使用空格分隔。是删除还是添加取绝于匹配的元素中是否存在该值，存在则删除，不存在则添加。多个属性值中，同样存在的删除不存在的删除
  • H5新增api
    • H5看到jQuery中存在那么好的操作类的方式，也添加了功能类似的api，这些api都在Ele.classList;下面，这个属性的返回值是一个伪数组，伪数组中的_poto_执行一个原型DOMTokenList，这个原型里面就有H5新增用于操作类的函数。注意H5的兼容性问题，IE10及以上才支持这些新增的api。
    • 添加属性值：Ele.classList.add(className1,className),如果添加的是多个属性值，是通过传递多个参数的方式实现的，这样的方式添加属性值不会覆盖原来的属性值，而是追加的方式。
    • 删除属性值：Ele.classList.remove(className);如果删除的是多个属性值，是通过传递多个参数的方式实现的，如果全部删除还是会保留class这个属性，只是没有了值。
    • 切换属性值：Ele.classList.toggle(className);该方法的参数只能是一个，如果传递多于一个参数，那么只有第一个参数被使用。同样的存在则删除，不存在则添加。
    • 检测属性值：Ele.classList.contains(className);该方法的参数只能是一个，如果传递多于一个参数，那么只有第一个参数被使用。存在返回true，否则返回false。
• 自定义属性
  • DOM原生
    • 设置属性：Ele.setAttribute(name,value);设置指定元素上的某个属性值，如果该属性存在则更新它的值(覆盖旧值)，否则使用指定的名称和值添加一个新的属性。这个方法既可以操作自定义属性，也可以操作DOM树上的属性。注意！如果传入大写的参数都会被小写化。
    • 删除属性：Ele.removeAttribute(name);如果要删除一个属性，应该使用这个方法，而不是使用setAttribute(name,'')。因为这个方法会属性和值一起删除。
    • 获取属性值：Ele.getAttribute(name);通过传入属性名的方式获取该属性的值，如果不存在返回null，否则返回属性值。注意自定义属性不能通过Ele.自定义属性名 这样的方式获取，这种方式只能获取HTML自带的属性，即DOM树上原生的属性。
  • jQuery
    • 设置属性：设置单个属性：Ele.attr(name,value);设置多个属性：Ele.attr(Object obj);如果设置单个属性，那么通过键值对的方式设置，如果设置多个属性，那么传递一个对象进来即可。注意，无论使那种方式设置，都会给匹配的元素集合中的每一个元素设置属性。
    • 获取属性：Ele.attr(name);获取匹配的元素集合中第一个元素的属性值。
    • 删除属性：Ele.removeattr(name);为匹配的元素集合中的每一个元素删除一个属性。
    • 设置属性：Ele.data(key,value);在匹配元素上存储任意相关数据，意思是value可以是任意的JavaScript数据类型，包括Array和Object，注意key需要遵循驼峰命名。但是这样设置的自定义属性和值不能通过浏览器看到，所以jQuery的data实际是操作内存的。而这样设置的好处是可以直接将数据绑定到元素上，避免了循环引用导致的内存泄漏。
    • 更新属性：Ele.data(Object obj);更新已经设置的自定义属性的数据，可以同时更新多个自定属性的数据。传入的是一个对象，对象里面每一个属性对应一个更新的数据。
    • 获取属性:Ele.data(key);返回选定元素集合中第一个元素给定名称的数据存储的值，不存在返回undefined，如果不传递任何参数，那么返回的将是一个对象，对象的属性是自定应属性，对应的值是设置的数据。值得注意的是，H5中新增的自定义属性可以通过这两种方式获取到。切记无论是获取H5的还是这里的，参数都不应该加前缀data，而是驼峰命名法使用data后面的。
  • H5新增api
    • 使用H5新增的api我们时刻要注意兼容性问题，特别是IE方面的。
    • H5中给出了自定义属性的规范写法，这种方式是直接在HTML标签中添加自定义属性的，要求格式：data-*；如<div data-my-data = "is a good idear"></div>；切记这里不要使用驼峰命名法，因为渲染页面的时候会全部修改成为小写的，如果我们希望获取的是驼峰命名的自定义属性名，那么久应该像上面那样将每个单词分开写。
    • 获取H5自定义属性：Ele.dataset[name] or Ele.dataset ，第一种方式返回指定属性名的自定义属性值，第二种方式则是返回所有的自定义属性值。注意！！这种方式不能获取jQuery中data方法设置的自定义属性！！！同时如果是直接在标签设置的元素，如上面那样，那么name使用驼峰命名规则来拼接，获取上面的就是myData.
    • 设置H5规范自定义属性：Ele.dataset[name] = value;这种方式设置的自定义属性可以被jQuery中的data方法获取到，需要注意name必须使用驼峰命名规则，如mySet，那么在HTML标签上就是'data-my-set = value'的形式存在的，但是你获取的时候还是mySet。设置的自定义属性和值可以在HTML代码中看到，所以是操作DOM的，跟jQuery中的data操作内存不一样。
• 主题
• 事件
  • 事件对象
    • 事件对象Event：在事件被触发的时候，在触发的事件的函数里我们会收到一个event对象，这是JS自动传参的。通过该对象我们可以获得一些很有用的数据。如下 altkey：返回当事件被触发时，"ALT"是否被按下。 button：返回但事件被触发时，哪个鼠标按钮被点击。 clientX：返回事件被触发时，鼠标指针的水平坐标。 clientY：返回事件被触发时，鼠标指针的垂直坐标。 ctrKey：返回事件被触发时，"CTRL"键是否被按下。 metaKey：返回事件被触发时，”meta“键是否被按下 relatedTarget：返回与事件的目标节点相关的节点。 screenX：返回当某个事件被触发时，鼠标指针的水平位置。 screenY：返回当某个事件被触发时，鼠标指针的垂直坐标。 shiftKey：返回当事件触发时，”SHIFT“键是否被按下。 IE属性（除了上面的鼠标/事件属性，IE浏览器还支持下面的属性） cancelBubble：如果事件句柄想阻止事件传播(事件冒泡)到包容对象，必须把该属性设置为true。 fromElement：对于mouseover和mouseout事件，fromElement引用一处鼠标的元素 KeyCode：对于keypress事件，该属性声明了呗敲击的键生成的Unicode字符码， offsetX，offsetY：发生事件的地点在事件元素的坐标系统中的X坐标和Y 坐标 returnValue：如果设置了该属性，它的值比事件句柄的返回值优先级高 srcElement：对于生成事件的window对象、document对象或Element对象的引用 toElement：对于mouseover和mouseout事件，该属性引用移入鼠标的元素。 x，y：事件发生的位置的X坐标和Y坐标。他们相对于用CSS动态定位的最内层包容元素标准Event属性，下面列出了2级DOM事件标准定义的属性 bubbles：返回布尔值，指示事件是否是起泡事件类型。 cancelable：返回布尔值，指示事件是否可拥有可取消的默认动作 currentTarget：返回其事件监听触发该事件的元素。 eventPhase：返回事件传播的当前阶段。 target：返回触发此事件的元素(事件的目标节点)。 timeStamp：返回事件生成的日期和事件。 type：返回当前event对象标识的事件的名称。 initEvent()：初始化新创建的event对象的属性。 preventDefault()：通知浏览器不要执行与事件关联的默认动作。 stopPropagation()：不再派发事件(事件是否冒泡由它控制，IE不支持)
  • 事件继承
    • 我们知道CSS中存在样式继承，而在事件中同样存在继承，例如一个div里面包裹多个p标签，如果我们给div绑定点击事件，那么子元素p标签也会被绑定同样的点击事件。我们可以通过这个原理实现给所有子元素绑定同一个事件。但是此时this指向的是父元素，一定要注意的！
• 节点操作
  • 文档document：每一个HTML文件就是一个document 元素element：文档内的HTML标签就是元素 节点node：文档内的所有内容都属于节点，包括元素、属性、文本；其中文本又包括文字、空格、换行、回车等等无论是什么节点，他们都属于对象，都可以进行DOM操作。
  • 原生DOM
    • 节点的方法：这里说的节点的属性是指获得的节点可以调用的属性，而不是获取节点的属性。nodeType：获取节点的类型，返回值有1、2、3三种，1标签、2属性、3文本nodeName：获取节点的名字，元素返回大写的元素名，属性返回小写的属性名，文本返回#text；nodeValue：获取节点的值，元素返回null，属性返回属性值，文本返回文本内容。
    • 获取父节点：Ele.parentNode 获取父元素：Ele.parentElement
    • 获取子节点：Ele.childNodes 获取子元素：Ele.children
• 操作样式
  • DOM原生
    • 设置CSS样式：Ele.style.样式属性名="属性值";如果CSS样式多个单词之间使用“-”分隔的，那么使用驼峰命名法来写，例如background-color写成backgroundColor。
    • 获取CSS样式值：class的样式设置有行内样式，内部样式，外部样式和内联样式，注意通过JS的style方式设置的样式属于内联样式。所以获取CSS央视之也有三种方式： 行内样式获取：Ele.属性值 内联样式获取：Ele.style.属性名 内部样式、外部样式获取： offsetWidth和offsetHeight：分别获取元素的宽高 offsetLeft和offsetTop：这两个属性获取的值需要参照offsetParent，具体如下：当父盒子是标准流的时候，offsetParent是body，此时的offsetLeft和offsetTop的值是参照自己到body边框的距离。当父盒子脱标时，offsetParent是这个脱标的父盒子，此时的offsetLeft和offsetTop的值是自己到父盒子边框的距离。
    • Ele.className = class值;Ele.className = ""; 除了使用上面的方法，我们还可以通过操控class值的方式来操作样式。这是原生方式。
  • jQuery
    • 设置CSS样式：Ele.css("属性名","属性值")；如果想同时设置多个样式，那么应该传入一个JS对象或者json格式对象。jQuery中属性名支持CSS方式也支持DOM的驼峰命名方式。
    • 获取CSS样式：Ele.css("属性名")，而在jQuery1.9之后支持同时获取多个属性值，方法是将需要获取的属性放到一个数组中，然后将数组作为参数传递给css()，切记jQuery版本！！！！！
    • 除了以上的方式之外，对于常用的样式属性设置和取值，jQuery还提供了简单的方法，例如width()\height()等等，这些方法既可以用户获取也可以用于设置。更多的方法请参考jQuery帮助文档。