锋利的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(){ //使用jQueryjQuery("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(){//.......... });

　　

 

 

 

转载于:https://www.cnblogs.com/eclipsekan/archive/2012/08/27/2658180.html

总结

以上是生活随笔为你收集整理的锋利的JQuery学习笔记01的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。