前端及开发文章及欣赏

从零开始学习jQuery (五) 事件与事件对象

蓝蓝

一.摘要

事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 

 

二.前言

本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性.  大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方, 希望大家帮忙指出, 一起学习一起进步. 在技术的世界里我们是没有任何利益瓜葛. 希望大家都抱着彼此鼓励的心态, 对于回复中的激进评论我也都会考虑, 但是希望能够彼此尊重, 保护博客园这片程序员的净土!

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

蓝蓝

一.摘要

本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习.

 

二.前言

通过前面几章我们已经能够完全控制jQuery包装集了,  无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式.

 

三. 区分DOM属性和元素属性

一个img标签:

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成"DOM对象", 并且将元素的"元素属性"存储为"DOM属性". 两者是有区别的. 
虽然我们设置了元素的src是相对路径:images/image.1.jpg 
但是在"DOM属性"中都会转换成绝对路径:http://localhost/images/image.1.jpg.

甚至有些"元素属性"和"DOM属性"的名称都不一样,比如上面的元素属性class, 转换为DOM属性后对应className.

牢记, 在javascript中我们可以直接获取或设置"DOM属性":

    <script type="text/javascript">         $(function() {
            var img1 = document.getElementById("hibiscus");
            alert(img1.alt);
            img1.alt = "Change the alt element attribute";
            alert(img1.alt);
        })
    </script>


所以如果要设置元素的CSS样式类, 要使用的是"DOM属性"className"而不是"元素属性"class:

img1.className = "classB";

从零开始学习jQuery (三) 管理jQuery包装集

蓝蓝

一.摘要

在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等.

 

二.前言

本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.

本章内容很少, 主要讲解动态创建元素和操作jQuery包装集的各个函数.

 

从零开始学习jQuery (二) 万能的选择器

蓝蓝

一.摘要

本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量.

 

二.前言

编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步.

 

三.Dom对象和jQuery包装集

无论是在写程序还是看API文档,  我们要时刻注意区分Dom对象和jQuery包装集.

从零开始学习jQuery (一) 开天辟地入门篇

蓝蓝

一.摘要

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍.

本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.

转载请注明子秋出品!博客园首发!

 

二.前言

首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了, 原因就是最近我一直在研究和学习jQuery.看到本系列的名称和文章标题, 看过我的MVC系列文章的人会感到很熟悉. 不久要给公司的人做培训, 所以特意制作了本教程.

在写作的同时我参考了网上jQuery的系列教程文章, 在博客园和Google上并没有找到让我满意的系列教程. 我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种"学习笔记"式的文章. 同时本系列将很快全部写完(有工作压力就是有动力), 随后如果时间允许我会继续更新MVC系列文章.再一次对等待MVC文章的朋友们说声抱歉!

另外本系列文章的大部分知识点来源于图灵出版社的"jQuery实战"一书. 推荐大家购买此书, 是jQuery书籍中的经典之作.

下面让我们开始jQuery之旅.

 


关于jQuery UI 使用心得及技巧

蓝蓝

最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助。文章结尾附源码下载。

 

1     jQuery UI

2     为我所用

  2.1     Tabs

  2.2     Accordion

    2.2.1   使用基本的Accordion

    2.2.2   实现打开多个标签

    2.2.3  Accordion的嵌套

3     给插件应用主题——Theme Roller

  3.1     更改配色

  3.2     更改图标

推荐三款强大且漂亮的统计图控件

蓝蓝

一、免费且强大的Flash统计图——FusionChartsFree

官方网址: http://www.fusioncharts.com/free/

效果图:

image

12款非常精致的免费 HTML5 & CSS3 网站模板

蓝蓝

01. Joefrey Mahusay

很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历、摄影师和平面设计师的个人作品展示。

BFHCT 35

演示   下载

02. Folder

Folder是一款响应式 HTML5 网站模板,能够自适应各种设备和浏览器尺寸。适合用于创意展示和企业网站项目。

BFHCT 30

演示   下载

页面构建的审图与细节

蓝蓝

作为专业的页面构建工程师,除了在专业技能上有很高的要求以外,还需要具有一定的对设计图的审稿能力。审图,并非是意味着追求跟PSD一模一样,甚至耗费大量时间截屏跟PSD去“对像素”。在我的理解中,审图是通过对UI设计稿的分析,充分理解UI设计师的意图,再结合UE的交互状态,从中做到真正的“还原设计稿”。

事例一:有取有舍,方是领悟

比如,在这样一张设计稿中

为什么程序员总是不能准确估测项目时间

蓝蓝

 

一个曾经与我一起工作过的经验丰富的项目经理声称,他拿到程序员 的时间估算以后,先将它乘以π,然后转化下一个时间数量级后,才能得到真正的值。1天转化成3.14周。他过去因为程序员不擅长估算时间而吃尽了苦头。我创建了一个用来翻译程序员时间估算的表格,来尽量缩小估算错误。

为什么程序员总是不能准确估测项目时间

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档