10个超级jQuery教程
jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不用的应用程序。
jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不用的应用程序。
方法一:Max-width|Max-height
这是最简单的方法了,给图片一个最大的宽度和高度:
#Imgbox img {
max-width: 500px;
max-height: 300px;
border:0;
}
但它的效果并不怎么好,因为目前的IE6并不认识这个max-width和max-height。而且有时候图片的宽高相差很大。这样做后图片会变形。
方法二:Max-width/height+Expression
先来了解下什么是CSS expression:
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里 的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于 Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:
$(document).ready(function() {
// do stuff when DOM is ready
});
放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.
$(document).ready(function() {
$('a').click(function() {
alert('Hello world!');
});
});
这样在你点击页面的一个链接时都会触发这个’Hello world’的提示。
在设计成品中,UI设计越来越显得重要。而现实中有很多可以让一个网页设计既漂亮又功能化的技术,这里,原作者介绍了10种他经常用在自己设计的产品中的技术。 如果你想拥有更好的UI,让我们一起继续。
链接(或锚点)都是默认的内联元素,这就意味着,只有在它本身的跨度上才有可点击性。如下图所示(蓝色部分为可点击区域,一图是TechCrunch的,二图是Smash Magazine的):
显示,Smashing Magazine的链接可点击性要比TechCrunch强。这可以增大点击的正确率和点击率。而如果你想这么做,只要用以下的代码即可:
a {
display: block;
padding: 6px;
}
当然,要提醒一下的是,请确保运用Padding是恰当的,IE有可能让Padding没能正常实现其真正的样式。 有效避免Padding出现问题的方法是尽量让它们与没有padding或Margin的容器接触,而常用的方法是,给padding的元素加上一个 border。
jQuery已经不是什么新鲜的事儿,记得第一次听说是在catch the digital flow上。总把它认为是非常难的东西,也就没有认真去了解他了。直到学完CSS的大部分内容,才开始接触这种”write less, do more” 的Javascrīpt框架。今天,这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程。这里不打算全文翻译,想以自己的语言来表达,或许这样更方便大家理解/自己以后学习,也可能更准确地描述。
提示:教程中所用的 jQuery 版本为1.2.3。这篇文章是为jQuery新手而写的。
先试试看? View jQuery Demos | Download Demo ZIP
虽然说是最好jQuery教程,不过个人觉得,更应该说是最实用的教程,推荐初学者阅读和练习。
1. 标签式导航
2. 平滑移动导航
AJAX的中文乱码可以大概分为两中,第一种是向服务器端发送中文参数时(xmlhttp.open(“getpost”,url,true)), 服务器端接收到的为乱码,这个也是我今天遇到的问题,没做处理之前,在IE里是正常的,但是在Firefox里面就出现了乱码,我先把接收到参数输出到一个文本里,没有发现什么问题,郁闷了,然后我就把查询语句在输出来观察(我这里是要从数据库里查出与参数相关的东西),终于发现问题,IE和 Firefox输出的参数不一样,虽然汉字上都一样,但是和前后连接上有细小的区别,于是认定了是编码问题,在网上查找了相关资料,都没能解决问题,但是得到一些启示,因为AJAX发送数据都是采用UTF-8编码的方式发送的,所以要在服务器端进行编码转换(我这里页面是采用GB2312编码的,如果是采用UTF-8的话应该不会有这步的问题),所以我在服务器端进行了UTF-8转GB2312,
$str=iconv(“UTF-8″,”GB2312″,$str);
然后测试,在Firefox上顺利解决了问题,以为大公告成了,可是再到IE下测试,发现IE又出现了问题,服务器端接收到的参数没值,这下就郁闷了,突然看到发送头设置了setRequestHeader(“Content-Type”,”application/x-www-form- urlencoded”);,就找到问题所在了,然后就在发送那里进行了参数编码:
分享一些精美的WEB2.0 Phtoshop的图层样式和渐变样式!
一、Phtoshop的图层样式
下载v3.0:http://www.dezinerfolio.com/system/files/web_2_0_grads_v30.zip
下载v2.0:http://www.dezinerfolio.com/system/files/web20layerstylesve01.zip
现在的网页设计师不仅设计网页的外观和风格。他们也常常负责主要前端代码的编写。换句话说,SEO(搜索引擎优化)的相当一部分责任落在设计师的肩上。然而大量网页设计师对这个领域的熟悉程度仍不足以让他们写出一个对搜索引擎充分优化的网页。
本文旨在为普通,甚至部分高级网页设计师提高SEO技巧提供一些重要的窍门。
1. 让代码比设计更美
搭建网页前端的时候,使用有语义的代码。用描述性的标签组织页面结构,可以提高内容对搜索引擎的可读性。这也会让修饰页面的工作变得更简单干净。
2. 使用关键字,但要把握分寸
关键字是指描述主要内容的词语。有策略地在页面中安放关键字是很重要的,例如在URL、标题标签(title tag)以及主要的抬头标签(heading tag)中。在正文中经常使用关键字也很重要,但是不能过度,否则你的文章可能因关键字堆砌遭到惩罚。
3. 避免使用Flash作导航栏
无论华丽的下拉列表效果如何诱人,不要使用它。搜索引擎不能顺利读取Flash文件中的内容,所以Flash导航栏中的链接将无法被跟踪。
4. 使用不同的页面标题
你的网站的每个页面都应该有标题属性,而每个页面的标题应该各不相同。如果每个页面的标题都一样的话,搜索引擎会理解为你的网站的每个页面都是相同的主题。