自我jQuery学习精华总结

最新推荐文章于 2021-10-05 23:20:08 发布

原创最新推荐文章于 2021-10-05 23:20:08 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML5 #jQuery #CSS #ViewUI

本文深入探讨jQuery的强大特性与简洁代码风格，介绍其在前端开发中的广泛应用，包括选择器、事件监听、动画效果及Ajax操作。重点阐述如何通过jQuery简化DOM操作，避免浏览器兼容性问题，提升项目开发效率。

因为项目需要，同时也因为兴趣，在近一段时间研究和使用了jQuery，它真的是太强大了，代码非常的优雅和简洁，好后悔现在才开始了解它，虽然目前网络上关于jQuery的资料、学习心得，教程多得你看不完，但我还是想把自己的一点学习经验写下来，不管是提供给那些想学习jQuery的人，还是保留一份学习笔记，我觉得这都是很有必要的。
    在说jQuery之前，不得不提下现在也非常流行的mootools框架。在网上，很多人把mootools比作java，把jquery比作perl。我没研究过mootools，也不发表意见，这完全没有意义。只要本身不存在重大缺陷就可以了。用好了都强大。好比Java和.NET争论了这么多年，一样的道理。前端UI分享
    jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助开发的库。是继prototype之后又一个优秀的JavaScript框架。它如暴风雪般席卷WEB前端开发，jQuery已确定成为ASP.NET MVC和Visual Studio 2008版本中的正式组成部分，诺基亚手机平台Web Run-Time也将纳入jQuery。所以，请相信，选择jQuery是不会错的。如果你看到这里还有犹豫，那么我再说个理由，应该能打消你的最后疑虑了。2009年12月份Tiobe编程语言排行榜JavaScript升到第8名，并且在上升势头最强劲的语言中排名第3位。我在这里不是想说排行榜的话题，因为那又会引发一场说不完的争论。我的意思是，排行榜不能说明一切问题，但至少能够说明，现在用哪种语言的人多，人多则说明有活力，相应的其它各种资源也会较丰富。JavaScript脚本已经深入WEB应用之中。而作为优秀的JavaScript框架，它的前景不用怀疑。除非出现一个比jQuery更牛B，更优秀的东东。
    我不打算像写教程那样，把jQuery的基础用法都罗列出来，那会很无趣，也没意义。网上这方面的知识随便搜一下就一大堆。我准备从项目的角度出发，写出自己的感受。当然，一份API帮助文档是必不可少的，在最末尾提供了jQuery-1.2.6.chm下载，需者自。
    首先我们要知道，JavaScript开发基本可以分为以下四个部分：
        1、查找DOM元素进行取值和赋值的操作、在特定节点位置进行内容的取值和赋值操作（innerHTML）。
        2、针对元素进行事件监听。
        3、通过操作DOM节点结合改变元素的CSS样式，达到绚丽的动画效果。
        4、对DOM元素进行Ajax操作。
    对于jQuery来说，可以对这四部分提供完美的实现：
        a、jQuery拥有强大的选择器，可以查找任意的DOM元素。同时jQuery对象实现链式语法，能够很方便简洁的写出强大的操作。比如操作属性：$("#chkbox").attr("checked","checked").attr("disabled","disabled")。可以这样继续链下去，包括增加事件、样式等等操作。
        b、在页面加载时给DOM绑定事件。$("#chkbox").click(function(){ alert("hello jquery!"); });
        c、show()和hide()是jQuery中最基本的动画。对元素显示和隐藏，当然，我们还可以实现其它的更复杂的动画。
        d、$.ajax(options)是jQuery中最底层的Ajax实现。除此之外，还可以使用$.get()或$.post()实现Ajax请求。
    了解了以上内容后，jQuery带给我们的另一个惊喜，在于它的API支持当前多种主流浏览器，使得你不用再为了IE、FireFox等兼容问题而抓头发伤脑筋。在以前做项目的时候，我总是喜欢将行为或样式属性写在DOM中。这是极其不好也极其不规范的一种做法。如今采用jQuery后，我将所有的行为全部从DOM中抽取了出来，放到jQuery初始化函数中进行绑定。而且jQuery的初始化函数比window.onload的加载速度更快。前端UI分享

$(function(){
    $("#chkbox").click(
        function(){
            alert("hello jQuery!");
        }
    );
});
<input type="checkbox" id="chkbox"/>

上面是一种简写方法，不管是初始化函数还是绑定事件。推荐采用这种写法。
※下面这种写法是不可取的，行为一定要和DOM分离：

function chkClick(){
alert("hello jQuery");
}
<input type="checkbox" id="chkbox" onclick="chkClick()"/>

※不要再把样式写到DOM里面，这是很难维护的一件事情：

<span style="font-size:15pt;color:red">hello jQuery</span>

应该统一采用CSS文件定义或是定义class类，或是对ID进行定义：前端UI分享

.spanClass{
font-size:15pt;
color:red;
}
<span class="spanClass">hello jQuery</span>

#hello_span{
font-size:15pt;
color:red;
}
<span id="hello_span">hello jQuery</span>

是否对jQuery有了一些认识呢？下次我们继续讨论。