luyou208
luyou208

JQuery文档

JQuery文档

一、  认识jQuery

随着Web 2.0的兴起，JavaScript越来越受到重视，一系列的JavaScript库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年的Ext JS，互联网正在掀起一场JavaScript风暴。jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。

1.1           JavaScript和JavaScript库

1.1.1       JavaScript简介

在正式介绍jQuery之前，有必要先了解一下JavaScript。

JavaScript是Netscape公司开发的一种脚本语言（scripting language）。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含更多活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。

正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术-Ajax（AsynchronousJavaScript And XML，异步的JavaScript和XML）诞生了。而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用，例如Gmail、Google Suggest和Google Map等。互联网基于JavaScript的应用也越来越多，使JavaScript不再是一种仅仅用于制作Web页面的简单脚本。

1.1.2  JavaScript库作用及对比

为了简化JavaScript的开发，一些JavaScript库诞生了。JavaScript库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。下面是目前几种流行的JavaScript库的介绍和对比。

Prototype：Prototype是最早成型的JavaScript库之一，对JavaScript的内置对象（例如String对象、Array对象等）做了大量的扩展。现在还有很多项目使用Prototype。Prototype可以看做是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型年代早，从整体上对于面向对象的编程思想把握不是很到位，导致了其结构的松散。不过现在Prototype也在慢慢改进。

Dojo：Dojo的强大之处在于Dojo提供了很多其他JavaScript库所没有提供的功能。例如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等等。Dojo是一款非常适合企业级应用的JavaScript库，并且得到了IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺点也是很明显的：学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。但是自从Dojo的1.0.0版出现以后，情况有所好转。Dojo还是一个很有发挥潜力的库。

YUI：YUI是由Yahoo公司开发的一套完备的、扩展项良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括了几个核心的CSS文件。该库本身文档极其完备，代码编写也非常规范。

Ext JS：Ext JS常简称为Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的各种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，本身比较臃肿，所以使用之前请先权衡利弊。另外，需要注意的事，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。

MooTools：MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。MooTools的语法几乎和Prototype一样，但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀，核心代码大小只有8KB。无论用到哪个模块都可及时导入，即使是完整版大小也不超过160KB。MooTools完全彻底的面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript库。

jQuery：jQuery同样是一个轻量级的库，拥有强大的选择器，出色的DOM操作，可靠的事件处理、完善的兼容性和链式操作等功能。这些优点吸引了一批批的JavaScript开发者去学习它、研究它。

总之，每个JavaScript库都有各自的优点和缺点，同时也有各自的支持者和反对者。自从jQuery诞生那天起，其关注度就一直在稳步上升，jQuery已经逐渐从其他JavaScript库中脱颖而出，成为Web开发人员的最佳选择。

1.2 jQuery

1.2.1  jQuery简介

jQuery是继Prototype之后有一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。团队中由3个核心人物：John Resig、Brandon Aaron 和 Jorn Zaefferer。

jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都又足够都的理由去学习jQuery。

1.2.2  jQuery的优势

jQuery强调的理念是写的少，做得多(write less，do more)。jQuery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来，jQuery有以下优势。

(1)轻量级。

jQuery非常轻巧，采用Dean Edwards编写的Parker压缩后，大小不到30KB。如果使用Min版并且在服务器启用Gzip压缩后，大小只有18KB。

(2)强大的选择器。

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易地切入到jQuery的学习中来。

(3)出色的DOM操作的封装。

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

(4)可靠的事件处理机制

吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路(graceful degradation)、循序渐进以及非入侵式(Unobtrusive)编程思想方法，jQuery也做的非常不错。

(5)完善的Ajax

jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

(6)不污染顶级变量。

jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存，在项目中放心的引用而不需要考虑到后期可能的冲突。

(7)出色的浏览器兼容性。

作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。jQuery能够在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常运行。jQuery同时修复了一些浏览器之间的差异，是开发者不必在开展项目前建立浏览器兼容性。

(8)链式操作方式。

jQuery中最有特色的莫过与它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连接写而无需重复获取对象。这一特点使jQuery的代码无比优雅。

(9)隐式迭代

当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。

(10)行为层与结构层的分离。

开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

(11)丰富的插件支持。

jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。

 (12)完善文档。

jQuery的文档非常丰富，现阶段多为英文文档，中文文档相对较少。很多热爱jQuery团队都在努力完善jQuery的中文文档，例如jQuery的中文API，图灵教育的翻译的《Learning jQuery》等等。

(13)开源。

jQuery是一个开源的产品，任何人都可以自由地使用并提出改进意见。

1.3 jQuery代码的编写

JQuery不需要安装，把下载的jquery-1.4.1.js放到网站上的一个公共的位置，想要在某各页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件即可。在实际项目中，读者可以根据实际需要调整jQuery库路径。

1.3.1  第一个jQuery程序（Hello World！）

在开始编写第一个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)是等价的，如果没有特殊说明，程序中的$符号都是jQuery的一个简写形式。

第一个jQuery程序的主要代码如下：

      

运行结果如图1-1所示。

图1-1 输出Hello World

在上面的代码中有一个陌生的代码片段，如下：

$(document).ready(function(){

//…………

       });

这段代码的作用类似于传统JavaScript中的window.onload方法，不过与window.onload还是有些区别。表格1-1对它们进行了简单对比。

表1-1  window.onload与$(document).ready()的对比

 

Window.onload

$(document).ready();

执行时机

必须等待网页中所有内容加载完毕后(包含图片)才能执行

网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完

编写个数

不能同时编写多个以下代码无法正确执行：window.οnlοad=function(){

    alert("test1")

};

window.οnlοad=function(){

   alert("test2")

};

结果只会输出“test2”

能同时编写多个

以下代码正确执行

$(document).ready(function(){

         alert("Hello World!");

});

$(document).ready(function(){

         alert("Hello again!");

});

结果两次都输出

简化写法

无

$(document).ready(function(){

         …………….

})

简写成：

$( function(){

……………..

})

1.4 jQuery对象和DOM对象

1.4.1  DOM对象和jQuery对象简介

刚开始学习jQuery，经常分辨不清哪些是jQuery对象，哪些是DOM对象，因此需要重点了解jQuery对象和DOM对象以及它们之间的关系。

1.     DOM对象

DOM(Document ObjectModel，文档对象模型)，每一份DOM都可以表示成一棵树。下面来构建一个基本的网页，网页代码如下：

 

初始化效果如图1-2所示。

可以把上面的HTML结构描述成一棵DOM树，如图1-3所示。


图1-2 基本网页运行结果

图1-3 网页元素可看成一棵树


在这棵DOM树中，

、

