jquery基础认识

1.jquery对象和dom对象的转换

（1）dom对象转化为jquery对象：只需要使用$()将dom对象包围起来

//dom对象
var cr = document.getElementById("cr");
//jquery对象
var $cr = $(cr);

（2）jquery对象转化为dom对象：有两种方法，一种是直接使用[index]，另一种是使用jquery的get(index)方法

注意：由于jquery对象是一个类似数组的对象，所以可以使用操作数组的方式index来操作jquery对象

方法一：

//jquery对象
var $cr = $("#cr");
//dom对象
var cr = $cr[0];

方法二：

//jquery对象
var $cr = $("#cr");
//dom对象
var cr = $cr.get(0);

2.jquery代码编写的命名规范

如上面的例子，我们一般把jquery对象命名为$xxx格式，而dom对象直接是xxxx，这样能增强代码可读性。

3.解决jquery与其他库的冲突

（1）jquery库在其他库之后导入

          在其他库和jquery库都被加载完毕之后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权转移给其他javascript库。

//..省略其它代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery（将被绑定点击事件）</p>

<!--引入prototype-->
<script src = "lib/prototype.js" type="text/javascript"></script>
<!--引入jquery-->
<script scr="lib/jquery.js" type="text/javascript"></script>

<script>
	jQuery.noConflict();   //将变量$的控制权移交给prototype.js
	jQuery(function(){     //使用jquery.js
		jQuery("p").click(function(){
			alert(jQuery(this).text());
		})
	})
    
    $("#pp").style.display = "none";  //使用prototype.js隐藏元素
</script>

      此外，还有另一种选择，如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：

<script>
	var $j = jQuery.noConflict();   //自定义一个快捷方式
	$j(function(){     //使用jquery.js，利用自定义快捷方式$j
		$j("p").click(function(){
			alert($j(this).text());
		})
	})
    
    $("#pp").style.display = "none";  //使用prototype.js隐藏元素
</script>

      如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法。

     方法一：

     

<script>
	jQuery.noConflict();   //将变量$的控制权移交给prototype.js
	jQuery(function($){     //使用jquery设定页面加载时执行的函数
		$j("p").click(function(){   //在函数内部继续使用$()方法
			alert($j(this).text());
		})
	})
    
    $("#pp").style.display = "none";  //使用prototype.js隐藏元素
</script>

    方法二：

<script>
	jQuery.noConflict();   //将变量$的控制权移交给prototype.js
	(function($){      //定义匿名函数并设置形参$
		$(function(){     //在函数内部继续使用的$均为jQuery
		   $j("p").click(function(){   
			   alert($j(this).text());
		   });
	   });
	})(jQuery);
    
    $("#pp").style.display = "none";  //使用prototype.js隐藏元素
</script>

（2）jquery库在其他库之前导入

          如果jquery在其他库之前导入，那么可以直接使用“jQuery”来做一些jquery的工作，同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。

//..省略其它代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery（将被绑定点击事件）</p>

<!--引入jquery-->
<script scr="lib/jquery.js" type="text/javascript"></script>
<!--引入prototype-->
<script src = "lib/prototype.js" type="text/javascript"></script>

<script>
	jQuery(function(){     //直接使用jQuery，而无需调用jQuery.noConflict();
	   jQuery("p").click(function(){
	      alert(jQuery(this).text());
	   })
	})
    
    $("#pp").style.display = "none";  //使用prototype.js隐藏元素
</script>