锋利的JQuery学习笔记01

1. JQuery的链式操作风格

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	$(".has_children").click(function(){
		$(this).addClass("highlight")			//为当前元素增加highlight类
			.children("a").show().end()			//将子节点的a元素显示出来并重新定位到上次操作的元素
		.siblings().removeClass("highlight")		//获取元素的兄弟元素，并去掉他们的highlight类
			.children("a").hide();				//将兄弟元素下的a元素隐藏
	});
});
</script>

2. JQuery对象与DOM对象:JQuery对象只能使用JQuery的API,DOM对象只能使用javascript方法.

3. JQuery对象与DOM对象定义变量的风格

//JQuery var $variable = JQuery对象
//DOM var variable = DOM对象

4.JQuery对象转换成DOM对象

   1.JQuery对象是数组对象,通过index得到

     var $cr = $("#cr");

　  var cr = $cr[0];

     alert(cr.checked);

   2.JQuery对象的API,getIndex方法

　  var $cr = $("#cr");

　  var cr = $cr.get(0);

     alert(cr.checked);

5.DOM对象转换JQuery对象

   var cr = document.getElementById("cr");

   var $cr = $(cr);

6.怎么解决javascript和其他库的冲突: 通过调用jQuery.noConflict()函数.将$的控制权移交给其他javascript库,移交以后平时使用$的地方只能使用jQuery代替了

<script type="text/javascript">
jQuery.noConflict();				//将变量$的控制权让渡给prototype.js
jQuery(function(){					//使用jQuery
	jQuery("p").click(function(){
		alert( jQuery(this).text() );
	});
});

$("pp").style.display = 'none';		//使用prototype
</script>

　另外一种方式,不想与其他javascript库冲突,又想定义一个快捷方式

<script type="text/javascript">
var $j = jQuery.noConflict();		//自定义一个比较短快捷方式
$j(function(){						//使用jQuery
	$j("p").click(function(){
		alert( $j(this).text() );
	});
});

$("pp").style.display = 'none';		//使用prototype
</script>

　另外两种方式,移交出$控制权,又能继续使用$的方式

<script type="text/javascript">
jQuery.noConflict();				//将变量$的控制权让渡给prototype.js
jQuery(function($){					//使用jQuery
	$("p").click(function(){		//继续使用 $ 方法
		alert( $(this).text() );
	});
});

$("pp").style.display = 'none';		//使用prototype
</script>

<script type="text/javascript">
jQuery.noConflict();				//将变量$的控制权让渡给prototype.js
(function($){						//定义匿名函数并设置形参为$
	$(function(){					//匿名函数内部的$均为jQuery
		$("p").click(function(){	//继续使用 $ 方法
			alert($(this).text());
		});
	});
})(jQuery);							//执行匿名函数且传递实参jQuery

$("pp").style.display = 'none';		//使用prototype
</script>

　　

 7.让VS2008支持智能感知的方式:

 8.简写方式

$(document).ready(function(){
    //.........
);

$(function(){
   //..........
});