`
abruzzi
  • 浏览: 452350 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

JavaScript内核系列 第12章 前端JavaScript框架:jQuery

 
阅读更多

 

第十二章 前端JavaScript框架:jQuery

12.1 jQuery简介

jQuery是目前应用最为广泛,最为优秀的Ajax/JavaScript开源框架之一,有数以千万记的用户,更有多不胜数的技术文档与之相关,在一定程度上,jQuery如其所宣扬的那样,改变了人们编写JavaScript的方式。

jQuery通过提供CSS标准的选择器来对页面元素进行选择,然后对这些元素组成的一个列表进行某些操作,参与过页面开发的人员都知道,基于WEBUI实际上要做的事情就是:

 

  • 找到页面上的某个/某些元素
  • 改变这些元素的属性或者样式
  • 绑定一些事件处理程序在这些元素上

 

为了对开发者更友好,jQuery使用了独特的链式操作,使得可以使用尽可能的代码来完成尽可能多的任务。就个人而言,jQuery是我个人最喜欢的JavaScript框架。我们可以通过一些例子来看看jQuery是怎样工作的。

假设我们有一个table,如果给table加上斑马线的话,用户可以更清晰的看清楚每一行,整个页面也更有层次感,但是问题是我们的页面已经做好了,我不想再对页面做修改!



修改前的表格

      这样单调的一种颜色很容易使用户的视觉产生疲劳,我们应该为偶数行添加浅绿色的背景,像这样:


 

      修改后的表格

 

      这样效果就好多了,要做成这种效果,用jQuery需要多少代码呢?一行!我们来看看如何用一行代码完成这样的效果:首先,我们找到这个table,然后告诉jQuery,给这个table中的所有偶数行都添加一个css伪类

 

 

$("div#informationTable table tr:nth-child(even)")
.addClass("striped");

 

 

div#informationTable table tr:nth-child(even)为一个CSS标准的选择器,表示在一个idinformationTablediv的孩子中,找到所有的tabletrtable的孩子,并使行,nth-child(even)表示为偶数的孩子。

 

完整的代码如下:

 

 

$(document).ready(function(){
    $("div#informationTable table tr:nth-child(even)")
    .addClass("striped");
});
 

 

这段代码表示,当文档加载完成后($(document).ready()),调用一个匿名的函数,这个函数的函数体为我们上面分析过的,找到table的所有偶数列,为这些列添加背景色(通过使用css”striped”)

    事实上,jQuery深受开发人员青睐的更深层次的原因可能要归功于贯穿于其中的编程思想,如果仔细审视jQuery的代码,你应该会发现,其中的集合的概念以及对集合的各种操作,与函数式语言lisp是不谋而合的,比如map,filter,以及grep等等。

    我们可以来看看这样几个简单示例:

 

jQuery.grep对列表进行过滤,并返回过滤后的列表。我们来看一个例子,首先定义一个人员列表,每个条目包含nameage字段,现在要找出所有age大于24岁的人员,并以列表的形式返回:

 

 

$(document).ready(function(){
    var person = [
       {name : "jack", age : 26},
       {name : "johb", age : 23},
       {name : "smith", age : 20},
       {name : "abruzzi", age : 26},
       {name : "juntao", age : 25},
       {name : "jim", age : 24},
       {name : "bob", age : 24}
    ];
   
    var gt23s = $.grep(person, function(item){
       return item.age > 24;
    });
   
    console.dir(gt23s);
});
 

 

jQuery的工具方法定义在jQuery对象上,类似于Java中的静态方法。console.dirFirefox或者Chrome的调试助手,在chrome下的结果如下:

 




chrome开发人员工具中console.dir的效果示意($.grep)

 

再来看一下map的例子:

 

 

$(document).ready(function(){
    var person = [
       {name : "jack", age : 26},
       {name : "johb", age : 23},
       {name : "smith", age : 20},
       {name : "abruzzi", age : 26},
       {name : "juntao", age : 25},
       {name : "jim", age : 24},
       {name : "bob", age : 24}
    ];
   
    var mapped = $.map(person, function(item){
       return item.name = item.name.toUpperCase();
    });
   
    console.dir(person);//原始的person列表已被修改
});

 

 

我们将person列表中的每一个元素的name字段的值转换为大写。Map的修改是直接体现在原始列表上的,结果如下:

 




chrome开发人员工具中console.dir的效果示意($.map)

 

jQuery本身不如ExtJs那样可以轻松而快速的开发出华丽的UI,但是jQuery本身提供的插件机制为使用jQuery方式快速开发华丽的UI提供了可能,比如jQuery-UI, EasyUI等插件的出现,使得用户可以向使用jQuery那样,快速的生成UI,提高开发速度。

 

12.2 jQuery基础

12.2.1 jQuery选择器

jQuery最强大易用的即是它提供的选择器,它支持CSS选择器及其扩展,很方便已经熟悉传统web开发模式的用户快速过渡到jQuery上来。比如下面这些常用的CSS选择器:

 

  • div.highlight 选择CSShighlight的所有div元素
  • table#tabid   选择IDtabidtable元素
  • a#aid.aclass  选择IDaidCSS类为aclass的链接元素

 

这些选择器均可直接在jQuery中使用,只需要将选择器包装在$()中即可。jQuery的选择器完全兼容CSS3选择器。这为跨浏览器的web应用提供了极大的便利。

除了这些基本的CSS选择器外,jQuery提供了更丰富的选择器,如通过位置选择:

 

选择器

作用

:first

选择第一个匹配

:last

选择最后一个匹配

:first-child

选择第一个字元素

:last-child

选择最后一个子元素

:nth-child(n)

选择第n个子元素

:even :odd

选择偶数/奇数子元素集

:eq(n)

n个元素(0开始)

:gt(n)

选择第n个元素之后的元素集

:lt(n)

选择第n个元素之前的元素集

 

比如:

  • li a:first 匹配在列表(<li>)元素下的第一个链接(<a>)元素。
  • table tbody td:nth-child(5)返回table的第6列元素集。

 

自定义选择器:

选择器

作用

:button

选择按钮

:checkbox

选择复选框

:checked

选择已经选中的复选框/单选框

:hidden

选择属性为隐藏的元素

:enable

选择启用的元素

:disable

选择禁用的元素

:image

选择图片

:input

选择输入框

:radio

选择单选框

:not(filter)

反向选择器

 

应该注意的是,这些选择器可以组合使用,这样会给我们提供极大的方便,比如:

  • :input:enable 选择已经启用的文本框元素
  • :checkbox:checked 选择已经选择的复选框元素

 

12.2.2DOM的操作

在实际应用中,经常需要操作DOM元素,比如插入一段HTML到指定位置,删除某些被选择的DOM段,修改某些元素的内容等。

 

例如有一个HTML页面:

 

<html>
    <head>
       <link rel="stylesheet" href="style.css" type="text/css" />
       <script type="text/javascript" src="jquery-1.3.2.js"></script>
       <script type="text/javascript" src="selector.js"></script>
    </head>
    <body>
       <div id="container"></div>
    </body>
</html>

 

样式表为:

 

div#container{
    background:blue;
    border:1px solid black;
    width:200px;
    height:200px;
}
 
div#child{
    background:yellow;
    border:1px solid black;
    width:100px;
    height:100px;
}
  

container是一个蓝色的200x200的方框,我们要动态的为这个div添加一个子元素,子元素的IDchild

 

 

$(function(){
    var container = $("div#container");
    $("<div id='child'></div>").appendTo(container);
});
  

运行结果如上图所示。

 

再进一步,我们为页面添加一个按钮(clean),点击此按钮将清除新添加的黄色child方框。

 

 

<input type="button" id="clean" value="clean" />

 

 

并添加JavaScript代码:

 

 

$(function(){
    var container = $("div#container");
    $("<div id='child'></div>").appendTo(container);
   
    $("input#clean").click(function(){
       container.find("#child").remove();
    });
});

 

 

单击clean按钮之后,将会移除新添加的child框。




12.2.3CSS的操作

使用jQuery,可以很方便的对CSS类进行添加/删除/toggle等操作,我们来看一个简单的示例:

首先定义三个CSS类:basered-regionyellow-region

 

 

.base{
    background:white;
    border:1px solid black;
    width:200px;
    height:200px;
}
 
.red-region{
    background:red;
    border:1px solid blue;
    width:200px;
    height:200px;
}
 
.yellow-region{
    background:yellow;
    border:1px solid green;
    width:200px;
    height:200px;
}

 

定义一个IDbase的面板,两个按钮:redyellow。当点击red时,判断base是否已经被yellow修饰过,如果已经被修饰过,则移除CSSyellow-region。点击yellow时情形类似:

 

 

    var base = $("div#base");
    $("input#red").click(function(){
       if(base.hasClass("yellow-region")){
           base.removeClass("yellow-region");
       }
       $("div#base").addClass("red-region");
    });
   
    $("input#yellow").click(function(){
       if(base.hasClass("red-region")){
           base.removeClass("red-region");
       }
       $("div#base").addClass("yellow-region");
    });
 

 

页面效果如下:



 

点击red按钮之后,base添加了red-regionCSS类,变为红色:




在使用jQuery选择器选择到预期的元素集之后,我们可以修改器CSS,来完成页面的动态化。动态修改CSS非常简单:

 

 

    var base = $("div#base");
    base.css('width', '300px');
    base.css({
       'width' : '300px',
       'height' : '300px',
       'background' : 'green'
    });

 

 

使用css函数,可以进行一个值的修改,同样可以传入一个集合,整体进行修改。

12.2.4事件处理

事实上,在上边的例子中很多地方已经涉及到jQuery事件处理部分了。jQuery不但提供基本的bind/unbind来负责注册及删除事件处理器,同时还提供很多更方便web开发的的助手函数,如toggle/hover等。

注册一个事件处理器非常容易:

 

 

    var base = $("div#base");
    base.bind('click', function(event){
       alert($(this).width()+", "+$(this).height());
    });

 

 

当鼠标单击IDbasediv时,触发该事件。使用unbind将事件处理器删除。我们来看一个小例子:




单击bind按钮时,我们为按钮上方的div注册click事件处理器,点击unbind时,移除该事件处理器:

 

 

    $("input#bind").click(function(){
       base.bind('click', function(event){
           alert($(this).width()+", "+$(this).height());
       });
    });
 
    $("input#unbind").click(function(){
       base.unbind('click');   
    });

 

 

这样,点击bind之后,点击div则会弹出一个对话框:




 

点击unbind之后,div将不会再处理click事件。有时候,我们会需要为单击的次数为奇数和偶数时注册不同的事件处理器,如第一次单击时将panel的背景色变为红色,再次单击则将背景色变为黄色,这时候我们可以使用toggle函数:

 

 

    var base = $("div#base");
   
    base.toggle(
       function(){
           $(this).css('background', 'red');
       },
       function(){
           $(this).css('background', 'yellow');
       }
    );

 

 

当然,更多的是处理鼠标移入/移出事件的hover,当用户在页面上移动鼠标,将展现不同的视觉效果:

 

 

    base.hover(
       function(event){
           $(this).css('background', 'red');
       },
       function(event){
           $(this).css('background', 'yellow');  
       }
    );

 

12.2.5实用函数

jQuery除了提供对DOM操作的API之外,还提供了操作普通JavaScript对象的一些函数,这些函数均已”$.”开头,非常方便易用。这些实用函数包括:对字符串操作的函数,遍历对象的函数,过滤数组中元素等。

 

我们来看一些小例子:

 

 

    var obj = {
           a : 'apple',
           b : 'borland',
           c : 'cisco',
           d : 'dell'
    };
   
    $.each(obj, function(name, value){
       var li = $("<li></li>");
       li.html("["+name+"]=["+value+"]");
       li.appendTo(base);
    });

 

 

遍历对象obj,然后将其中的键值对拼装成一个字符串,添加到一个panel上:




 

$.grep/$.map两个实用函数已经在第一小节做过基本的讲解,这里仅列举出两个函数的原型:

 

 

    /**
     * array    : 要过滤的数组对象
     * callback : 过滤条件
     * invert   : 是否启用反转,如果启用,则符合callback的将被过滤
     */
    $.grep(array, callback, invert);
   
    /**
     * array    : 需要做转换的数组对象
     * callback : 对数组中元素的映射函数
     */
    $.map(array, callback);

 

 

有时候,我们可能需要合并数个对象为一个对象,覆盖其中重复的项等:

 

 

    var obj1 = {
       name : 'juntao',
       last : 'qiu',
    };
      
    var obj2 = {
       addr : 'unknown',
       title : 'unknown'
    };
       
    var obj3 = {
       addr : 'KunMing, Yunnan, China'
    };
      
    result = $.extend({}, obj1, obj2, obj3);
   
    $.each(result, function(name, value){
       var li = $("<li></li>");
       li.html("["+name+"]=["+value+"]");
       li.appendTo(base);
    });

 

 

obj1, obj2, obj3的属性被合并在一起,并且obj3中的addr属性覆盖了obj2中的addr属性。



 

 

总而言之,jQuery是一个小巧,实用,易用且功能强大的框架。使用它,可以将原本复杂难懂的JavaScript代码压缩至很小,而且更容易维护,代码更加优美。jQuery可以称得上是web上的lisp

 

 

12.3 jQuery实例

在这一小节,我们将使用jQuery开发一个简单的todo管理器jqtodojqtodo使用httpd+php脚本作为后台,数据库使用小巧的sqlitejqtodo简单到仅支持新建一个todo及对之前所有todo的查询操作。

页面布局上,有一个输入框和一个按钮,用户在输入框中填写待办事项,然后点击按钮,即可将这条待办事项添加到数据库中,并同时将页面的待办事项列表更新:



简单起见,这里没有对用户的输入做任何校验,如果插入成功,则展示在列表中:




我们需要用jQuery做的事情如下:

  • 当点击add item时,将文本框中的内容取出,并发送给服务器
  • 当服务器完成并响应时,我们需要及时的更新列表
  • 当用户首次进入此页面时,需要将历史中的待办事项列出来

 

在页面上定义一个div,其iditemlist,则当进入页面时,可以通过jQuery.ajax来获取数据库信息,并填充页面:

 

 

var list = $("div#itemlist");
 
$.ajax({
    url : 'queryitems.php',
    type : 'GET',
    error : function(xhr){
        alert(xhr);
    },
    success : function(obj){
        obj = eval('('+obj+')');
        var dataset = obj.dataset;
        for(var i = 0; i < dataset.length; i++){
            var current = dataset[i];
           var newitem = $("<div></div>").text(current.desc)
           .attr({
                "id" : current.itemid,
              "time" : current.ctime
           })
           .addClass("item");
          
           newitem.appendTo(list);
        }
    }
});

 

 

后台提供一个queryitems.php的页面,该页面负责查询数据库,并将结构及作为json数组的格式返回,并将数据集存放在”dataset”属性中,当成功时,我们可以遍历这个数组,并动态的创建条目,为条目添加属性及CSS类,最后将其添加到iditemlistdiv上展现。

类似的,页面上有一个idadd的按钮,单击该按钮将触发以下事件:

 

 

$("input#add").click(function(){
    var item = $("input#item").val();
    if(!item || item.length == 0){
       alert("please set the item description");
       return false;
    }else{
       additem(item);
    }
});

 

 

首先获取文本框中的字符串,并做一下简单的非空校验。通过校验后则调用additem函数进行查询及页面更新:

 

 

function additem(item){
    var dat = "item="+item;
   
    $.ajax({
       url : 'additem.php',
       type : 'POST',
       dataType : 'text',
       data : dat,
       error : function(xhr){
           alert(xhr);
       },
       success : function(obj){
           obj = eval('('+obj+')');
           var newitem = $("<div></div>").text(obj.desc)
           .attr({
              "time" : obj.ctime
           })
           .addClass("item");
          
           newitem.appendTo(list);
       }
    });
}

 

 

在这个函数中,只是简单的组织了需要POST的数据,然后使用jQuery.ajax异步的更新页面中的待办事项列表。

 

使用jQuery,可以在很短小的代码量中完成很多工作,一般而言,简洁的代码更容易维护和扩展。哪怕仅仅只是从代码的可读性和美学的意义上来讲,jQuery也非常值得一试。

 

附:由于作者本身水平有限,文中难免有纰漏错误等,或者语言本身有不妥当之处,欢迎及时 指正,提出建议,参与讨论,谢谢大家!


另:此系列从发布之初,就一直引名称而引起朋友们的质疑,因此决定修改为《JavaScript核心及实践》,不知道各位朋友有何建议?谢谢!


又:此系列的后续章节也基本就绪,主要讨论其他应用程序及服务器端的JavaScript的使用及技巧,新的章节可能会在做着新的博客I Code It(http://www.icodeit.org/)中发表,各位可以关注一下,这里也算是为新博客做个小广告,呵呵。

  • 大小: 8.8 KB
  • 大小: 9.9 KB
  • 大小: 14.4 KB
  • 大小: 16.5 KB
  • 大小: 1.5 KB
  • 大小: 2.8 KB
  • 大小: 3.3 KB
  • 大小: 3.3 KB
  • 大小: 2.9 KB
  • 大小: 13.6 KB
  • 大小: 5 KB
  • 大小: 8.6 KB
  • 大小: 1.7 KB
  • 大小: 30.8 KB
分享到:
评论

相关推荐

    JavaScript内核系列

    JavaScript内核系列的电子书是由abruzzi编写的,它覆盖了JavaScript的基础知识以及面向对象和函数式编程的相关内容。从JavaScript的历史看,它最初是由网景公司在1996年为了增强网页交互能力而开发的,最初叫做Mocha...

    犀利开发_jQuery内核详解与实践(完整版421页).part3(共3部分)

     执行效率是javascript脚本的第一要务,本书在详细讲解jquery基础知识和技巧用法的同时,重点讲解了如何提高jquery工作效率,如何混合使用jquery和javascript进行高效开发。此外,本书还深入剖析了jquery框架的设计...

    jQuery内核(版本从1.5.2-1.8.3,包括min)

    总之,jQuery是一门强大的JavaScript工具,无论是在前端开发还是在学习JavaScript的过程中,都具有极高的价值。通过这些不同版本的jQuery,开发者可以对比不同版本之间的差异,更好地理解和掌握jQuery的进化历程。

    犀利开发+jQuery内核详解与实践(1)+代码

    第二部分则是“jQuery内核详解与实践”,对jQuery的核心机制进行了深入剖析。 在“犀利开发”部分,作者可能涵盖了诸如高效编写JavaScript代码的方法,如何优化DOM操作,事件处理的最佳实践,以及如何利用jQuery...

    犀利开发 jQuery内核详解与实践 PDF版本下载.txt

    《犀利开发 jQuery内核详解与实践》这本书深入解析了jQuery这一流行的JavaScript库的核心机制与实际应用技巧。根据所提供的信息,我们将围绕此书的主题展开详细的知识点介绍。 ### 一、jQuery简介 #### 1.1 什么是...

    犀利开发+jQuery内核详解与实践(1)

    《犀利开发+jQuery内核详解与实践》是一本深入探讨jQuery内核及犀利开发技术的专业书籍。...书中第二章特别强调了原理部分,意味着读者将有机会深入理解jQuery的工作机制,从而更好地应用和定制这个库。

    犀利开发 jQuery内核详解与实践 下载

    《犀利开发 jQuery内核详解与实践》是一本深度探讨jQuery这一广泛使用的JavaScript库的书籍。本书旨在帮助读者深入理解jQuery的内部工作机制,并通过实践应用提升开发效率。jQuery以其简洁的API和强大的功能,深受...

    犀利开发_jQuery内核详解与实践(完整版421页).part2(共3部分)

     执行效率是javascript脚本的第一要务,本书在详细讲解jquery基础知识和技巧用法的同时,重点讲解了如何提高jquery工作效率,如何混合使用jquery和javascript进行高效开发。此外,本书还深入剖析了jquery框架的设计...

    犀利开发_jQuery内核详解与实践(完整版421页).part1(共3部分)

     执行效率是javascript脚本的第一要务,本书在详细讲解jquery基础知识和技巧用法的同时,重点讲解了如何提高jquery工作效率,如何混合使用jquery和javascript进行高效开发。此外,本书还深入剖析了jquery框架的设计...

    jQuery+angularjs+HTML+EMAC+JavaScript+linux等.zip

    这个压缩包"jQuery+angularjs+HTML+EMAC+JavaScript+linux等.zip"包含了一系列与Web开发相关的资源,特别是前端技术的学习资料。接下来,我们将深入探讨这些关键知识点。 1. **HTML**(HyperText Markup Language)...

    jQuery内核详解与实践_1.pdf

    ### jQuery内核详解与实践 #### 一、引言 jQuery作为一款流行的JavaScript库,在前端开发领域具有举足轻重的...随着前端技术的发展,虽然现在有更多现代的框架和库可供选择,但jQuery依然是一个值得学习的经典工具。

    圆形按钮的宽屏焦点图 基于jquery内核.rar

    在本项目中,我们主要探讨的是一个基于jQuery内核实现的圆形按钮宽屏焦点图的脚本实例。这个实例提供了一种优雅的方式来展示图片,它具有自右向左平滑的图片切换效果,并且在右上角有小圆点作为控制按钮,用于切换大...

    jquery 基础教程 pdf

    - **作用**: 它是jQuery框架的内核,用于构建jQuery对象。 **3.2 构造器的使用** - **参数类型**: 1. **选择器**: `jQuery(expression, [context])` - 根据CSS选择器在页面中匹配元素,可指定上下文进行匹配...

    jquery+js 控制div的scroll样式效果

    在网页开发中,jQuery 和 JavaScript 是两种常用的编程语言,它们能帮助我们实现各种动态效果,包括控制`div`元素的滚动条(scroll)样式。在本项目中,"jquery+js 控制div的scroll样式效果"是核心目标,通过这个...

    深入PHP与jQuery开发 pdf格式

    本章会向你介绍常用的JavaScript库和它们的设计目标,以及为什么大多数Web开发人员选择使用jQuery。你也将学到jQuery的基本工作原理,包括它如何在项目中应用,以及它的内核(强大的选择器引擎)如何工作。 1.1 为...

    犀利开发_jQuery内核详解与实践-带书签pdf版.Part3(完整版421页)

    本资源由于现在网上提供的没有带导航标签,经过本人阅读一遍后加上了导航标签,方便各位学习人员导读,本书写得真的很实用,本书结合jQuery和JavaScript双说明,使初学者能够一书两用,懂得了jQuery的用法,也学会了...

    web前端开发完全技术参考手册

    最后,`JavaScript内核系列.pdf`和`JavaScript_Core.pdf`深入探讨JavaScript引擎的工作原理,如V8引擎的即时编译、垃圾回收机制等,这对于优化代码性能和理解JavaScript执行环境至关重要。 总的来说,这份参考资料...

    2020求知讲堂web前端(html5+css3)(Day1).pdf

    9. 前端框架、模块开发:指的是使用Vue.js、React等现代JavaScript框架进行开发。 课程还提到了“大前端”,即全栈开发的概念,意味着前端工程师不仅要掌握前端技术,还要对后端技术有所了解。 接下来,课程提要...

    thinkphp框架源码交易系统资源网站源码

    前端技术可能还包括CSS样式布局、jQuery库、Vue.js或React.js等现代前端框架,以提升用户体验和开发效率。 综上所述,这个系统结合了ThinkPHP框架的强大后端能力与丰富的前端技术,构建了一个允许用户进行源码交易...

Global site tag (gtag.js) - Google Analytics