leonardleonard

 

2010年7月29日

想做成功网站需要注意的几个问题

大家做网站有两个极端。
一个极端是都在往热门的走。比如视频网站风靡,于是涌现出了太多的视频网站;当年下载站流行,于是涌现太多下载站;网址站流行,涌现太多的网址站;百万格子流行,大家都做格子站。这样不好,因為绝大部分网站都是亏损的。
另外一个极端是都往冷门的走,比如发泄网,你发泄网靠什么赚钱;比如乞讨网,够冷门,但是你能够赚到钱吗;比如创业网,创业网不多,但是还是很多人想做,因為觉得那个有前途;但是,这些看似冷门,前景无限的网站,绝大部分还是亏损的。
為什么会出现这些极端呢?
归根到底是学习的不够。
现在很多做网站的人都是无业游民(做网站也许是他们的职业),甚至中学生都想做网站,其实这并不是什么好事情,而且一个什么都没有学习过的人,也不大可能做好网站,毕竟观念就存在问题。如果你都成功了,那么那么多花费了大量金钱学习了的人不成功,那不是太没有天理了吗?
所以,想要做好网站,避免走极端,一定要好好学习。
首先应该学习的就是需求理论。价值是怎么產生的,别人有需求,我们满足了别人的需求,在满足需求的时候,我们创造了价值,就產生了利润。所以,做网站之前,一定要考虑的就是网站提供的服务到底需求大不大,能不能够转化為价值。在这里,必须注意的是需求是创在价值的必要因素,但是需求不一定必然带来价值。比如很多P2P网站,他们的需求是很大的,但是他们不一定能够盈利,因為他们满足的需求不能给他们带来利益。很多人要说他们靠网站,其实我说那是投放广告的人很愚蠢。
然后应该学习的是目标市场。做网站是做媒体,但是他是新媒体,不同于电视,报纸这样的媒体,所以对于做网站的人来说,一定要明确他们的目标市场,而且是访问者,消费者两个目标市场。比如21世纪开运网 www.21kaiyun.com,他们的目标访问者就是喜欢星座,喜欢紫微斗数,喜欢塔罗牌,喜欢风水之类的人,消费者就是在线推算星座运程提供服务的人;比如焦点房產网,他们的目标访问者就是买房的人,消费者就是卖房的人。这两个网站,他们在两个目标市场中间的地位实际上就是中介。所以,做互联网媒体,一定要定位在中介,现在成熟盈利网站,比如前程无忧职业介绍的网站,其实都是中介。那些不是以中介模式出现的网站大多都是没有盈利的,比如猫扑,他盈利了吗?没有,因為他的目标访问者和目标消费者完全不对口,根本就没有盈利点。所以,一定要认準目标市场,而且目标市场要对口。
第三,要学会分析调查,财务预算。成立一个网站,确定好需求,然后找準了对口的目标市场之后,一定要进行分析,调查。调查什么?调查目标访问者他们需求的服务,他们的访问习惯,调查目标消费者能够提供给你的市场到底有多大,这些调查分析看似简单,但是非常重要。例如有人打算做一个同性恋的网站,目标访问者很明确,同性恋,目标消费者也很明确鸭子店,卖安全套,卖性用品的。但是一分析,现在同性恋网站大的有5.、6个,地域性的网站基本每一个省都有一个,一个鸭子店可以带来的利益為每月800左右,但是需要很多的人气支持你的网站才可以达到这个数字,卖安全套,卖性用品的很少在互联网站做广告。那么算下来,一个月收入大约3000左右,支出呢?网站服务器费用,1000一个月,这样算下来,你的收益只有2000,合算吗?不合算,所以在这个时候,你应当选择放弃,当前同性恋网站有其他更好的盈利模式,在这里假设这个站长没有想到。假如,我们通过分析,这个网站是可以做的,有盈利的,我们这个时候就要分析访问者的习惯了,同性恋者他们喜欢看什么东西呢?我们就提供他们喜欢看的东西就可以了,一些访问量低的东西留给其他网站做吧,你没有必要付出这个成本,抓住核心就取得了胜利。
第四,要学会產品周期的相关理论。互联网站提供服务,服务也属于一种產品,任何產品都是有周期的,一般而言,產品周期包括导入期,成长期,成熟期,衰退期。在导入期,比如博客刚刚进入中国的时候,除非你资金庞大,建立你不要进入市场,因為这类市场往往需要大量的推广费用。在成长期,比如已经有一两个博客网站展示出非凡的大站气质的时候,你就要进入了,越早进入越好,因為这个时候你可以依靠你的博客概念找到投资,而且前者已经给你提供了成熟的营销策略,但是实际上互联网的这个时期是非常短的,机遇就在弹指一挥间。在成熟期,比如博客网站大量涌现的时候,你进入是有风险的,因為你不可能吸引到投资了,你需要动用自己的大量资本来进行投资,而成熟期的竞争是非常激烈的,针对这类网站的营销模式相对已经成熟。在衰退期,比如博客网站大量开始更换主营方式的时候,你也没有必要进入了,因為在这个时候,已经有成熟的博客网站存在了,他们有大量的用户群以及良好的盈利模式了,你在加入,完全没有必要,姜还是老的辣。所以,你通过分析,觉得网站有利可图之后,就应该对这类网站到底进行到什么產品周期进行分析,然后针对不同的周期做出不同的决策。实例来一个,大家现在都喜欢做网址站,其实现在网址站已经进行了衰退期,在这个时候,你建立一个这样的网站是不可能实现盈利的,已经巨头已经形成,他们都还在互相的瓜分市场,还会把市场让给你吗?不可能,你一赚钱,马上就收购你,你不被收购,他们马上推出一个和你一样的网站。
第五,要会对竞争者分析。你的网站属于竞争市场的什么地位呢?市场领导者?市场挑战者?市场追随者?例如,网址站当中hao123.com就是领导者,广捷居就是挑战者,那么大家建立的小网址站就是追随者,那么市场领导者采取的就是防守型战略,打压挑战者,挑战者就需要不断的想办法超越领导者,提供更好的服务,追随者就需要想办法用细分市场的办法,出奇制胜。
前五个需要学习的,实际上在帮组你解决两个问题,到底做不做的问题,做成功的机会到底有多少。这些问题都是非常重要的,因為现在个人站长為什么会出现开篇说的那些极端问题呢?实质上就是因為他们有热情,但是不理智,被一些看上去很好的市场吸引,其实这个世界那里有那么多天上掉下来的机会?所以,要想成功,上面五点一定要仔细思考。那么考虑好了,决定要做了,出现的问题更多,我们应该学习那些方面的知识呢?当然是怎么做的方法。
首先,要学习的是產品的制造。这是一个大的学问,互联网站是產品,他包括了產品的所有属性,但是有比產品更多的属性。我们要从如下方面来思考如何做我们的网站:1,我们的產品对目标访问者提供什么服务?这个就涉及到我们第三点,市场调查,分析的能力。了解我们目标访问者最想看到的东西,仅仅满足他们80%的需求,其他20%有需求,但是需求不大的项目,不要浪费时间,浪费成本。2,我们的怎么对目标消费者提供服务?他们投放广告?他们投放信息?有偿使用信息?等等,比如一个大型的门户网站,他们就应该為消费者提供的消费途径就有投放广告,投放信息,那么是否需要投放广告,信息效果的统计呢?到底是什么影响了他们消费与否,消费金额大小的呢?这些都是考虑的范畴。再例如一个收费的资料站,那么需要考虑的就有,对于收费用户,对于其他普通用户有什么区别呢?总之,就是要充分考虑目标消费者,目标访问者的需求,来定制我们的网站,满足他们的需求,让他们感到满意。
其次,我们应该学习的是產品的推广。互联网企业针对于普通企业的不同也在于此,推广方式,对于目标访问者,最好的办法是通过线上推广,实际上我不赞同把广告做到线下,当然线下媒体做广告也许也是有必要的,我见过一个网站有一个特殊的规定,禁止网友在他网站发布QQ群,原因是QQ群讨论多了,就不再我的网站讨论了,也禁止线下活动了,因為线下活动如果多了,大家上网站也少了。其实这样的顾虑也是存在的,具体影响怎么样,没有调查数据,说不準,但是我推荐的办法是线上推广,因為你的目标访问者都是要上网的,会上网的,线上推广的人正好都是要上网,会上网的,100%!对于目标消费者,最好的办法是线下推广,比如百度做他广告的推广,只看到电话或者登门拜访的,恐怕线上做推广的机会很少,為什么呢?这个实际上涉及到资源的不对等原则,你用你有的,他没有的东西来满足他的需求,实际上你们所涉及的资源是不对等的,越不对等,创造的价值是越大的,而百度做广告推广,主要的对象不是网站,而是那些企业的网站,企业网站的制作者往往是不管市场营销的,所以,他们做线上推广是找错了对象,他们找的对象应该都是那些委托别人帮助做企业网站的企业,因為他们迫切有需求,但是自己又没有线上推广的这方面能力(否则也不会找别人做网站),他们的资源是极端不对称,利润可能越大。
第三,我们应该要学习的是品牌,包装。很多人认為自己都是媒体,帮助别人宣传品牌的,為什么自己还要学习品牌,包装呢?对于这点,你自己想下假如只有两个电视臺可以选择,湖南台,四川台,但是只剩下一个你会看那个,你就知道了。品牌的设计的好,可以让人感受到实力,从而优先选择你的產品,例如大家都知道大学生交友上亿聚,同学录用中国人,邮箱有网易,这些其实就是因為他们的品牌到位,一般而言,网站的品牌主要是域名,中文名,宣传词,包装实际上就是页面的美化,对外的宣传。例如站长站,落伍者,对于新站长而言,你说会选择那一个呢?看到两个小说网站,一个网站好看,一个网站难看,但是难看的内容比好看的多,但是多不了多少,难看的网站实际上就因為他们的包装而损失了目标流量。所以,品牌的重点应该在于域名好,中文名号,宣传词更好,包装的重点在于页面相当漂亮,善于利用兄弟网站,平面媒体,电视媒体进行宣传。
做為普通的个人站长,以上三点就足以应付中小网站的建设,当网站壮大之后,月收入超过2000,建议把部分技术工作外包;月收入超过5000之后,建议花2000请一个管理人员,部分技术工作外包。能够做大企业的人都是会花钱请人的人。

