• 初识JQuery


    JQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。那为什么要选择JQuery呢?

     

    先让我们来看一个简单的案例:(隔行变色)

    使用JavaScript实现效果:

    <script type="text/javascript">

    window.onload=function(){    //加载HTML文档

    var trs  =  document.getElementsByTagName("tr");  //获取行对象集合

    for (var i=0 ; i <= trs.length; i++){    //遍历所有行

    if(i%2 == 0){   //判断奇偶行

    var obj = trs[i];    //根据序号获取行对象

    obj.style.backgroundColor = "#ccc";     //为所获取的行对象添加背景颜色

    }

    }

    }

    </script>

    效果实现图如下:

     

    使用JQuery实现效果:

    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>   //引入JQuery库文件

    <script type="text/javascript">  

    $(document).ready(function(){        //加载HTML文档

        $("tr:even").css("background-color","#ccc");   //为表格的偶数行添加背景颜色

    });

    </script>

     

    比较以上两段代码不难发现,使用JQuery制作交互特效的语法更为简单,代码量大大减少了。

     

    此外,使用JQuery与单纯使用JavaScript相比最大的优势是能使页面在各浏览器中保持统一的显示效果,即不存在浏览器兼容性问题。

    例如,使用JavaScript获取id为"title"的元素,在IE中,可以使用eval("title")或getElementById("title")来获取该元素。

    如果使用eval("title")获取元素,则在Firefox浏览器中将不能正常显示,因为在Firefox浏览器中,只支持使用getElementById("title")获取id为"title"的元素。

    由于各浏览器对JavaScript的解析方式不同,因此在使用JavaScript编写代码时,就需要分IE和非IE两种情况来考虑,以保证各个浏览器中的显示效果一致。

    这对一些开发经验尚浅的人员来说,难度非常大,一旦考虑不周全,就会导致用户使用网站时的体验性变差,从而流失部分潜在客户。

    JQuery的用途:

    JQuery是JavaScript的程序库之一,因此,许多使用JavaScript能实现的交互特效,使用JQuery都能完美的实现,下面就从以下5个方面来简单的介绍一下JQuery的应用场合。

    1)访问和操作DOM元素

    使用JQuery可以很方便的获取和修改页面中的指定元素,无论是删除、移动还是复制某元素,JQuery都提供了一整套方便、快捷的方法。既减少了代码的编写,又大大提高了用户对页面的体验度,如添加、删除商品、留言、个人信息等。

    2)控制页面样式

    通过引入JQuery,程序开发人员可以很便捷的控制页面的CSS文件。浏览器对页面文件的兼容性,一直以来都是页面开发者最为头疼的事情,而是用JQuery操作页面的样式可以很好的兼容各种浏览器。最典型的有微博、博客、邮箱等的换肤功能。

    3)对页面事件的处理

    引入Jquery后,可以使页面的表现层与功能层分离,开发者更多地专注于程序的逻辑和功效;页面设计者侧重于页面优化与用户体验。通过事件绑定机制,可以很轻松地实现两者的结合。

    4)方便地使用JQuery插件

    引入JQuery后,可以使用大量的JQuery插件来完善页面的功能和效果。如JQuery UI插件库、Form插件、Validate插件等,这些插件的使用极大地丰富了页面的展示效果,使原来使用JavaScript代码实现起来非常困难的功能通过JQuery插件可轻松地实现。

    5)与Ajax技术的完美结合利用Ajax异步读取服务器数据的方法,极大地方便了程序的开发,增强了页面交互,提升了用户体验;而引入JQuery后,不仅完善了原有的功能,还减少了代码的书写,通过其内部对象和函数,加上几行代码就可以实现复杂的功能。

     

     

    总结一下JQuery的优势:

    Jquery的主旨是write less,do more (以更少的代码,实现更多的功能)。JQuery独特的选择器、链式操作、事件处理机制和封装,以及完善的Ajax都是其他JavaScript库望尘莫及的。总体来说,Jquery主要有以下优势。

    (1)轻量级。JQuery的体积较小,压缩之后,大约只有100KB。

    (2)强大的选择器。JQuery支持几乎所有的CSS选择器,以及JQuery自定义的特有选择器。由于JQuery具有支持选择器这一特性,使得具备一定CSS经验的开发人员学习JQuery更加容易。

    (3)出色的DOM封装。JQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery能够轻松地完成各种使用JavaScript编写时非常复杂的操作,即使JavaScript新手也能编写出出色的程序。

    (4)可靠的事件处理机制。JQuery的事件处理机制吸收了JavaScript中的事件处理函数的精华,使得JQuery在处理事件绑定时非常可靠。

    (5)出色的浏览器兼容性。作为一个流行的JavaScript库,解决浏览器之间的兼容性是必备的条件之一。JQuery能够同时兼容IE 6.0+、Firefox 3.6+、Safari 5.0+、Opera和Chrome等多种浏览器,使显示效果在各个浏览器之间没有差异。

    (6)隐式迭代。当使用JQuery查找到相同名称(类名、标签名等)的元素后隐藏它们时,无须遍历每一个返回元素,它会自动操作所匹配的对象集合,而不是单独的对象,这一举措使得大量的循环机构变得不再必要,从而大幅地减少了代码量。

    (7)丰富的插件支持。JQuery的易扩展性,吸引了来自全球的开发者来编写JQuery的扩展插件。目前已经有成千上万的官方插件支持,而且不断有新插件面世。

     

     

     

     

    我眼中有的不只是前途的坎坷,更是坎坷之后!
  • 相关阅读:
    js返回上一页并刷新思路
    C#字符串拼接
    html2canvas截图问题,图片跨域导致截图空白
    VS2017未能添加对"System.Drawing.dll"的引用
    微信小程序云开发获取文件夹下所有文件
    js解析json报错Unexpected token i in JSON at position 1
    人工智能学习
    suricata的模块和插槽
    学习助手开发(二)——表单排序
    成功在Caterpillar代码中插入事件对象-20200917
  • 原文地址:https://www.cnblogs.com/yishidelei/p/4445679.html
Copyright © 2020-2023  润新知