AjaxjQuery简介

一、简介

1.1、概述
乘机WEB2.0及ajax思想在网络上的长足前进传播,陆续出现了一部分佳绩的Js框架,在那之中比较显赫的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这么些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关心点转向成效供给而非完成细节上,从而提升项指标支付速度。
jQuery是继prototype之后的又三个优质的Javascript框架。它是由 约翰 Resig
于 2007 年终开立的,它促进简化 JavaScript™ 以及Ajax
编制程序。有人利用那样的一比喻来相比prototype和jQuery:prototype就像Java,而jQuery如同ruby.
它是二个精简飞快灵活的JavaScript框架,它能让你在你的网页上海高校概的操作文书档案、处监护人件、达成特效并为Web页面添加Ajax交互。

它富有如下一些性格:
一 、代码简练、语义易懂、学习高效、文档丰盛。
二 、jQuery是三个轻量级的脚本,其代码非凡迷你,最新版的JavaScript包只有20K左右。
叁 、jQuery援助CSS1-CSS3,以及主旨的xPath。
四 、jQuery是跨浏览器的,它协助的浏览器包含IE 6.0+, FF 1.5+, Safari 2.0+,
Opera 9.0+。
五 、能够很简单的为jQuery扩大其余职能。
⑥ 、能将JS代码和HTML代码完全分开,便于代码和保卫安全定祥和改动。
七 、插件足够,除了jQuery本人包罗的部分特效外,能够经过插件完成越来越多效益,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。
jQuery的安插性会变动你写JavaScript代码的主意,下跌您读书运用JS操作网页的复杂度,升高网页JS开发效能,无论对于js初学者照旧出名专家,jQuery都将是你的首要选用。
jQuery适合于设计师、开发者以及那多少个幸亏者,同样适合用来生意支出,能够说jQuery适合任何JavaScript应用的地点,可用于差其余Web应用程序中。
官方站点:http://jquery.com/  粤语站点:http://jquery.org.cn/
1.2、目的
透过学习本文书档案,可以对jQuery有3个简易的认识掌握,清楚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定义的法子。
二 、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;
三 、如何收获jQuery集合的某一项

对于取得的要素集合,获取当中的某一项(通过索引内定)能够运用eq或get(n)方法可能索引号获取,要小心,eq返回的是jquery对象,而get(n)和目录重返的是dom成分对象。对于jquery对象只可以接纳jquery的法子,而dom对象只可以使用dom的办法,如要获取第5个<div>元素的内容。有如下三种艺术:
$(“div”).eq(2).html();              //调用jquery对象的不二法门
$(“div”).get(2).innerHTML;       //调用dom的办法属性
四 、同一函数达成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事件都足以拥有两种调用方法
五 、集合处理效果
对于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成分则弹出其剧情
六 、扩展大家要求的功力

$.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));
七 、帮助方式的连写

所谓连写,即能够对二个jquery对象再三再四调用种种不一致的不二法门。
例如:
$(“p”).click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]});
八 、操作成分的体制

第三归纳以下二种格局:
$(“#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
⑨ 、完善的事件处理作用

Jquery已经为大家提供了各个事件处理方法,我们无需在html成分上直接写事件,而能够直接为经过jquery获取的对象添加事件。
如:
$(“#msg”).click(function(){})       //为成分添加了单击事件
$(“p”).click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]})
//为四个例外的p成分单击事件分别设定分歧的拍卖
jQuery中多少个自定义的事件:
(1)hover(fn1,fn2):二个模拟悬停事件(鼠标移动到叁个指标方面及移出这几个目的)的点子。当鼠标移动到一个匹配的要素上面时,会触发钦命的第3个函数。当鼠标移出那些因素时,会接触钦命的第①个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$(“tr”).hover(function(){
$(this).addClass(“over”);
},
       function(){
       $(this).addClass(“out”);
});
(2)ready(fn):当DOM载入就绪能够查询及控制时绑定3个要实施的函数。
$(document).ready(function(){})
//页面加载达成提醒“Load Success”,也就是onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn):
每趟点击时切换要调用的函数。借使点击了1个匹配的要素,则触发钦定的第②个函数,当再一次点击同一成分时,则触发钦命的第二个函数。随后的历次点击都再一次对这四个函数的轮换调用。
       //每一回点击时轮换添加和删除名为selected的class。
       $(“p”).toggle(function(){
              $(this).addClass(“selected”);   
       },function(){
              $(this).removeClass(“selected”);
       });
(4)trigger(eventtype): 在每3个匹配的要素上接触某类事件。
例如:
       $(“p”).trigger(“click”);          
   //触发全部p成分的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每贰个匹配的要素中(添加)删除绑定的轩然大波。
例如:
$(“p”).bind(“click”, function(){.text());});      
//为各类p成分添加单击事件
$(“p”).unbind();       //删除全数p成分上的全体事件
$(“p”).unbind(“click”)       //删除全数p成分上的单击事件

⑩ 、多少个实用特效效能

个中toggle()和slidetoggle()方法提供了事态切换效用。
如toggle()方法蕴含了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
1一 、多少个有效的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?

1二 、消除自定义方法或其它类库与jQuery的争执

诸多时候大家和好定义了$(id)方法来赢得3个成分,或许别的的一部分js类库如prototype也都定义了$方法,如若同时把这几个剧情放在一块儿就会挑起变量方法定义争辨,Jquery对此特意提供了法子用于缓解此难题。
动用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第三个落到实处它的老大库或事先自定义的$方法。之后选择Jquery的时候要是将持有的$换到jQuery即可,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如:
jQuery.noConflict();
// 开端运用jQuery
jQuery(“div   p”).hide();
// 使用任何库的 $()
$(“content”).style.display = ‘none’;

相关文章