posted @ 2010-07-29 19:51 leonardleonard 阅读(15) 评论(0) 编辑

一些JSON相关的函数

posted @ 2010-07-29 16:32 leonardleonard 阅读(5) 评论(0) 编辑

21世纪开运网www.21kaiyun.com用javascript替换URL中的参数值的技巧

今天遇到一个需要用javascript将url中的某些参数替换的需求:
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

用法:

   
myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://www.21kaiyun.com

取得URL的参数,以对象形式返回!

var getParam = function(path){
    var result = {},param = /([^?=&]+)=([^&]+)/ig,match;
    while((match = param.exec(path)) != null){
        result[match[1]] = match[2];
    }
    return result;
}
 
Object.keys = Object.keys || function(obj){
    var result = [];
    for(var i in obj){
        if(obj.hasOwnProperty(i)){
            result.push(i)
        }
    }
    return result;
}
 
var r = getParam(path);
alert(Object.keys(r))//ct,tn,sc,pn,rn,lm,rs4,rs3,word,frs

posted @ 2010-07-29 16:22 leonardleonard 阅读(547) 评论(0) 编辑

Asp.NET 的Session实现原理 转自21kaiyun.com

 Session天天用,但是你真的理解了么?

今天遇到了这个问题,于是研究了一下。要解决这个问题,首先就要明白一些Session的机理。Session在服务器是以散列表形式存在的,我们都知道Session是会话级的,每个用户访问都会生成一个Session。那么服务器是怎么区分不同用户的Session?又是怎么将不同用户的Session与不同的用户绑定的呢?下面我们来研究一下,以下纯属我个人的理解,如有错误请指证。

