JavaScript 冒号

参考1：http://wenda.tianya.cn/question/246afbedd4d2f5a9

 

参考2：http://www.jb51.net/article/18465.htm

 

JavaScript中冒号(:)是做什么的？你可能经常看到这的写法：

XHTML

<div onclick="javascript:alert('test')">test</div>

1

<divonclick="javascript:alert('test')">test</div>

你可能很习惯认为这是一个伪协议，意思是使用JavaScript语法解析后面的代码，在a标签的href中才是伪协议！那么如果这个代码变成这样呢：

XHTML

<div onclick="xxoo:alert('test')">test</div>

1

<divonclick="xxoo:alert('test')">test</div>

你可以试试，代码并不会出错，因为在JavaScript中这样的写法是合法的。其语法是：

labelName:statement

实际上，在onclick或onmouseover这样的属性的值是一段JavaScript代码片段，因此刚才的代码也是合法的，可执行的。

在JavaScript中，我们常见的使用冒号(:)的情况有：

1，对象表达法
冒号在这里用来分割对象的属性和属性值。

JavaScript

var o = { value: 'some value', words: 'say some words'};

1

2

3

4

varo= {

    value:'some value',

    words:'say some words'

};

2，三目运算
冒号在这里用来分割不同条件的返回值。

JavaScript

var result = (condition exp) ? (value1) : (value2) ;

1

varresult= (conditionexp)?(value1): (value2);

3，分支语句
冒号在这里用来分割被罗列的switch中表达式的值和对应的代码块。

JavaScript

switch(n) { case 1: code 1; break; case 2: code 2; break; default: other codes; }

1

2

3

4

5

6

7

8

9

10

11

switch(n)

  {

  case1:

    code1;

    break;

  case2:

    code2;

    break;

  default:

    other codes;

  }

上面的情况很常见，而且大家并不陌生，那么一开始我们讲到的写法又是什么意思呢？

labelName:statement

这种是标签的写法，如果你略懂windows中的批处理，你应该一下就知道它的作用，在批处理中，标签用来标识代码位置，在需要改变代码流程的时候，可以goto labelName来实现指定的跳转。而JavaScript中它的功能也与此类似,你可以用标签来标识一个循环，然后用break或continue来改变程序的执行流程。我们来看下下面的例子：

<script type="text/javascript">test1 : for (var i = 0; i < 3; i++) { test2 : for (var j = 0; j < 3; j++) { if (i == 1 && j == 1) { continue test1; } else { alert("i = " + i + ", j = " + j); } }}/*Output is: "i = 0, j = 0" "i = 0, j = 1" "i = 0, j = 2" "i = 1, j = 0" "i = 2, j = 0" "i = 2, j = 1" "i = 2, j = 2" Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"*/</script>

提示：你可以先修改部分代码再运行。

标签名可以使用合法的JavaScript标识符而不能是保留字。

因此，到这里我们就清楚了像

XHTML

<div onclick="xxoo:alert('test')">test</div>

1

<divonclick="xxoo:alert('test')">test</div>

这样的写法实际是标签的写法，至于在这里使用标签有没有实际意义就看个人在实现某些效果的时候是否要用标签来区分某些结果了。

 

 

 

虽然之前写过不少的javascirpt的脚本，但是对冒号:却不甚了了，感觉即陌生又熟悉，没办法老毛病又犯了，不把问题搞清楚那个(：)
-
老在眼前晃，于是在网上搜吧，查资料，很郁闷网上介绍冒号用法的贴子不多，而且比较零碎，也不够深入，看完让人更迷糊，折腾了两天，终于对冒号(：)有了更进一步的了解,希望对想了解冒号用法的人有所帮助。
1、switch语句分支
2、?:三元表达式的false
3、声明对象直接量的成员
4、声明标签

1和2相信地球人都知道吧？如果有人不知道,那我改成地球上的程序员都知道,哈哈
3、对象直接量我们也经常用，什么是对象直接量呢？
对象直接量（也称为对象初始化程序）是由一个列表构成的，这个列表的元素是用冒号分隔的属性/值对，元素之间用逗号隔开了，整个列表包含在花括号之中。
javascript中的对象可以像C#、JAVA这些面向对象的语言中的对象一样，拥有属性和方法。
我们创建javascript对象有很多种方法,例如，你可以用Object创建，
复制代码 代码如下:
var obj1 = new Object();
obj1.X = "20px";
obj1.Y = "30px";
obj1.myFunction = function() { alert("我是一个方法！"); };
obj1.myFunction();

用对象直接量创建一个对象:
复制代码 代码如下:
var obj2={X:"20px",Y:"30px",myFunction:function(){alert("我是一个方法！");}}
obj2.myFunction();

用对象直接量创建对象看上去很简洁.
当然你也可以先写个类似Class类的东西然后用构造函数创建：
复制代码 代码如下:
function myClass(x, y) {
this.X = x;
this.Y = y;
}
myClass.prototype.myFunction=function(){
alert("我是一个方法！");
}
var obj3 = new myClass("20px", "30px");
obj3.myFunction();

4、声明标签
脚本语言有很多，除了javascript之外，我们也可以用其它脚本语言来实现javascript所能实现的功能;
例：
<input type="button" onclick="vbscript:vbFunction()" value='按钮'/>
当点击按钮时就会用vbscript语法去执行你用vbscript定义的vbFunction方法;
如果把onclick后面的vbscript:vbFunction()，改成javascript:vbFunction();就会出错。
这些声明你也可以不写直接调用方法，
<input type="button" onclick="vbFunction()" value='按钮'/>
这时onclick中的方法， 无论你用vbscript还是javascript，IE浏览器会自行识别，用相应的语法去执行，当然其它浏览器是不支持vbscript的.
平时我们用javascript习惯上是加声明的，也就是"javascript:"，
<input type="button" onclick="javascript:alert('你点击了我！')" value='按钮'/>
"javascript:"经常被那些自称黑客的人们利用,利用"javascript:"绕过一些简单的或者更高级一点的html表单限制及cookie/session验证;以及SQL注入.如果想了解可以到别的地方查，不过学会千万不要搞破坏啊，哈哈
做个简单的小例子：
首先打开www.baidu.com百度的首页,然后直接把下面这句复制到浏览器的地址栏中，按回车,
javascript:alert(document.forms[0].wd.value='csdn');document.forms[0].submit()
效果怎么样呢？不错，我们利用javascript直接操作了搜索框中的文本，还有执行了表单的提交，更复杂的操作，可以自己研究。
详细出处参考：http://www.jb51.net/article/18465.htm