手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

JQuery -- this 和 $(this) 的区别

其实这个还是很好认的啦。呵呵
this,如果是取得元素的话,则对应当前元素的对象
$(this)则是当前元素被jQuery处理的对象。

看看作者是怎么写的,来源:http://www.cnblogs.com/RuiLei/archive/2009/08/20/1550804.html。

起初以为this和$(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事。

What is "this"?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

$("#textbox").hover( 
     
function() { 
          
this.title = "Test"
      }, 
     
fucntion() { 
         
this.title = "OK”; 
  
    } 
);

这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了,Error--报了。

Error Code:
$("#textbox").hover(
       function() {
          $(this).title = "Test";
       },
       function() {
          $(this).title = "OK";
       }
);

这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:

正确的代码:
$("#textbox").hover(
      function() {
         $(this).attr(’title’, ‘Test’);
      },
      function() {
         $(this).attr(’title’, ‘OK’);
      }
);

使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。

参考:http://remysharp.com/2007/04/12/jquerys-this-demystified/

 --EOF--

一般来说,在代码中,尽量使用$(this),一来代码更规范一点,二来,jQuery的函数你也就可以直接调用了。如$(this).children()之类的。。

Tags: jquery

8份HTML手册

8个手册,8张图片,懒得一张张的COPY,于是直接复制过来。主要的还是那8个链接,我就在想,我是否仅保留链接而不留图片呢?又怕帕兰映像说我不负责。
原文地址为:http://paranimage.com/8-html-cheat-sheets/,图片也挺标准,大小也差不多。。。

HTML做为一门基础的前端开发技术,简单易学。但元素属性过多,也记不过那么多来,比如我就一直记不得常用HTML实体字符的代码。本文收集整理一些HTML手册,包含HTML实体字符手册,HTML标签手册,XHTML手册和HTML5手册等等。

 

HTML 4.01 / XHTML 1.0 参考手册(HTML)

面向PHPu k3i.@F(Bk

W3CShool提供。按字母顺序列出的HTML 4.01/XHTML 1.0在线标签手册,以及显示每个标签在哪种DTD中是被允许的,点击每个标签都有详细的注解。

c Yo4I(ucW-pT!l1

#xee t!N X3DV-Y8M1w3school.stylesheet 8份HTML手册

U+Ph8Q*h5{2?r1

HTML颜色速查表(PDF)

面向PHPN1`2r#H[~3BlE

 8份HTML手册

'N:Ao+N^wI_~1

HTML5 Canvas速查手册

g#t%l)Kr7k1 8份HTML手册

"M1?8lS Jp7uA1

HTML 字符实体手册(PNG+PDF)

/?%Zh.O Gb1 8份HTML手册面向PHPbJ.|:X(q7A

HTML帮助手册

d9i e'SQ"o$U-}&C1liquidicity制作的手册都比较漂亮,感觉兴趣的还可以看看我们之前介绍的他们制作的WordPress模板代码帮助手册(简易版高级版)。面向PHP7Xo+_rQ%[JN[_f

d4q J5{3i(^*n%n+a1 8份HTML手册面向PHP&d(Y"GQKU^ D

简易的HTML标签手册

面向PHPdl8P/io'`'K5U-r3r

一套简易HTML手册,包含了常用标签,字符实体,空标签,属性和事情等。含PDF和PNG版本。
z.I8o&X_){[1 8份HTML手册

Zyh~�vL7a1

HTML 5手册

T ]'s];g`p6`7QBi N1Smashing Magazine发布的一份HTML 5标签速查手册。面向PHP9vOon9nG

 8份HTML手册

HTML元素手册

 8份HTML手册

最终我还是把地址整理一遍,方便大家查看或下载

  1. HTML 4.01 / XHTML 1.0 参考手册(HTML)

  2. HTML颜色速查表(PDF)

  3. HTML5 Canvas速查手册

  4. HTML 字符实体手册(PNG+PDF)

  5. HTML帮助手册简易版高级版

  6. 简易的HTML标签手册

  7. HTML 5手册

  8. HTML元素手册

HTML 5一览

帕兰映像又改版了,把我喜欢的下部浮动层去掉了。。

为了这个下部浮动层。我还自己画了几个原型图。只是没有实现成HTML而己。。。

不多说,看文章,地址:http://paranimage.com/list-of-html-5/

HTML 5最近被讨论的越来越多,越来越烈。尽管HTML5离我们其实还挺远的, 我们绝对犯不着浪费时间现在就去学习HTML5的特性和应用 — 那是Google这等走在技术前沿有实力有干劲的家伙才干的事儿。但任何一个设计开发爱好者都不能忽视它,至少应该有个大概的了解。

HTML 5可谓集万千宠爱于一身,各种高帽戴的不亦乐乎。当然,只要是值得讨论的事情,总有不同的声音。也有一些人并不看好他,或者至少对HTML5没那么兴奋。

本文就收集整理一些有关HTML5的相关知识、热门评论和新闻动态,帮助你进一步的了解HTML。

什么是HTML 5?

HTML 5 的历史背景

HTML 5

HTML 5

HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发 布。[1]WHATWG表示该规范是目前正在进行的工作,仍须多年的努力。wikipedia

WHATWG,这个HTML5背后的组织,用下面的话描述自己:“2004年由Apple,Mozilla基金会,Opera软件中的人员创建,他 们的矛头直指W3C直属的XHTML,认为HTML缺少乐趣,对现实世界的需求置之不理。这些组织中的有识之士决心改变这一切,所以超文本应用技术工作小 组 (WHATWG的英文全称)应运而生”。HTML5预计在2012年正式登上W3C候选标准的舞台。但是这并不意味着你到那时才能使用。一些技术已经成 熟,一些部分已经足够稳定,一些功能实现已经接近尾声,所以我们现在就可以体验它们的新特性了。 当前,市场正一步一步加速WHATWG项目的进程。via

: W3C 日前宣布将从2009年底起终止同 XHTML 2 工作组的合约

HTML 5的新标记

关于HTML5中对元素和标记的更新,我把它们划分为三部份:

  1. HTML5结构元素: 新增了更具语义化的标签,比如<header>表示页面的头部,<footer>表示底部,<nav>表示一个链接导航集合等。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。
  2. HTML5 交互元素: 我们上面说过,HTML5的前身名是Web Applications 1.0。 所以HTML5当然不只是随便加几个标签,让代码结构更具语义化这么无聊。另外一些新增的元素,诸如<details>, <datagrid>等,可以实现控制数据和内容展示等交互能力。input元素的新属性:日期和时间,email, url,可以轻松制造一个Webforms 2.0。
  3. 删除的HTML4元素: HTML5删除了HTML4中纯粹用来显示效果的一些标记,比如<font>和<center>,因为它们已经被CSS取代。

看着上面的这些HTML5特性,就不禁让人想到XHTML,XHTML到底做了些什么呢?为什么近几年来,我们老爱跟HTML4划清界线,钟爱XHTML?这有篇文章说的很好:XHTML 鼓励良好的代码习惯,所有标签都需要完整,严谨,XHTML 可以产生比 HTML 4 更干净的代码。也就是说,XHTML相对HTML4,就起到了一个更严格的约束作用,但事实上,用HTML4也可以写出很干净的代码,用XHTML也有人把代码写得一团糟。

当然,我等鼠辈都是墙头草,还特喜欢落井下石。HTML5没热腾起来的时候,也没谁寒碜XHTML,更多的却是讨论要用Transitional还是Strict。废话少,如果你想具体了解HTML新增的元素和属性标记,可以查看下面这些文章:

HTML的新API

除了原先的DOM接口,HTML5增加了更多样化的API。包含了设计师们需要的很多东西,本地的音频,视频支持,多栏布局工具,离线数据库,本地的矢量图支持等等。

HTML 5的试验

HTML 5的标准还八字才有一撇呢,后面一撇还得慢慢描。但已经有诸多的先锋部队开始拥抱它了。很多主流浏览器的最新版本都已经开始支持HTML5中的部份特性,除了IE。

如果你确实很迫不及待的也想做下技术先驱,下面的一些实例和资源可能会对你有用:

HTML 5的争论

关于HTML 5的争论多种多样,其中最大的争论点在于业界对HTML 5取代Flash、Silverlight这些RIA主力军。下面听听一些声音吧。

Opera称HTML5将使得Flash变得可有可无

Opera首席执行官Jon von Tetzchner近日在接受采访时表示,下一代HTML语言将使得Adobe Flash技术显得很多余,HTML 5的开放Web标准提供了除Flash之外的富媒体网络内容发布方法。

von Tetzchner表示,HTML 5处理富媒体的能力意味着Flash可有可无,“你可以用它实现大多数(Flash)现在做的事,从某种方面说,你可能不再需要Flash。”

von Tetzchner补充说,这并不意味着Flash会消亡,“我喜欢Adobe,他们是一家非常棒的公司,我想Flash还会存在很长很长一段时间,但是 Web标准演变地越来越丰富是‘自然法则’,你可以选择使用Web标准也可以选择使用Flash(发布富媒体内容)。”

编程大师Bruce Eckel不看好HTML5

《Thinking In Java》和《Think in C++》的作者Bruce Eckel最近在博客中评价了在开发团队选择现有技术时所需要掌握和了解的知识资源体系。 他指出web开发者花费了过多的精力来使CSS/HTML/JavaScript程序兼容各种浏览器,非IT行业的公司不会有太多人手维护主页,这往往导 致他们无法考虑兼容问题,最终结果是主页只支持IE。即使等到HTML5发布,这种状况也未必能有所改变。对于一般公司而言,如果想兼容各种平台,最好的 解决方案是使用flash/flex。

更多的HTML新闻和动态

JavaScript2.0 :抢先尝鲜

2.0就要来了,这真是一个有讽刺意味的东西。
一方面,IE6.0霸占着市场,一方面新的东西越来越多。HTML5,JS2.0,我们这些WEB开发人员怎么办?
不多说免得来气,直接看文章

原文从cnbetaCOPY而来:来源泉地址为:http://www.cnbeta.com/articles/91266.htm

感谢Hite的投递
新闻来源:自己翻译
JavaScript2.0 :抢先尝鲜 作者 Rob Gravelle
作者为我们简要的介绍了下正在制定中的JavaScript2.0标准,有许多新特性的介绍和相应的代码演示:

作 为一个开发者和作家,我的一部分工作就是跟随web世界最新发展潮流——不管是关于公司合并、在线购物潮流、或者是编程技巧。我承认如今很难跟上 业界里发生的所有事情,但是有个四处流传的小道消息却吸引了许多的目光:JavaScript2.0提案。作为新的 JavaScript2.0\EMCAScript 4.0计划于2009年终稿,但是日前已经做了很多的工作-包括好的、不好的。今天,我们来看看这份提案规范的一部分,看下他们是在改进这门语言还是狗尾 续貂。

JavaScript的历史

为了更好的理解JavaScript标准是如何实现的,让我们简要的看下这门语言的历史吧

JavaScript是ECMAScript脚本语言的一个分支。ECMAScript 是Ecma国际组织标准化的,这门语言的另外2个分支是ActionScript(macroMedia,Adobe)和JScript(微软)。 JavaScript是有Netscape的Brendan Eich开发的,最初叫Mocha而后是LiveScript,最后改为JavaScript。1993.3月,Sun公司发布了支持 JavaScript的Navigator2.0(译者:我感觉这是错误的,可查看原文)。鉴于JavaScript作为客户端脚本语言取得广泛流行,微 软制定了自己的脚本语言JScript,发布于1996.8月的ie3.0中。Netscape公司在日内瓦提交了JavaScript给Ecma国际标 准化组织,申请成为标准。

Ecma国际标准化组织是个管理信息、通信系统的、基于成员制度,非营利性国际机构 。这个机构起初是为了标准化欧洲的计算而于1991年成立,在它成立后的40年间,Ecma总共出台了370封标准和90个科技报告,其中包括了CD- ROM卷和文件系统,c++语言规范和他们的开放xml格式。第一版的ECMAScript(Ecma-262)于1997在Ecma全员大会上通过。不 管JavaScript还是JScript他们都是兼容ECMAScript的,同时也提供了Ecma规范没有提供的特殊的额外的特性。甚至在今 天,JavaScript和JScript依然有个很多不兼容的地方。JavaScript受如java、c++等面向对象语言的影响很深,这也意味着初 学者能很容易的上手。

语言的增强

更加的面向对象

迄今为止,JavaScript是使用的原型来做继承的,而不是经典的面向对象式的继承自父类。事实上,如下面实例的一样,如今JavaScript没有class的东西:

// Current JavaScript 1.x "Class" Definition
function MyClass()
{
 this.member1 = "a string";
 this.member2 = 10;
}
var myClass = new MyClass(); // class instantiation

// JavaScript 2.0 Class Definition
class TrueClass
{
 this.member1 = "a string";
 this.member2 = 10;
}
var trueClass = new TrueClass(); // class instantiation

当对象的构造函数和他们类型角色一起的时候,构造函数会翻倍。使用new 调用函数的时候会创建一个新对象,而后你就可以使用被bind到这个对象的本地关键字this来调用这个函数。函数的原型决定了这个对象的原型。不管什么 类型的值赋予一个对象的原型,那么它都会被他所有的实例和汉字共享。使用原型 ,JavaScript可以模拟许多基于class的特性,尽管有些古怪。举个例子,在下面的代码中,myOtherDog尝试去重载父类Dog的 getBreed() 函数。虽然myOtherDog的getBreed()函数是能够实现的,但是他没有重载成功——给了myOtherDog两个面包。

function Dog(name)
{
  this.name = name;
  this.bark = function() { alert('Woof!'); };
  this.displayName = function() { alert(this.name); };
};

var myDog = new Dog('Killer');
myDog.displayName(); //Killer
myDog.bark(); //Woof!

Dog.prototype.getBreed = function()
{
  alert("Mutt");
};

myDog.getBreed(); //Mutt

myOtherDog = new Dog('Bowzer');

// this hides getBreed() from other Dogs
myOtherDog.getBreed = function()
{
  return "Lhasa Apso";
};
alert(myOtherDog.getBreed()); //Lhaso Apso and Mutt!

alert(myDog.getBreed()); //function is undefined

强类型

像大多数的脚本语言一样,JavaScript也是弱类型的。解释器会在运行时,基于值来决定某变量的数据类型。这种松散性使得开发者可以很灵活的 重用和比较变量。在后种情况,使用强制类型转换就可以比较两种不同数据类型的值;JavaScript会自动在比较之前将他们转化成相同的类型。

alert( "42" == 42 ); //true
alert( ("42" == 42) + 1 ); //2. the boolean true evaluates to 1.
alert( "I live at " + 99 + " Renolds street."); // the 99 int is converted to a string.

相反的,JavaScript2.0会强类型化了些,这就意味着必须显式的申明变量的类型,脚本引擎不会强制类型转换了。类型可以赋予属性、函数参 数、函数返回值、变量、对象、数组的初始化对象。如果没有定义类型,那么变量或者属性被设置为默认的Object类型,这是所有的数据类型层级的基类。使 用:后跟类型申明的是赋类型的语法:

var a:int = 100; //variable a has a type of int
var b:String = "A string."; //variable b has a type of String

function (a:int, b:string)//the function accepts two parameters, one of type int, one of type string

function(...):int //the function returns a value with a type of int

为了进行上述的比较,你需要转换类型:

alert( int("42") == 42 ); //true
alert( int("42" == 42) + 1 ); //2
alert( "I live at " + string(99) + " Renolds street.");

程序单元体

借鉴了各种流行js框架,程序单元体是很有用的代码模块,它可以在运行时导入。当框架和自定义库数量越来越多的时候,这些已经成为web程序不可或缺的组成部分。设想下,包含了成千上万行代码的库们,一次性下载他们已经不合时宜了。这是伪代码:

use unit Effects "http://mysite/lib/Effects";
use unit Utils "http://mysite/lib/Utils";

var panel = new Panel();
panel.setTime(Util.getFormattedTime());

编译时的类型检查

在JavaScript2.0 里,你可以使用严格模式来编译JavaScript模块。在运行之前,它可以检查几个重要的方面的完整性,包括:

静态类型检查
引用名称确认
对常数的非法赋值
保证比较的两个值有合法的类型
常数

先前的JavaScript开发者不得不使用命名规范或者精心制定的工作规则保护他们的常量。而这些在JavaScript2.0都是不需要的:

//JavaScript 1.x constant
var CULTURE_CONST = "Do you really want to change me?"; // constant in appearance only.

//JavaScript 2.0 constant
const HAMMER_TIME = "You can't touch this!" // a true constant.

命名空间

随着js框架的不断涌现,使用命名空间已经变得越来越必要了。这个标准目前被用作创建全局对象来保护你自己的功能不给先前的全局对象和函数击倒在地(直译)。

总结

许多向对2.0提案进行了猛烈的抨击,批评它在想经典的语言如c++、java在靠近。

“...JavaScript是动态、灵活的,使用原型继承和对象模型是很实用,很基础的优势,为什么有人要把这些那么优雅、灵活的东西变成java呢,java基本上强制性的让程序员使用古典的,基于class的继承——我搞不懂。”

而我个人对此很感受很复杂,即欢迎像class,命名空间,常量这样好的变化,也对强类型脚本变量很不感冒。总体上说,JavaScript冒着对 业余程序员变得更严格,相应的更严肃的危险 。不过,我也想应该感谢那些商业网站能够使用像我这样的专业人士来编码他们的业务流程。不管结果如何,无疑web开发的格局将会发生戏剧性的改变。

初稿:2009 7.20

复查:2009.7.22

翻译:2009.8.20

HTML5 File API:把文件从桌面拖放到 Web

HTML5可谓来势汹汹啊,只是不知道IE会在什么时候才会支持它。
IE6直到现在,微软也没有放弃。就因为这个不放弃,有多少美工、前端在吐血啊。写点JS、CSS吧。还得兼容IE6、7、8,你要干脆一样嘛也就算了。6、7、8都不一样,你说你害人不。

如今 HTML5又来了。微软又会怎么做?

以下内容来自于cnbeTa.com:http://www.cnbeta.com/articles/91161.htm

感谢COMSHARP CMS的投递
新闻来源:Webmonkey.com
HTML5 让 HTML 这个一度单纯的置标语言焕发出成熟的魅力,使之成为 Web 开发者的强力工具,W3C 近日又推出一个新草案,HTML5 File API,这个 API 将让大大改善基于 Web 的文件上传操作,甚至可以实现直接将文件从桌面拖放至Web。

该 草案使用 <input type="file" /> 实现文件的上传,而其对应的 API 为开发者提供了操控上传数据与上传进度的机制。不过,目前对该 API 提供支持的浏览器还少得可怜,真正支持的浏览器似乎只有 Firefox 3.6。如果你拥有最新的 Firefox 3.6 版本,可以在以下演示页体验文件拖放式上传。

Firefox 3.6 文件拖放式上传演示页

同时,该 API 还许诺将为 Web 程序提供一种机制,使得文件上传操作接近桌面程序的体验,同时拖放多个文件到 Web 并单独显示每个上传进程的进度状态。关于 HTML5 File API 的更多细节请参阅以下深度报道

HTML5 延伸阅读


本文来源:http://www.webmonkey.com/blog/HTML5_File_API_Brings_Drag-and-Drop_File_Uploads_to_the_Web
中文翻译来源:COMSHARP CMS 官方网站