Session在服务器端是以散列表的形式存在的,区分每一个Session是通过SessionID来实现的,所以可以说这个SessionID是一个Key是一个全局唯一的值。我们可以通过ASP.NET来打印出SessionID,如下代码:

  

protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(Session.SessionID.ToString());
        }

 

这样我们就得到了这样的值:0julmoedn0kz3gyfnr1vksv0,有点像是GUID,就算不是算法也都是类似的,主要就是为了保证全局唯一性。这样就达到了区分不同用户的Session的目的。接下来还有第二个问题,那就是SessionID有了,但是它又是怎么和相应的访问者(用户)绑定的呢?比如说用户A访问维护了自己的SessionID,用户B访问也维护了自己的SessionID。我们都知道web是基于http无链接的,他们又是怎么做到的呢?没错,答案就是在客户端存储了自己的SessionID。浏览器存储SessionID有两种方式,一种就是利用Cookies;还有一种就是利用url参数(这种我们不常用,很不友好)。

话题说到Cookies上来了,怎么的?没想到Session和Cookies还有这样的关系吧?(很多人知道,别BS我)没错,当我们请求一个URL时候,服务器会生成一个全局的SessionID,并且把这个值以Cookies的形式保存在客户端也就是浏览器(这里暂不讨论url方式)。这样当用户再去请求的时候,在http头把这个SessionID的Cookie发到服务器端,服务器就去找这个SessionID,如果找到了。就证明这个用户的状态是存在的。

