由于前三天帮其他同学做个项目的界面设计和布局之类的事情，很久没上来写点东西来记录自己的历程了
好了，再未来的三天内，我会重温一下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).ready(function){},而我们在 调用js操作的时候，第一句总是window.οnlοad=function(){}，然而，他们之间有什么区别呢？
首先，讨论执行时机这个点上，windon.onload必须等待网页中的内容加载完毕后（包括图片）才能执行，而$(document).ready()，在网页中所有的dom结构绘制完毕后就执行，可能dom元素关联的东西并没有加载完，也是可以执行的
然后，在编写一个数上，window.οnlοad=function{}不能出现多个，只能出现一个，而$(document).ready()则可以出现多个。然后在这多个里面执行他们要处理的动作
在简写方面：window.onload是没有简写的，而$(document).ready()有几个简写的，其中一个就是：$(function(){})
好，继续往下学习：
jquery强大的链式操作：
例子：
$(".has_children").click(function{
$(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.get(0); //Dom对象
alert(cr.checked) //检测这个checkbox是否被选中了
这样子转换之后，就可以使用DOM对象的方法了 if(cr.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
JQuery(function(){ //使用jQuery
jQuery（“p”）.click(function(){
})
})
$("pp").style.display='none'; //使用prototype
</script>
然而，就可以在程序里将jQuery()函数作为jQuery对象的制造工厂
此外，还有另一种选择，如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：
var $j= jQuery.noConflict(); //自定义一个快捷方式
$j(function(){})
如果不想给jQuery自定义这些备用名称，还想用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么有以下两种解决方法
第一种：
jQuery.noConflict(); //将变量$控制权让给其他库
jQuery(function($){ //使用jQuery设定页面加载时执行的函数
$("p").click(function(){ //在函数内部继续使用$()方法
alert($(this).text());
})
})
第二种方法：
jQuery.noConfict(); //将变量$的控制权交给其他库，
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQury
$('p").click(function(){ //继续使用$()方法
alert($(this).text());
})
})
})
如果jQury库在其他库之前倒入
这样子的情况下，直接用"jQuery"来做一些jQuery的一些工作，其他后面的库直接用$来用就行的
例子：
jQuery(function(){ //使用jQuery来进行工作
jQuery("p").click(function(){
alert(jQuery(this).text()); //直接用jQuery来代替$
})
})
$("pp").style.display="none"; //使用prototype库
好了，到这里，jQuery深入学习的第一节完成了
扫一扫
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
