首页

从零开始学习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包装集的各个函数.

 

案例学习:优化移动Web产品的四个要点

蓝蓝设计的小编

世界范围内移动设备的使用数量在与日俱增。面对在跨越多个不同设备上创建良好web体验的挑战,现在已经存在多种解决方案。但是对于任何一个给定的项目,这些解决方案中哪个是最合适的?为了回答这个问题,《移动优先》作者Luke以Bagcheck应用作为案例(注:Bagcheck是一家从事搜索与发现业务的创新型企业),解释了选择分别设计移动版和桌面版背后的原因,并通过对比提炼出四个优化移动Web产品的建议。全文如下:

谈谈产品敏捷开发的几大要点

蓝蓝设计的小编

[核心提示] 我们时常听到许多产品团队提到“小步快跑,快速迭代”,但它到底指的是什么?对此不了解的同学可以看看这篇文章。

今天在微博上又一次看到有人转发小马哥的:“小步快跑,快速迭代”理论,刚好鄙人近期收集了一些快速迭代的资料,接下来结合自身的经验来浅谈产品的快速迭代方式。这篇文字可能会偏项目管理一些,不过我认为项目管理也是产品经理基本素质之一。

从零开始学习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之旅.

 


身份是灵感的表达

蓝蓝设计的小编

陈幼坚(Alan Chan):香港著名设计师,获奖无数。他的设计公司曾被美国GRAPHIS杂志评为全球十大设计公司之列,是惟一获此殊荣的华人设计公司。他的海报和腕表被美国旧金山现代美术博物馆纳为收藏品。在设计师身份之外,陈幼坚也是一个资深的收藏家,他对于艺术品收藏同样有自己的独特之处。

  导语:陈幼坚有很多个身份,设计师、艺术家、收藏家、画廊主……这些身份在他身上罗列起来丝毫不觉得突兀,它们之间似乎存在着某种微妙的关系,将本来不相干的事变得顺其自然。将这些身份串起来隐形的线就是兴趣,这条线就像他的性格那样随意,那样灵感层出。收藏本是庄重的事,陈幼坚的收藏却像他的性格一样灵活。

关于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     更改图标

如何提高创业公司效率

蓝蓝设计的小编

 “很多创业者在融到VC的资金后,会在第一年花掉募集资金的50%-80%,然后第二年把剩下的钱花掉。他们募资后会雄心勃勃地干三件大事:1扩大办公室或者搬豪华办公室 2涨工资,大幅招人 3市场营销费用巨增。之后,他们又没钱了,并处在生死边缘。很多创业者,都会因为曾经花钱太快后悔!”(清科集团CEO 倪正东)

闲扯到底什么是“竞品”

蓝蓝设计的小编

转载蓝蓝设计(   www.lanlanwork.com  )是一家专注而深入的设计机构 ,为期望卓越的国内外企业提供有效的   BS界面设计 、 cs界面设计 、  ipad界面设计   、  包装设计 、  图标定制 、  用户体验 、交互设计、   网站建设 平面设计服务

来源:http://iamsujie.com/4000/4024/

如果您想订阅本博客内容,每天自动发到您的邮箱中,   请点这里


竞品分析,具体怎么分析,网上有很多方法,但是到底什么是“竞品”,今天随便聊聊。

假设你是一个早点摊子上,负责卖豆浆的伙计(不好意思,分工有点儿过细了),这时候你为了卖出更多的豆浆,获得更多的提成,你开始做竞品分析,你会把什么当做竞品?

好,旁边那个摊子上卖豆浆的,跑不了,肯定是。这是最初级的考虑,同质产品,这叫“用同样的产品功能解决同样的用户需求”,和这样的竞品玩,比得是产品功能的优劣,比如你是现磨的,他是采购袋装的,你可以引发喝豆浆应该加糖还是加酱油的旷世舌战,他可以有红豆味、花生味,可以装背包里带走……你观察一下每天路过的用户都是啥样的人,大致就知道各自的优劣势了。

这样的竞品分析,相对简单,瞄着和你做同样产品的人即可,好比新浪微博盯着腾讯微博,暴风影音盯着QQ影音。而这种分析的结果,往往也只能带来一些功能层面上的优化,不会对产品方向带来什么新思路

日子一天天过去,咱现磨的豆浆越来越得到用户的认可,健康看得见嘛,忽然某天早上,你发现隔壁摊子居然放弃豆浆市场了,开始卖各种牛奶和果汁!你震惊了,Why?赶紧去问用户,你为什么要买豆浆?用户不一定是要喝豆浆,而很可能的答案是——包子太干了,应该有点喝的东西,所以,牛奶也可以啊。

用不同的产品功能解决同样的用户需求”。这叫“替代品”,可以延伸阅读波特五力模型。于是,你体会到,竞品分析不应该单单停留在对“产品功能”的分析上,还可以去寻找你这个功能背后要满足的“用户需求”,能解决同样“用户需求”的其他解决方案,也是竞品。这种分析,会给产品带来新思路、新方向,好比,做网上超市的要多去沃尔玛逛逛,做报纸的应该订几份杂志。

多去接触用户,你会发现,他们买豆浆的原因还不止一种,同样的产品功能解决不同的用户需求”也很正常。这会反过来促使你重新思考自己的定位,到底要优先满足什么需求?于是你会在不同的需求场景下,找到不同的替代品:豆腐、千张(有人喜欢豆制品);粥、馄饨(包子也不买了,直接来稀的);自来水、漱口水(吃完包子漱口,把菜叶弄掉……)。

想清楚了,再进一步,你还可以把这个买豆浆的原因追问下去“为什么”,从而“用同样的产品功能满足不同层次的用户需求”。最深总可以挖到人性的心理或生理层面,比如喜欢豆制品那个,也许是用户体检后发现自己缺什么元素,所以与某些保健品、药品也有关系,那么,你卖豆浆,是否可以往“健康”的需求上靠?这样,在不同层次上,通过对不同的竞品做分析,你可以给产品更多跨界的思路。

不是有一句话么:“互联网/手机上的所有产品都是竞品,竞争的是用户仅有的那点时间”。当然,分析完之后,自己最终做什么产品功能,还得考虑很多其他因素了。

试着绕口令式的小结:

你的产品,

在解决同样需求的时候会碰到同样的产品;

解决同样需求的时候会碰到不同的产品;

解决不同需求的时候会碰到不同的产品;

解决不同层次需求的时候会碰到不同的产品。

他们都是竞品。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档