知道了这个原理,我们的问题也就有眉头了,即然是用Cookies来保存SessionID,那么我们就可以在Cooikes上做手脚了。我们都知道Cooikes记录方式是以域(例如21世纪开运网:http://www.21kaiyun.com/)为区分的,这也是各种浏览器规定的。如果不这么做,安全性就会有问题。我们要做的就是让指定Cookies的父域方式,不指定具体指域,这样Cookies就可以跨子域了。Cookies可以像这样指定域:

 

 protected void Page_Load(object sender, EventArgs e)
        {
            Response.Cookies[
"MyCook"].Domain = ".local.com";
        }

 

   这样,我们所有的二级域全部是认这一个主域的,比如a.local.com;b.local.com;user.local.com等等。有了这个认识,我想大家心里也有数了,该怎么怎么做,但是现在问题是用来生成SessionID的方法是ASP.NET自动实现的,我们又怎么去干涉它呢?这是这样做的,不主动干涉它,但是我可以操作它的Cookies啊。接下来我们就研究ASP.NET存SessionID的Cooike的名字是什么。经过网上很容易就查找到了,名字是:ASP.NET_SessionId,这个就是SessionId的Cookies名字。我们可以在Session_Start中这样写:

 

 

代码
 protected void Session_Start(object sender, EventArgs e)
        {
            Response.Cookies[
"ASP.NET_SessionId"].Value = Session.SessionID.ToString();
            Response.Cookies[
"ASP.NET_SessionId"].Domain = ".local.com";
        }

代码的意思是每次会话开始的时候,我都把ASP.NET_SessionId这个Cookie重写成我们已有的SessionID,并且把这个Cookie的domain指定为父域,比如:.local.com,这样就可以实现跨子域的Session共享了。怎么样很简单吧?

我们还有一个外题问题,就是客户端保存的问题解决了,但是服务器端的Session怎么办?一般情况下我们不同的子域做的是指向不同的服务器的,比如user.local.com 专门一台服务器,yellow.local.com专门一台服务器。这时它们别说是进程了,连物理上都不是一个了。Session怎么共享?这时就用到另一个方法了,我们默认的Session是存储在asp.net进程中的,这样没法互相访问,如下面所示:

 

 <sessionState mode="InProc" />

 

我们可以修改为State Server方式,这是一个单独的服务可以用来存储ASP.NET Session的,它支持分布式远程主机的,这样我们可以用一台服务器来提供Session服务,如下所示:

 

 <sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" timeout="30" />

 

这样,就完全实现了不同子域的Session共享了。

前面说到Url保存SessionId的方式,由于不常用,给大家演示一下,如下配置就可以了:

 

    <sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" timeout="30" cookieless="true" />

posted @ 2010-07-29 16:17 leonardleonard 阅读(2) 评论(0) 编辑

jquery技巧总结

一、简介

1.1、概述
随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点:
1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离,便于代码和维护和修改。
7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式,降低你学习使用JS操作网页的复杂度,提高网页JS开发效率,无论对于js初学者还是资深专家,jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同的Web应用程序中。
官方站点:http://jquery.com/  中文站点:http://jquery.org.cn/

1.2、目的
通过学习本文档,能够对jQuery有一个简单的认识了解,清楚JQuery与其他JS框架的不同,掌握jQuery的常用语法、使用技巧及注意事项。

二、使用方法
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如:<script type="text/javascript" src="js/jquery.js"></script>
引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程:《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
(说明:以上文档都放在了【附件】中)

四、语法总结和注意事项

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

posted @ 2010-07-29 16:12 leonardleonard 阅读(2) 评论(0) 编辑

JavaScript函数 this调用规则

21世纪开运网www.21kaiyun.com源码中大量使用了this这个Javascript关键字

JavaScript函数调用规则一

(1)全局函数调用:

function makeArray( arg1, arg2 ){

    return [this , arg1 , arg2 ];

}

这是一个最常用的定义函数方式。相信学习JavaScript的人对它的调用并不陌生。

调用代码如下:

makeArray('one', 'two');

// => [ window, 'one', 'two' ]

这种方式可以说是全局的函数调用。

为什么说是全局的函数?

因为它是全局对象window 的一个方法,

我们可以用如下方法验证:

alert( typeof window.methodThatDoesntExist );

// => undefined

alert( typeof window.makeArray);

// => function

所以我们之前调用 makeArray的方法是和下面调用的方法一样的

window.makeArray('one', 'two');

// => [ window, 'one', 'two' ]

JavaScript函数调用规则二

(1)对象方法调用:

//creating the object

var arrayMaker = {

    someProperty: 'some value here',

    make: makeArray

};

arrayMaker.make('one', 'two');     // => [ arrayMaker, 'one', 'two' ]

//或者用下面的方法调用:

arrayMaker['make']('one', 'two');  // => [ arrayMaker, 'one', 'two' ]

看到这里跟刚才的区别了吧,this的值变成了对象本身.

你可能会质疑:为什么原始的函数定义并没有改变,而this却变化了呢?

非常好,有质疑是正确的。这里涉及到 函数在JavaScript中传递的方式, 

函数在JavaScript 里是一个标准的数据类型,

确切的说是一个对象.你可以传递它们或者复制他们.

就好像整个函数连带参数列表和函数体都被复制,

且被分配给了 arrayMaker 里的属性 make,那就好像这样定义一个 arrayMaker :

var arrayMaker = {

    someProperty: 'some value here',

    make: function (arg1, arg2) {

        return [ this, arg1, arg2 ];

    }

};

如果不把调用规则二 弄明白,那么在事件处理代码中 经常会遇到各种各样的bug,举个例子:

<input type="button" value="Button 1" id="btn1"  />

<input type="button" value="Button 2" id="btn2"  />

<input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>

< script type="text/javascript">

function buttonClicked(){

    var text = (this === window) ? 'window' : this.id;

    alert( text );

}

var button1 = document.getElementById('btn1');

var button2 = document.getElementById('btn2');

button1.onclick = buttonClicked;

button2.onclick = function(){   

buttonClicked();   

};

< /script>

点击第一个按钮将会显示”btn1”,因为它是一个方法调用,this为所属的对象(按钮元素) 。

点击第二个按钮将显示”window”,因为 buttonClicked 是被直接调用的( 不像 obj.buttonClicked() ),

这和第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的。

所以请大家注意:

button1.onclick = buttonClicked;

button2.onclick = function(){   

buttonClicked();   

};

this指向是有区别的。

JavaScript函数调用规则三

当然,如果使用的是jQuery库,那么你不必考虑这么多,它会帮助重写this的值以保证它包含了当前事件源元素的引用。

//使用jQuery

$('#btn1').click( function() {

    alert( this.id ); // jQuery ensures 'this' will be the button

});

那么 jQuery是如何重载this的值的呢?

答案是: call()和apply();

当函数使用的越来越多时,你会发现你需要的this 并不在相同的上下文里,这样导致通讯起来异常困难。

在Javascript中函数也是对象,函数对象包含一些预定义的方法,其中有两个便是apply()和call(),我们可以使用它们来对 this进行上下文重置。

<input type="button" value="Button 1" id="btn1"  />

<input type="button" value="Button 2" id="btn2"  />

<input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>

< script type="text/javascript">

function buttonClicked(){

    var text = (this === window) ? 'window' : this.id;

    alert( text );

}

var button1 = document.getElementById('btn1');

var button2 = document.getElementById('btn2');

button1.onclick = buttonClicked;

button2.onclick = function(){   

buttonClicked.call(this);  // btn2

};

< /script>

JavaScript函数调用规则四

(1)构造器

我不想深入研究在Javascript中类型的定义,但是在此刻我们需要知道在Javascript中没有类,

而且任何一个自定义的类型需要一个初始化函数,使用原型对象(作为初始化函数的一个属性)定义你的类型也是一个不错的想法,

让我们来创建一个简单的类型

//声明一个构造器

function ArrayMaker(arg1, arg2) {

    this.someProperty = 'whatever';

    this.theArray = [ this, arg1, arg2 ];

}

// 声明实例化方法

ArrayMaker.prototype = {

    someMethod: function () {

        alert( 'someMethod called');

    },

    getArray: function () {

        return this.theArray;

    }

};

var am = new ArrayMaker( 'one', 'two' );

var other = new ArrayMaker( 'first', 'second' );

am.getArray();

// => [ am, 'one' , 'two' ]

other.getArray();

// => [ other, 'first', 'second'  ]

一个非常重要并值得注意的是出现在函数调用前面的new运算符,没有那个,你的函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上(window),而你并不想那样。

另外一点,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为 undefined。

所以构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.

这样 初始化函数里的代码和你在其他语言里写的初始化函数是相似的.this的值将是你将创建的对象.

总结

我希望通过这些来使你们理解各种函数调用方式的不同,

让你的JavaScript代码远离bugs。

知道this的值是你避免bugs的第一步。

posted @ 2010-07-29 16:09 leonardleonard 阅读(4) 评论(0) 编辑

导航

统计

公告