由于前三天帮其他同学做个项目的界面设计和布局之类的事情,很久没上来写点东西来记录自己的历程了
好了,再未来的三天内,我会重温一下jquery的知识,都是自己的深入的理解,因为最近在做项目,或者帮其他同学做他们的毕业设计之类的前端东西,感觉juqery实在是一个很好的东西,所以最近想重温一下以前的东西,自己感触很深,理解更加透彻了,所以在这里写下来,也算是自己对自己的历程的总结吧,不过不是很全面,但是我觉得是精彩的地方,我没有写过书什么的,所以记下来的东西不是很 全面,所以有阅读的朋友需要全面地知识的话,还是劝你上网找个全面的电子书看一下,学习一下,比较好一点
好了,今天开始了,重返博客园呢,呵呵。。又在自言自语了,不过,已经习惯了
首先,说一下js吧,由于js的出现,使得网页和用户之间实现了一种实时的,动态的,交互的关系,使网页更加炫,更加酷了。
但同时,js的弊端也慢慢浮现出来了,js自身的三大弊端:第一:复杂的文档对象模型(Dom问题) 第二:不一致的浏览器实现(浏览器问题) 第三:缺乏便捷的开发,调试工具(工具问题)
正当js慢慢退下的时候,这个时候ajax出现了,ajax得出现,使得wed的应用更强大很多很多,所以围绕实现的ajax技术的相应的知识或者框架就慢慢浮现出来了
就在这个时候2006年的一个开源项目里,jquery出现了。
好把,这里自己总结一下jquery的优势:
第一:轻量级,
完整的jquery的库有一百多k的,经过普通的压缩后,变成了四十多k吧,然后如果再经过服务器的gzip压缩后,就剩下十几k了,这是相当的乐观的,能够用上jquery强的功能,却不用付出太大的用户体验的网页浏览速度来得到,是非常好的,对于现在家庭的带宽如此大,这都只是瞬间完成的
第二:强大的选择器;
这个提一下js对dom进行选择吧,每一个都是getelementbyid或者getelementbytagname或者getelementbyname之类的,过长的提取方法和每一次单一的提取,让很多程序员都很抓狂,相对js的选择操作,jquery的强大的选择器绝对是玩爆呢,只要是css1–css3几乎所有的选择器,以及jquery独创的高级而复杂的选择器,甚至可以让开发者自己编写属于自己的选择器,这实在是太强大了
第三:出色的dom操作的封装
jquery封装了大量常用的dom操作,使开发者在编写dom操作相关程序的时候能够得心应手
第四:可靠的事件处理机制
第五:完善的ajax
jquery将所有的ajax操作封装到一个函数$.ajax)里,使得开发者处理ajax的时候能够专心处理业务逻辑而无需关心复杂的的浏览器兼容性和XMLHttpRequet对象的创建和使用的问题
第六:出色的浏览器兼容性
作为一个流行的js库,jquery能够在IE6以上,或者ff safari opera等都是很好的兼容的
在jquery库中,$就是juqery的一个简写形式
往下,我们在网页里面调用js的时候,都是在<script></script>之间的写入jquery或者js的操作的,我们写入jquery的操作的时候,第一句总是$document).readyfunction){},而我们在 调用js操作的时候,第一句总是window.onload=function){},然而,他们之间有什么区别呢?
首先,讨论执行时机这个点上,windon.onload必须等待网页中的内容加载完毕后(包括图片)才能执行,而$document).ready),在网页中所有的dom结构绘制完毕后就执行,可能dom元素关联的东西并没有加载完,也是可以执行的
然后,在编写一个数上,window.onload=function{}不能出现多个,只能出现一个,而$document).ready)则可以出现多个。然后在这多个里面执行他们要处理的动作
在简写方面:window.onload是没有简写的,而$document).ready)有几个简写的,其中一个就是:$function){})
好,继续往下学习:
jquery强大的链式操作:
例子:
$”.has_children”).clickfunction{
$this).addClass”highlight”)
.children”a”).show).end) //将子节点的<a>元素显示出来并重新定位到上次操作的元素
.siblings).removeClass”highlight”)
.children”a”).hid);
})
来学习一下js对象:
var domObj = document.getElementById”id”); //获得DOM对象
var ObjHtml = domObj.innerHTML;
学习jquery对象:
说白了,jquery对象就是通过jquery包装DOM对象后产生的对象
jquery对象是独有的,如果一个对象是jquery对象,那么就可以使用jquery里的方法
$”#foo”).html); 等同于: document.getElementById”foo”).innerHTML;
在jquery中无法使用DOM对象的人和方法,Dom也不能用jquery对象的任何方法
jquery对象转换成DOM对象:
var $cr = $”#cr”); //juqery 对象
var cr = $cr[0]; 或者 var cr = $cr.get0); //Dom对象
alertcr.checked) //检测这个checkbox是否被选中了
这样子转换之后,就可以使用DOM对象的方法了 ifcr.checked) //DOm方式判断
DOm对象转换jquery对象:
var cr = document.getElementById”cr”); //dom对象
var $cr =$cr); //jquery对象
这样子转换之后就可以使用jquery的方法了 if$cr.is”:checked”)) //jquery方法判断 返回boolean值
备注:DOM对象才能使用DOM方法,jquery对象才能不可以使用DOM中的方法,但jquery对象提供了一套更加完整的工具用于操作DOM元素,后面会讲到
平时用到的jquery对象都是通过$)函数制造出来的,$)函数就是一个jquery对象的制造工厂
解决jquery库和其他库的冲突问题:
1.jquery库在其他库之后导入:
可以在任何时候调用jQuery.noConflict)函数来讲变量$的控制权交给其他的js库
例子:<script>
jQuery.noConflict); //将变量$的控制权移交给prototype,js
JQueryfunction){ //使用jQuery
jQuery(“p”).clickfunction){
})
})
$”pp”).style.display=’none’; //使用prototype
</script>
然而,就可以在程序里将jQuery)函数作为jQuery对象的制造工厂
此外,还有另一种选择,如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以进行如下操作:
var $j= jQuery.noConflict); //自定义一个快捷方式
$jfunction){})
如果不想给jQuery自定义这些备用名称,还想用$而不管其他库的$)方法,同时又不想与其他库相冲突,那么有以下两种解决方法
第一种:
jQuery.noConflict); //将变量$控制权让给其他库
jQueryfunction$){ //使用jQuery设定页面加载时执行的函数
$”p”).clickfunction){ //在函数内部继续使用$)方法
alert$this).text));
})
})
第二种方法:
jQuery.noConfict); //将变量$的控制权交给其他库,
function$){ //定义匿名函数并设置形参为$
$function){ //匿名函数内部的$均为jQury
$’p”).clickfunction){ //继续使用$)方法
alert$this).text));
})
})
})
如果jQury库在其他库之前倒入
这样子的情况下,直接用”jQuery”来做一些jQuery的一些工作,其他后面的库直接用$来用就行的
例子:
jQueryfunction){ //使用jQuery来进行工作
jQuery”p”).clickfunction){
alertjQuerythis).text)); //直接用jQuery来代替$
})
})
$”pp”).style.display=”none”; //使用prototype库
好了,到这里,jQuery深入学习的第一节完成了