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 相关文章推荐
jQuery创建插件的代码分析
Apr 14 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
matplotlib绘制动画代码示例
2018/01/02 Python
Python IDLE清空窗口的实例
2018/06/25 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python画图的函数用法以及技巧
2019/06/28 Python
opencv实现简单人脸识别
2021/02/19 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
关于Django Models CharField 参数说明
2020/03/31 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
《胡杨》教学反思
2014/02/16 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
环保建议书作文400字
2015/09/14 职场文书
nginx共享内存的机制详解
2022/03/21 Servers