、

    以及
      的3个
    • 子节点都是DOM元素节点。可以通过JavaScript中的getElementByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法，

      示例代码如下：

      var domObj =document.getElementsById("id"); // Dom对象

      var ObjHTML = domObj.innerHTML;  //使用JavaScript中的innerHTML方法

      2.     jQuery对象

      jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。例如：

      $("#foo").html();//获取id为foo的元素内的html代码。

      这段代码等同于：

      document.getElementById("foo").innerHTML;

      在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr("checked")之类的jQuery方法代替。同样，DOM对象也不能使用jQuery里的方法，例如document.getElementById("id").html()也会报错，只能用document.getElementById("id").innerHTML语句。

      1.4.2  jQuery对象和DOM对象的相互转换

      在讨论jQuery对象和DOM对象的相互转换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前面加上$，例如：

      var $variable = jQuery对象；

      如果获取的是DOM对象，则定义如下：

      var varible = DOM对象；

      1.     jQuery对象转成DOM对象

      jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不适用DOM对象的时候，有以下处理方法。

      jQuery提供了两种方法将一个jQuery对象爱那个转换成DOM对象，即[index]和get(index).

      (1)jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。jQuery代码如下：

      var $cr = $("#cr");   //jQuery对象；

      var cr = $cr[0];      //DOM对象；

      alert(cr.checked);

      (2)另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。jQuery代码如下：

      var $cr=$("#cr");   //jQuery对象

      var cr = $cr.get(0);  //DOM对象

      alert(cr.checked);    //检测这个checkbox是否被选中了

      2. DOM对象转换成jQuery对象

      对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为 $(DOM对象)。

      jQuery代码如下：

      var cr=document.getElementById("cr");  //DOM对象

      var $cr = $(cr);                         //jQuery对象

      转换后，可以任意使用jQuery中的方法。

      通过以上方法，可以任意地相互转换jQuery对象和DOM对象。

      最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM，关于jQuery的DOM操作将在后面进行详细讲解。

      注意：平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

      1.4.3  实例研究

      下面举个简单的例子，来加深对jQuery对象和DOM对象的理解。

      有些论坛在用户注册的时候，必须先要同意论坛的规章制度，才可以进行下一步操作。

      编写一段简单的代码来实现这个功能。新建一个空白页面，然后添加以下HTML代码：

      HTML代码初始效果如图1-4所示。

      图1-4 初始效果

      然后编写JavaScript部分。前面讲过，没有特殊声明，jQuery库是默认导入的。

      通过$("#cr")获取到复选框元素，然后通过判断复选框是否被选中，来执行下一步操作。

      首先，用DOM方式来判断复选框是否被选中，代码如下：

      $(document).ready(function(){

            var$cr = $("#cr");  //jQuery对象

            varcr = $cr.get(0); //DOM对象，获取 $cr[0]

            $cr.click(function(){

                   if(cr.checked){//DOM方式判断

                          alert("感谢你的支持!你可以继续操作!");

                   }

            })

      });

      实现上述代码后，选中“我已经阅读了上面制度”复选框，如图1-5所示。

       

      图1-5 选中选项后的效果图

      换一种方式，使用jQuery中的方法来判断选项是否被选中，代码如下：

      $(document).ready(function(){

            var$cr = $("#cr");  //jQuery对象

            $cr.click(function(){

                   if($cr.is(":checked")){    //jQuery方式判断

                          alert("感谢你的支持!你可以继续操作！");

                   }

            })

      });

      上面的例子简单地演示了DOM对象和jQuery对象的不同，但最终效果一样的。

      二、  jQuery选择器

      选择器是jQuery的根基，在jQuery中，对事件的处理、遍历DOM和Ajax操作都依赖于选择器。如果能熟练地使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

      2.1 jQuery选择器是什么

      jQuery中的选择器完全继承了css的风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器。学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。

      下面来看一个简单的例子，代码如下：

      点击我

      本段代码的作用是为

      元素设置一个onclick事件，当单击此元素时，会弹出一个对话框。

      像上面这样把JavaScript代码和html代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以建议使用下面的方法，代码如下：

      jQuery Demo

      此时，可以对css的写法和jQuery的写法进行比较。

      Css获取到元素的代码如下：

      .demo{                                     //给class为demo的元素添加样式

            …….

      }

      jQuery获取到元素的代码如下：

      $(“.demo”{                                              //给class为demo的元素添加行为

      …………

      jQuery选择器的写法与css选择器的写法十分类似，只不过两者的作用效果不同，css选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。需要特别说明的是，jQuery中涉及操作css样式部分比单纯的css功能更为强大，并且拥有跨浏览器的兼容性。

      2.2 jQuery选择器的优势

      1.   简洁的写法

      $()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中，$(“#ID”)用来代替document.getElementById()函数，即通过ID获取元素；$(“tagName”)用来代替document.getElementByTagName()函数，即通过标签名获取HTML元素。

      2．支持css1到css3选择器

      jQuery选择器支持css1，css2的全部和css3的部分选择器，同时他也有少量独有的选择器，因此对拥有一定css基础的开发人员来说，学习jQuery选择器是件非常容易的事，而对没有接触过css技术的开发人员来说，在学习jQuery选择器的同时也可以掌握css选择器的基本规则。

      使用css选择器时，开发人员需要考虑是否支持某些选择器。而在jQuery中，开发人员则可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

      3.完善的处理机制

      使用jQuery选择器不仅比用传统的getElementById()和getElementsByTagName()函数简洁得多，而且还能避免某些错误。看下面这个例子，代码如下：

      test

      运行上面的代码，浏览器就会报错，原因是网页中没有id为“tt”的元素。

      改进后的代码如下：

      test

      这样就可以避免浏览器报错，但如果要操作的元素很多，可能对每个元素都要进行一次判断，大量重复的工作会使开发人员感到厌倦，而jQuery在这方面问题上的处理是非常不错的，即使用jQuery获取网页中不存在的元素也不会报错，看下面的例子，代码如下：

      test

      有了这个预防措施，即使以后因为某种原因删除网页上某个以前使用过的元素，也不用担心这个网页的JavaScript代码会报错。

      需要注意的是，$(“#tt”)获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时，不能使用以下代码：

      If($(“#tt”)){

            //dosomething

      }

      而应该根据获取到元素的长度来判断，代码如下：

      if($(“tt”).length>0){

            //dosomething

      }

      或者转换成DOM对象来判断，代码如下：

      If($(“tt”)[0]){

            //dosomething

      }

      2.3 jQuery选择器

      jQuery选择器分为基本选择器，层次选择器，过滤器选择器和表单选择器。在下面的章节中将分别用不同的选择器来查找HTML代码中的元素并对其进行简单的操作。为了能更清晰，直观的讲解选择器，首先需要设计一个简单的页面，里面包含各种

      元素和元素，然后使用jQuery选择器来匹配元素并调整他们的样式。

      新建一个空白页面，输入以下html代码：

      然后用CSS对这些元素进行初始化大小和背景颜色的设置，CSS代码如下：

      根据以上HTML+CSS代码，可以生成图2-1所示的页面效果。

      图2-1 初始状态

      2.3.1  基本选择器

      基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如表2-1所示。

      表2-1 基本选择器

      选择器

      描述

      返回

      示例

      #id

      根据给定的id匹配一个元素

      单个元素

      $(“#test”)选取id为test的元素

      .class

      根据给定的类名匹配元素

      集合元素

      $(“.test”)选取所有class为test的元素

      element

      根据给定的元素名匹配元素

      集合元素

      $(“p”)选取所有的

      元素

      *

      匹配所有元素

      集合元素

      $(“*”)选取所有的元素

      selector1, selector2,……, selectorN

      将每一个选择器匹配到的元素合并后一起返回

      集合元素

      $(“div,span,p.myClass”)选取所有

      ,和拥有class为myClass的

      标签的一组元素

      可以使用这些基本选择器来完成绝大多数的工作。下面用它们来匹配刚才HTML代码中的

      ，等元素并进行操作（改变背景色），示例如表2-2所示。

      表2-2 基本选择器示例

      功能

      代码

      执行后

      改变id为one的元素的背景色

      $(“#one”).css(“background”,”#bbffaa”);

      改变class为mini的所有元素的背景色

      $(“.mini”).css(“background”,”#bbffaa”);

      改变所有元素名是

      的所有元素的背景色

      $(“div”).css(“background”,”bbffaa”);

      改变所有元素的背景色

      $(“*”).css(“background”,”bbffaa”);

      改变所有的元素和id为two的元素的背景色

      $(“span,#two”).css(“background”,”bbffaa”);

      2.3.2  层次选择器

      如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。层次选择器的介绍说明如表2-3所示。

      表2-3 层次选择器

      选择器

      描述

      返回

      示例

      $(“ancestor  descendant”)

      选取ancestor元素里的所有descendant（后代元素）

      集合元素

      $(“div span”)选取

      里的所有的元素

      $(“parent>child”)

      选取parent元素下的child（子）元素

      集合元素

      $(“div > span”)选取

      元素下元素名是的子元素

      $(“prev+next”)

      选取紧接在prev元素后的next元素

      集合元素

      $(“.one+div”)选取class为one的下一个

      元素

      $(“prev~siblings”)

      选取prev元素之后的所有siblings元素

      集合元素

      $(“#two~div”)选择id为two的元素后面的所有

      兄弟元素

      继续沿用刚才例子中的HTML和CSS代码，然后用层次选择器来对网页中的

      ，等元素进行操作，示例如表2-4所示。

      表2-4 层次选择器示例

      功能

      代码

      执行后

      改变内所有

      的背景色

      $(“body div”).css(“background”,”#bbffaa”);

      改变内子

      元素的背景色

      $(“body>div”) .css(“background”,”#bbffaa”);

      改变class为one的下一个

      元素背景色

      $(“.one+div”) .css(“background”,”#bbffaa”);

      改变id为two的元素后面的所有

      兄弟元素的背景色

      $(“#two~div”) .css(“background”,”#bbffaa”);

      在层次选择器中，第1个和第2个选择器比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以使用的几率相对少些。

      可以用next()方法来代替$(“prev+next”)选择器，$(“.one+div”)就等价于$(“.one”).next(“div”)。可以用nextAll()方法来代替$(“prev~siblings”)选择器，$(“#prev~div”)就等价于$(“#prev”).nextAll(“div”)。

      在此将siblings()方法与$(“prev~siblings”)选择器进行比较。

      $(“#prev~div”)选择器只能选择”#prev”元素后面的同辈

      元素。而siblings()方法与前后位置无关，只要是同辈元素节点就都能匹配。

      $(“#prev~div”).css(“background”,”#bbffaa”);//选取#prev之后的所有同辈div元素

      $(“#prev”).nextAll(“div”).css(“background”,”#bbffaa”);//同上

      $(“#prev”).siblings(“div”).css(“background”,”#bbffaa”);//选取#prev所有的同辈div元素，无论前后位置

      2.3.3  过滤选择器

      过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

      1.     基本过滤选择器

      表2-5 基本过滤选择器

      选择器

      描述

      返回

      示例

      :first

      选取第一个元素

      单个元素

      $(“div:first”)选取所有

      元素中第一个
      元素

      :last

      选取最后一个元素

      单个元素

      $(“div:last”)选取所有

      元素中最后一个
      元素

      :not(selector)

      去除所有与给定选择器匹配的元素

      集合元素

      $(“input:not(.myClass)”)选取class不是myClass的元素

      :even

      选取索引是偶数的所有元素，索引从0开始

      集合元素

      $(“input:even”)选取索引是偶数的元素

      :odd

      选取索引是奇数的所有元素，索引从0开始

      集合元素

      $(“input:odd”)选取索引是奇数的元素

      :eq(index)

      选取索引等于index的元素(index从0开始)

      单个元素

      $(“input:eq(1)”)选取索引等于1的元素

      :gt(index)

      选取索引大于index的元素(index从0开始)

      集合元素

      $(“input:gt(1)”)选取索引大于1的元素（注：大于1，而不包括1）

      :lt(index)

      选取索引小于index的元素（index从0开始）

      集合元素

      $(“input:lt(1)”)选取索引小于1的元素(注：小于1，而不包括1)

      :header

      选取所有的标题元素，例如h1,h2,h3等等

      集合元素

      $(“:header”)选取网页中所有的

      ,

      ……

      :animated

      选取当前正在执行动画的所有元素

      集合元素

      $(“div:animated”)选取正在执行动画的

      元素

      接下来，使用这些基本过滤选择器来对网页中的

      、等元素进行操作，示例如表2-6所示。

      表2-6 基本过滤选择器示例

      功能

      代码

      执行后

      改变第1个

      元素的背景色

      $(“div:first”).css(“background”,”#bbffaa”);

      改变最后一个

      元素的背景色

      $(“div:last”).css(“background”,”#bbffaa”);

      改变class不为one的

      元素的背景色

      $(“div:not(.one)”).css(“background”,”#bbffaa”);

      改变索引值为偶数的

      元素的背景色

      $(“div:even”).css(“background”,”#bbffaa”);

      改变索引为奇数的

      元素的背景色

      $(“div:odd”).css(“background”,”#bbffaa”);

      改变索引等于3的

      元素的背景色

      $(“div:eq(3)”).css(“background”,”#bbffaa”);

      改变索引值大于3的

      元素的背景色

      $(“div:gt(3)”).css(“background”,”#bbffaa”)

      改变索引值小于3的

      元素的背景色

      $(“div:lt(3)”).css(“background”,”#bbffaa”);

      改变所有的标题元素，例如：

      ,

      .

      …这些元素的背景色

       $(“:header”).css(“background”,”#bbffaa”);

      改变当前正在执行动画的元素的背景色

      $("#mover").click(function(){  $(this).animate({"width":"+=100", "height": "+=100" }, "slow");        $(":animated").css("background", "#bbffaa");})

      2.     内容过滤选择器

      内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍说明如表2-7所示。

               表2-7 内容过滤选择器

      选择器

      描述

      返回

      示例

      :contains(text)

      选取含有文本内容为text的元素

      集合元素

      $(“div:contains(‘我’)”)选取含有文本“我”的

      元素

      :empty

      选取不包含子元素或者文本的空元素

      集合元素

      $(“div:empty”)选取不包含子元素（文本元素）的

      空元素

      :has(selector)

      选取含有选择器所匹配的元素的元素

      集合元素

      $(“div:has(p)”)选取含有

      元素的

      元素

      :parent

      选取含有子元素或者文本的元素

      集合元素

      $(“div:parent”)选取拥有子元素（包含文本元素）的

      元素

      接下来使用内容过滤选择器来操作页面中的元素，示例如表2-8所示。

      表2-8 内容过滤器示例

      功能

      代码

      执行后

      改变含有文本“di”的

      元素的背景色    

      $(‘div:contains(di)’).css(“background”,”#bbffaa”);

      改变不包含子元素（文本元素）的

      空元素的背景色

      $(‘div:empty’) .css(“background”,”#bbffaa”);

      改变含有class为mini元素的

      元素的背景色    

      $(‘div:has(.mini)’).css(“background”,”#bbffaa”);        

      改变含有子元素（文本元素）的

      元素的背景色

      $(‘div:parent’) .css(“background”,”#bbffaa”);

      3.     可见性过滤器

      可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。可见性过滤选择器的介绍说明如表2-9所示。

      表2-9 可见性过滤选择器

      选择器

      描述

      返回

      示例

      :hidden

      选取所有不可见的元素

      集合元素

      $(“:hidden”)选取所有不可见的元素。包括,

      和
      等元素。如果只想选取元素，可以使用$(“input:hidden”)

      :visible

      选取所有可见的元素

      集合元素

      $(“div:visible”)选取所有可见的

      元素

             在例子中使用这些选择器来操作DOM元素，示例如表2-10所示。

      表2-10 可见性过滤选择器示例

      功能

      代码

      执行后

      改变所有可见的

      元素的背景色

      $(“div:visible”).css(“background” ,”#FF6500”)        

      显示隐藏的

      元素

      $(“div:hidden”) .show(3000);

      在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域（）和visibility:hidden之类的元素。

      4.     属性过滤选择器

      属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明如表2-11所示。

      表2-11 属性过滤选择器

      选择器

      描述

      返回

      示例

      [attribute]

      选取拥有此属性的元素

      集合元素

      $(“div[id]”)选取拥有属性id的元素

      [attribute=value]

      选取属性的值为value的元素

      集合元素

      $(“div[title=test]”)选取属性title为“test”的

      元素

      [attribute!=value]

      选取属性的值不等于value的元素

      集合元素

      $("div[title!=test]”)选取属性title不等于“test”的

      元素（注意：没有属性title的
      元素也会被选取）

      [attribute^ =value]

      选取属性的值以value开始的元素

      集合元素

      $("div[title^=test]")选取属性title以“test”开始的

      元素

      [attribule$=value]

      选取属性的值以value结束的元素

      集合元素

      $("div[title$=test]“)选取属性title以“test”结束的

      元素

      [attribute*=value]

      选取属性的值含有value的元素

      集合元素

      $(“div[title*=test]”)选取属性title含有“test”的

      元素

      [selectorl][selectm2][selectorN]

      用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围

      集合元素

      $(“div[id] [title$=’test’]”)选取拥有属性id，并且属性title以”test”结束的

      元素

      接下来使用属性过滤器来对

      和等元素进行操作，示例如表2-12所示。

      表2-12 属性过滤选择器示例

      功能

      代码

      执行后

      改变含有属性title的

      元素的背景色

      $(‘div[title]’).css("background","#bbffaar);

      改变属性title值等于“test”的元素的背景色        

      $(‘div[title=test]’).css(“background”,”#bbffaa”);

      改变属性title值不等于“test”的

      元素的背景色

      $(‘div[title!=test]’).css(“background”,” #bbffaa”);

      改变属性title值以“te”开始的

      元素的背景色

      $(“div[title^=te]”).css(“background”,” #bbffaa”);

      改变属性title值以“est”结束的

      元素的背景色

      $(“div[title$=est]”) .css(“background”,” #bbffaa”);

      改变属性title值含有“es”的

      元素的背景色

      $(“div[title*=es]”).css(“background”, “#bbffaa”);

      改变含有属性id，并且属性title值含有”es”的

      元素的背景色

      $(“div[id][title*=es]”) .css(“background”,” #bbffaa”);

      5.     子元素过滤选择器

      子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。

      子元素过滤选择器的介绍说明如表2-13所示。

      表2-13 子元素过滤选择器

      选择器

      描述

      返回

      示例

      :nth-child(index/even/odd/equation)

      选择每个父元素下的第index个子元素或者奇偶元素(indes从1算起)

      集合元素

      :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的

      :first-child

      选取每个父元素的第1个元素

      集合元素

      :first只返回单个元素，:first-child选择副符将为每个父元素匹配第1个子元素。例如$(“ul li:first-child”);选取每个

        中第1个
      • 元素

      :last-child

      选取每个父元素的最后个元素

      集合元素

      同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素 例如$(“ul li:last-child”);选择每个

        最后一个
      • 元素

      :only-child

      如果某个元素是它父元素的唯一的子元素，那么将会被匹配。如果父元素中含有其它元素，则不会被匹配

      集合元素

      $(“ul li:only-child”)在

        中选取是唯一子元素的
      • 元素

      :nth-child()选择器是很用的子元素过滤选择器，详细功能如下。

      （1）:nth-child(even)能选取每个父元素下的索引值是偶数的元素。

      （2）:nth-child(odd) 能选取每个父元素下的索引值是奇数的元素。

      （3）:nth-child(2)能选取每个父元素下的索引值等于2的元素。

      （4）:nth-child(3n) 能选取每个父元素下的索引值是3的倍数的元素，（n从0开始）。

      （5）:nth-child(3n+1) 能选取每个父元素下的索引值是(3+1)的元素。（n从0开始）

      接下来利用刚才所讲的选择器来改变

      元素的背景色，示例如表2-14所示。

      表2-14 子元素过滤选择器示例

      功能

      代码

      执行后

      改变每个class为one的

      父元素下的第2个子元素的背景色

      $(“div.one  :nth-child(2)”) .css(“background”,”#bbffaa”);

      改变每个class为One的

      父元素下的第1个子元素的背景色

      $(“div.one :first-child).css(“background”,”#bbffaa”);

      改变每个class为One的

      父元素下的最后一个子元素的背景色

      $(“div.one :last-child“).css(“background”,”#bbffaa”);

      改变每个class为One的

      父元素下只有一个子元素，那么则改变这个子元素的背景色

      $(“div.one :only-child”).css(“background”,”#bbffaa”);

      6.     表单对象属性过滤选择器

      此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等等。表单对象属性过滤选择器的介绍说明如表2-15所示。

      表2-15 表单对象属性过滤选择器

      选择器

      描述

      返回

      示例

      :enabled

      选取所有可用元素

      集合元素

      $(“#forml  :enabled”);选取id为“forml”的表单内的所有可用元素

      :disabled

      选取所有不可用元素

      集合元素

      $(“#form2  :disabled”)选取id为“form2” 的表单内的所有不可用元素

      :checked

      选取所有被选中的元素（单选框，复选框）   

      集合元素

      $(“input:checked”);选取所有被选中的元素

      :selected

      选取所有被选中的选项元素（下拉列表）

      集合元素

      $(“select :selected”)；选取所有被选中的选项元素

      为了演示这些选择器，需要制作一个包含表单的网页，里面要包含文本框、多选框和下拉列表，HTML代码如下：

            重置所有表单元素

           

       

       

           

           可用元素： 

           不可用元素：

           可用元素：

             不可用元素：

             

           多选框：

             test1

          test2

          test3

          test4

          test5

             

             

           下拉列表1：

          

           下拉列表2：

             

         

       

      生成的效果图如图2-2所示。

      图2-2 初始状态

      现在用jQuery的表单过滤选择器来操作它们，示例如表2-16所示。

      表2-16 表单对象属性过滤示例

      功能

      代码

      执行后

      改变表单内可用元素的值

      $(”#forml input:enabled").val（”这里变化了！”）；

      改变表单内不可用元素的值

      $ ("#forml  input:disabled").val（”这里变化了！”）；

      获取多选框选中的个数

      $ ("input:checked") .length;

      获取下拉框选中的内容

      $ ("select :selected") .text () ;

      2.3.4  表单选择器

      为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器，能极其方便地获取到表单的某个或某类型的元素。

      表单选择器的介绍说明如表2-17所示。

      表2-17 表单对象属性过滤示例

      中的,将选择符改成如下代码：

      $(function(){

                   $("tbody>tr:odd").addClass("odd");//先排除第一行,然后给奇数行添加样式

                   $("tbody>tr:even").addClass("even");//先排除第一行,然后给偶数行添加样式

            })

      显示效果如图5-16所示。


      图5-15 普通的隔行变色

      图5-16 表格隔行变色


      如果还需要将某一行变为高亮显示状态，那么可以使用contains选择起来实现。例如“王五”这行，代码如下：

      $("tr:contains('王五')").addClass("selected");

      效果如图5-17所示。

      图5-17 高亮显示“王五”这行

      2．单选框控制表格行亮度

      在以上表格的基础上，在第一列前加上一列单选框，如图5-18所示：

      图5-18 带单选框的表格

      当单击某一行后，此行被选中高亮显示，并且单选框被选中。实现该过程需要以下几个步骤。

      (1)为表格行添加单击事件。

      (2)给单击的当前行添加高亮样式，然后将他的兄弟行的高亮样式去掉，最后将当前行里的单选框设置为选中。

      根据分析，可以写出如下jQuery代码：

      $('tbody>tr').click(function() {

                          $(this).addClass('selected')

                                 .siblings().removeClass('selected')

                                 .end().find(':radio').attr('checked',true);

                   });

      这样，就可以通过单击每行来实现表格行高亮，同时此行所在的单选框也被选中。

      上面代码中使用了end()方法，当前对象是$(this), 当前行addClass(“selected”)操作时，对象并未发生变化，当执行siblings().removeClass(“selected”)操作时，对象已经变为$(this).siblings(),因此后面的操作都是针对这个对象的，如果需要重新返回到$(this)对象，就可以使用end()方法，这样后面的

      .find(':radio').attr('checked',true);

      操作就是：

      $(this).find(':radio').attr('checked',true);

      而不是：

      $(this).siblings().find(':radio').attr('checked',true);

      另外，初始化表格的时候，如果默认已经以有单选框被选中，那么也需要处理，代码如下：

      $('table:radio:checked').parent().parent().addClass('selected');

      这样 当初始化表格的时候，默认已经选中的行将被高亮显示，如图5-19所示。

      图5-19 默认选中行被高亮显示

      注意：$('table:radio:checked').parent().parent().addClass('selected');是通过parent()方法逐步向父节点获取相应的元素的，也可以使用parent()方法直接获取：

      $('table:radio:checked').parent(“tr”).addClass('selected');

      此外，如果通过has选择器也可以进一步简化，表示含有选中的单选框的

      行将被高亮显示：

      $(‘tbody>tr:has(:checked)’).addClass(‘selected’);

      3．复选框控制表格行高亮

      复选框控制表格行与单选框不同，复选框能选择多行变色，并没有限制被选择的个数。当单击某行时，如果已经高亮了，则移除高亮样式并去掉当前行复选框的选中状态；如果还没有亮，则添加高亮样式并将当前行的复选框选中。

      判断是否已经高亮，可以使用hasClass()方法来完成。JQuery代码如下：

      $('tbody>tr').click(function() {

                          if($(this).hasClass('selected')) {

                                 $(this).removeClass('selected')

                                        .find(':checkbox').attr('checked',false);

                          }else{

                                 $(this).addClass('selected')

                                        .find(':checkbox').attr('checked',true);

                          }

                   });

      显示效果如图5-20所示。

      图5-20 复选框控制行高亮

      此外，在不改变设计思路的前提下，上面的代码还可以再简化成如下代码：

                   $('tbody>tr').click(function(){

                          //判断当前是否选中

      var hasSelected=$(this).hasClass('selected');

                          //如果选中，则移出selected类，否则就加上selected类

                          $(this)[hasSelected?"removeClass":"addClass"]('selected')

                                 //查找内部的checkbox,设置对应的属性。

                                 .find(':checkbox').attr('checked',!hasSelected);

                   });

      当用户刚进入页面时，也要处理已经被选中的表格行。jQuery代码如下：

      $('tbody>tr:has(:checked)').addClass('selected');

      5.2.1  表格展开关闭

      在上例的人员表格的基础上，增加人员分类。

      HTML代码如下：

           

      选择器

      描述

      返回

      示例

      :input

      选取所的、

         

       

      根据以上HTML代码，可以生成图2-3所示的页面效果。

      图2-3 初始状态

      如果想得到表单内表单元素的个数，代码如下：

      $(“#form1 :input”).length;     //注意与$(“#form1 input”)的区别

      如果想得到表单内单行文本框的个数，代码如下：

      $(“#form1 :text”).length;

      如果想得到表单内密码框的个数，代码如下：

      $(“#form1 :password”).length;

      同理，其他表单选择器的操作与此类似。

      2.4选择器中的一些注意事项

      2.4.1  选择器中含有特殊符号的注意事项

      1．选择器中含有“．”、“#”、“（”或“]”等特殊字符

      2．根据W3C的规定，属性值中是不能含有这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符，如果按照普通的方式去处理出来的话就会出错。解决此类错误的方法是使用转义符转义。

      HTML代码如下：

      bb

      c

      如果按照普通的方式来获取，例如：

      $(‘#id#b’);

      $(‘#id’[1]);

      以上代码不能正确获取元素，正确的写法如下：

      $(‘#id\\#b’);                      //转义特殊字符“#”

      $(‘#id\\[1\\]’);                    //转义特殊字符“[  ]”

      2.4.2  选择器中含有空格的注意事项

      选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。

      看下面的例子，它的HTML代码如下：

           

               aa

               bb

              

      cc

              

           

            ee

            ff

      使用如下的jQuery选择器分别获取它们。

      var $t_a = $('.test :hidden');          //带空格的Jquery选择器

      var $t_b = $('.test:hidden');           //不带空格的Jquery选择器

      var len_a = $t_a.length;

      var len_b = $t_b.length;

      alert("$('.test :hidden') ="+len_a);  //输出 4

      alert("$('.test:hidden') ="+len_b);  //输出 3

      之所以会出现不同的结果，是因为后代选择器与过滤器的不同。

      var $t_a = $('.test :hidden');          //带空格

      以上代码是选取class为“test”的元素里面的隐藏元素

      而代码

      var $t_b = $('.test:hidden');           //不带空格

      则是选取隐藏的class为“test”的元素。

      2.5 案例研究——某网站品牌列表的效果

      实现某网站上的一个品牌列表的展示效果，用户进入该页面时，品牌列表默认是精简显示的（即不完整的品牌列表）。

      用户可以单击“显示全部品牌”按钮来显示全部的品牌。

      单击“显示全部品牌”按钮的同时，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了“精简显示品牌”。

      为了实现这个例子，首先需要设计它的HTML结构。HTML代码如下：

      • 佳能(30440)

        •             

      • 索尼(27220)

        •             

      • 三星(20808)

        •             

      • 尼康(17821)

        •             

      • 松下(12289)

        •             

      • 卡西欧(8242)

        •             

      • 富士(14894)

        •        

      • 柯达(9520)

        •             

      • 宾得(2195)

        •             

      • 理光(4114)

        •             

      • 奥林巴斯(12205)

        •             

      • 明基(1466)

        •             

      • 爱国者(3091)

        •             

      • 其它品牌相机(7275)

        •      

           

                   显示全部品牌

           

      然后为上面的HTML代码添加CSS样式。

      页面初始化的效果如图2-4所示。

      图2-4 品牌展示列表（精简）

      接下来为这个页面添加一些交互效果，

      要做的工作有以下几项。

      (1) 从第7条开始隐藏后面的品牌（最后一条“其它品牌相机”除外）。

      (2) 当用户单击“显示全部品牌”按钮时，将执行以下操作。

      ①  显示隐藏的品牌。

      ②“显示全部品牌”按钮文本切换成“精简显示品牌”。

      ③ 高亮推荐品牌。

      (3) 当用户单击“精简显示品牌”按钮时，将执行以下操作。

      ①从第5条开始隐藏后面的品牌（最后一条“其它品牌相机”除外）。

      ②“精简显示品牌”按钮文本切换成“显示全部品牌”。

      ③去掉高亮显示的推荐品牌。

      (4) 循环进行第(2)步和第(3)步。

      下面逐步来完成以上的效果。

      (1)  从第5条开始隐藏后面的品牌（最后一条“其他品牌相机”除外）。

      var $category =$(“ul li:gt(5):not(:last)”);

            $category.hide();                             // 隐藏上面获取到的jQuery对象。

      $(“ul li:gt(5):not(:last)”)的意思是先获取

                  

                         

                  

                  

                          前台设计组

                         

                         

                          前台开发组

                         

                          后台开发组

                         

                         

                  

           

      姓名性别暂住地
      张山男浙江宁波
      李四女浙江杭州
      王五男湖南长沙
      找六男浙江温州
      Rain男浙江杭州
      MAXMAN女浙江杭州

      显示效果如图5-21所示。

      图5-21 人员分类

      现在需要实现的是当单击分类行是，可以关闭相应的内容。例如单击“前台设计组”行，则它对应的“张山和李四”两行将收缩。

      在这个表格中，给每个元素设置属性是非常重要的，读者可以在HTML代码中看出一些规则，即给分类行设置了class=“parent”属性，同时也分别给它们设置了id值，而在它们下面的行，只设置了class属性，并且这个class的值是在id值的基础上通过加上 “child_”来设置的。基于以上规则，jQuery实现代码如下：

      $(function(){

            $('tr.parent').click(function(){   // 获取所谓的父行

                          $(this).toggleClass("selected")   // 添加/删除高亮

                                 .siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行

            });

      })

      运行代码后，当单击表格的父行后，相应的子行会收缩，如图5-22所示。

      图5-22 单击某行，对应的子行会收缩

      5.2.3  表格内容筛选

      在下面的例子中，如果要高亮显示”王五”那一行，可以使用contains选择器来完成，代码如下：

      $(“tr:contains(‘王五’)”).addclass(“selected”);

        //选择器contains，能匹配包含指定文本的元素

      利用该选择器再结合jQuery的filter()筛选方法，可以实现表格内容的过滤。

      例如使用下面的jQuery代码就可以筛选出含有文本“李”的表格行。

           $("table tbody tr").hide().filter(":contains(李)").show();

      显示效果如图5-23所示。

      图5-23 筛选之后效果

      首先在表格上方添加一个文本框，用于根据用户输入的内容来筛选表格内容，然后为文本框绑定keyup事件，代码如下：

      $(function(){

            $("#filterName").keyup(function(){

                 //…

               })

        })

       最后将flter(":contains(李)")代码中的“李”用变量值代替，代码如下：

        $(function(){

            $("#filterName").keyup(function(){

                  $("table tbody tr")

                                        .hide()

                                        .filter(":contains('"+($(this).val() )+"')")

                                        .show();

               })

        })

      当在文本框中输入“王”时，就会筛选出相应的表格行，显示效果如图5-24所示。

      注意表单元素有个特点，就是刷新网页后，其值会保持不变。例如在刚才筛选操作后，刷新网页，则会出现图5-25所示的现象，表单元素的值还存在，但表格内容已经被刷新了。

      图5-24 根据用户输入的文本来筛选

      图5-25 刷新后显示的表格数据

      要解决这个问题，只需要在DOM刚加载完时，为表单元素绑定事件并且立即触发该事件即可。

      $(function(){

            $("#filterName").keyup(function(){

                  $("table tbody tr")

                                        .hide()

                                        .filter(":contains('"+($(this).val() )+"')")

                                        .show();

               }).keyup();

        })

      这样，当页面被刷新后，就会立即执行id为"#filterName"的keyup事件，因此表格内容就会保持刚才筛选出来的结果。

      5.3 其他应用

      5.3.1  网页字体大小

      在某些网站经常有“放大”和“缩小”字号的控制按钮，通过单击它们，可以使网页的文字呈现不同的大小。

      首先在空白的网页上添加两个字号控制按钮和一些文字，HTML代码如下：

           

                   放大

                   缩小

           

           

                  

                   Thisis some text. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text. This issome text.This is some text. This is some text. This is some text. This is sometext. This    is some text. This is sometext.

                  

           

      显示效果如图5-26所示。

      表5-26 网页初始化效果

      当单击这两个按钮时可以分别控制文本字体的放大和缩小。因此，需要对“放大”按钮和“缩小”按钮进行相应的处理，代码如下：

      $(function(){

                   $("span").click(function(){

                          varthisEle = $("#para").css("font-size");

                          vartextFontSize = parseFloat(thisEle , 10);

                          varunit = thisEle.slice(-2); //获取单位

                          varcName = $(this).attr("class");

                          if(cName== "bigger"){

                                        textFontSize+= 2;

                          }elseif(cName == "smaller"){

                                        textFontSize-= 2;

                          }

                          $("#para").css("font-size",  textFontSize + unit );

                   });

            });

      下面详细讲解以上代码所完成的操作。

      $(function(){

                   $("span").click(function(){

                          //…

                   });

            });

      当文档加载完毕后，为所有的元素绑定单击事件。

      var thisEle =$("#para").css("font-size");

      var textFontSize = parseFloat(thisEle ,10);

      获取id为“para”的元素的字体大小。获取的值是将返回的数字和单位，即16px。然后使用parseFloat()方法去掉单位，因此16px就变成了16。 parseFloat()方法的第2个参数表示进制，代码表示的是10进制。

      var unit = thisEle.slice(-2);

      上面这段代码是获取单位，slice()方法返回字符串中从指定的字符开始的一个子字符串。因为这里使用的度量单位px是两个字符，所以指定字符串应该从倒数第2个字符开始。在后面再次设置字体大小是，就可以直接把单位拼接上。

      var cName =$(this).attr("class");

                          if(cName== "bigger"){

                                        textFontSize+= 2;

                          }elseif(cName == "smaller"){

                                        textFontSize-= 2;

                          }

      If语句用于判断当前被单击的元素的class是否为“bigger”。如果是“bigger”，则需要为字体变量 (textFontSize) 增加 2px。如果单击的是 “smaller”，则要为字体变量(textFontSize) 减掉2px。

      textFontSize +=2;的写法等价于textFontSize =textFontSize +2;

      $("#para").css("font-size",  textFontSize + unit );

      最后，再次获取“pava”元素并为它的font-size属性赋予新的值  (textFontSize ),并且一定要拼接上单位。

      如果发现无限放大和缩小不太合适，可以判断一下最小字体和最大字体，代码如下：

      //…省略代码

      if(cName == "bigger"){

                                    if( textFontSize <= 22 ){

                                               textFontSize+= 2;

                                        }

                          }elseif(cName == "smaller"){

                                    if( textFontSize >= 12  ){

                                               textFontSize-= 2;

                                        }

                          }

                          $("#para").css("font-size",  textFontSize + unit);

      显示效果如图5-27所示。

      图5-27 字体大小变化

      5.3.2  网页选项卡

      制作选项卡的原理比较简单，通过隐藏和显示来切换不同的内容。

      与前面的例子相同，首先构建HTML结构，代码如下:

           

                  

        时事

                           

      • 体育

        •                    

      • 娱乐

        •             

           

           

                    

      时事

                    

      体育

                    

      娱乐

           

      应用样式后，网页呈现效果如图5-28所示。

      图5-28 选项卡效果

      默认是选项卡的第1个选项被选中，然后下面区域显示相应的内容。例如图5-28所示，当单击“体育”选项卡时，“体育”选项卡将处于高亮状态，同时下面的内容也切换成“体育”了。当单击“娱乐”选项卡时，也显示相应的内容。下面将详细介绍实现选项卡的过程。

      首先需要为

    • 元素邦定单击事件，代码如下：

      var $div_li =$("div.tab_menu ulli");

                $div_li.click(function(){

                      //…

                   })

      绑定事件后，需要将当前单击的

    • 元素高亮，然后去掉其他同辈
    • 元素的高亮。

      $(function(){

              var $div_li =$("div.tab_menu ulli");

              $div_li.click(function(){

                   $(this).addClass("selected")            //当前

    • 元素高亮

                   .siblings().removeClass("selected");  //去掉其它同辈

    • 元素的高亮

                   })

            })

      单击选项卡后，当前

    • 元素处于高亮状态，而其他的
    • 元素已去掉了高亮状态。但选项卡下面的内容还没被切换，因此需要将下面的内容也对应切换。显示效果如图5-29所示。

      从选项卡的基本结构可以知道，每个

    • 元素都分别对应一个
      区域。因此可以根据当前单击的
    • 元素在所有
    • 元素中的索引，然后通过索引来显示对应的区域，代码如下：

        var $div_li =$("div.tab_menu ul li");

            $div_li.click(function(){

                   $(this).addClass("selected")            //当前

    • 元素高亮

                   .siblings().removeClass("selected");  //去掉其它同辈

    • 元素的高亮

            var index = $div_li.index(this);  // 获取当前点击的

    • 元素 在 全部li元素中的索引。

                   $("div.tab_box> div")   //选取子节点。不选取子节点的话，会引起错误。如果里面还有div

                   .eq(index).show()   //显示

    • 元素对应的
      元素

                   .siblings().hide();//隐藏其它几个同辈的

      元素

            })

      这样，当单击

    • 元素后，选项卡相应的内容也将切换，效果如图5-30所示。


图5-29 内容没被切换

图5-30 对应的内容被切换


在上面的代码中，要注意$(“div.tab_box>div”)这个子选择器，如果用$(“div.tab_box div”)子选择器，当子节点里再包含

元素的时候，就会引起程序错乱。因此获取当前选项卡下的子节点，才是这个例子所需要的。

至此制作选项卡的过程就完成了。如果读者还想加强些效果，例如光标滑入滑出效果，可以添加hover事件，代码如下：

$(function(){

      var$div_li =$("div.tab_menu ul li");

      $div_li.click(function(){

             $(this).addClass("selected")            //当前

  • 元素高亮

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的高亮

          var index = $div_li.index(this);  // 获取当前点击的

  • 元素 在 全部li元素中的索引。

                 $("div.tab_box> div")   //选取子节点。不选取子节点的话，会引起错误。如果里面还有div

                 .eq(index).show()   //显示

  • 元素对应的
    元素

                 .siblings().hide();//隐藏其它几个同辈的

    元素

          }).hover(function(){

                 $(this).addClass("hover");

          },function(){

                 $(this).removeClass("hover");

          })

    })

    这样当光标滑过其他选项时，选项的样式会发生变化，如图5-31所示。

    图5-31 滑过“娱乐”选项

    5.3.3  网页换肤

    自从Web 2.0开始流行后，很多网站更加注重用户自定义，例如在网页上用户可以自定义新内容，可以任意拖动网页内容，也可以给网页选择一套自己喜欢的颜色等。

    网页换肤的原理就是通过调用不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。

    首先设置HTMl的结构，在网页中添加皮肤选择按钮(

  • 元素)和基本内容，代码如下：

                   灰色

                   紫色

                   红色

    • 天蓝色

      •              橙色

                   淡绿色

           

         

                

                        时事新闻

                

    •      

         

                

                        娱乐新闻

                

         

    然后根据HTML代码预定义几套换肤用的样式，分别有灰色、紫色、红色等6套。默认是灰色。

    在设计HTML代码时，用了一些小技巧，就是将皮肤选择器按钮

  • 元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。

    然后为HTML代码添加样式，注意HTML结构要有一个带id的样式表链接，通过操作该连接的href属性的值，从而实现换肤。代码如下：

    运行后网页的初始化效果如图5-32所示。

    图5-32 初始化效果

    最后为皮肤选择按钮添加单击事件，有如下两个步骤。

    (1)当皮肤选择按钮被单击后，当前皮肤就被勾选。

    (2)将网页内容换肤。

    首先完成第1步，它与前面选项卡例子中高亮当前选项的代码相同，代码如下：

      var$li =$("#skin li");

    $li.click(function(){

           $("#"+this.id).addClass("selected")                //当前

  • 元素选中

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的选中

          })

    然后完成第2步，即设置网页内容皮肤。前面为元素设置的id，此时可以通过attr()方法为元素的href属性设置不同的值，代码如下：

      var$li =$("#skin li");

    $li.click(function(){

          $("#"+this.id).addClass("selected")                //当前

  • 元素选中

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的选中

                        $("#cssfile").attr("href","css/"+this.id+".css");//设置不同皮肤

          })

    完成后，当单击皮肤选择按钮时，就可以切换网页皮肤了，如图5-33所示，但是当用户刷新网页或者关闭浏览器后，皮肤又会被初始化，因此需要将当前选择的皮肤进行保存。

    图5-33 单击按钮后换肤

    在jQuery中有一款cookie插件，此处就将其引入，代码如下：

      

         

       将当前皮肤保存进Cookie后，代码如下：

        var $li =$("#skin li");

            $li.click(function(){

                 $("#"+this.id).addClass("selected")         //当前

  • 元素选中

                 .siblings().removeClass("selected");//去掉其它同辈

  • 元素的选中

                 $("#cssfile").attr("href","css/"+(this.id) +".css"); //设置不同皮肤

                        $.cookie("MyCssSkin" ,  this.id , {path: '/', expires: 10 });

                 });

    保存进Cookie后，就可以通过Cookie来获取当前的皮肤了。如果Cookie确实存在，则将当前皮肤设置为Cookie记录的值，代码如下：

    //…省略代码

          varcookie_skin = $.cookie( "MyCssSkin");

          if(cookie_skin) {

           $("#"+cookie_skin).addClass("selected")    //当前

  • 元素选中

                        .siblings().removeClass("selected");//去掉其它同辈

  • 元素的选中

                 $("#cssfile").attr("href","css/"+cookie_skin +".css"); //设置不同皮肤

                 $.cookie("MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });

          }

    //…省略代码

    完成的jQuery代码如下：

    $(function(){

          var$li =$("#skin li");

          $li.click(function(){

          $("#"+this.id).addClass("selected")    //当前

  • 元素选中

                 .siblings().removeClass("selected");  //去掉其它同辈

  • 元素的选中

          $("#cssfile").attr("href","css/"+(this.id) +".css"); //设置不同皮肤

          $.cookie("MyCssSkin" ,  this.id , {path: '/', expires: 10 });

          });

          varcookie_skin = $.cookie( "MyCssSkin");

          if(cookie_skin) {

                 $("#"+cookie_skin).addClass("selected")     //当前

  • 元素选中

                   .siblings().removeClass("selected"); //去掉其它同辈

  • 元素的选中

                 $("#cssfile").attr("href","css/"+cookie_skin +".css");   //设置不同皮肤

                 $.cookie("MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });

                 }

          })

    此时，网页换肤功能不仅能正常切换，而且也能保存到Cookie中，当用户刷新网页后，仍然是当前选择的皮肤。

    在Click事件中的函数内容与if(cookie_skin){}内的判断内容类似，只是有一个变量不同，因此可以通过给函数传递不同的参数，这样就可以多次调用(抽象化),代码如下：

     function switchSkin(skinName){

          $("#"+skinName).addClass("selected")    //当前

  • 元素选中

                 .siblings().removeClass("selected");//去掉其它同辈

  • 元素的选中

          $("#cssfile").attr("href","css/"+skinName +".css"); //设置不同皮肤

          $.cookie("MyCssSkin" ,  skinName , {path: '/', expires: 10 });

          }

    然后在单击事件和if(cookie_skin){}内分别调用对应的参数：

    $(function(){

                        var$li =$("#skin li");

                        $li.click(function(){

                               switchSkin(this.id );

                        });

                        varcookie_skin = $.cookie( "MyCssSkin");

                        if(cookie_skin) {

                               switchSkin(cookie_skin );

                        }

                 });

    至此，网页换肤功能就完成了，效果如图5-34所示。

    图5-34 网页换肤完成

    六、    jQuery与Ajax的应用

    Ajax 全称为“Asynchronous Javascript and XML”（异步JavaScript和XML），它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现，揭开了无刷新更新页面的新时代，并有代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势，是Web开发应用的一个里程碑。

    6.1  Ajax的优势和不足

    6.1.1  Ajax的优势

    1.   不需要插件支持

    Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可。

    2.   优秀的用户体验

    这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。

    3．提高Web程序的性能

    与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是通过表单(Form)来实现的，而数据获取是靠全页面刷新来重新获取整页的内容。而Ajax模式只是通过XmlHttpRequest对象向服务器端提交希望提交的数据，即按需发送。

    4.减轻服务器和宽带的负担

    Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

    6.1.2  Ajax的不足

    世界上并没有完美的事物，同样Ajax也并不是一项非常完美的技术。Ajax主要有以下几点不足之处。

    1.   浏览器对XMLHttpRequest对象的支持度不足

    Ajax的不足之一首先来自于浏览器。InternetExplorer在5.0及以后的版本才支持XmlHttprequest对象(现阶段大部分客户端上的IE浏览器是IE6及以上)，Mozilla、Netscape等浏览器支持xmlhttprequest则更在其后。为了使得Ajax应用能在各个浏览器中正常运行，程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别，来让Ajax应用能够很好地兼容各个浏览器。这使得Ajax开发的难度比普通的Web开发高出很多，许多程序员因此对Ajax望而生畏。

    2.   破坏浏览器“前进”、“后退”按钮的正常功能

    在传统的网页中 ，用户经常会习惯性的使用浏览器自带的“前进”和“后退”按钮，然而Ajax改变了此web浏览习惯。在Ajax中“前进”和“后退”按钮的功能都会失效，虽然可以通过一定的方法（添加锚点）来使得用户可以使用“前进”和“后退”按钮，但相当于传统的方式却麻烦了很多，对于大多数程序员来说宁可放弃前进、后退的功能，也不愿在繁琐的逻辑中去处理该问题。然而，对于用户来说，他们经常会碰到这种情况，当单击一个按钮触发一个Ajax交互后又觉得不想这样做，接着就去习惯性地单击“后退”按钮，结果发生了最不愿意看到的结果，浏览器后退到先前的一个页面，通过Ajax交互得到的内容完全消失了。

    3.   对搜索引擎的支持不足

    对于搜索引擎的支持也是Ajax的一项缺憾。通常搜索引擎都是通过爬虫程序来对互联网上的数以亿计的海量数据来进行搜索整理的，然而爬虫程序现在还不能理解那些奇怪的Javascript代码和因此引起的页面内容的变化，这使得应用Ajax的站点在网络推广上相对于传统站点明显处于劣势。

    4.   开发和调试工具的缺乏

    JavaScript是Ajax的的重要组成部分，在目前，由于缺少很好的javaScript开发和调试工具，使很多web开发者对JavaScript望而生畏，这对于编写Ajax代码就更加困难了。同时，目前许多Web开发者已经习惯使用可视化的工具，对亲自动手编写代码有畏惧感，这也在一定程度上影响了大家对Ajax的应用。

    6.2 Ajax的XMlhttpRequest对象

    Ajax的核心是XMlhttpRequest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在Microsoft  Internet Explorer 5.0ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方式来实现XmlHttpRequest对象。虽然大家对它的实现方式有所区别，但绝大多数浏览器都提供了类似的属性和方法，而且在实际脚本编写方法上的区别也不大，实现得到的效果也基本相同。目前W3C组织正致力于制定一个各浏览器厂商可以统一遵照执行的XmlHttpRequest对象标准，用来推进Ajax技术的推广与发展。

    6.3编写第1个Ajax例子

    正式接触jQuery地Ajax操作之前，先看一个用传统的JavaScript实现的Ajax例子。例子描述：单击一个按钮，然后通过传统的JavaScript的Ajax的方式从服务器端取回一个“Hello Ajax！”的字符串并显示在页面上。

    首先在前台页面中书写HTML代码，代码如下：

    本段代码将生成图6-4所示的页面。

    图6-4 评论初始化页面

    将姓名和内容填写好后，就可以准备提交评论了。如图6-5所示。

    图6-5 填写好数据

    (1)  使用参数

    首先，需要确定请求页面的URL 地址。代码如下：

    $("#send").click(function(){

                        $.get("get1.ashx"    data参数,回调函数)；

    });

    然后，在提交之前，需要获取“姓名”和“内容”的值作为data参数传递给后台， 代码如下：

    $("#send").click(function(){

                        $.get("get1.ashx",{

                                             username:  $("#username").val() ,

                                             content:  $("#content").val()

    },回调函数 );

    });

    如果服务器端接收到传递的data 数据并成功返回，那么就可以通过回调函数将返回的数据显示到页面上。

    $.get()方法的回调函数只有两个参数，代码如下：

    Function (data,  textStatus){

          //data  :  返回的内容，可以是XML文档、JSON文件、HTML 片段等等

    //textStatus : 请求状态:success,error,notmodified.timeout 4种

    }

    data参数代表请求返回的内容, textStatus参数代表请求状态，而且回调函数只有当数据成功返回(success)后才被调用,这点与load()方法不一样。

    (2)  数据格式

    服务器上返回的格式有多种，它们都可以完成同样的任务，以下是几种返回格式的对比.

    ·HTML片段

    由于服务器端返回的数据格式是HTML片段，因此不需要经过处理就可以将新HTML

    数据插入主页面中。JQuery代码如下:

    $(function(){

             $("#send").click(function(){

                        $.get("get1.ashx",{

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                                      },function (data, textStatus){

                           $("#resText").html(data); // 把返回的数据添加到页面上

                                      }

                        );

             })

          })

    HTML片段实现起来只需要很少的工作量，但这种固定的数据结构并不一定能够在其他的web应用程序中的到重用。

    ·XML文档

    由于服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理，前面的章节已经介绍过jQuery强大的DOM处理能力，处理XML文档与处理HTML文档一样，也可以使用常规的attr()、find()、filter()以及其他方法，JQuery代码如下:

          $(function(){

             $("#send").click(function(){

                        $.get("get2.ashx ", {

                                      username:  $("#username").val() ,

                                      content:  $("#content").val() 

                        },function (data, textStatus){

                                      varusername = $(data).find("comment").attr("username");

                                      varcontent = $(data).find("comment content").text();

                        vartxtHtml= "

    "+username+":
    "+content+"

    ";

              $("#resText").html(txtHtml); // 把返回的数据添加到页面上

                        });

             })

       })

    返回数据格式为XML文档的过程实现是想起来比HTML片段要稍微复杂些，但XML文档的可移植性是其他数据格式无法比拟的，因此以这种格式提供的数据的重用性将极大提高。例如del.icio.us(http://del.icio.us),Flickr(http://flickr.com)和某些开放平台都是以XML格式输出的数据，读者可以利用它们提供的API，将获得的内容整合到自己的网站中(Mashup应用)，不过，XML文档体积相对较大，与其他格式相比，解析和操作他们的速度都要慢一些。

    ·JSON文件

    之所以出现这种数据格式的文件，很大程度上是因为XML文档体积大和难以解析，JOSN文件和XML文档一样，也可以方便的被重用。而且，JSON文件非常简洁，也容易阅读。想了解更多的JSON文档知识，可以访问http://json.org/网址。

    由于服务器端返回数据格式是JSON文件，因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到主页面中。JQuery代码如下:

    $(function(){

             $("#send").click(function(){

                        $.get("get3.ashx ", {

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                                      },function (data, textStatus){

                                          var username = data.username;

                                             varcontent = data.content;

    var txtHtml = "

    "+username+":
    "+content+"

    • ";

              $("#resText").html(txtHtml); // 把返回的数据添加到页面上

                                      },"json");

                 })

             })

    在上面代码中，将$.get()方法的第4个参数(type)设置为“json”来代表期待服务器端返回的数据格式.

    以上3种返回方式都可以达到图6-6所示的效果。

    通过对3种数据格式的优缺点进行分析，可以得知在不需要与其它应用程序共享数据的时候，使用HTML片段来提供返回数据一般来说是最简单的，如果数据需要用，那么JSON文件是不错的选择，它的性能和文件的大小方面具有优势，而当远程应用程序未知时，XML是明智的选择，它是Web服务领域的“世界语”,具体选择哪种格式，并没有严格的规定，读者可以根据需求来选择最合适的返回格式来进行开发。

    图6-6 将返回的数据添加到页面上

    2．$.post()方法

    它与$.get()方法的结构和使用方式都相同，不过他们之间仍然有以下区别。

    (1) GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息实体内容发送给Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的。

    (2) GET方式对传输的数据有大小的限制(通常不能大于2KB）,而使用的POST方式传递的数据量要比GET方式大得多(理论上不受限制).

    (3) GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这种数据，列如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这种情况。

    (4) GET方式和POST方式传递的数据在服务器端的获取也不相同，在PHP中，GET方式的数据可以用$_GET[]获取，而POST方式可以用$ _POST[]获取，两种方式可以用$ _REQUEST[];来获取。

    由于POST和GET方式提交的所有数据都可以通过$_REQUEST[];来获取，因此只需要改变jQuery函数，就可以将程序在GET请求和POST请求之间切换，代码如下:

    $(function(){

             $("#send").click(function(){

                        $.post("get1.ashx ", {

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                                      },function (data, textStatus){

                        $("#resText").append(data); // 把返回的数据添加到页面上

                                      }

                        );

             })

          })

    另外，当load()方法带有参数传递时，会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能。代码如下：

       $(function(){

             $("#send").click(function(){

                    $("#resText").load("get1.ashx ",{

                                             username:  $("#username").val() ,

                                             content:  $("#content").val() 

                          })

             })

          })

    上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要编写一些复杂的Ajax程序，那么就需要用到JQuery中的$.ajax()方法。$.ajax()方法不仅能实现与load()、$.get()和$.post()同样的功能，而且还可以设定beforeSend(提交前回调函数)、error（请求失败后处理）、success(请求成功后处理)以及complete(请求完成后处理)回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息。另外，还有一些参数，可以设置Ajax请求的超时时间或者页面的“最后更改”状态等等。关于$.ajax()方法将在后面的章节中进行讲解。

    6.4.3  $.getScript()方法和$.getJson()方法

    1．$.getScript()方法

    有时候，在页面初次加载时就取得所需要的全部javaScript文件是完全没有必要的。虽然可以在需要哪个javaScript文件时，动态的创建

    你可能感兴趣的:(JQuery文档)

    • SpringMVC设置全局异常处理器 水岸齐天 javaspring
      文章目录背景分析使用@ControllerAdvice（@RestControllerAdvice）+@ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中对于过滤器和拦截器中的异常，有两种思路可以考虑背景在项目中我们有需求做一个全局异常处理，来规范所有出去的异常信息。参考：官方文档分析首先ControllerAdvice(RestControll
    • Django之Debug篇 菜鸟之编程 Djangodjangopython后端
      一、DebugToolBar基本使用1.1、概述Django框架的调试工具栏使用django-debug-toolbar库，是一组可配置的面板，显示有关当前请求/响应的各种调试信息，点击时，显示有关面板内容的更多详细信息。官方文档：DjangoDebugToolbar—DjangoDebugToolbar4.3.0documentation1.2、安装pipinstalldjango-debug-
    • keras.optimizers优化器中文文档 地上悬河 python开发语言后端
      优化器optimizers优化器是编译Keras模型必要的两个参数之一model=Sequential()model.add(Dense(64,init='uniform',input_dim=10))model.add(Activation('tanh'))model.add(Activation('softmax'))sgd=SGD(lr=0.01,decay=1e-6,momentum=0.
    • 4.24 使用计算命令制作图像合成艺术效果 [Ps教程] 互动教程网
      1.本节课程将为您演示，如何使用[计算]命令，将两张示例图片，制作成超酷的图像合成特效。首先点击顶部的文档标签，切换至另一张示例图片。image2.接着依次点击[图像>计算]命令，弹出[计算]窗口。image3.[计算]命令，用于混合两个来自一个或多个源图像的单个通道。然后可以将结果应用到新图像、新通道或当前图像的选区中。image4.在弹出的计算窗口中，点击下拉箭头，选择[计算]命令的源图片。i
    • SQLite版本3中的文件锁定和并发(七） 代码工匠云 数据库SQLiteC与c++sqlitec++数据库
      返回：SQLite—系列文章目录上一篇：自己编译SQLite或将SQLite移植到新的操作系统（六）下一篇：SQLite—系列文章目录正文：1.0SQLite版本3中的文件锁定和并发SQLite版本3.0.0引入了新的锁定和日志功能旨在提高SQLite版本2的并发性的机制并减少作家的饥饿问题。新机制还允许交易的原子提交涉及多个数据库文件。本文档介绍新的锁定机制。目标受众是想要理解和/或修改的程序员
    • Acrobat Pro DC ----专业PDF编辑与管理 *橙子 officepdfmacos
      AcrobatProDC2023是一款功能强大的PDF处理软件，它提供了丰富的编辑工具，支持创建、编辑、合并、分割PDF文件，以及高质量的PDF到其他格式的转换功能。同时，该软件集成了最新的OCR技术，可将扫描文档或图片转换成可编辑的PDF。AcrobatProDC2023还具备电子签名功能，支持多人协作和云端同步共享，大大提高了工作效率和团队协作效率。无论是设计、建筑、金融还是法律等行业，Acr
    • C++ pdf 打印 插入图片 灿烂李 java前端服务器
      一：使用PODOFO给PDF插入图片：#includeintmain(){PoDoFo::PdfMemDocumentpdfDocument;PoDoFo::PdfPage*page;PoDoFo::PdfImageimage;PoDoFo::PdfVecObjects*vec_objects;PoDoFo::PdfRectrect;//打开PDF文档pdfDocument.loadFromFil
    • Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript
      目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
    • Python Flask 使用数据库 安果移不动 pythonflask开发语言
      pipinstallflask_sqlalchemy官方文档：Flask-SQLAlchemy—Flask-SQLAlchemyDocumentation(3.1.x)为了不报错也需要导入另外两个库#pipinstallflask_sqlalchemy#pipinstallmysqlclient完整代码importosfromflaskimportFlaskfromflask_sqlalchemy
    • 电商打单ERP必备API列表-API调用指南 懂电商API接口的Jennifer 淘宝API接口springjava后端爬虫数据挖掘网络爬虫
      1、打开淘宝开放平台API文档，查看API参数。2、选择需要的API，进行测试对接。注册账号获取APIkey3、进入API测试页，开始测试taobao.customcustom-自定义API操作公共参数名称类型必须描述keyString是调用key（必须以GET方式拼接在URL中）secretString是调用密钥api_nameString是API接口名称（包括在请求地址中）[item_sear
    • 史上最详细的测试用例写作规范 心软小念 测试用例
      软件测试用例得出软件测试用例的内容，其次，按照软件测试写作方法，落实到文档中，两者是形式和内容的关系，好的测试用例不仅方便自己和别人查看，而且能帮助设计的时候考虑的更周。一个好的测试用例必须包含足够的内容，将这些内容可以拆分为八个要素：用例编号、测试项目、测试标题、重要级别、预置条件、测试输入、操作步骤、预期输出。1、用例编号1）规则：是由字符和数字组成的字符串，具有唯一性、易识别性。2）不同阶段
    • opencv “未声明的标识符：SurfFeatureDetector”问题解决办法 adsdriver Opencv学习点滴opencv特征点检测未声明的标识符SurfFeaturDetector
      在VS中使用opencv2.4.X版本的时候，如果使用SurfFeatureDetector（或者SiftFeatureDetector）做特征点检测的时候，按照官方文档上的示例代码include头文件为：opencv2/features2d/features2d.hpp，则会出现如下报错：errorC2065:“SurfFeatureDetector”:未声明的标识符。1、实际上2.4.X版本的
    • 使用Github+PicGo搭建个人图床 水煮养乐多
      写在开头每个人都需要一个自己的个人图床，什么是图床？图床就是把图片存到服务器上，通过一个公开的链接地址进行访问或者下载平时我们将图片夹杂在文章、文档、公众号、博客当中，一般情况下这样似乎没有任何问题，可试想一下若我们需要同时维护多份，不停地在不同渠道重复上传、编辑，图片也会散落各地，难以维护管理，这时候若有个统一的存储地方就可以很轻松维护。我们将图片直接放到在线静态页面当中的话，在访问时需要等待全
    • MPI4.1文档5-语言绑定、进程、错误处理、progress和实现 whyte王 MPI4.1文档详解MPIMPI4HPC高性能计算
      本博客参考官方文档进行介绍，全网仅此一家进行中文翻译，走过路过不要错过。官方网址：https://www.mpi-forum.org/参考文档：https://www.mpi-forum.org/docs/mpi-4.1/mpi41-report.pdf引用官方4.1文档方法：@manual{mpi41,author="{MessagePassingInterfaceForum}",title="
    • js 操作属性 if switch 你想Ta吗
      条件语句：条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句。最基本的条件语句：if...else、switch...caseJS操作属性：DOM是为了操作文档（网页）的API，document是它的一个对象BOM是为了操作浏览器的API，window是它的一个对象常用BOM对象还有：alert、定时器等。JS可控换肤：通过按钮的点击来更换皮肤。但是要连接外部样式表，通过点击事件来更换不同
    • 解析XML文件的几种方式？ 人生在勤，不索何获 xml
      在Java中解析XML文件可以通过多种方式完成，其中最常用的有DOM（DocumentObjectModel）、SAX（SimpleAPIforXML）和StAX（StreamingAPIforXML）。每种方式有其特点和适用场景。1.DOM解析DOM解析是一种将整个XML文档加载到内存中，构造成一个树形结构，然后你可以很方便地访问任何数据节点的方法。这种方法适用于需要频繁读写操作的场景。impo
    • 代码随想录算法训练营第三十一天|455.分发饼干、376. 摆动序列、 53. 最大子序和 Eugene Tsui 算法
      文档讲解：455.分发饼干、376.摆动序列、53.最大子序和题目链接：455.分发饼干、376.摆动序列、53.最大子序和思路：今天开始了贪心的题目，贪心的题目要么比较简单，要么就很难，找不到头绪，今天的题目还是相对简单一些的。第三题中最难想的一个点就是，如果sum=0;i--){if(cookie>=0&&s[cookie]>=g[i]){res++;cookie--;}}returnres;
    • 模型设计该如何落地到数据库设计 蜜糖的代码注释
      早期项目设计在比较早期的软件程序设计中，或者说，当软件需求十分简单的时候。我们往往会按照如下的方式进行设计：分析需求文档。根据需求文档中设计到的数据进行库表设计。根据库表设计结合业务，进行程序设计。这样的操作流程是直观的，往往在进行第二步库表设计的时候，对应数据库字段中的内容就是需要展示的“列表”、“详情页“或者”表单“等内容。但是在这样的流程操作加，我们实际上是有两次对需求中的业务数据进行了两次
    • XML语言的学习记录5- XSD time 前端项目xml学习前端
      XSD(XMLSchemaDefinition)，定义XML文档的合法构建模块，分为简易元素(仅包含文本的元素，不会包含任何其他的元素或属性)和复合元素(包含其他元素及/或属性的XML元素)。1.内建的数据类型:xs:stringxs:decimalxs:integerxs:booleanxs:datexs:time2.示例：“xs:”XSD命名控件前缀；xmlns:xs="url"指定XMLSc
    • TC551001系列 慎独yfs 单片机stm32嵌入式硬件
      东芝公司（Toshiba）关于其TC551001系列静态随机存取存储器（SRAM）的技术手册。这款存储器具有131,072个存储单元，每个单元可以存储8位数据，总计1,048,576位。下面是对文档内容的翻译和详细分析，包括图表分析。翻译内容：描述：TC551001CPI/CFI/CFTI/CTRI/CSTI/CSRI是一款1,048,576位的静态随机存取存储器（SRAM），组织为131,072
    • kotlin基础类型 0246eafe46bd
      注释单行注释和多行注释kotlin和java一样支持当行（//注释内容）和多行注释（/*注释内容*/），不同的是kotlin的多行注释支持嵌套，例如：privatefuntestComment(msg:String){//单行注释/*多行注释开头/*嵌套的注释内容*/多行注释结尾*/Log.d(TAG,"multilineComment:$msg")}文档注释Kotlin的文档注释和java一样，
    • Skywalking timshinlee skywalking
      Skywalking官方文档SkywalkingJavaAgent文档启动Skywalking会同时启动一个控制台和一个监控进程。控制台默认为8080端口，可以在webapp/webapp.yml文件里面修改。监控进程默认监听11800端口，对应的值是config/application.yml的gRPCPort。Skywalking是非侵入式的，我们的Java应用程序要接入Skywalking的
    • JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？ 智伴科技 javascripthtmlcss
      下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/*在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven
    • Websocket + Vue使用 人间观察师 websocketvue.js前端
      这里有一篇文档可以参考一下>闪现POM文件org.springframework.bootspring-boot-starter-websocket2.7.0WebSocketConfig配置importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configura
    • Minio设置文件链接永久有效 jackob-94 文件存储miniojava
      Minio设置文件链接永久有效一、问题描述minio分享文件的链接，最多支持分享七天。而我们正常的文件需要永久有效，此时需要设置文件链接永久有效。二、解决方法minio提供了一个客户端工具。可以直接对minioserver进行配置，将指定桶设置为公共永久可下载。三、具体解决步骤1、安装minio的mc首先是安装minio客户端，这个官方文档很清楚选择(Linux或者windows选择下载一个即可)
    • 飞桨科学计算套件PaddleScience skywalk8163 人工智能paddlepaddle人工智能飞桨
      PaddleScience是一个基于深度学习框架PaddlePaddle开发的科学计算套件，利用深度神经网络的学习能力和PaddlePaddle框架的自动(高阶)微分机制，解决物理、化学、气象等领域的问题。支持物理机理驱动、数据驱动、数理融合三种求解方式，并提供了基础API和详尽文档供用户使用与二次开发。安装当然要先安装好飞桨PaddlePaddle，再安装PaddleSciencepipinst
    • beego框架基础知识学习笔记 一弓虽 beego框架学习beego学习
      网站beegogithub地址：https://github.com/beego/beegobeego中文学习文档：http://beego.gocn.vip/beego/zh/developing/什么是beegobeego是一个快速开发go应用的HTTP框架他可以用来快速开发API、Web及后端服务等各种应用bee工具什么是beebee工具是一个为了协助快速开发beego项目而创建的项目，通过
    • 算法刷题Day14 | 二叉树理论、递归遍历、迭代遍历、统一迭代 海码007 算法算法
      目录0引言1递归遍历1.1前序遍历1.2后序遍历1.3中序遍历2迭代遍历2.1前序和后序2.2中序‍♂️作者：海码007专栏：算法专栏标题：算法刷题Day14|二叉树理论、递归遍历、迭代遍历、统一迭代❣️寄语：书到用时方恨少，事非经过不知难！0引言继续加油！1递归遍历文档讲解视频讲解做题状态：简单写好递归的三大步骤：确定递归函数的参数和返回值：确定哪些参数是递归的过程中需要处理的，那么就在递归函数
    • Java二次开发海康SDK-对接门禁机一文全解 半自定义大剑仙 一文全解java前端服务器图像处理
      写在最前SDK版本：CH-HCNetSDKV6.1.6.45_build20210302_win64参考文档：海康SDK使用手册_V6.1对接测试设备型号：DS-K1T671M设备序列号：E50247795业务目标使用门禁设备实现对人脸的抓拍，将抓拍的人脸与其对应的数据进行上传。业务流程图：业务流程节点解释：1.初始化SDK（NET_DVR_Init）：进行海康提供开发库的载入，使用海康官方提供的
    • 某项目公司-——ETL工程师岗位——二面 劝学-大数据 个人面试真题记录etl工程师数据仓库
      1.自我介绍2.如果给你一个数仓项目，你应该从那些方面向你的上级汇报。3.对自己的未来职业生涯规划。4.平常下班之后做那哪些事情。5.对于写PPT,写文档这块是否可以。6.遇到工作中的压力，该如何处理。7.你曾经是做什么的。为什么想着向互联网这块发展。8.你有什么要问的？整个面试过程，面试官主要考察面试者自己的自学能力，然后做事的态度。以及做事的态度，解决问题的能力。还有就是，以后不说自己是酒店服
    • Spring4.1新特性——Spring MVC增强 jinnianshilongnian spring 4.1
      目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
    • mysql 性能查询优化 annan211 javasql优化mysql应用服务器
      1 时间到底花在哪了？ mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了 检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方 花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操
    • windows系统配置 cherishLC windows
      删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 类似的还有pagefile.sys msconfig 配置启动项 shutdown 定时关机 ipconfig 查看网络配置 ipconfig /flushdns
    • 人体的排毒时间 Array_06 工作
      ======================== ||  人体的排毒时间是什么时候？|| ======================== 转载于： http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR
    • ZooKeeper cugfy zookeeper
      Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步， 配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea
    • 网络爬虫的乱码处理 随意而生 爬虫网络
      下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文 、俄文、藏文之类的乱码处理，因为他们的解决方式 是一致的，故在此统一说明。     网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理
    • Xcode常用快捷键 张亚雄 xcode
      一、总结的常用命令：     隐藏xcode command+h     退出xcode command+q     关闭窗口 command+w     关闭所有窗口 command+option+w     关闭当前
    • mongoDB索引操作 adminjun mongodb索引
      一、索引基础：    MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令：    > db.test.ensureIndex({"username":1})    可以通过下面的名称查看索引是否已经成功建立： &nbs
    • 成都软件园实习那些话 aijuans 成都 软件园 实习
      无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。 　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都
    • Linux下FTP服务器安装及配置 ayaoxinchao linuxFTP服务器vsftp
      检测是否安装了FTP [root@localhost ~]# rpm -q vsftpd 如果未安装：package vsftpd is not installed  安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息   安装FTP 运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf
    • 使用mongo-java-driver获取文档id和查找文档 BigBird2012 driver
      注：本文所有代码都使用的mongo-java-driver实现。   在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在
    • JSONObject以及json串 bijian1013 jsonJSONObject
      一.JAR包简介     要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：     1.commons-lang-2.0.jar     2.commons-beanutils-1.7.0.jar     3.commons-collections-3.1.jar &n
    • [Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性 bit1129 zookeeper
      为了说明问题，看个简单的代码，   import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ThreadLocal
    • 【Scala十二】Scala核心六：Trait bit1129 scala
      Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c
    • weblogic version 10.3破解 ronin47 weblogic
      版本：WebLogic Server 10.3 说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录 例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa
    • 求第n个斐波那契数 BrokenDreams
              今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。         自己试了下，搞了好久。。。基础要加强了。           &nbs
    • 读《研磨设计模式》-代码笔记-访问者模式-Visitor bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; interface IVisitor { //第二次分派，Visitor调用Element void visitConcret
    • MatConvNet的excise 3改为网络配置文件形式 cherishLC matlab
      MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。 主页： http://www.vlfeat.org/matconvnet/ 教程： http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet： http
    • ZK Timeout再讨论 chenchao051 zookeepertimeouthbase
      http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003
    • CASE WHEN 用法介绍 daizj sqlgroup bycase when
      CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数  CASE sex  WHEN '1' THEN '男'  WHEN '2' THEN '女'  ELSE '其他' END  --Case搜索函数  CASE WHEN sex = '1' THEN
    • PHP技巧汇总:提高PHP性能的53个技巧 dcj3sjt126com PHP
      PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍
    • Yii框架中CGridView的使用方法以及详细示例 dcj3sjt126com yii
      CGridView显示一个数据项的列表中的一个表。 表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。 实例代码如下：
    • Maven项目打包成可执行Jar文件 dyy_gusi assembly
      Maven项目打包成可执行Jar文件 在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 1、在项目中加入插件的依赖： <plugin>
    • php常见错误 geeksun PHP
      1.  kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc
    • 修改linux的用户名 hongtoushizi linuxchange password
      Change Linux Username 更改Linux用户名，需要修改4个系统的文件： /etc/passwd /etc/shadow /etc/group /etc/gshadow 古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： vipw vipw -s vigr vigr -s   具体的操作顺
    • 第五章 常用Lua开发库1-redis、mysql、http客户端 jinnianshilongnian nginxlua
      对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。 一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。   Redis客户端 lua-resty-r
    • zkClient 监控机制实现 liyonghui160com zkClient 监控机制实现
               直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举
    • 在Mysql 众多表中查找一个表名或者字段名的 SQL 语句 pda158 mysql
      在Mysql 众多表中查找一个表名或者字段名的 SQL 语句： 　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name'; 　　方法二：SELECT column_name from information_schema.colum
    • 程序员对英语的依赖 Smile.zeng 英语程序猿
      1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 以上一些问题，充分说明了英语对程序猿的重要性。骚年
    • Oracle学习笔记(8) 使用PLSQL编写触发器 vipbooks oraclesql编程活动Access
          时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！     这是第八章的学习笔记，学习完第七章的子程序和包之后
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他