js对象和jQuery对象的区别和转换

js对象和jQuery对象的区别和转换

前言

因本人时间和理解能力有限，只能对核心和较为常用的知识点进行学习记录。jQuery手册有最全面的知识点概述，如遇到，手册链接如下，供参考学习
jQuery手册

使用jQuery引入的包：
各版本jQuery包引用地址

我使用的官网jquery压缩版引用地址:

<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
版本是 1.3.2

---

---

以下下两个代码片段实现的效果是一样的，点击图片能切换到另一张图片，第一种使用jQuery内置的方法实现的，第二种是用的方法实现的，效果一样体现出两点：

1. 学习jQuery需要有js基础，在jQuery高级的开发中还是需要用到js来编写一些jQuery方法不能实现的效果
2. jQuery实现效果的方法有很多，是对js代码的封装，有100多种方法，必要时借助手册，用jQuery能节省很多代码量

	<script type="text/javascript">
	//toggle 循环单击
	//hover = mouseout mouseleave
	//toggle方法比hover效果更好
		$('img').toggle(
			function(){
				this.src = '1.jpg';
			},
			function(){
				this.src = '2.jpg';
			}
			);
	</script>

	<script type="text/javascript">
		i = 0;
		$('img').click(function(){
			if(i%2==0){
			this.src = '1.jpg'
		}else{
			this.src = '2.jpg';
		}
		i++
		});
	</script>

$(this) 和 this.src

以上代码实现了js代码到jQuery的转换，减少了代码量。
jQuery还有很多方法，能实现十几行甚至几十行JS代码才能完成的效果。jQuery丰富的插件支持和完善的文档使其广泛使用。

一、JS对象转JQuery对象：

普通的JS对象一般可以通过$()转换成JQuery对象。 如

var JsItem=document.getElementById(“msg”))
var JqueryItem = $(JsItem);

二、JQuery对象转JS对象：

由于JQuery对象本身是一个集合。所以如果JQuery对象要转换为JS对象则必须取出其中的某一项，一般可通过索引取出。 如：

//第一种方式

$("#msg")[0];//$("td")[5] 

//第二种方式

$("#msg").eq(0)[0];//$("div").eq(1)[0]

//第三种方式

 ("#msg").get(0);//$("div").get()[1]