jQuery对象与dom对象和setAttribute()的使用方法与ie不兼容onclick事件解决方法

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById(“msg”))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$(“#msg”)[0],$(“div”).eq(1)[0],$(“div”).get()[1],$(“td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$(“#msg”).html();
$(“#msg”)[0].innerHTML;
$(“#msg”).eq(0)[0].innerHTML;
$(“#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get (n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个< div>元素的内容。有如下两种方法:
$(“div”).eq(2).html();              //调用jquery对象的方法
$(“div”).get(2).innerHTML;       //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
$(“#msg”).html();              //返回id为msg的元素节点的html内容。
$(“#msg”).html(“<b>new content</b>”);
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$(“#msg”).text();              //返回id为msg的元素节点的文本内容。
$(“#msg”).text(“<b>new content</b>”);
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的<b>new content</b>

$(“#msg”).height();              … 更多...

jQuery最佳实践


上周,我整理了《jQuery设计思想》

那篇文章是一篇入门教程,从设计思想的角度,讲解怎么使用jQuery”。今天的文章则是更进一步,讲解如何用好jQuery”

我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks)。他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值。

==============================================

jQuery最佳实践

阮一峰 整理

clip_image001

1. 使用最新版本的jQuery

jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。

下面就来看看,不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句:

$(‘.elem’)

$(‘.elem’, context)

context.find(‘.elem’)

我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次。结果如下:

clip_image002可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。

其他语句的测试,比如.attr(“value”).val()

更多...

10个既绚又实用的jQuery特效教程

导读:作者Aamir Baigdesignersdare.com分享了一篇文章《10 Must See jQuery Latest Tutorials-Beginners and Advance Level》,文中对初学者和资深学者分别提供了不同级别的教程,使用JQuery做出的既炫丽又实用的效果,现将本文摘译,以下是文章内容:

此篇文章是JQuery高级教程,但对初学者学习JQuery也有一定的帮助。

首先让我们先对初学者谈谈如何开始学习JQuery。对于初学者学习JQuery来说是一个很不错的简短教程。

初学者教程:

让我们开始为初学者讲解JQuery的初步知识。在本教程中,您将学到如何下载JQuery库、添加项目、开发简单的程序、加载页面警告消息弹出窗口。

第一步:下载JQuery库

首先点击链接http://code.jquery.com/jquery-1.4.2.min.js下载JQuery库,保存在本地文件中。

第二步:在网页中添加JQuery库

在页面中添加Query库代码,代码如下:

  1. 		<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>
更多...

jQuery移动版Beta 1发布:更快 更兼容 可扩展

在2010年10月21日,CSDN发文《jQuery移动版发布:支持iOS,黑莓和Android平台》,对jQuery移动版有比较全面的介绍。时隔近12周,jQuery移动移动版Beta 1终于在2011年6月20日发布了!Beta 1比原始版本更快,更强的可扩展性能更好的支持动态JS驱动的网站,兼容性更好,增加更广泛的设备支持(例如智能手机、平板电脑等)。

jQuery 用户界面兼jQuery移动版用户界面总设计师Todd Parker称,jQuery 移动版的Beta 2版本差不多在下个月发布。

要注意的一点就是jQuery Mobile 1.0要求装备jQuery core 1.6,未来将会支持两个最新版本的core。

原文链接:http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/更多...

10款jQuery幻灯插件推荐

今天分享的是10款简单易用,十分顺手的10款jquery 幻灯插件,其中大部分都有教程和演示。

具体列表如下:

Creating Your Own Slider Plugin

View Demo

Easy Slider

jquery slide show plugin

View Demo

Slick Accessible Slideshow

slick accessible slidshow plugin

View Demo

Sliding Boxes and Captions with jQuery Tutorial

View Demo

Horinaja Slide Show Plugin For jQuery

View Demo

Supersized

View Demo

Blog 更多...

WEB UI篇——以结构化的方式写CSS

我的职业是码农,以前有人称这职业叫程序员或软件工程师,不过这些不重要,重要的是我这次写的东西和码农几乎不相干,我接触CSS的时间不长,2年多一点,并且只有在极端的情况下我才会自己动手写CSS,例如:需要挣些钱来养活自己,或者需要将外包出去的难看的前台重写。下面我将要向大家描述如何以层次-结构化的方式来写CSS。


众所周知,一个好的WEB UI工程师注重结构化的HTML+CSS代码,而不仅仅是还原之前的图片设计,这其中区别很大,前者能为代码美观及维护带来非常大的帮助,而后者,除了完成“任务”,几乎就是一团糟。
html代码经常以嵌套的方式出现,例如<body>中可能嵌套了<div>,<div>中又嵌套了<ul>,之后又嵌套了<li>,而li中可能再嵌套label,em,p,i,input,dl,dt,dd,….等等.总之我们将尽可能的组合这些html元素,以便思维更加清晰地展现页面各部分。

假设我们要设计一个注册用户的表单,效果如下:

我可能会有如下的HTML(HTML5):
第一种方式:

<div id=”reg”>
    <div class=”line”>
        <label class=”lbl”>用户名:</label>
        <input class=”txt” id=”tbxUserName” />
        <em 
更多...

分享12款优秀的在线文件格式转换工具

在线的文件转换工具有很多,但是要找到一款好用的却不容易,所以今天这篇文章收集了12款优秀的在线文件格式转换工具,看看有没有适合您的需要的工具。

iWebPrint

打印网页为PDF文件,可以定制打印尺寸、方向和模式,可作为Chrome和Firefox插件使用。

i2OCR

从图片((TIF, JPEG, PNG, BMP, GIF, PBM, PGM, PPM))中提取文本,支持中文等33种语言。

PDF to Flash Page Flip

这款在线工具可以帮助你把PDF转换成类似电子杂志的Flash文件,读起来更加互动和有趣。

FontConverter

使用这款在线字体格式转换工具,你可以转换各种常用的字体文件。

Free Online OCR

这款免费工具可以帮助你轻松的把传真、截图和照片中的文字准换成可编辑和可检索的文本。

Free online file converter

这款免费的在线转换工具可以让你把音频、视频、图片等多媒体文件从一种格式轻松的转换成另一种格式。

Picasion

Picasion 是一款在线生成GIF动画图片的工具,可以从本地上传图片,也可以填写网址。

Brickify

Brickify 是一款很好的工具,可以帮你把图片转换成特别的砖砌模式。

RoboVoice

RoboVoice 是一个文本阅读服务,帮助你听网页,竟然支持中文,太不可以思议了。

CMYK Converter

CMYK … 更多...

URL的设计

导读:URL的设计是一个很复杂的问题,不能说有什么“正确”的解决方案——其挺类似于其他方面的设计的,有好的URL设计,有糟糕的URL设计,在这两者之间的情况也不同——它是主观的。不过这并不意味着不存在用于创建出非常好的URL的最佳做法。原文作者kneath总结了这些年来学到的一些URL设计的最佳做法,希望能够给你留下深刻的印象。

以下是文章内容:

你应该花一些时间来设计一下你的URL地址结构。在读完本文之后,如果有一件事情是我希望你记住的话,那就是花一些时间来设计你的URL地址的结构。不要把它留给你的框架来决定,不要听天由命,依赖运气。要仔细地考虑,认真摸索出一种经验。

URL的设计是一个很复杂的问题,我不能说有什么“正确”的解决方案——其挺类似于其他方面的设计的,有好的URL设计,有糟糕的URL设计,在这两者之间的情况也个个不同——它是主观的。

不过这并不意味着不存在用于创建出非常好的URL的最佳做法。我希望我这些年来学到的一些URL设计的最佳做法能够给你留下深刻的印象,并且我会解释为什么我认为使用新的HTML5 javascript的history API来工作是一件很令人兴奋的事情。

为什么需要对你的URL进行一番设计

URL栏已经成为了现代浏览器的一个主要吸引人的地方了,且它再也不仅是一个URL栏那么简单——你可以输入部分的URL,然后浏览器就像是会使用黑魔法似的召唤出了你正要查找的确切的完整地址。当我在我的URL栏中输入了resque issues时,得到的第一个结果是https://github.com/defunkt/resque/issues。

URL是全球统一的,它们可用在Chrome、Safari、Internet Explorer、cURL、wget、你的iPhone、Android上,甚至会被写在便签上。它们就是web网络的一种全球通用的语法。但是不要把这看成是理所当然的。

任何一个定期访问你的网站的半技术化的用户都应该能够基于内存中的URL结构来浏览你的应用的90%部分。为了能够实现这一点,你的URL必需是要注重实用性的,就几乎仿佛它们就是数学方程式一样——许多简单的规则组合成一种策略性的方式,以此来获得他们想要的页面。

顶层的部分是最为重要的

URL最有价值的方面在于其顶层的部分。在我看来,在想法形成了之后,这就是接下来的任何启动都应该最先要讨论的事情,要远在任何的技术讨论之前,要远在任何的代码编写之前。这一顶层部分将会改变形成你的网站功能的基础。

我是不是有些夸张了?看起来可能会是这样——但是以后会有1,000,000 个用户,想想它会带来多大的影响。想一下Facebook推出用户名是多么重大的一件事。可用的URL就像是不动产,而顶层的部分就是体现在外面的最好的资产。

另一个快速提示——每当你构建一个新的站点时,考虑一下这一组不实用的URL的黑名单列表(或许可从Quora的URL中了解到一点糟糕的URL设计)

命名空间是一种很棒的扩展URL的工具

命名空间可以作为一种很棒的建立实用的URL结构的方式,这种结构在后续的使用中很容易被记住。我在这里说的命名空间指的是什么?我的意思是,URL中指明了不同内容的那部分。一个例子:

https://github.com/defunkt/resque/issues

在上面的URL中,defunkt/resque 就是命名空间。为什么这会有用?这是因为在这一个URL之后的任何部分都突然变成了一个新的顶层部分,因此你可以去到任何的一个《user》/《repo》 , 然后加上/issues或者可能是/wiki,取得相同的页面,但是是在不同的命名空间下。

保持命名空间的清晰,不要一开始就把一些内容放在/feature/《user》/《repo》下,一些放在/《user》/《repo》/feature下。对于命名空间来说,要发挥效用就必须是统一的。

查询串是很棒的过滤和排序的手段

关于查询串web有着一个混乱的过去,我见过各式各样的事情,从每个网页都使用同一个URL加上不同的查询参数的网站,到一个查询串参数都不用的网站,各种情况都有。

我喜欢把查询串想象成URL的旋钮——其调整你的当前视图,把它按照你的喜好来进行微调,这就是为什么它们用在排序和过滤这些行为上会如此之棒。坚持一种统一的模式(比如说sort=alpha&dir=desc ),你就会把通过URL栏进行的排序和过滤变得简单易记。

关于查询串还有最后一件事情:在没有附加查询串的情况下,页面应该是有效的,其可能给出的是一个不同的页面,但没有查询串的URL应该是要呈现出页面的。

英文网站的非ASCII 更多...

为你的网站介绍10个非常有用的jQuery插件

本文介绍的插件涉及图像、paypal支付、分页、导航等方面的内容。

1.AJAX-ZOOM

图像缩放 & Pan Gallery, 360° 对象旋转 (Spin), 全屏视图. 在线演示 here.

2.(mb) verticalSlider

显示长列表的绝佳方式,在线演示 here.

3.More plugin

该插件主要用于评论,当然也可以用于其他,在线演示 here.

4.HTML5 drag & drop image file uploader

实现图像的拖拽上传,在线演示:here.

5.jpaging

jQuery … 更多...

在Web上运行Linux

一个叫Fabrice Bellard的程序员写了一段Javascript在Web浏览器中启动Linux(原网页,我把这个网页iframe在了下面),目前,你只能使用Firefox 4和Chrome 11运行这个Linux。这不是什么假的模仿Linux的东西,这是实实在在的运行一个Linux。这一举动还引起了很多很牛人的关注,包括Javascript的创建者Brendan Eich

 

 

随后,Fabrice Bellard发布了相关的技术说明:http://bellard.org/jslinux/tech.html,从这份文档中我们可以看到:

  • 这个模似器完全由Javascript写成
  • CPU仿真器使用的是QEMU(接近于原古的486),为了装上Linux,其做了一些改动。
  • Javascript的终端本来可以使用termlib,但他还是自己写了一个,因为OS的按键和Web浏览器不一样(here
  • Linux  使用了2.6.20内核,编译配置在这里,并做了一些小改动
  • 磁盘用的是Ram Disk,在启动的时候装载。其文件系统由Buildroot 和BusyBox产生。
  • 在Home目录下有一个hello.c的程序,你可以使用TinyCC编译(tcc,参看酷壳的这篇文章
更多...