Alvin_扣扣953821815
Alvin_扣扣953821815

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,jquery知识点)

    • ARM驱动学习之5 LEDS驱动 JT灬新一 嵌入式C底层arm开发学习单片机
      ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
    • C++菜鸟教程 - 从入门到精通 第二节 DreamByte c++
      一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一
    • 学习“论语”-第59天 春峰轩
      12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
    • nosql数据库技术与应用知识点 皆过客，揽星河 NoSQLnosql数据库大数据数据分析数据结构非关系型数据库
      Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
    • 2021-07-31 比峰
      七月的最后一天，过了今天，就是八月，心脏在颤抖……昨天两点半才睡，一直在以两倍的语速的听之前的课程，虽然隔得时间不长，但是很多知识点已经忘了差不多了，为了让自己能够掌握的稍微全面一点，还是磨刀不误砍柴工的比较好。正因为晚上睡得晚，今天一上午的状态都不好，也可能因为上午都是待在家里，所以多数时间自己是在补觉。既然太累，那就睡觉吧，总比浪费时间的好。下午到咖啡馆做题，一道差错更正一下子让自己的实力暴露
    • 你可能遗漏的一些C#/.NET/.NET Core知识点 追逐时光者 C#.NETDotNetGuide编程指南c#.net.netcoremicrosoft
      前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
    • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
      最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
    • 阅读《认知觉醒》读书笔记 就看看书
      本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
    • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
      引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
    • Python编程 - 函数进阶 易辰君 Python核心编程python开发语言
      目录前言一、函数参数的高级用法（一）缺省参数（二）命名参数（三）不定长参数二、拆包（一）函数返回值拆包（二）通过星号拆包（三）总结三、匿名函数（一）函数定义（二）使用匿名函数四、递归函数（一）简介（二）基本结构（三）简单示例（四）优缺点总结前言上篇文章主要了解了函数基础，如何定义函数，函数种类以及局部变量和全局变量的差异等，接下来就讲解python函数较为进阶的知识点，若有任何想法欢迎一起沟通讨论
    • Golang语言基础知识点总结 最帅猪猪侠 golang开发语言后端
      Golang语言基础知识点小总结1.go语言有两大类型：值类型：数值类型，bool，string，数组，struct结构体变量直接存储值，内存通常在栈中分配,修改值,不会对源对象产生影响引用类型：指针，slice切片，管道chan，map，interface变量存储的是一个地址，这个地址对应的空间才真正存储数据值，内存通常在堆上分配，当没有任何变量引用这个地址时，该地址对应的数据空间就成为一个垃圾
    • 教师资格证常考的5个知识点 a3cb74a20840
      知识点1：教育与人的发展(5规律、4因素、3动因)五大规律：顺序性—循序渐进阶段性—不搞“一刀切”不平衡性—抓关键期互补性—扬长避短个别差异性—因材施教考点精华：1.举例子对应五大规律;2.每个规律的教学启示;3规律特点。四大因素：遗传(地位：物质前提、可能性)环境(地位：多种可能、现实性)学校教育(主导)个人主观能动性(动力、决定)三大动因：内发论(1.孟子：性善论;2.弗洛伊德：性本能)外铄论
    • 2019-02-26 一枚_铜钱
      今天是实习第一节课，昨天已经和同学们交流过了，对于新老师，让学生适当地了解你是很有必要的。这第一节课嘛，孩子们表现也还可以大部分孩子都是很认真听讲的，也有几个上课会说话。但是我觉得孩子们对知识点的掌握速度还是很慢的，有的地方讲很多遍还是不太懂的样子。当然我自己可能也要反省，重点地方一定要明明白白告诉大家。明天切正题要快，要让学生读题，要让学生多写多练。话要尽量说得少，但句句在点子上，还得全面。下午
    • 怎么才能做一个好老师 尘埃不确定
      厉害的老师也许不用提前准备什么，随场发挥就可以讲的很好。也许要系统地教授，还是最好准备一个大纲，每节课需要备课；只有提前准备，在讲的时候，效率才会提高，也容易讲明白知识点。每个学生对知识技能的掌握都不一样，有针对性地教学，可能会有好的效果。今天重新组装用QQ飞控的教练机，费了好大劲，虽然自己对这套东西比较熟悉，但时间长了会忘记很多东西，教大家的时候，其实是共同学习。
    • 2020-02-15 蔡卡
      我是蔡卡，爱看日漫和美剧，一眨眼就成了爸爸，喜欢孩子的我总想给孩子最好的，于是开始了我的探索之旅。不爱看书的我开始认真看书和参与各种团体，通过自我学习以及思想的碰撞从而形成自己的知识体系。分享才能更好的提升，生活中每遇到一个困难，都需要我们用所学的知识点去解决。我的使命:让更多家庭的孩子不因地域和阶层导致认知以及成长上的差距更大。__________________________________
    • 前端知识点 ZhangTao_zata 前端javascriptcss
      下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    • Hadoop架构 henan程序媛 hadoop大数据分布式
      一、案列分析1.1案例概述现在已经进入了大数据(BigData)时代，数以万计用户的互联网服务时时刻刻都在产生大量的交互，要处理的数据量实在是太大了，以传统的数据库技术等其他手段根本无法应对数据处理的实时性、有效性的需求。HDFS顺应时代出现，在解决大数据存储和计算方面有很多的优势。1.2案列前置知识点1.什么是大数据大数据是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的大量数据集合，
    • 2024年最全Flutter如何和Native通信-Android视角，Electron开发Android界面 2401_84544531 程序员android面试学习
      总结【Android详细知识点思维脑图（技能树）】其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。虽然Android没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明Android中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪
    • 杨蕊今日份总结 羊鑫
      2020年10月24日周二新的一周开始了！到了学校先打扫了一下卫生，然后给孩子们录了今天写作业的视频，今天书写的作业笔画是横折竖折。字根“五”今天孩子们的书写质量还是可以的，但是短横长横的掌握情况不是很理想，周六周天孩子们来的时候再给孩子们进行复习回顾一下，重点说一下这个知识点。去楼上把几个坏掉的凳子用固体胶粘好。下午去南鑫拿了几张照片去那边压膜。回到比德弗校区之后把玩具架和齐老师一起全都整理了一
    • 教师资格考试中学《教育知识与能力》知识点｜高频考点汇总 小山丘
      温馨提示：更多汇总详情留言小编哦！！！认知过程之易混知识点剖析社会中心课程论情绪——重要考点皮亚杰教你带孩子斯金纳强化规律你的心理足够强大吗?教育心理学的效应德育有规律常考人物思想之夸美纽斯中学常考教学原则孔子及《论语》中的重要教育思想教育学创立阶段人物之赫尔巴特学习策略分类知识点梳理教师资格证辨析题作答思路综合课程的类型班杜拉的学习理论马斯洛需要层次理论记忆类型的四大分类柏拉图和他的《理想国》感
    • 运用思维导图进行教学设计 安定区张虎
      制作思维导图是一个将碎片化的知识串联起来，形成可视化的图象，抽象化的文字转化具体化的图象，从而使知识点由分散到集中，由碎片化到彼此间建立联系性的过程。思维导图的制作，普遍利用结构性思维，这种思维导图最易掌握，也是最常见的思维导图。当然，人的思维方式多种多样，不仅仅只有结构性思维，如链条思维、逆向思维、创造性思维等等，因此，思维导图是一个极易掌握，又十分有深度的学习工具，它不仅有实用价值，还有研究价
    • C# 开发教程-入门基础 天马3798 教程系列整理c#开发语言
      1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
    • 创造价值很难？你只要帮别人节省时间！ 破晓文库联盟
      创造价值很难？你只要帮别人节省时间！我做教培行业的任课老师，已经有3年经验。我前一年都是在打磨自己的教学能力和演讲水平，脑袋里想的都是怎么让学生更容易理解这个知识点，更快地用习题巩固它。我用几个小时或者几节课帮学生节省了一周甚至一个月甚至半学期落下的知识点，我创造了价值，是因为我有总结归纳启发的能力。我用几节课帮家长节省了每天晚上每个周末对孩子的疯狂唠叨。你怎么还不去写作业？你作业写完了吗？为什么
    • python数据分析知识点大全 编程零零七 python数据分析python开发语言python数据分析数据分析知识点大全python数据分析知识点python教程python基础
      Python数据分析知识点大全可以归纳为以下几个主要方面：一、基础概念与目的数据分析定义：数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，提取有用信息和形成结论，对数据加以详细研究和概括总结的过程。其目的在于从数据中挖掘规律、验证猜想、进行预测。Python在数据分析中的优势：Python因其易学性、快速开发、丰富的扩展库（如NumPy、Pandas等）和成熟的框架，成为数据分析领域的
    • CISSP考点拾遗——软件保障SwA 我全家都是CISSP
      说明：“考点拾遗”系列基于日常为学员和网友做的答疑整理，主要涉及教材中没有完全覆盖到的知识点。Softwareassuranceisthelevelofconfidencethatsoftwareisfreefromvulnerabilities,eitherintentionallydesignedintothesoftwareoraccidentallyinsertedatanytimedur
    • Chat GPT带来的几点思考 淡定的胡萝卜
      OpenAI公司推出的ChatGPT引起了广泛关注，网上出现各类专家开始预测随着ChatGDP的普及，将会有哪些行业的人面临失业，引发人们的焦虑。不可否认它会给我们的教育行业、媒体行业、学术界等众多行业产生影响，面对这些影响，我们该如何看待呢？近期我阅读了不少相关文章，引发的几点思考，想与大家分享。ChatGPT将会倒逼传统教育的改革。中国传统教育是教师对知识点的传授、学生对知识点的掌握，不仅量多
    • html 删除事件,html 事件的添加和删除 列蒂齐亚 html删除事件
      jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi
    • 《android进阶之光》——多线程编程（上） TAING要一直努力 读书笔记
      今天了解了下多线程编程，知识点如下：进程与线程：进程是什么？线程是什么？进程可以看作是程序的实体，是线程的容器，是受操作系统管理的基本运行单元，例如exe文件就是一个进程。线程是进程运行的一些子任务，是操作系统调度的最小单元，各线程拥有自己的计数器，堆栈，局部变量等，也可以访问线程间共享的内存。线程的状态有哪些？新创建，可运行，等待，超时等待，阻塞，终止怎么创建一个线程？-三种方法第一种，MyTr
    • 动态生成的html元素绑定click事件 .NET跨平台 Jquery及其组件htmljquery
      第一篇博客，开启技术博客的生涯，欢迎大家批评指教（坚信妹子也可以做好程序猿）今天想说帮公司做项目的时候遇到的一个小问题，动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行，然后序列号还要随着增加，当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决，但是发现一个问题会出现事件绑定很多次
    • 【60天备战软考高级系统架构设计师——第十天：软件设计与架构综合练习】 冷风扇666 备战-软考系统架构架构
      经过前十天的学习，我们已经了解了软件工程生命周期模型、需求分析与管理方法，以及软件设计与架构的核心内容。为了巩固这些知识点，今天我们将进行一个综合练习。前十天学习内容回顾第1-3天：软件工程概述学习了软件生命周期模型（如瀑布模型、迭代模型、敏捷模型等）、软件工程原则（如开闭原则、单一职责原则等），以及常用的工程方法。第4-6天：需求分析与管理需求分析与管理是软件开发的关键环节之一。我们掌握了需求获
    • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
      本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
    • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
      一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
    • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
      #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
    • java和c语言的雷同 麦田的设计者 java递归scaner
      软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
    • LINUX环境并发服务器的三种实现模型 被触发 linux
      服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
    • Oracle数据库查询指令 肆无忌惮_ oracle数据库
      20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
    • ext右下角浮动窗口 知了ing JavaScriptext
      第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
    • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
      http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
    • maven编译可执行jar包 alleni123 maven
      http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
    • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
      //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
    • Linux自启动设置详解 bijian1013 linux
      linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
    • Spring Aop Schema实现 bijian1013 javaspringAOP
      本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
    • 【Gson七】Gson预定义类型适配器 bit1129 gson
      Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
    • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
      在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
    • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
      一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
    • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
      import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
    • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
      Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
    • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
      1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
    • jmpopups获取input元素值 ctrain JavaScript
      jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
    • vi查找替换命令详解 daizj linux正则表达式替换查找vim
      一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
    • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
      一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
    • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
      在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
    • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
      转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
    • Android应用程序获取系统权限 gqdy365 android
      引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
    • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
      HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
    • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
      译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
    • 数据结构随记_2 lx.asymmetric 数据结构笔记
      第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
    • Linux下的监控工具dstat 网络接口 linux
      1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
    • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
      /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
    • 10点睛Spring4.1-Application Event wiselyman application
      10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他