封装YUI Table
Html里的标签<button>
大家一般写按钮, 都会写<input type=”button” value=”按钮文字” />
但是还有一个标签可以用就是<button></button>, 两者功能一样, 但是button的功能更丰富
这个标签里面允许定义其他html标签作为按钮文字
例如:
<button><img src=”some.gif” /></button>
<button><strong>这是加粗的文字</strong></button>
<button>是标准的html元素, 可以放心使用
但是<button>也有麻烦的地方, 就是用button提交form的时候不会触发form的onsubmit事件.
Button的问题, 请参考深入理解 __doPostBack
阅读(451 次)
页面中同时存在VBScript和Javascript时请注意
当一个页面里面同事存在Javascript和VBScript的时候,我们的页面可能会发生错误,错位位置在
<body oncontextmenu="return false;" onkeydown="parPage.KeyControl(event)" onhelp="parPage.goHelp(event)" bottomMargin="2" leftMargin="2" topMargin="2" rightMargin="2">
此时,当触发了oncontextmenu事件后,浏览器不知道这个return false语句到底用什么引擎来解析,所以就会出现找不到对象或者类似的莫明其妙的错误.解决办法是在事件处理前,加上语言名称前缀:javascript:return false;
<body oncontextmenu="javascript:return false;" onkeydown="javascript:parPage.KeyControl(event)" onhelp="javascript:parPage.goHelp(event)" bottomMargin="2" leftMargin="2" topMargin="2" rightMargin="2">
这样就不会出来那种无聊的错误了.
有人说写上这句就默认为javascript了,好像这句话不起作用
<meta name="vs_defaultClientScript" content="JavaScript">
阅读(440 次)
jQuery基础
0. jQuery基础
jQuery是一个轻量级的javascript类库, 只有14k(未压缩的版本有77k)
jQuery有什么好处呢?
我想好处有以下几点:
1. 简化了html对象的操作, 起码写的字少了, 而且原来需要自己写循环做的, 现在一句话就搞定
2. 提高了代码的浏览器兼容性. 现在的4种主流浏览器之间的js脚本或多或少都会存在兼容性问题, 用jQuery, 会让你不用关心兼容性.
比如Ajax请求, ie和firefox的对象完全不一样
还有box模型的问题, 比如一个div外面加了一个边框, 然后为这个div设定一个宽度, ie和firefox对这个div的实际宽度理解的就不一样. ie会认为div的实际宽度是div的宽度+边框宽度, 而firefox认为div的实际宽度就是你设定的宽度, 不过div的有效宽度就是div的宽度-边框宽度了, 这个问题会影响一个元素的实际位置. 所以一定要用jquery的offset方法来取元素的位置, 用width来取宽度
所有的jQuery选择器返回值都是jQuery对象, 而不是html元素. 所以一些普通的用法, 比如InnerHTML都是无效的.
更多更详细的参考请访问http://docs.jquery.com/Main_Page
别人写的基础教程 http://bbs.jquery.org.cn/frame.....ghlight%3D
1. 选取元素
$(”#myid”)效果等于document.getElementById(”myid”), 但是写的字符要少好多啊.
如果需要将jQuery对象转换成html元素, 则只需要取其第0个元素即可. 例如$(”#myid”)返回的是jQuery对象, 而$(”#myid”)[0]返回的就是html元素
如果选择所有的img元素, 那么这么写: $(”img”)
如果选择带有class=”TextBox”的div元素(<div class=”TextBox”></div>), 那么这么写: $(”div.TextBox”)
选择带有myattr属性的元素$(”div[myattr]”)
选择带有myattr属性, 并且属性值等于myclass的元素$(”div[myattr=’myclass’]”)
属性不等于[myattr!=’myclass’]
属性以my开头[myattr^=’my’]
属性以class结尾[myattr$=’class’]
属性包含cla这三个字符[myattr*=’cla’]
如果一个选择会返回多个元素, 并且希望每返回一个元素, 就把某些属性应用到该元素上, 可以这么写
$(”div”).each(function()
{
$(this).css(”background-color”, “#F00″);
alert($(this).html());
$(this).width(”200px”);
});
2.事件
给页面加onload事件处理方法
$(function()
{
alert(”页面结构加载完毕, 但是可能某些图片尚未加载(一般情况下, 此事件就够用了)”);
});
可以给页面绑定多个onload事件处理方法
$(function()
{
alert(”我首先被执行”);
});
$(function()
{
alert(”我第二被执行”);
});
绑定特殊事件
$(”#myid”).keydown(function()
{
alert(”触发了keydown事件”);
});
除了这些常用的, 不常用的事件需要通过bind方法绑定
3. 元素属性/方法
得到一个元素的高度, $(”#myid”).height()
得到一个元素的位置, $(”#myid”).offset() 返回的是一个offset对象, 如果取元素位置的top, 则$(”#myid”).offset().top,?取left则$(”#myid”).offset().left
得到一个元素的innerHTML, $(”#myid”).html()
得到一个元素的innerText, $(”#myid”).text()
得到一个文本框的值, $(”#myid”).val()
得到一个元素的属性, $(”#myid”).attr(”myattribute”)
以上这些方法有个基本特征, 就是不带参数表示取值, 带有参数表示设定值(除了offset), 例如
$(”#myid”).height(”20″);
$(”#myid”).html(”<a href=”>asdasd</a>”)
$(”#myid”).val(”asdasd”)
需要注意, offset是只读的.
给一个元素设置属性 $(”#myid”).attr(”width”, “20%”)
读取一个属性 $(”#myid”).attr(”width”)
一次指定多个属性 $(”#myid”).attr({disabled: “disabled”, width:”20%”, height: “30″})
删除属性$(”#myid”).removeAttr(”disabled”)
应用样式$(”#myid”).addClass(”myclass”)
删除样式$(”#myid”).removeClass(”myclass”)
加一个样式$(”#myid”).css(”height”, “20px”)
加一组样式$(”#myid”).css({height:”20px”, width:”100px”})
需要注意的是: 如果是加一个样式, 这个样式的名字是css中的名字, 比如说style=”background-color:#FF0000″, 对应的jQuery写法是$(”#myid”).css(”background-color”, “#FF0000″)
但是加一组样式的时候, 样式的名字就是javascript中的css名字了, 比如: myid.style.backgroundColor = “#FF0000″, 对应的jQuery写法是$(”#myid”).css({backgroundColor:”#FF0000″})
4. 根据关系查找元素
找和自己同级的下一个元素$(”#myid”).next()
找和自己同级的所有位于自己之下的元素$(”#myid”).nextAll()
找和自己同级的上一个元素$(”#myid”).prev()
找和自己同级的所有位于自己之上的所有元素$(”#myid”).prevAll()
找自己的第一代子元素$(”#myid”).children()
找自己的第一个父元素$(”#myid”).parent()
找自己的所有父元素$(”#myid”).parents()
例子:
$(”div.l4″).parents().each(
function() {
alert($(this).html());
});
会把class=l4的div的所有父元素都得到, 并且alert出他们的html
例子:
$(”div.l4″).parents(”div.l2″).each(function() { alert($(this).html()); });
会得到class=l4的父元素, 该父元素必须是div, 而且其class=l2
这里说的所有方法, 都可以带表达式, 表达式的写法参考第一部分
5. 维护元素
在body中增加一个元素
$(”body”).append(”<input type=’text’ value=’asd’ />”)
该语句会把这段html插入到body结束标签之前, 结果是<input type=’text’ value=’asd’ /></body>
$(”body”).prepend(”<input type=’text’ value=’asd’ />”)
该语句会把这段html插入到body开始标签之后, 结果是<body><input type=’text’ value=’asd’ />
6.AJAX
用get方法请求一个页面
$.get(”http://www.google.com”, “q=jquery”, function(data, status){alert(data)})
表示请求http://www.google.com, 参数是q, 参数的值是jquery, 请求结束后(不管成功还是失败)执行后面的function, 该function有两个固定参数, data和status, data是返回的数据, status是本次请求的状态
用post方法请求一个页面
$.post(……..) 参数同get方法
7.其他方法
$.trim(str) 将str前后空格去掉
$.browser 返回当前用户浏览器的类型
$.browser.version返回当前浏览器的版本
8. 插件
jQuery支持插件, http://jquery.com/plugins/上面有很多现成的插件, 也可以自己写
自己写插件, 请参考http://docs.jquery.com/Core/jQ.....end#object 和http://docs.jquery.com/Core/jQuery.extend#object
阅读(523 次)
水晶报表Bug之无法打印
公司产品用到了水晶报表, 产品用Install Shield做的安装包, 安装包里的水晶报表用MergeModule来安装, 这样客户只要安装我们的产品就可以了, 不用单独安装Crystal Report程序.
但是有些测试人员发现, 他们测试机上的水晶报表无法打印, 一按打印按钮, 就报Javascript错误.
后来慢慢查了一下他的Js脚本, 发现最终错误在export.js里的document.dlgform.action = opener.document.getElementById(\”crystal_handler_page\”).value;
因为页面上没有crystal_handler_page, 所以这里会出错.
google了一下, 没发现有价值的资料, 只有一个俄罗斯论坛上有人问过这个问题, 别人的回答是因为什么Adobe字体的问题. 但我们的问题是, 有些人的测试机上是好的, 有些人的测试机是不能打印的. 我感觉不是什么字体问题.
今天早上找了台不出错的测试机, 看看crystal_handler_page里面的值是什么, 结果发现就是opener的地址. 晕, 这么复杂干嘛? 不如直接取opener.location.href了.
我就把这句话改为document.dlgform.action = opener.location.href;
问题解决.
后来发现, 这可能是那个MergeModule的问题, 新安装的MergeModule已经修复了这个问题.
阅读(664 次)
招商证券牛网存在验证码漏洞
今天打开招商证券牛网, 发现登录系统后有个”保持连接”的功能, 感觉不错, 想研究一下. 于是就打开了HttpWatch, 后来居然看到了这个:
注意到高亮区域了吗, 也就是说, 我可以做一个自动登录的程序, 然后打开首页后, 再打开http://etrade.newone.com.cn/validatecode/getRandomCode.jsp?randomflag=1180447151484就能得到本次的验证码内容.
这种低级错误都能犯, 真不知道他们的程序员是怎么想的, 不知他们有没有做Code Review.
已经给他们的网管发了邮件, 不知他们怎么处理.
如果以后有人利用这个漏洞, 与我无关.
阅读(1023 次)
关于软件测试
必需要从项目一开始就制定详细的测试计划。
单元测试是必须的，而且一定要用工具。不用工具的单元测试覆盖面肯定没有这么广。因人而异的没有测试文档的测试是不具有重复性的。这样也就没发保证在自动编译后进行自动的单元测试。
测试代码比开发文档还要重要，所以在没多少时间写开发文档的时候，不如多写测试代码。
这就对测试人员的要求更高了。
阅读(510 次)
.Net性能优化之IO操作
现在公司的产品开始测试并改进性能了。
经过模拟并发操作，发现了几处关于文件读写方面的问题。
1. 并发时写文件问题，容易引发文件打开失败的异常。所以我用了队列和一个后台线程来完成写文件的操作。
2. 频繁的文件读取操作，经过测试，同样读取n个文件的任意部份，一次性读取所有文件到哈希表里，再跟据Key来读取Value比用到哪个文件读哪个然后再跟据每行前的Key得到Value要快160－200倍。
没发现其他IO方面的问题，等发现了再贴上来。
阅读(543 次)
学习javascript历程之 第二课 数据类型, 变量, 运算符
今天讲了三个,感觉有些多了,消化不了了,所以赶快记下笔记,便于明早再温习一遍.
(一)数据类型分为五种
(1) int-整形(整数,如:10)
(2)float-浮点型(小数,如:10.5 )
(3)string-字符串型(用“”号或‘’括起来的字符或数值.如:＂原来这就叫字符串型啊＂或＂100＂)
(4)bool-布尔型(简单地说就是”是”或”否”,用True或False表示)
(5)date-日期型(1987.02.02)
(二)变量
概念:用字母数字表示一个可以变化的值叫做变量(注:根据自己理解的意思写的.)
下面举例说明怎么给变量赋上各种类型的值
<script>
var age= 25; //这个是赋整形值的形式. 组成元素和格式:var 空格 变量名 等于 值 分号
var salary=4005.67; //这个是赋浮点型值的形式.组成元素和格式:var 空格 变量名 等于 值 分号
var name=”陈小丫”; //这个是赋字符串型值的形式.组成元素和格式:var 空格 变量名 等于 左双引号 值 右双引号 分号
var isworkover5years=false; //这个是赋布尔型值的形式.组成元素和格式:var 空格 变量名 等于 值 分号
var hiredate=new Date(2001,3,25,8,0); //这个是赋日期型值的形式.组成元素和格式:var 空格 变量名 等于 new Date 左括号 年 月 日 时 分(即值) 右括号 分号
</script>
(三)操作符
(1)算术运算符
JavaScript中的算术运算符有单目运算符和双目运算符。
双目运算符：
+（加） 、-（减）、 *（乘）、 /（除）、 %（取模） //还有很多种双目运算符,因为教我的人也不太懂,所以,姑且先了解这五种
例: var total=5000+6879.03;
var total=5000-6879.03;
var total=5000*6879.03;
var total=5000/6879.0 ;
单目运算符：
++（递加1）、–（递减1）。//还有两种种单目运算符,因为教我的人也不太懂,所以,姑且先了解这二种
例:var age=30;
age++; //此时,age便等于31,实质上就是age=age+1;
var age=35;
age–; //此时,age便等于34,实质上就是age=age-1;
(2)比较运算符
比较运算符它的基本操作过程是，首先对它的操作数进行比较，尔后再返回一个true或false值，有８个比较运算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
例:var xiaowangage=25;
var xiaobaiage=35;
xiangwangage>xiaobaiage ; //如果此比较成立的话,就得到了ture的结果,反之,就是false的结果.
今天的课程结束.晕晕乎乎的,明天再看一遍.又是0点了,睡觉了.刚刚很困,现在反而不困了.明天好好表现哦!(秘密,哈哈哈)
阅读(605 次)
学习javascript历程之 第一课 基本格式
先把最基本的格式写出来,再一一回顾
格式如下:
<script type=“text/javascript” language=“javascript”>
// JavaScript Appears here.
alert(“第一次写script”);
alert(“哈哈哈哈哈哈”);
</script>
注释:
(1)先要在最外面用<script></script>把所有的内容包含起来
(2)type=”text/javascript”表明这个script是文本类型的.
(3)language=”javascript”表明这个script的语言是javascript(因为script分为两种:vbscript和javascript)
(4)// JavaScript Appears here.表示注释一行
(5)alert(”第一次写script”); alert(”哈哈哈哈哈哈”); 中:alert是window(窗口)对象的一个方法,表示弹出一个只有确定按钮的对话框.
第一课结束,嘿嘿,对于会的人来说很少,但对于不会的我来说已经够我消化一天了,多了就记不住了.就这样明天晚上还要再温习一遍,否则说不定明早起来就忘记了.哈哈.
第二课明天晚上继续.
挺有意思的呢!
阅读(508 次)
想当摄影师的程序员, powered by 七十二松 (72pines) & WordPress MU. Theme: Dezinerfolio