JQuery 无废话系列教程(一) jquery入门 [推荐]


Posted in Javascript onJune 23, 2009

本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!?

      BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识.

   JQuery是什么 

      JQuery只是一个JS文件

      人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样. 想掌握又怕自己学不会. 其实JQuery很简单.

      JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了(有点类似SDK),具体内部原理和实现我们现在不去讨论. 记住JQuery很简单,很方便.

      目前jQuery最新Release版本为1.32,官方下载地址为:http://docs.jquery.com/Downloading_jQuery

      本系列教程基于1.32版进行讲解.     

      JQuery有两种版本:

      一种为uncompressed版(未压缩版)主要用在开发中.

      另一种为Minified(迷您版)当开发完毕了,就可以改用这个版本.

      两种版本的区别

      文件大小不一样, 最终用户在浏览时可以减少下载JS时的等待时间.

      Uncompressed版文件大小为118KB

      Minified版文件大小为56KB      

  

   JQuery能带给我们什么

       一, 站在巨人的肩上

       别人已经发明了轮子,我们没必要自己再去造一个. 

       二, 强大的BOM,DOM,CSS,事件 的操作能力

       我最常用的是CSS及DOM的操作,真的太方便了.   

       三, 更加简洁的代码

       自己的亲身经历,比如表格(Table)中的TR奇偶为两种颜色的代码如果自己用JavaScript去编号得用几十行代码,JQuery只需要2行就可以了.

       四, 与浏览器无关性

      做过JavaScript开发的就知道JavaScript在不同的浏览器下行为表现有时不一样,我们不得不为不同的浏览器编写相应的代码. JQuery在这方法已经内部处理,我们只管去用就是了.

       五, 不错的性能

       我自己有自知之明, 至少我写的JavaScript代码的运行效率不如JQuery的高.

     如何使用JQuery

     万年开头难,我在第一次使用JQuery时被吓到过,不知道怎么使用,其实很简单,下面我们用一个例子来说明. : )

     

     建立一个html文件,比如index.html 并与JQuery库文件jquery-1.3.2.js放到同目录下(其实放那都可以)

     首先我们解决JQuery的引用. 代码如下:

     <html>

         <head>

               <title>JQuery测试</title>

               <script language="javascript" src="jquery-1.3.2.js"></script>

         </head>

         <body>

         </body>

     </thml>    

     红色的那一行代码就完成了JQuery的引用,简单吧!

 

     现在我们再扩充一个功能,使 index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色.    

     index.html代码结构:    

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery测试</title>
    <style type="text/css">

        /*table中偶数行*/

        .tabEven {
            background: #ff0000;
        }

        /*table中奇数行*/

        .tabOdd {
            background: #00ff00;
        }
    </style>
    <script language="javascript" src="jquery-1.3.2.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $("#tabTest tr:even").addClass("tabEven");
            $("#tabTest tr:odd").addClass("tabOdd");
        });
        //]]>
    </script>
</head>
<body>
    <table id="tabTest">
        <tbody>
            <tr>
                <td>快购利众网_1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快购利众网_2</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快购利众网_3</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快购利众网_4</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快购利众网_5</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
</body>
</thml>
   

   效果如下:

   JQuery 无废话系列教程(一) jquery入门 [推荐]

   

     代码解析:

     $(document).ready(function(){
            $("#tabTest tr:even").addClass("tabEven");
            $("#tabTest tr:odd").addClass("tabOdd");
        });
    

    $(document).ready 的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟), 这个函数几乎在所有使用JQuery的代码中都用到. 因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的.

     $("#tabTest tr:even").addClass("tabEven"); 为id为tabTest的表格的偶数行增加名为tabEven的CSS样式
     $("#tabTest tr:odd").addClass("tabOdd");    为id为tabTest的表格的奇数行增加名为tabEven的CSS样式

    

     最后, 初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单.

     作者信息:万思杰

Javascript 相关文章推荐
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
IE JS编程需注意的内存释放问题
Jun 23 #Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 #Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 #Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 #Javascript
WordPress JQuery处理沙发头像
Jun 22 #Javascript
JQuery 前台切换网站的样式实现
Jun 22 #Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 #Javascript
You might like
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
javascript中关于执行环境的杂谈
2011/08/14 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
python中的时区问题
2021/01/14 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
美发店5.1活动方案
2014/01/24 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
应届毕业生自荐信
2014/05/28 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
离职证明标准格式
2014/09/15 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014年计生工作总结
2014/11/21 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis