有的是时候我们协调定义了$(id)方法来获得一个因素,大概其余的有的js类库如prototype也都定义了$方法,假使同时把这个剧情放在一块儿就会挑起变量方法定义争辨,Jquery对此尤其提供了点子用于解决此难点。
应用jquery中的jQuery.noConflict();方法就可以把变量$的调控权让渡给第一个落到实处它的不得了库或事先自定义的$方法。之后接纳Jquery的时候纵然将装有的$换到jQuery就能够,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如:
jQuery.noConflict();
// 起始使用jQuery
jQuery(“div   p”).hide();
// 使用别的库的 $()
$(“content”).style.display = ‘none’;

它抱有如下1些表征:
一、代码简练、语义易懂、学习高效、文书档案丰富。
贰、jQuery是二个轻量级的剧本,其代码万分Mini,最新版的JavaScript包唯有20K左右。
叁、jQuery扶助CSS1-CSS三,以及核心的xPath。
四、jQuery是跨浏览器的,它帮助的浏览器包罗IE 陆.0+, FF 一.五+, Safari ②.0+,
Opera 9.0+。
5、能够很轻松的为jQuery扩充其余职能。
六、能将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定义的措施。注意dom对象和jquery对象是有分别的,调用方法时要专注操作的是dom对象照旧jquery对象。
平常的dom对象一般能够经过$()调换来jquery对象。
如:$(document.getElementById(“msg”))则为jquery对象,能够行使jquery的措施。
鉴于jquery对象自作者是二个会见。所以只要jquery对象要转变为dom对象则必须抽出在那之中的某1项,一般可经过索引抽取。
如:$(“#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集合的某一项

$.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,prop一,propN):用一个或八个别的对象来扩大三个目的,再次回到那一个被扩充的靶子。那是jquery完结的接续方式。
如:
$.extend(settings, options);      
//合并settings和options,并将统一结果重返settings中,相当于options承接setting并将再三再四结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并将统一结果回到到setting中而不掩盖default内容。
能够有多少个参数(合并多项并回到)
$.map(array,
fn):数组映射。把2个数组中的项目(处理转变后)保存到到另二个新数组中,并赶回生成的新数组。
如:
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(arr一,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的冲突

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

 

对此取得的元素集合,获取在这之中的某壹项(通过索引钦定)能够动用eq或get(n)方法恐怕索引号获取,要专注,eq重回的是jquery对象,而get(n)和目录重返的是dom成分对象。对于jquery对象只好利用jquery的办法,而dom对象只好选用dom的点子,如要获取第多少个<div>成分的内容。有如下两种方法:
$(“div”).eq(二).html();              //调用jquery对象的方法
$(“div”).get(二).innerHTML;       //调用dom的点子属性
肆、同1函数完结set和get

4、语法总括和注意事项

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,一,二的p元素分别设定差别的字体颜色。
$(“tr”).each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]}) 
    
//落成表格的隔行换色效果
$(“p”).click(function(){.html())})              
//为种种p元素扩展了click事件,单击某些p成分则弹出其故事情节
6、扩充大家必要的功用

例如:<script src=”js/jquery.js”></script>
引进之后便可在页面包车型客车任意地点选取jQuery提供的语法。

经过jquery的$()引用成分包含透过id、class、成分名以及元素的层级关系及dom恐怕xpath条件等措施,且重回的靶子为jquery对象(集合对象),不可能平昔调用dom定义的不二等秘书诀。
二、jQuery对象与dom对象的转变

3、学习课程及参考资料

首要不外乎以下两种艺术:
$(“#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
玖、完善的事件处理功效

1、关于页面成分的引用

 

$.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));
七、协理形式的连写

一、简介

2、使用方法

1.1、概述
乘机WEB二.0及ajax理念在网络上的全捷达鹏举传播,六续出现了部分理想的Js框架,个中相比较知名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这么些JS框架应用到大家的品类中能够使程序员从统一筹划和书写繁杂的JS应用中摆脱出来,将关切点转向作用供给而非完结细节上,从而巩固项目标开拓进程。
jQuery是继prototype之后的又一个优异的Javascript框架。它是由 John Resig
于 200陆 年底成立的,它助长简化 JavaScript™ 以及Ajax
编制程序。有人使用那样的一比喻来比较prototype和jQuery:prototype就如Java,而jQuery就像ruby.
它是2个简单神速灵活的JavaScript框架,它能让你在你的网页上海高校概的操作文书档案、处总管件、达成特效并为Web页面增加Ajax交互。

里面toggle()和slidetoggle()方法提供了情景切换功用。
如toggle()方法包涵了hide()和show()方法。
slideToggle()方法包罗了slideDown()和slideUp方法。
jQuery,1一、多少个有效的jQuery方法

10、多少个实用特效作用

在要求使用JQuery的页面中引进JQuery的js文件就能够。

Jquery已经为我们提供了各个事件处理方法,大家无需在html成分上一直写事件,而能够直接为通过jquery获取的目的增多事件。
如:
$(“#msg”).click(function(){})       //为成分增加了单击事件
$(“p”).click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]})
//为八个例外的p成分单击事件分别设定分裂的拍卖
jQuery中多少个自定义的事件:
(一)hover(fn一,fn2):三个效仿悬停事件(鼠标移动到二个对象方面及移出这几个目的)的主意。当鼠标移动到1个男才女貌的元素上面时,会接触钦定的首先个函数。当鼠标移出那几个成分时,会接触钦定的第一个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$(“tr”).hover(function(){
$(this).addClass(“over”);
},
       function(){
       $(this).addClass(“out”);
});
(二)ready(fn):当DOM载入就绪能够查询及调控时绑定二个要试行的函数。
$(document).ready(function(){})
//页面加载完结提醒“Load Success”,也正是onload事件。与$(fn)等价
(三)toggle(evenFn,oddFn):
每一次点击时切换要调用的函数。假诺点击了3个相配的成分,则触发钦点的第四个函数,当再次点击同一成分时,则触发钦点的第三个函数。随后的历次点击都再一次对那多个函数的轮换调用。
       //每一遍点击时轮换增加和删除名字为selected的class。
       $(“p”).toggle(function(){
              $(this).addClass(“selected”);   
       },function(){
              $(this).removeClass(“selected”);
       });
(4)trigger(eventtype): 在每一个十二分的因素上接触某类事件。
例如:
       $(“p”).trigger(“click”);          
   //触发全数p成分的click事件
(五)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每3个合作的因素中(加多)删除绑定的风浪。
例如:
$(“p”).bind(“click”, function(){.text());});      
//为每种p成分增添单击事件
$(“p”).unbind();       //删除全部p元素上的有所事件
$(“p”).unbind(“click”)       //删除全部p成分上的单击事件

请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程:《jQuery的源点教程》和《使用 jQuery 简化 Ajax
开荒》
(表明:以上文书档案都位居了【附属类小部件】中)

相关文章

网站地图xml地图