web 前端5 玩转jquery jquery对象跟DOM对象的互相转换

Dom对象
	document.getElementById('i1')

jQuery对象
	$('#i1')
	
Dom对象 => jQuery对象
	$(document.getElementById('i1'))
	
	
	
	$(document.getElementsTagName('div')[0])
	
	
jQuery对象  =>  Dom对象
	$('div').first()[0]

一 jquery简介

1 jquery是什么

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

2 什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

比如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象

var variable = DOM 对象

基本语法：$(selector).action()

写在前面 jquery中的$ 就是JQuery 对象，二者相等 $ = JQuery

　　　　$( ) 括号内部的值为标签元素，得到的结果是 jquery对象，一般是一个集合，加索引取到dom对象

1 jquery的两种循环

1.1 jQuery 对象访问 each(callback)

each(callback)
概述
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
参数
callbackFunctionV1.0

对于每个匹配的元素所要执行的函数
示例
描述:
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
结果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
描述:
如果你想得到 jQuery对象，可以使用 $(this) 函数。
HTML 代码:
<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div >Stop here</div> 
<div></div>

<div></div>
<div></div>
jQuery 代码:
$("img").each(function(){
  $(this).toggleClass("example");
});
描述:
你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div >Stop here</div> 
<div></div>

<div></div>
<div></div>
jQuery 代码:
$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

jquery对象each 循环