jQuery简介

一、简介

1.1、概述
乘WEB2.0暨ajax思想在互联网上的高效腾飞传播,陆续出现了一些美妙之Js框架,其中比较著名的来Prototype、YUI、jQuery、mootools、Bindows以及境内的JSVM框架等,通过以这些JS框架下到我们的类型蒙可知如程序员从计划性和书繁杂的JS应用中摆脱出来,将关注点转向功能需求要非实现细节及,从而加强型的开支速度。
jQuery是就prototype之后的以一个佳绩之Javascript框架。它是出于 John Resig
于 2006 年初创办的,它推向简化 JavaScript™ 以及Ajax
编程。有人使用这样的同一比较喻来比较prototype和jQuery:prototype就比如Java,而jQuery就比如ruby.
它是一个简练快速灵的JavaScript框架,它能够给你于你的网页上粗略的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它们富有如下一些特征:
1、代码简练、语义易亮、学习高效、文档丰富。
2、jQuery是一个轻量级的剧本,其代码非常迷你,最新版本的JavaScript包就发生20K横。
3、jQuery支持CSS1-CSS3,以及着力的xPath。
4、jQuery是超浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+,
Opera 9.0+。
5、可以老易之吧jQuery扩展外职能。
6、能将JS代码和HTML代码完全分开,便于代码和保障与改动。
7、插件丰富,除了jQuery本身含有的片特效外,可以由此插件实现还多职能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效及ajax上传等。
jQuery的筹划会改变而写JavaScript代码的法门,降低您上用JS操作网页的复杂度,提高网页JS开发效率,无论对js初家或有名专家,jQuery都拿凡若的首选。
jQuery适合给设计师、开发者和那些还吓啊,同样可用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同之Web应用程序中。
官方站点:http://jquery.com/  中文站点:http://jquery.org.cn/
1.2、目的
透过上以文档,能够针对jQuery有一个简便的认了解,清楚JQuery与其余JS框架的不等,掌握jQuery的常用语法、使用技巧与注意事项。

 

仲、使用方式

每当急需利用JQuery的页面被引入JQuery的js文件即可。

例如:<script src=”js/jquery.js”></script>
引入之后虽只是在页面的任意地方用jQuery提供的语法。

 

老三、学习课程以及参考资料

请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇对的jquery教程:《jQuery的起点教程》和《使用 jQuery 简化 Ajax
开发》
(说明:以上文档都在了【附件】中)

 

季、语法总结和注意事项

1、关于页面元素的援

由此jquery的$()引用元素包括经过id、class、元素名与元素的层级关系及dom或者xpath条件等措施,且返回的目标呢jquery对象(集合对象),不可知一直调用dom定义之方式。
2、jQuery对象和dom对象的更换

