Tag: css

jQuery使用技巧

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”).eq(2).html(); //调用jquery对象的方法
$(”div”).get(2).innerHTML; //调用dom的方法属性

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

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

$(”#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'][ i ]})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

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

$(”p”).click(function(){alert($(this).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两个方法
使用扩展的方法(通过“$.方法名”调用):
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

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

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(){alert(”good”)}) //为元素添加了单击事件
$(”p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为三个不同的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(){alert(”Load Success”)})
//页面加载完毕提示“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(){alert($(this).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){ alert( “Item #” + i + “: ” + n ); });
等价于:
var tempArr=[0,1,2];
for(var i=0;i alert("Item #"+i+": "+tempArr[ i ]);
}
也可以处理json数据,如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + 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’;
========================================================================================================
以上资料从网上转载而来,因同事需要提供给同事,现发在这里供大家共享。


设计资源和灵感的必备网站

在这个互联网,并不是的有人都掏心掏肺让你可以真正学到东西。所以,找到一个有高质量,有内容的资源和灵感网站并不是一件容易的事。自从自己学习网页设计以来,收集了不少网站,这里,分享21必备设计资源和灵感的网站,或许,会有你一直寻找,但并未真正找到的:
1. CSS Globe – 你可以不看A list Apart,但这个我想是必备的。这样的说法多少有些争议,毕竟ALA是受大部分人推崇的。不过,这个网站总能收集到你需要的CSS技巧、JS教程、用户体验,甚至WordPress资源。
2. Smashing Magazine – 估计她的名声之大到了可以不用介绍的地步。以收集出名。当然,我是在夸奖,这个网站的质量无可质疑,可以说是篇篇精品,涉及CSS/JS/平面设计等。
3. Nettuts – 关于CSS/JS/PHP,各种关于网页设计和网页功能实现的技巧,有时候,即使你不认识CSS或者PHP,这个网站的文章都会让你实现某个功能/效果,所有讲解都非常详细。
4. Web Designer Wall – 跟Nettuts相似,内容没有Nettuts多,不过,绝对每篇精品,大多为作者自己写的,原创性比较高。主要关注网页设计与平面设计。
5. Noupe – 又一个相对比较多收集内容的网站,貌似是因为一个关于Wordpress教程系列而出名,不过,其内容远远不及这些,关注的内容大多关于网页设计的技巧。
6. Fonts500 - 500种字体,还怕找不到你想要的?不过,都是英文字体。一般情况下,需要比较特别的中文字体,都需要自己制作。
7.ColourLover – 有没有总听人说,这个主题的配色很sofish? 对,颜色可以建立一个品牌,就像一个商标一样,给网站找一套合适的配色可以让你的品牌更深入人心,而ColourLover可以帮到你。
8.LogoPond – 主题像你的衣服,而LOGO就像你的脸孔,一个成功的LOGO总是让人印象深刻,不需要多华丽,但至少要有自己的特色。看看LogoPond吧,她会给你灵感。
9. CSS Mania – 像A List Apart一样,她备受推崇,她被视为灵感的汇集地。当然,并没有那么神圣,但CSS Mania总能带来漂亮的、独具创意的网站,让你耳目一新。
10. ZCOOL -这个对于国内的设计师来说,可能相对比较熟悉。提供PNG/PSD/ESP/AI等素材,主要关注平面设计,还有JS以及一些的酷站。个人在图片素材上,经常在上面淘宝。
11. Web Design List – 最后,让我们来个大集合吧,你还想要什么呢?JS/CSS/XHTML/IE Hack/Blog程序/等,关于标准化网页设计的内容,这里有很多权威的链接提供给我。
12.The Best Designs对此站不甚了解的朋友来说,The Best Designs 是个遍览高质量XHTML和FLASH设计的优秀网站。每个网站设计都会加上相关的标签(比如 – Bold, Colorful, CSS),让你更方便的找到你想要的。
13.CSS Remix 照CSS Remix自己的话说,他们是“一个新鲜的Web2.0最佳设计站点的大本营” (尽管有些搜罗的站点并不是Web 2.0的)。RSS订阅者超过14,000人,CSS Remix绝对可以称得上是设计师们发现别人设计作品的主流网站之一。
14.screenfluent screenfluent是个提供很好设计的网站收罗站。这个网站很棒的地方是它能让你先打开一个很酷的窗口让你预览。超过7,000多的设计,内容也不少。
15.Open Source Web Design
Open Source Web Design 是一个允许用户上传发表网站设计的社区。 你可以免费下载站点上的设计作品。 可以是简单浏览下网站设计也可以下载下来研究学习。
16.One Page Love One Page Love 这个网站设计搜罗站收藏的一般都是一些漂亮、创意十足的单页站点设计。分类中有:产品展示、个人档案、临时页和节日等等。
17.We Love WP We Love WP 收藏的是一些很棒的WordPress站点设计。
18.CSS Divine 一家CSS网站设计的搜罗站。点击侧边栏的色块,可以进行色彩分类查询,让你很方便的找到符合自己主题色的网站设计。网站类别包括:艺术类、商务站点、简洁型等等。
19.Design Snack按他们自己的话说,这是 “设计师自己的收藏箱” 。 Design Snack 同时包含XHTML和FLASH的设计. 你可以自定义网站设计作品的展示方式,为每个设计投票或者通过色调来浏览设计作品。
20.SF art & design portalSF art & design portal 是阿姆斯特丹一家网站工作室创办的网站。收藏的网站设计都是通过人工甄选。你可以按照类别、风格、色调甚至是国别来进行分类浏览。
21.Design Shack 一流CSS站点设计的集合地。 该站的搜罗的设计作品都是 “优中选优”的一流作品. 同时,他们还有一些网页设计方面教程的内容。
22.CSSloafCSSloaf 整合了其他35家网页设计搜罗站的设计作品,所以你就不用浪费时间把那么多站点都访问一遍了。他们的特色是有大幅的网页截图,这样你就不用费神去看小的网页截图了。
23.eduStyleeduStyle 致力于搜罗高校教育性网站的设计


网站优化2

?

验证函数加载

也可以验证一个函数是否被加载,如果没有,加载 JavaScript 文件。为此,使用清单 4中的代码。

清单 4. 验证函数是否被加载
if (myfunction){??// The function has been loaded}else{ // Function has not been loaded yet, so load the javascript.??$import(’http://www.yourfastsite.com/myfile.js’);}

注意:可以使用defer属性,但不是所有浏览器(包括 Firefox)都支持它。

优化 CSS 文件
如果经过适当优化和维护,CSS 文件不一定很大。例如,具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样,您需要优化 CSS 文件,使其包含所需的所有内容,同时保持合理的大小。另外,使用外部文件代替内联定义来适应浏览器的缓存机制。

使用内容分布网络
内容分布网络(Content-distribution network,CDN)是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时,用户能够从离他们最近的服务器下载这些图像。此外,大多数 CDN 都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。
对资产使用多个域来增加连接
CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。因此,到其他资产的连接被延迟了。然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。

在合适的时候使用 Google Gears
使用 Google Gears(参见参考资料)是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序,但是也允许将页面元素持久化到用户的计算机上。因此,频繁加载但未进行更新的内容可以存储在 Gears数据库中,该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有next请求都可以从数据库(而不是服务器)直接加载。
安装 Gears 之后,获取 gears_init.js 文件,以便轻松访问Gears 工厂和应用程序编程接口(API),将其保存为gears_init.js,通过以下方式在您的代码中引用它:
<script type=”text/javascript” src=”gears_init.js”></script>

要确定是否已安装 Gears,使用清单 5中的代码。

清单 5. 确定是否已安装 Gears
<script>??if (!window.google || !google.gears) {????location.href = “http://gears.google.com/?action=install&message=<welcome message>”???????? + “&return=<return url>”;??}</script>

如果未安装 Gears,代码将向您提供下载 Gears 的 URL。
当所有元素都通过验证并且 Gears 已安装之后,您可以测试 Gears 的极其有用的数据库功能,使用清单 6中的 JavaScript 代码。

清单 6. 测试数据库功能
<script type=”text/javascript”> var db = google.gears.factory.create(’beta.db’); db.open(’database-test’); db.execute(’create table if not exists Test’ +?????????? ‘ (Phrase text, Timestamp int)’); db.execute(’insert into Test values (?, ?)’, ['Monkey!', new Date().getTime()]); var rs = db.execute(’select * from Test order by Timestamp desc’); while (rs.isValidRow()) {??alert(rs.field(0) + ‘@’ + rs.field(1));??rs.next(); } rs.close();</script>

这段代码在您的计算机或服务器上创建一个本地数据库db。如果表Test不存在,则创建一个,然后插入测试数据(Monkey!和时间)。代码从数据库获取数据,并在浏览器中以警告的形式呈现出来。
想像一下可能发生的结果!

使用 PNG 格式的图像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了:Portable Network Graphic (PNG) 是未来流行的格式。当然,您可以说 GIF 和 JPEG 已经消亡,或者 PNG 没有任何缺陷,但是所有事物都有各自的优缺点,PNG 以最佳的文件大小提供了出色的质量。因此,如果进行选择的话,应该尽可能使用 PNG 图像。

保持 [url=javascript:;]Ajax[/url] 调用简短、准确
当统称为 Asynchronous JavaScript + [url=javascript:;]XML[/url] (Ajax) 的技术在两年前出现时,这些技术为处理页面请求和响应提供了一种革命性方法。然而,拨号用户可能从来没机会体验其真正的优势,因为在许多情形下,Ajax 需要在浏览器与服务器之间大量通信。因此,如果您能够保持 Ajax 调用简短和准确,可以避免用户花费无止尽的时间来等待元素刷新或响应。

进行一次较大的 Ajax 调用并在本地处理客户机数据
如果不能进行简短的 Ajax 调用,或者如果这些调用不能提供期望的结果,可以考虑一种替代方法:进行一次大的 Ajax 调用来获取所需的一切内容,然后让客户机在本地处理数据。通过这种方式,客户机只需等待一次(获取传入的数据),但是在此之后(当浏览器与服务器之间没有必要通信时),处理速度将更快。当然,还有大量 Ajax 优化技术,本[url=javascript:;]教程[/url]无法一一列出。如果想要了解关于 Ajax 的更多信息,请查看参考资料
在沙箱中测试代码
还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试,但是有时候测试会使他们不那么重视维护任务,或者新功能添加得太快,并且未经过充分考虑或测试。结果,余下的脚本减缓了应用程序的速度。
如果您添加一项新功能,可以首先在沙箱里(完全脱离了应用程序的其余部分)进行测试,查看它作为单个函数的行为。通过这种方式,您可以反复检查,并分析性能和响应时间,无需考虑 Web 应用程序的其余部分。然后,当新功能的行为符合预期时,可以将其引入到应用程序的其余部分中,运行其他测试,保证功能本身的行为符合预期。

分析站点代码
在许多场景中,自我反省是一个不错的建议。幸运的是,在开发过程中,我们可以使用工具来帮助反省,并尽可能客观地进行实践。像 JSLint(参见参考资源)这样的工具的价值是无法衡量的,尽管其站点宣称它 “可能令您备受挫折”,因为它向您提供了所有的潜在代码缺陷,这些缺陷不但使调试更加困难,而且可能导致更长的响应时间。

使用 JSLint 检查 JavaScript 代码中的错误或糟糕的编码实践
您不需要像完美主义者那样追求完美无缺的 JavaScript 代码。但是,许多开发人员没有认真对待代码分析,通常在开发过程中跳过了这个步骤。不幸的是,错误和糟糕的编码实践不仅不太专业,而且可能减缓应用程序的速度。当浏览器忙于应付错误和糟糕的编码实践时,加载不仅需要更多时间,还会导致难以调试的错误。
因此,如果想要获得良好的代码,可以考虑使用代码分析工具。有许多不同的工具可供使用,但是最适合 JavaScript 语言的工具非 JavaScript Lint 莫属,它也叫做 JSLint(参见参考资料)。也可以使用 Firebug,但是 JSLint 更加正式,它包含在 YSlow 中。

检查孤立的文件和丢失的图像
检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发人员都会检查错误的文件引用,但是这里仍然需要说明一下。丢失的文件容易引起各种问题,因为它们会导致 “The image/page cannot be displayed” 之类的错误消息。但是在网页速度优化方面,它们具有更大的缺陷:当浏览器寻找丢失的或孤立的文件时,它会消耗资源,这不可避免地会导致页面处理速度变慢。因此,请检查孤立或丢失的文件,包括拼写错误的文件名。

YSlow 扩展
YSlow Firebug 扩展使主观的网页分析日渐被淘汰。YSlow 使用 Yahoo! 起草的面向高性能网站的权威规则,分析网页并告诉您它们变慢的原因。

使用 YSlow 分析网页
YSlow 是一个相对较小但非常有用的 Firefox 扩展。当启动 YSlow 时,该扩展在浏览器的下半部分中打开,如图 4所示。

图 4. Firefox 中的 YSlow 扩展

图 4 显示了 Performance 视图,可以在其中看到 YSlow 如何评估您的网页的性能,还能够看到该扩展检测到的问题。单击列表中的一个链接将打开一个页面,其中解释了相应的错误。如果存在可以改进的页面组件,YSlow 会给出改进建议。
在 Inspect 视图中,如图 5所示,您可以逐一分析元素来剖析页面。Inspect 视图的一个最有用的功能是,当您在页面上移动鼠标指针时,它会自动刷新,因此您无需通过滚动代码内容来查找需要检查的行。

图 5. Firefox 中的 YSlow Inspect 视图

从 Stats 视图的名称可以猜测到,它(如图 6所示)显示与当前页面有关的统计数据。这些数据包括空的和主要的缓存和 cookie。

图 6. Firefox 中的 YSlow Stats 视图

Components 视图(如图 7所示)列出了当前页面上的组件。显示的与每个组件有关的数据包括文件类型和路径、页面过期时间以及 HTTP 响应报头。单击一个组件可以将其打开,以供查看。单击一个列标题可以按升序或降序对表进行排序。

图 7. YSlow Components 视图

YSlow 是一个较小的、有用的扩展,可以在提高页面加载速度方面为您提供许多帮助。如果您以前未使用过它,那么现在应该使用了。

结束语
优化网页的加载速度并不复杂。实际上,您通常可以轻而易举地实现速度优化。如果遵循本文中介绍的技巧以及 Web 开发最佳实践,那么无需采用其他措施就可以提高页面的加载速度。
将大量页面优化技巧收集到一起很简单,我希望本文的资源具有一定的价值。但是,如果您认为速度优化技巧只有这里列出的这些,那么您将惊奇地发现远远不止这些。但是,即使您仅遵循这 20 多个技巧,您的页面的加载速度也会更快,您的用户也会更惬意 ?? 无论他们通过拨号还是专用的宽带上网。


Copyright © 1996-2010 V酷吧. All rights reserved.
iDream theme by Templates Next | Powered by WordPress