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();              //返回id为msg的元素的高度
$(“#msg”).height(“300”);       //将id为msg的元素的高度设为300
$(“#msg”).width();              //返回id为msg的元素的宽度
$(“#msg”).width(“300”);       //将id为msg的元素的宽度设为300

$(“input”).val(“);       //返回表单输入框的value值
$(“input”).val(“test”);       //将表单输入框的value值设为test

$(“#msg”).click();       //触发id为msg的元素的单击事件
$(“#msg”).click(fn);       //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$(“p”).each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$(“tr”).each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]})
//实现表格的隔行换色效果

$(“p”).click(function(){.html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
+”,min=”+$.min(10,20));

7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$(“p”).click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]});

8、操作元素的样式
主要包括以下几种方式:
$(“#msg”).css(“background”);              //返回元素的背景颜色
$(“#msg”).css(“background”,”#ccc”)       //设定元素背景为灰色
$(“#msg”).height(300); $(“#msg”).width(“200”);       //设定宽高
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(“#msg”).addClass(“select”);       //为元素增加名称为select的class
$(“#msg”).removeClass(“select”);       //删除元素名称为select的class
$(“#msg”).toggleClass(“select”);       //如果存在(不存在)就删除(添加)名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$(“#msg”).click(function(){})       //为元素添加了单击事件
$(“p”).click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$(“tr”).hover(function(){
$(this).addClass(“over”);
},
function(){
$(this).addClass(“out”);
});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$(“p”).toggle(function(){
$(this).addClass(“selected”);
},function(){
$(this).removeClass(“selected”);
});
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
$(“p”).trigger(“click”);              //触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$(“p”).bind(“click”, function(){.text());});       //为每个p元素添加单击事件
$(“p”).unbind();       //删除所有p元素上的所有事件
$(“p”).unbind(“click”)       //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

$.each( [0,1,2], function(i, n){ ; });
等价于:
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
;
}
也可以处理json数据,如
$.each( { name: “John”, lang: “JS” }, function(i, n){ ; });
结果为:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options);
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim(” hello, how are you?   “);        //返回”hello,how are you? ”

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如:
jQuery.noConflict();
// 开始使用jQuery
jQuery(“div   p”).hide();
// 使用其他库的 $()
$(“content”).style.display = ‘none’;

 

 

setAttribute()的使用方法与ie不兼容onclick事件解决方法

 

1.element要用getElementById or ByTagName来得到,

2.setAttribute(“class”, vName)中class是指改变”class”这个属性,所以要带引号。

3.IE中要把class改成className,…..IE不认class,所以最好写两句,都用上吧。

W3C DOM – {setAttribute()}

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

1、关于class和className
class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute(“class”, vName)语句动态设置
Element的class属性在firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识”class”,要改用”className”;
同样,firefox 也不认识”className”。所以常用的方法是二者兼备:
element.setAttribute(“class”, vName);
element.setAttribute(“className”, vName);  //for IE

2、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById(“foo”);
bar.setAttribute(“onclick”, “javascript:alert(‘This is a test!’);”);
这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,
而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。

程序代码
document.getElementById(“foo”).className = “fruit”;
document.getElementById(“foo”).style.cssText = “color: #00f;”;
document.getElementById(“foo”).style.color = “#00f”;
document.getElementById(“foo”).onclick= function () { alert(“This is a test!”); }

例如:

 程序代码

<script language=”javascript”>

function Testlink(){
//var alink=document.getElementsByTagName(“A”)[0].href;
var alink=document.getElementsByTagName(“A”);

for (i=0;i<alink.length;i++){
alink[i].setAttribute(“class”, ” “);
alink[i].setAttribute(“className”, ” “);
}
window.event.srcElement.setAttribute(“class”, “Selecta”);
window.event.srcElement.setAttribute(“className”, “Selecta”);  //for IE

}

function Setonclick(){
var alink=document.getElementsByTagName(“A”);
for (i=0;i<alink.length;i++){
//alert(i)
alink[i].onclick=Testlink;// 这个函数名不能带() 即Testlink();

}
}

</script>

 

程序代码
<p><a href=”#” >链接状态测试</a></p>
<p><a href=”#” >链接状态测试</a></p>
<p><a href=”#”  id=”Testlink”>链接状态测试</a></p>
<p><a href=”#” >链接状态测试</a></p>
<p><a href=”#” >链接状态测试</a></p>
<p><a href=”#” >链接状态测试</a></p>

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(),也是新版本的jQuery表现好于老版本。

2. 用对选择器

在jQuery中,你可以用多种选择器,选择同一个网页元素。每种选择器的性能是不一样的,你应该了解它们的性能差异。

(1)最快的选择器:id选择器和元素标签选择器

举例来说,下面的语句性能最佳:

$(‘#id’)

$(‘form’)

$(‘input’)

遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。

(2)较慢的选择器:class选择器

$(‘.className’)的性能,取决于不同的浏览器。

Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都没有部署这个方法,所以这个选择器在IE中会相当慢。

(3)最慢的选择器:伪类选择器和属性选择器

先来看例子。找出网页中所有的隐藏元素,就要用到伪类选择器:

$(‘:hidden’)

属性选择器的例子则是:

$(‘[attribute=value]’)

这两种语句是最慢的,因为浏览器没有针对它们的原生方法。但是,一些浏览器的新版本,增加了querySelector()和querySelectorAll()方法,因此会使这类选择器的性能有大幅提高。

最后是不同选择器的性能比较图

clip_image003可以看到,ID选择器遥遥领先,然后是标签选择器,第三是Class选择器,其他选择器都非常慢。

3. 理解子元素和父元素的关系

下面六个选择器,都是从父元素中选择子元素。你知道哪个速度最快,哪个速度最慢吗?

$(‘.child’, $parent)

$parent.find(‘.child’)

$parent.children(‘.child’)

$(‘#parent > .child’)

$(‘#parent .child’)

$(‘.child’, $(‘#parent’))

我们一句句来看。

(1) $(‘.child’, $parent)

这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find(‘child’),这会导致一定的性能损失。它比最快的形式慢了5%-10%。

(2) $parent.find(‘.child’)

这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度较快。

(3) $parent.children(‘.child’)

这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。

(4) $(‘#parent > .child’)

jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%。

(5) $(‘#parent .child’)

这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,大概比最快的形式慢了77%。

(6) $(‘.child’, $(‘#parent’))

jQuery内部会将这条语句转成$(‘#parent’).find(‘.child’),比最快的形式慢了23%。

所以,最佳选择是$parent.find(‘.child’)。而且,由于$parent往往在前面的操作已经生成,jQuery会进行缓存,所以进一步加快了执行速度。

具体的例子和比较结果,请看这里

4. 不要过度使用jQuery

jQuery速度再快,也无法与原生的javascript方法相比。所以有原生方法可以使用的场合,尽量避免使用jQuery。

请看下面的例子,为a元素绑定一个处理点击事件的函数:

$(‘a’).click(function(){

alert($(this).attr(‘id’));

});

这段代码的意思是,点击a元素后,弹出该元素的id属性。为了获取这个属性,必须连续两次调用jQuery,第一次是$(this),第二次是attr(‘id’)。

事实上,这种处理完全不必要。更正确的写法是,直接采用javascript原生方法,调用this.id:

$(‘a’).click(function(){

alert(this.id);

});

根据测试,this.id的速度比$(this).attr(‘id’)快了20多倍。

5. 做好缓存

选中某一个网页元素,是开销很大的步骤。所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。

比如,下面这样的写法就是糟糕的写法:

jQuery(‘#top’).find(‘p.classA’);

jQuery(‘#top’).find(‘p.classB’);

更好的写法是:

var cached = jQuery(‘#top’);

cached.find(‘p.classA’);

cached.find(‘p.classB’);

根据测试,缓存比不缓存,快了2-3倍。

6. 使用链式写法

jQuery的一大特点,就是允许使用链式写法。

$(‘div’).find(‘h3’).eq(2).html(‘Hello’);

采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使用缓存的)非链式写法,大约快了25%。

7. 事件的委托处理(Event Delegation)

javascript的事件模型,采用”冒泡”模式,也就是说,子元素的事件会逐级向上”冒泡”,成为父元素的事件。

利用这一点,可以大大简化事件的绑定。比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?

$(“td”).bind(“click”, function(){

$(this).toggleClass(“click”);

});

回答是不需要,我们只要把这个事件绑定在table元素上面就可以了,因为td元素发生点击事件之后,这个事件会”冒泡”到父元素table上面,从而被监听到。

因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。这就叫事件的”委托处理”,也就是子元素”委托”父元素处理这个事件。

具体的写法有两种。第一种是采用.delegate()方法:

$(“table”).delegate(“td”, “click”, function(){

$(this).toggleClass(“click”);

});

第二种是采用.live()方法:

$(“table”).each(function(){

$(“td”, this).live(“click”, function(){

$(this).toggleClass(“click”); 
}); 
});

这两种写法基本等价。唯一的区别在于,.delegate()是当事件冒泡到指定的父元素时触发,.live()则是当事件冒泡到文档的根元素后触发,因此.delegate()比.live()稍快一点。此外,这两种方法相比传统的.bind()方法还有一个好处,那就是对动态插入的元素也有效,.bind()只对已经存在的DOM元素有效,对动态插入的元素无效。

根据测试,委托处理比不委托处理,快了几十倍。在委托处理的情况下,.delegate()又比.live()大约快26%。

8. 少改动DOM结构

(1)改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。

如果要插入多个元素,就先把它们合并,然后再一次性插入。根据测试,合并插入比不合并插入,快了将近10倍。

(2)如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档。根据测试,使用.detach()方法比不使用时,快了60%。

(3)如果你要在DOM元素上储存数据,不要写成下面这样:

var elem = $(‘#elem’);

elem.data(key,value);

而要写成

var elem = $(‘#elem’);

$.data(elem,key,value);

根据测试, 后一种写法要比前一种写法,快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的, 而$.data()方法是定义jQuery函数上面的,调用的时候不从复杂的jQuery对象上调用,所以速度快得多。(此处可以参阅下面第10点。)

9. 正确处理循环

循环总是一种比较耗时的操作,如果可以使用复杂的选择器直接选中元素,就不要使用循环,去一个个辨认元素。

javascript原生循环方法for和while,要比jQuery的.each()方法,应该优先使用原生方法。

10. 尽量少生成jQuery对象

每当你使用一次选择器(比如$(‘#id’)),就会生成一个jQuery对象。jQuery对象是一个很庞大的对象,带有很多属性和方法,会占用不少资源。所以,尽量少生成jQuery对象。

举例来说,许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。下面两个例子,都是取出一个元素的文本,使用的都是text()方法。你既可以使用针对jQuery对象的版本:

var $text = $(“#text”);

var $ts = $text.text();

也可以使用针对jQuery函数的版本:

var $text = $(“#text”);

var $ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快

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代码

在页面中添加页面上加载警告窗口代码,代码如下:

  1. 		<Script language=”JavaScript”> 
  2.  
  3. $(document).ready(function() { 
  4.  
  5. alert(“jQuery tutorial for beginners Example”); 
  6.  
  7. }); 
  8.  
  9. </Script> 

$(document).ready(function() {}函数调用已经准备就绪。在这个函数中添加了JavaScript函数显示警告信息。这个是一个非常简单的例子,添加后在屏幕上提示信息“jQuery tutorial for beginners Example(JQuery初学者示例教程)”。

点击查看示例:http://designersdare.com/jquery-tutorial/jquery-tutorial.html

中级和高级用户使用的JQuery教程

1.JQuery随机背景滚动效果教程

 

使用JQuery做出的动画背景,这是一个简单但很实用的简短教程。点击查看示例

2.JQuery制作聚光灯教程

聚光灯效果随着鼠标的移动而突显图像。点击查看示例

3.JQuery下拉菜单效果教程

简单实用、易于定制的下拉菜单。点击查看示例

4.JQuery教程设计

在此处列出教程中有价值的标题:

如何寻找元素?

1.简单的幻灯片模板

2.简单的消失效果

3.过渡效果

4.可折叠标签

5.动画悬停效果

6.全部模块可点击

7.可折叠模板

8.类似WordPress的后台评论

9.图片画廊

10.不同样式的链接类型

5.如何添加图片放大镜效果

非常专业、有趣的教程,创建属于自己的放大图片效果。

6.跨浏览器blockquote使用CSS和JQuery

网页设计师们经常使用Blockqoutes在自己的作品中。本教程可以教您如何在页面上引用<blockquote>标签。

7.处理大量元素的控件提示

有很多的JQuery控件提示工具,其中有一些是非常实用的,供大家参考。

8.JQuery创建分页系统

本教程提供如何为您的网站创建一个分页系统。点击查看示例

9.JQuery的AJAX标签

在网页上自由创建您自己想要的标签。使您的网页脚本更加快速、安全。

10.漂亮的滑动导航:CSS、JQuery教程

我将告诉您如何创建出滑动效果的菜单和导航,当您的鼠标移到导航区域,导航自动滑出,鼠标离开导航自动隐藏。点击查看示例

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/

分享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 Converter 是一款小工具,让你的图片色彩模式在RGB 和 CMYK 之间相互转换。

Neevia Document Converter

在线文档格式转换器,支持很多很多种文件格式。

PDF to JPG

如果你想把PDF文件转换成JPG文件,试试这款工具吧。

原文出自:博客园

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 URL是很糟糕的

这个世界是一个复杂的地方,充满着¿ümlåts?, ¡êñyés!和各种令人畏惧的字符☄。这些字符在任何英文网站的URL中都是不会有一席之地的。使用英文的键盘输入这些字符很复杂,很多时候延展成浏览器中的一些混乱的字符(有在url中见过xn--n3h吗?这是一个☃)。

URL是为人设计的——而非为搜索引擎设计的

我是在这一行业中成长起来,学会了如何玩搜索引擎(好吧,就是Google)的把戏,以此来从我的联盟营销中赚钱。因此关键词堆砌URL的做法对我来说并不陌生。像下面这样来来结束一个URL的情况相当常见:

http://guitars.example.com/best-guitars/cheap-guitars/popular-guitar

就SEO的目的来说,使用这种URL的效果会很好,幸运的是,2003年Google的飓风式的更新消除了这类URL的任何排名优势。遗憾的是,专业的SEO行业被强取豪夺给围绕着,因此其可能还会建议你使用许多你尽可能想得到的关键字来堆砌你的URL

记住另外的一些要点:

  • 1. 下划线只有一个糟字可言,坚持使用破折号。
  • 2. 使用短的、完整的并且是大家都知道的单词。如果某个部分中有一个破折号或是一个特殊的字符的话,这个词就有可能太长。

URL是提供给人用的,为使用的人设计它们。

URL是一种协议

URL是一种协议,在一个可预见的位置尽可能长久地供应某些东西。一旦你的首个访问者点击了URL,那么你就隐式地进入了这样的一种协议中,即如果他们记住了来过该页面或是点击了刷新按钮话,那么他要看到相同的东西。

在已经向公众推出之后就不要再改变你的URL,如果你绝对有必要改变你的URL的话,加上重定向——这不那么会引起惊慌。

任何事物都应该有一个URL

在一个理想的环境中,你的网站上的任何一个单独的屏幕显示都应该得出一个URL,这一URL可被拷贝和粘贴来在另一个选项卡或是浏览器中再次产生相同的屏幕内容。公平地说,这并不是完全有可能的。除非是新近使用了一些新的HTML5浏览器的history Javascript API。值得注意的是,有两个新的方法:

onReplaceState—该方法代替了浏览器历史中的当前URL,并让后退(back)按钮不受影响。

onPushState–该方法把一个新的URL压入到浏览器的历史中,代替URL栏中的URL,并把它加入到浏览器的历史栈中(影响到后退按钮)。

何时使用onReplaceState 以及何时使用onPushState

这些新方法允许我们改变URL栏中的整个路径,而不仅是锚元素。随着这一新的强大功能而来的是一种新的设计责任——我们需要摸索出后退按钮的使用经验。

为了确定使用哪一个方法,问你自己这样的一个问题:这一行为产生了新的内容呢?抑或是相同内容的不同显示?

1.产生了新的内容——你应该使用onPushState(例如:分页链接)

2.产生了相同内容的不同显示——你应该使用onReplaceState(例如:排序和过滤)

使用你自己的判断,不过这两个规则应该会符合你80%的情况。考虑一下,当你点击后退按钮时,你希望看见什么,然后做到你所希望的。

链接的行为就应该像一个链接

诸如《a》和《button》之类的链接元素有着许多很棒的内建功能。如果你中键点击或是命令点击它们的话,它们会打开一个新的窗口。当你悬停在其之上时,你的浏览器会在状态栏中告诉你它的URL地址。在用到onReplaceState和onPushState时,不要破坏了这一行为。

1.把AJAX请求的位置嵌放在锚元素的href属性中。

2.在人们中键点击或是命令点击它们时,从Javascript的点击处理程序中返回true值。

这是一个相当简单的做法,在你的单击处理程序内部使用一个快速的条件判断。下面是一个jQuery兼容的例子片段:

代码:

  1. 		$(‘a.ajaxylink’).click(function(e){  
  2. // API 浏览器不支持history API的后备  
  3. if (!(‘replaceState’ in window.history)) return true  
  4.  
  5. // 确保是中键的、控制的和命令的正常点击行为  
  6. if (e.which == 2 || e.metaKey || e.ctrlKey){  
  7. return true  
  8. }  
  9.  
  10. // 做一些很棒的事情,然后改变URL  
  11. window.history.replaceState(null, “New Title”, ‘/some/cool/url’)  
  12. return false  
  13. }) 

特定于POST行为的URL需要废除

在过去,开发社区很爱创建一些不能被再次使用的URL,我喜欢把它们称为特定于POST行为(POST-specific)的URL——这是一些会在你提交了一个表单之后出现在你的地址栏中的URL,但是当你尝试着拷贝和粘贴这些url到新的选项卡中时,你就会得到一个错误的地址。

这类UR完全没有存在的借口,特定于Post行为的URL是用于重定向和API的——而非给最终用户的。

一个很棒的例子

1.用户生成的URL部分只用ASCII字符(defunkt、resque)。

2.“pull”是“pull request”的简短版本——单个单词,很容易关联到来源词。

3.拉请求(pull request)号局限的范围为defunkt/resque (此处是从1开始)。

4.锚指向一个滚动位置,内容不会被挡住。

知识点精萃:URL还有许多不同的格式——找出patch和diff的版本看看。

一个时代的开始

我希望随着新的Javascript API的使用的增多,设计者和开发者会花一些时间来设计一下URL。这对于任何网站的可用性来说都是一个很重要的部分,但我却见到太多忽略了这一点的 URL了。尽管重新设计网站的外观和感觉很容易,但重新设计URL的结构却要难得多。

但我也很激动,这些年来我有观察到URL的改变。有时是硬链接被牺牲在了AJAX这一祭坛上,有时是牺牲性能来为用户生成真实的URL。最终我们会来到这样的一个时间点上,到那时,我们既可以得到部分页面渲染的性能和可用性优势,同时又获得设计有条理的和精炼的URL的经验。

译文出自:译言网

原文出自:URL Design

为你的网站介绍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 AJAX 分页插件,在线演示 here.

6.jsLink

jQuery 的无效链接检查插件,在线演示 here.

7.AJAX PayPal Cart

贝宝支付的插件,好吧,我承认这个东西对国内用户用户不大,在线演示 here.

8.jNavigate

该插件用来动态加载网页内容,在线演示 here.

9.Ajax Login Form

Ajax 方式的登录框,在线演示 here.

10.Transform

哦,这是跨浏览器支持的使用 XSL 对 XML 进行转换,在线演示 here.

原文出自:开源中国社区

在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,参看酷壳的这篇文章

从这个事我有这些感触,

  1. 在Web上运行一个Linux的操作系统不是问题。那么在Web上还有什么不能做的吗?
  2. Linux真是性能很高,在Javascript下运行感觉也不慢啊。
  3. 真是Techno-Geek。

一个Windows 3.1的Web网站

啥也不说了,请大家围观下面这个网站吧。http://www.michaelv.org/

打开这个网站,你会看到N年前DOS时代的Windows 3.1的界面,居然还可以扫雷,呵呵。真应了那句话——“只要是可以被Javascript实现的应用或程序,最终都会被Javascript所实现”。另,关于其它Web上更为疯狂的程序,可以查看本站的这篇文章。还有这个在线的IDE。下面是win3.1的截图:

Coderun.com 在线开发IDE

相信大家都还记得我以前向大家推荐的《在线代码编译服务Codepad.org》吧。这回的这个更猛——在线的代码开发的IDE,可以编译,执行,调试。不过,主要针对Web方面的,主要是C#,ASP.NET,Javascript(JQuery)和PHP,很强大哦。那句话是怎么说来的——“如果一个软件可以用Javascript来写,那么这个软件的最终版本会是Javascript”。这个在线的IDE是:

http://www.coderun.com/ide/

Coderun.com 在线开发IDE(点击看大图)

有朋友在留言中说,这个项目可能不实用,没什么意思,而我想说,Google的Chrome OS项目可能非常喜欢这个东西。顺便说一下,这个Online的IDE是开源的,源码在这里:http://coderun.codeplex.com/。