使用JQuery——更优雅的编写脚本

JQuery是一个轻量级的javascript库——它还是javascript，但是比原生的javascript要更加方便和优雅，优雅，这是一个我非常喜欢的词。

 

javascript的一个很大弊端是不同跟浏览器对它的处理是略有差异的，即兼容性。——不要小看“略有”这两个字，它足让程序员纠结、愤怒、拍桌子骂街了……（尤其是IE浏览器，额，不多说，程序员同学，你懂的）。

而JQuery在很大程度上解决了这个问题，它封装了大量的操作，使我们在编程时基本不用考虑浏览器的差异性了。

 

比如要在一个元素上添加一个鼠标事件，

原生的javascript代码为,要为不同的浏览器准备两种代码——

if (window.addEventListener) { //其它浏览器的事件代码: Mozilla, Chrome, Firefox //添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件，不用加on e.addEventListener('mousedown', sweeping, false); } else { //IE 的事件代码 在原先事件上添加 add 方法 e.attachEvent('onmousedown', sweeping); } 

而在JQuery中，则只需要一行代码——

 

$e.bind("mousedown",sweeping); 

 

还有一个例子是：javascript中，不同浏览器对鼠标按键的键值解析是不一样的，鼠标左中右键在Firefox的键值分别是1 4 2，在IE中则成了 0 1 2……JQuery统一了键值，为1 2 3.

 

 

 

JQuery有一个特色是链式操作，这也是可以让代码写起来更方便和看起来更优雅的特点。

比如要改变一个id为e的对象的属性，

原生的javascript代码——

var e = document.getElementById("setting");//获取元素 e.align = "center";//对齐方式 e.style.background = "#CCCCCC";//背景色 e.style.display = "none";//可见性  

 

而JQuery的代码——

$('#setting').css("text-align","center").css("background","#CCCCCC").css("display","none"); //或者排列更好的方式 $('#setting') .css("text-align","center") .css("background","#CCCCCC") .css("display","none"); 

 

 

 

JQuery还有一个很强大的功能是它的选择器，这实际上是它的基础功能，类似于CSS的选择器

“对于有CSS基础的同学，可以很快掌握jQuery的选择器；而没有基础的同学，也可以通过JQuery学习，了解CSS的选择器”——这是在某本书上看的。

一个简单的例子

//改变网页中所有id为one的背景色 $('#one').css("background","#AABBCC"); //改变网页中所有<li>元素的背景色 $('li').css("background","#AABBCC"); //改变网页中所有元素的背景色 $('*').css("background","#AABBCC");

基本选择器、层次选择器、过滤选择器、表单选择器……让我们在组织代码时能更加游刃有余。

 

 

 

 

 

以上只是几点，作为JQuery初学者的我亲身感受。

 

 

还有JQuery的更强大Dom操作、事件机制、表单、表格操作、以及Ajax等等……JQuery在提供更强大的功能时，并没有使操作复杂化，反而更简单了，我认为这是最难得的。

 

（貌似有广告的嫌疑了……额）