徒出jquery对象才会使用jquery定义的主意。注意dom对象和jquery对象是发出分之,调用方法时一旦注意操作的是dom对象要jquery对象。
常备的dom对象一般可由此$()转换成jquery对象。
苟:$(document.getElementById(“msg”))则为jquery对象,可以用jquery的不二法门。
由于jquery对象自我是一个聚。所以一旦jquery对象要换为dom对象则要取出其中的某个同件,一般不过由此索引取出。
如:$(“#msg”)[0],$(“div”).eq(1)[0],$(“div”).get()[1],$(“td”)[5]这些都是dom对象,可以采用dom中的方,但无可知重使Jquery的法。
以下几种植写法都是没错的:
$(“#msg”).html();
$(“#msg”)[0].innerHTML;
$(“#msg”).eq(0)[0].innerHTML;
$(“#msg”).get(0).innerHTML;
3、如何获得jQuery集合的某某同宗

对于获得之要素集合,获取其中的某某平等起(通过索引指定)可以采用eq或get(n)方法还是索引号获取,要专注,eq返回的是jquery对象,而get(n)和目录返回的凡dom元素对象。对于jquery对象只能动用jquery的法,而dom对象只能用dom的道,如一旦取第三独<div>元素的情。有如下两栽方式:
$(“div”).eq(2).html();              //调用jquery对象的方式
$(“div”).get(2).innerHTML;       //调用dom的法子属性
4、同一函数实现set和get

Jquery中之森道都是这般,主要不外乎如下几单:
$(“#msg”).html();              //返回id为msg的素节点的html内容。
$(“#msg”).html(“<b>new content</b>”);      
//将“<b>new content</b>”
作为html串写副id为msg的素节点内容遭,页面显示粗体的new content
$(“#msg”).text();              //返回id为msg的元素节点的公文内容。
$(“#msg”).text(“<b>new content</b>”);      
//将“<b>new content</b>”
作为一般文本串写副id为msg的素节点内容中,页面显示粗体的<b>new
content</b>
$(“#msg”).height();              //返回id为msg的素的可观
$(“#msg”).height(“300”);       //将id为msg的元素的高度要为300
$(“#msg”).width();              //返回id为msg的要素的大幅度
$(“#msg”).width(“300”);       //将id为msg的因素的升幅设为300
$(“input”).val(“);       //返回表单输入框的value值
$(“input”).val(“test”);       //将表单输入框的value值设为test
$(“#msg”).click();       //触发id为msg的素的单击事件
$(“#msg”).click(fn);       //为id为msg的要素单击事件续加函数
一律blur,focus,select,submit事件都可具备两种植调用方法
5、集合处理效果
于jquery返回的聚众内容无需我们团结循环遍历并针对每个对象分别做处理,jquery已经也咱提供的杀有利的章程开展联谊的处理。
包个别栽样式:
$(“p”).each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]}) 
    
//为索引分别吗0,1,2之p元素分别设定不同之字颜色。
$(“tr”).each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]}) 
    
//实现表格的隔行换色效果
$(“p”).click(function(){.html())})              
//为每个p元素增加了click事件,单击某个p元素则弹来那内容
6、扩展我们需要的功力

$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两独方式
采用扩展的法门(通过“$.方法名”调用):
+”,min=”+$.min(10,20));
7、支持方的连写

所谓连写,即好本着一个jquery对象连续调用各种不同的道。
例如:
$(“p”).click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]});
8、操作元素的样式

首要不外乎以下几栽方式:
$(“#msg”).css(“background”);              //返回元素的背景颜色
$(“#msg”).css(“background”,”#ccc”)       //设定元素背景啊灰
$(“#msg”).height(300); $(“#msg”).width(“200”);       //设定宽高
$(“#msg”).css({ color: “red”, background: “blue”
});//以名值对之样式设定样式
$(“#msg”).addClass(“select”);       //为元素增加名目为select的class
$(“#msg”).removeClass(“select”);       //删除元素名称为select的class
$(“#msg”).toggleClass(“select”);      
//如果存在(不存)就去(添加)名称也select的class
9、完善之事件处理功能

Jquery已经也咱提供了各种事件处理方法,我们无需在html元素上一直写事件,而得以直接为经jquery获取的靶子上加波。
如:
$(“#msg”).click(function(){})       //为元素添加了单击事件
$(“p”).click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]})
//为老三个不等之p元素单击事件分别设定不同的拍卖
jQuery中几只从定义之波:
(1)hover(fn1,fn2):一个效仿悬停事件(鼠标移动及一个靶方面和移出这个目标)的点子。当鼠标移动到一个郎才女貌的因素上面时,会硌指定的第一只函数。当鼠标移出这个因素时,会触发指定的老二个函数。
//当鼠标在表格的某行上时不时拿class置为over,离开时置为out。
$(“tr”).hover(function(){
$(this).addClass(“over”);
},
       function(){
       $(this).addClass(“out”);
});
(2)ready(fn):当DOM载入就绪可以查询与控制时绑定一个假如推行之函数。
$(document).ready(function(){})
//页面加载了提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn):
每次点击时切换要调用的函数。如果点击了一个相当的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二只函数。随后的历次点击都更对及时片独函数的交替调用。
       //每次点击时轮换添加和去名也selected的class。
       $(“p”).toggle(function(){
              $(this).addClass(“selected”);   
       },function(){
              $(this).removeClass(“selected”);
       });
(4)trigger(eventtype): 在各一个配合的因素上触某类事件。
例如:
       $(“p”).trigger(“click”);          
   //触发有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与相反绑定
自从各级一个郎才女貌的素被(添加)删除绑定的事件。
例如:
$(“p”).bind(“click”, function(){.text());});      
//为每个p元素添加单击事件
$(“p”).unbind();       //删除所有p元素上的富有事件
$(“p”).unbind(“click”)       //删除所有p元素上的单击事件

10、几只实用特效功能

中间toggle()和slidetoggle()方法供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几只有效之jQuery方法

$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie,
mozilla。如检测是否ie:$.browser.isie,是ie浏览器虽然赶回true。
$.each(obj,
fn):通用的迭代函数。可用来近似地迭代对象和数组(代替循环)。

$.each( [0,1,2], function(i, n){ ; });
等价于:
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
       ;
}
啊可以拍卖json数据,如
$.each( { name: “John”, lang: “JS” }, function(i, n){ ; });
结果为:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一个要多只其他对象来扩充一个目标,返回这个给扩张的靶子。这是jquery实现的延续方式。
如:
$.extend(settings, options);      
//合并settings和options,并以合结果回到settings中,相当给options继承setting并拿连续结果保存于setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并拿合结果回到到setting中而不掩盖default内容。
得来差不多只参数(合并多宗并回)
$.map(array,
fn):数组映射。把一个数组中之类型(处理转换后)保存及到其它一个初数组中,并赶回生成的新数组。
如:
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):合并两独数组并剔除其中还的种。
如:$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim(”  hello, how are you?   “);        //返回”hello,how are you?

12、解决自定义方法还是其他类库与jQuery的冲

多多时分我们温馨定义了$(id)方法来博一个因素,或者其他的局部js类库如prototype也都定义了$方法,如果以把这些情节在一块儿就会见唤起变量方法定义冲突,Jquery对这个特意提供了艺术用于缓解者问题。
使用jquery中之jQuery.noConflict();方法即可将变量$的控制权让渡给第一单实现它的百般库或者事先起定义之$方法。之后以Jquery的当儿如果拿持有的$换成jQuery即可,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如:
jQuery.noConflict();
// 开始动jQuery
jQuery(“div   p”).hide();
// 以外库的 $()
$(“content”).style.display = ‘none’;

相关文章