pony — Tue, 29 Jul 2008 08:59:00 GMT

一、简�?/strong>

1.1、概�q?/strong>
　　随着WEB2.0�?ajax思想在互联网上的快速发展传播，陆箋出现了一些优�U�的Js框架�Q�其中比较著名的有Prototype、YUI、jQuery、mootools�?Bindows以及国内的JSVM框架�{�，通过��这些JS框架应用到我们的��目中能够�ɽE�序员从设计和书写繁杂的JS应用中解脱出来，��关注点转向功能需求而非实现�l�节上，从而提高项目的开发速度�?a class="" title="entrymore" name="entrymore">
　　jQuery是��prototype 之后的又一个优�U�的Javascript框架。它是由 John Resig �?2006 �q�初创徏的，它有助于��?JavaScript™ 以及Ajax �~�程。有��Z��用这��L��一比喻来比较prototype和jQuery�Q�prototype��像Java�Q�而jQuery��像ruby. 它是一个简�z�快速灵�zȝ��JavaScript框架�Q�它能让你在你的�|�页上简单的操作文��、处理事件、实现特效�ƈ为Web��面��d��Ajax交互�?br />
它具有如下一些特点：

代码��l�、语义易懂、学习快速、文��丰富�?
jQuery是一个轻量��的脚本，其代码非常小巧，最新版的JavaScript包只�?0K左右�?
jQuery支持CSS1-CSS3,以及基本的xPath�?
jQuery是跨��览器的�Q�它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+�?
可以很容易的为jQuery扩展其他功能�?
能将JS代码和HTML代码完全分离�Q�便于代码和�l�护和修攏V�?
插�g丰富�Q�除了jQuery本��n带有的一些特效外�Q�可以通过插�g实现更多功能�Q�如表单验证、tab��D��、拖放效果、表格排序、DataGrid�Q�树形菜单、图像特效以及ajax上传�{��?/li>

　　jQuery的设计会改变你写JavaScript代码的方式，降低你学习��用JS操作�|�页的复杂度�Q�提高网��JS开发效率，无论对于js初学者还是资�׃��Ӟ��jQuery都将是您的首选�?br /> jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合��M��JavaScript应用的地方，可用于不同的Web应用�E�序中�?br /> 官方站点�Q?a target="_blank" mce_>http://jquery.com/   中文站点�Q?a target="_blank" mce_>http://jquery.org.cn/

1.2、目�?/strong>
　　通过学习本文��，能够对jQuery有一个简单的认识了解�Q�清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、��用技巧及注意事项�?br />
二、��用方�?/strong>
　　在需要��用JQuery的页面中引入JQuery的js文�g卛_��?br /> 例如�Q?lt;script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js">
　　引入之后便可在页面的��L��地方使用jQuery提供的语法�?br />
三、学习教�E�及参考资�?/strong>
　　请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程�Q��?a title="" target="_blank">jQuery的�v�Ҏ��E?/a>》和�?a title="" target="_blank">使用 jQuery ��?Ajax 开�?/a>�?br />

四、语法�ȝ��和注意事��?/strong>

1、关于页面元素的引用
　　通过jquery�?()引用元素包括通过id、class、元素名以及元素的层�U�关�p�d��dom或者xpath条�g�{�方法，且返回的对象为jquery对象�Q�集合对象）�Q�不能直接调用dom定义的方法�?br />
2、jQuery对象与dom对象的�{�?/strong>
　　只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用�Ҏ��时要注意操作的是dom对象�q�是jquery对象�?br /> 普通的dom对象一般可以通过$()转换成jquery对象�?br /> 如：$(document.getElementById("msg"))则�ؓjquery对象�Q�可以��用jquery的方法�?br /> 　　�׃��jquery对象本��n是一个集合。所以如果jquery对象要�{换�ؓdom对象则必��d��出其中的某一��，一般可通过索引取出�?br /> 　　如：$("#msg")[0]�Q?("div").eq(1)[0]�Q?("div").get()[1]�Q?("td")[5]�q�些都是dom对象�Q�可以��用dom中的�Ҏ��Q�但不能再��用Jquery的方法�?br /> 以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一��?/strong>
　　对于获取的元素集合，获取其中的某一��（通过索引指定�Q�可以��?span style="color: blue">eq�?span style="color: blue">get(n)�Ҏ��或者烦引号获取�Q?span style="color: orange">要注意，eq�q�回的是jquery对象�Q�而get(n)和烦引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取�W�三�?lt;div>元素的内宏V��有如下两种�Ҏ��Q?br /> $("div").eq(2).html();     //调用jquery对象的方�?br /> $("div").get(2).innerHTML;   //调用dom的方法属�?br />
4、同一函数实现set和get
　　Jquery中的很多�Ҏ��都是如此�Q�主要包括如下几个：
$("#msg").html();     //�q�回id为msg的元素节点的html内容�?br /> $("#msg").html("new content");
//��?#8220;new content” 作�ؓhtml串写入id为msg的元素节点内容中,��面昄��_�体的new content

$("#msg").text();     //�q�回id为msg的元素节点的文本内容�?br /> $("#msg").text("new content");
//��?#8220;new content” 作�ؓ普通文本串写入id为msg的元素节点内容中,��面昄��new content

$("#msg").height();     //�q�回id为msg的元素的高度
$("#msg").height("300");   //��id为msg的元素的高度设�ؓ300
$("#msg").width();     //�q�回id为msg的元素的宽度
$("#msg").width("300");   //��id为msg的元素的宽度设�ؓ300

$("input").val(");   //�q�回表单输入框的value�?br /> $("input").val("test");   //��表单输入框的value��D��为test

$("#msg").click();   //触发id为msg的元素的单击事�g
$("#msg").click(fn);   //为id为msg的元素单��M��件添加函�?br /> 同样blur,focus,select,submit事�g都可以有着两种调用�Ҏ��

5、集合处理功�?/strong>
　　对于jquery�q�回的集合内�Ҏ��需我们自己循环遍历�q�对每个对象分别做处理，jquery已经为我们提供的很方便的�Ҏ��q�行集合的处理�?br /> 包括两种形式�Q?br /> $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为烦引分别�ؓ0�Q?�Q?的p元素分别讑֮�不同的字体颜艌Ӏ?br />
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效�?br />
$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事�g�Q�单��L��个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
   min: function(a, b){return a < b?a:b; },
   max: function(a, b){return a > b?a:b; }
});   //为jquery扩展了min,max两个�Ҏ��
使用扩展的方法（通过“$.�Ҏ��?#8221;调用�Q�：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的�q�写
　　所谓连写，卛_��以对一个jquery对象�q�箋调用各种不同的方法�?br /> 　　例如�Q?br /> $("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式
　　主要包括以下几种方式�Q?br /> $("#msg").css("background");     //�q�回元素的背景颜�?br /> $("#msg").css("background","#ccc")   //讑֮�元素背景为灰�?br /> $("#msg").height(300); $("#msg").width("200");   //讑֮�宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的�Ş式设定样�?br /> $("#msg").addClass("select");   //为元素增加名�U�Cؓselect的class
$("#msg").removeClass("select");   //删除元素名称为select的class
$("#msg").toggleClass("select");   //如果存在�Q�不存在�Q�就删除�Q�添加）名称为select的class

9、完善的事�g处理功能
　　Jquery已经为我们提供了各种事�g处理�Ҏ��Q�我们无需在html元素上直接写事�g�Q�而可以直接�ؓ通过jquery获取的对象添加事件�?br /> 如：
$("#msg").click(function(){alert("good")})   //为元素添加了单击事�g
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//��Z��个不同的p元素单击事�g分别讑֮�不同的处�?/p>
jQuery中几个自定义的事�?/font>�Q?br /> �Q?�Q?span style="color: blue">hover(fn1,fn2)�Q?/span>一个模仿悬停事�Ӟ��鼠标�U�d��C��个对象上面及�U�d��q�个对象�Q�的�Ҏ��。当鼠标�U�d��C��个匹配的元素上面�Ӟ��会触发指定的�W�一个函数。当鼠标�U�d��q�个元素�Ӟ��会触发指定的�W�二个函数�?br /> //当鼠标放在表格的某行上时��class�|��ؓover�Q�离开时置为out�?br /> $("tr").hover(function(){
$(this).addClass("over");
},
   function(){
   $(this).addClass("out");
});
�Q?�Q?span style="color: blue">ready(fn):当DOM载入��q�A可以查询及操�U�|��l�定一个要执行的函数�?br /> $(document).ready(function(){alert("Load Success")})
//��面加蝲完毕提示“Load Success”,相当于onload事�g。与$(fn)�{��h
�Q?�Q?span style="color: blue">toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点��M��一个匹配的元素�Q�则触发指定的第一个函敎ͼ�当再�ơ点��d��一元素�Ӟ��则触发指定的�W�二个函数。随后的每次点击都重复对�q�两个函数的轮番调用�?br />    //每次点击时轮换添加和删除名�ؓselected的class�?br />    $("p").toggle(function(){
     $(this).addClass("selected");
   },function(){
     $(this).removeClass("selected");
   });
�Q?�Q?span style="color: blue">trigger(eventtype): 在每一个匹配的元素上触发某�c�M��件�?br /> 例如�Q?br />    $("p").trigger("click");     //触发所有p元素的click事�g
�Q?�Q?span style="color: blue">bind(eventtype,fn)�Q�unbind(eventtype): 事�g的绑定与反绑�?br /> 从每一个匹配的元素中（��d��Q�删除绑定的事�g�?br /> 例如�Q?br /> $("p").bind("click", function(){alert($(this).text());});   //为每个p元素��d��单击事�g
$("p").unbind();   //删除所有p元素上的所有事�?br /> $("p").unbind("click")   //删除所有p元素上的单击事�g

10、几个实用特效功�?/strong>
　　其中toggle()和slidetoggle()�Ҏ��提供了状态切换功能�?br /> 　　如toggle()�Ҏ��包括了hide()和show()�Ҏ��?br /> 　　slideToggle()�Ҏ��包括了slideDown()和slideUp�Ҏ��?br />
11、几个有用的jQuery�Ҏ��
$.browser.��览器类型：��浏览器�c�d��。有效参敎ͼ�safari, opera, msie, mozilla。如��是否ie�Q?.browser.isie�Q�是ie��览器则�q�回true�?br /> $.each(obj, fn)�Q?/span>通用的�P代函数。可用于�q�似地�P代对象和数组�Q�代替��@环）�?br /> �?br /> $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
�{��h于：
var tempArr=[0,1,2];
for(var i=0;i    alert("Item #"+i+": "+tempArr[i]);
}
也可以处理json数据�Q�如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
�l�果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)�Q?/span>用一个或多个其他对象来扩展一个对象，�q�回�q�个被扩展的对象。这是jquery实现的��承方式�?br /> 如：
$.extend(settings, options);
//合�ƈsettings和options�Q��ƈ��合�q�结果返回settings中，相当于options�l�承setting�q�将�l�承�l�果保存在setting中�?br /> var settings = $.extend({}, defaults, options);
//合�ƈdefaults和options�Q��ƈ��合�q�结果返回到setting中而不覆盖default内容�?br /> 可以有多个参敎ͼ�合�ƈ多项�q�返回）
$.map(array, fn)�Q?/span>数组映射。把一个数�l�中的项�?处理转换�?保存到到另一个新数组中，�q�返回生成的新数�l��?br /> 如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合�ƈ两个数组�q�删除其中重复的��目�?br /> 如：$.merge( [0,1,2], [2,3,4] )   //�q�回[0,1,2,3,4]
$.trim(str)�Q?/span>删除字符串两端的�I�白字符�?
如：$.trim("   hello, how are you?   ");   //�q�回"hello,how are you? "

12、解册��定义�Ҏ��或其他类库与jQuery的冲�H?/strong>
　　很多时候我们自己定义了$(id)�Ҏ��来获取一个元素，或者其他的一些js�c�d��如prototype也都定义�?�Ҏ��Q�如果同时把�q�些内容攑֜�一起就会引起变量方法定义冲�H�，Jquery�Ҏ��专门提供了方法用于解��x��问题�?br /> 　　使用jquery中的jQuery.noConflict();�Ҏ��卛_��把变�?的控制权让渡�l�第一个实现它的那个库或之前自定义�?�Ҏ��。之后应用Jquery的时候只要将所有的$换成jQuery卛_��Q�如原来引用对象�Ҏ��$("#msg")改�ؓjQuery("#msg")�?br /> 如：
jQuery.noConflict();
// 开始��用jQuery
jQuery("div   p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

pony 2008-07-29 16:59 发表评论

亚洲精品欧美一区二区三区,这里只有精品在线,福利h视频在线

[转蝲]jquery radio取��|��checkbox取��|��select取��|��radio选中�Q�checkbox选中�Q�select选中�Q�及其相�?