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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
Vue路由权限控制解析
Nov 09 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
PHP批量生成缩略图的代码
2008/07/19 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python同时处理多个异常的方法
2020/07/28 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
英语感恩演讲稿
2014/01/14 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
学生评语大全
2014/04/18 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
申论倡议书范文
2014/05/13 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
五年级下册复习计划
2015/01/19 职场文书
催款通知书范文
2015/04/17 职场文书
工伤调解协议书
2016/03/21 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL