找对象_51obj.cn

IT 技术交流博客,致力于前台xhtml、css、js、ajax应用,及后台asp、asp.net程序开发
Options:

js中的链式调用

jQuery中形如$("#txtName").addClass("err").css("font-size","12px").select().focus();的方式让人不得不为之着迷。其实现机制就是链式调用。链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里。

没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法。

function W(){
this.name="Wang Hongjian";
this.gender="male";
}

W.prototype.sayHi=function(){
  alert("Hello,everybody\nMy name is " + this.name);
  return this;
};
W.prototype.doSomething=function(){
alert("I'm working");
return this;
}
W.prototype.sayGoodbye=function(){
  alert("Goodbye,everybody");
  return this;
};
var w=new W();
w.sayHi().doSomething().sayGoodbye();

查看演示

js删除select中重复项

使用嵌套循环来枚举重复项,然后移除。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>删除select中重复项</title>
<style type="text/css">
body{ text-align:center;}
div{ width:400px; background:#f1f5fa; margin:auto; border:solid 1px #BFC9DB; padding:10px;}
h4{ }
a{text-align:right; display:block; font-size:12px;}
</style>
<script type="text/javascript">
/*定义全局函数$*/
function $(id){
return document.getElementById(id);
}
/*初始化select*/
function InitialSelectOption(id){
var oSel=$(id);
var aOptions=["Wang Hongjian","Wang Hongjian","Nichoal Smith","Nichoal Smith","David Gates","David Gates","David Gates","Wang Hongjian","Wang Hongjian","Nichoal Smith","Nichoal Smith","David Gates","David Gates","David Gates"];
var i=0;
oSel.options.length=0;
while(i<aOptions.length){
var option=new Option(aOptions[i],i);
oSel.options.add(option);
i++;
}
oSel.setAttribute("size",i-1);
$("btnDistinct").removeAttribute("disabled");
}
/*删除重复项*/
function DistinctSelectOption(id){
var oSel=$(id);
var i=0;
while(i<oSel.options.length){
var j=i+1;
while(j<oSel.options.length){
if(oSel.options[i].text==oSel.options[j].text){
oSel.options[j]=null;//不可使用oSel.options.remove(j),因为不兼容firefox
}else{
j++;
}
}
i++;
}
oSel.setAttribute("size",i);
$("btnDistinct").setAttribute("disabled","disabled");
}
window.onload=function(){
/*初始化*/
$("btnInital").onclick=function(){InitialSelectOption("sel");};
/*删除重复项*/
$("btnDistinct").onclick=function(){DistinctSelectOption("sel");};
$("btnDistinct").setAttribute("disabled","disabled");
}
</script>
</head>
 
<body>
<div>
<h4>删除select重复项演示</h4>
<a href="http://www.51obj.cn/" target="_blank" title="http://www.51obj.cn/">http://www.51obj.cn/</a>
<hr />
<select id="sel" multiple="multiple" size="1"><option>待初始化…</select>
<hr />
<button id="btnInital">初始化</button>
<button id="btnDistinct">删除重复项</button>
</div>
</body>
</html>

效果

查看演示效果

关于JSON

JSON入门

JSON,全称是Javascript Object Notation(Javascript对象表示法),它是一种轻量级的数据交换格式,其语法是一种传输和生成数据的协定,类似于C家族的语言,很容易被C家族的语言所解析。

其语法格式可对比参照CSS语法。约定如下:
对象:包含在{}之间;
属性:采用key-value对方式,属性之间使用逗号(!)分开,形如string:value
数组:包含在[]之间(方括号);
元素:之间使用逗号分开;
值:可以是js所有基本对象,包括字符串、数字、对象、数组、true、false、null。

<script type="text/javascript">
var O={
    name:"Wang Hongjian",
    age:23,
    gender:"male",
    isStudent:false,
    like:["Reading","Movie","Music"],
    habbit:function(){
        alert("Hello everybody,welcome to my 51obj.cn\n" +
        "I Like " + this.like[0]);
    }
}
O.habbit();
</script>

预览效果

相比较之前的js传统对象表示法

var O=new Object();
O.name="Wang Hongjian";
O.age=23;
O.gender="male";
O.isStudent=false;
O.like=new Array("Reading","Movie","Music");
O.habbit=function(){
    alert("Hello everybody,welcome to my 51obj.cn\n" +
    "I Like " + this.like[0]);
}

JSON显然更简洁,也相对易懂。

JSON与javascript

JSON是Javascript的原生格式,也就是说在Javascript中处理JSON数据不需要任何的工具。试试下面的例子,这样你就会跟XML说byebye了。

var D={"Department":
    [
        {"Person1":[{"userName":"admin1","userPass":"123456"},
                    {"userName":"admin2","userPass":"123456"},
                    {"userName":"admin3","userPass":"123456"}]
        },
        {"Person2":[{"userName":"admin4","userPass":"123456"},
                    {"userName":"admin5","userPass":"123456"},
                    {"userName":"admin6","userPass":"123456"}]
        }
    ]
};
var p1=D.Department[0].Person1[0].userName;
alert(p1);

预览效果

eval函数

eval用于执行其函数体内可表示为js代码的字符串

var _sum="2+3";
alert("_sum=" + _sum + "\neval(_sum)=" + eval(_sum));

得到如下结果:

 

var newVar="Wang";
var newVarString=newVar + "='Hongjian'";
eval(newVarString);
alert("Wang is " + Wang);

得到如下结果:

执行类JSON字符串

var str="{name:'Wang Hongjian',age:23}";
var o=eval("Me=" + str);
alert(o);
alert("name=" + o.name);
alert("age=" + o.age);

得到如下结果:

 

查看以上例子

JSON与AJAX

我们知道在AJAX中常使用这种GET方式来传递数据:GetUser.aspx?userName=admin&userPass=123456,则使用JSON可将其表示为{"userName":"admin","userPass":"123456"},这样当然体现不出JSON的优势,但转变一下,可以得到下面的格式。

{"Department":
    [
        {"Person1":[{"userName":"admin1","userPass":"123456"},
                    {"userName":"admin2","userPass":"123456"},
                    {"userName":"admin3","userPass":"123456"}]
        },
        {"Person2":[{"userName":"admin4","userPass":"123456"},
                    {"userName":"admin5","userPass":"123456"},
                    {"userName":"admin6","userPass":"123456"}]
        }
    ]
}

格式化为以下方式(不然后因为换行导致出错)

 

var D='[{Person1:[{"userName":"admin1","userPass":"123456"},{"userName":"admin2","userPass":"123456"},{"userName":"admin3","userPass":"123456"}]},{Person2:[{"userName":"admin4","userPass":"123456"},{"userName":"admin5","userPass":"123456"},{"userName":"admin6","userPass":"123456"}]}]';

var _D=eval("(" + D + ")");

使用alert(_D[0].Person1[0].userName);得到如下结果

发散一下思维,这样只要数据处理端解析这条数据,便能达到处理多条数据的结果。

CutePsWheel javascript libary V0.9.2

简介

用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值,支持正整数、小数类型输入文本。

  • 兼容IE/Firefox/Opera/Safari/Chrom
  • 可定义滚动变化间隔值,支持整数、浮点数
  • 双击恢复初始值
  • 仅3.92K,压缩后2.67K

效果图

资源

点击预览

下载CutePsWheel_0_9_2.js(CutePsWheel_0_9_2_min.js)    下载代码

赞助

分类目录

订阅本站

赞助

GoogleAd

Firebug - Web Development Evolved

My douban

Location