Dom对象转成jQuery对象：
jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
如何把jQuery对象转成DOM对象？
利用数组下标的方式读取到jQuery中的DOM对象
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery和Dom对象的相互转换</title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> var $div=$('div');//jQuery对象 var div=$div[0];//转换成dom对象 div.style.color='red';//操作dom对象的属性 /*用jQuery找到所有的div元素 因为jQuery对象也是一个数组结构 可以通过数组下标索引找到第一个div元素 通过返回的div对象 调用它的style对象 修改第一个div * 元素的颜色 这里需要注意的是 数组的索引是从0开始 也就是第一个元素下标是0*/ /*通过jQuery自带的的get()方法 允许我们之间访问jQuery对象中相关的DOM节点 get方法提供一个元素的索引*/ var $div=$('div');//jQuery对象 var div=$div.get(0);//通过get方法 转换成DOM对象 div.style.color='red';//操作dom对象的属性 </script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> </body> </html>
相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery和Dom对象的相互转换</title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> var div=document.getElementsByTagName('div');//dom对象 var $div=$(div);//jQuery对象 var $first=$div.first();//找到第一个div元素 $first.css('color','red');//给第一元素设置颜色 /*通过getelementsTagName获取到所有div节点的元素 结果是一个dom集合对象 不过这个对象是一个数组集合 通过$(div)方法转换成jQuery对象 通过天涯jQuery对象中的first与css方法查找 * 第一个元素并且改变其颜色*/ </script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> </body> </html>
jQuery中DOM元素的获取index方法
get方法是通过已知的索引在合集中找到对应的元素。如果反过来，已知元素如何在合集中找到对应的索引呢？
.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。
语法：参数接受一个jQuery或者dom对象作为查找的条件
.index() .index( selector ) .index( element )
- 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
- 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
- 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1
简单来说：
<ul> <a></a> <li id="test1">1</li> <li id="test2">2</li> <li id="test3">3</li> </ul>
$("li").index() 没有传递参数，反正的结果是1，它的意思是返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1
如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理
$("li").index(document.getElementById("test2")) //结果：1
$("li").index($("#test2")) //结果:1
实际的使用可以参考右边的代码区域：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>index方法</title> <style> a{ font-size: 30px; font-weight: 900; } </style> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ $('#exec').click(function(){ var v=$('#animation').val(); var $span=$('span'); $span.empty();//从元素移除内容 if(v==1){ /*找到第一个li的同辈节点中的索引位置*/ $span.text($('li').index())//TEXT()函数是将数值转换为按指定数字格式表示的文本 }else if(v==2){ /*通过传递dom查找*/ $span.text($('li').index(document.getElementById('test5'))); }else if(v==3){ /*通过传递jQuery对象查找*/ $span.text($('li').index($('#test6'))) } }) }); </script> </head> <body> <h2>index方法</h2> <ul> <a></a> <a></a> <li id="test1">1</li> <li id="test2">2</li> <li id="test3">3</li> </ul> <ul> <li id="test4">4</li> <li id="test5">5</li> <li id="test6">6</li> </ul> <select id="animation"> <option value="1">index无参数</option> <option value="2">index传递dom</option> <option value="3">index传递jQuery对象</option> </select> <input id="exec" type="button" value="点击执行"/> <br/> <br/>索引结果: <span></span> </body> </html>
一.addEventListener()和removeEventListener()讲解
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注：事件名不含"on",如“click”)
现在的版本可以省略第三个参数，默认值为false
示例：
要在body上添加事件处理程序，可以使用下列代码：
/*在body上添加事件处理程序*/ document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false);通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除
正确用法示例：
function bodyScroll(event){
event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);
二.addEventListener()与removeEventListener()的第三个参数详解
布尔值参数是true，表示在捕获阶段调用事件处理程序；就是最不具体的节点先接收事件，最具体的节点最后接收事件
如果是false，在冒泡阶段调用事件处理程序;则是先寻找指定的位置，由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
DOM事件流如图（剪自javascript高级程序设计）：
由图可知捕获过程要先于冒泡过程 即 true的触发顺序在false前面
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JS中控制绑定事件执行顺序</title> <style type="text/css"> *{margin: 0;padding: 0;} </style> </head> <body> <div id="id1" style="height: 400px;background-color: blue;border: 1px solid #000;"> <div id="id2" style="height: 200px;background-color: yellow;border: 1px solid #000;"> <div id="id3" style="height: 50px;background-color: red;border: 1px solid #000;"> </div> </div> </div> </body> <script type="text/javascript"> var obj1=document.getElementById('id1'); obj1.addEventListener('click',function(){ alert('id1'); },false); var obj2=document.getElementById('id2'); obj2.addEventListener('click',function(){ alert('id2'); },false); var obj3=document.getElementById('id3'); obj3.addEventListener('click',function(){ alert('id3'); }); </script> </html>
querySelector 定义和用法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
语法
document.querySelector(CSS selectors)
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| CSS 选择器 | String | 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。 对于多个选择器，使用逗号隔开，返回一个匹配的元素。 |
技术细节
| DOM 版本: | Selectors Level 1 Document Object |
|---|---|
| 返回值: | 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。 |
实例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>querySelector 定义和用法</title> </head> <body> <p id="demo">id='demo1'的p元素</p> <p>点击按钮修改过第一个 id="demo" 的 p元素内容</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ document.querySelector("#demo").innerHTML='Hello World'; } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>获取文档中第一个<p>元素</title> <script> function myFunction(){ document.querySelector('p').style.backgroundColor='red'; } </script> </head> <body> <p>这是一个p元素</p> <p>这也是一个p元素</p> <p>点击按钮修改文档中第一个p元素的背景颜色</p> <button onclick="myFunction()">点我</button> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>获取文档中第一个<p>元素</title> <script> function myFunction(){ document.querySelector('.example').style.backgroundColor='red'; } </script> </head> <body> <h2 class="example">class='example'的标题</h2> <p class="example">class='example'的段落</p> <p>点击按钮为第一个 class="example" 的元素添加背景颜色。</p> <button onclick="myFunction()">点我</button> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>获取文档中第一个<p>元素</title> <script> function myFunction(){ document.querySelector('p.example').style.backgroundColor='red'; } </script> </head> <body> <h2 class="example">class='example'的标题</h2> <p class="example">class='example'的段落</p> <p>点击按钮为第一个 class="example" 的p元素添加背景颜色。</p> <button onclick="myFunction()">点我</button> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>获取文档中第一个<p>元素</title> <style> a[target] { background-color: yellow; } </style> </head> <body> <p> CSS 选择器 a[target] 确保所有有 target 属性的链接背景颜色为黄色：</p> <a href="http://www.w3cschool.cc">w3cschool.cc</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> <p>点击按钮为带有 target 属性的链接添加红色背景。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ document.querySelector('a[target]').style.border='10px solid red'; } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>获取文档中第一个<p>元素</title> </head> <body> <h2> h2 元素</h2> <h3> h3 元素</h3> <script> document.querySelector('h3','h2').style.backgroundColor='red'; </script> </body> </html>