- 浏览: 603483 次
- 性别:
- 来自: 卡哇伊
文章分类
- 全部博客 (299)
- C# (25)
- Java (1)
- WinForm (0)
- Asp.Net (86)
- Jsp (2)
- Php (1)
- Web Service (0)
- Desgin Patterns (19)
- Data Structure & Algorithms (1)
- SQLserver (41)
- Mysql (0)
- Oracle (2)
- Javascript (50)
- Ajax (10)
- Jquery (1)
- Flex (0)
- Regular Expression (5)
- DIV+CSS+XHTML+XML (18)
- Software Test (0)
- Linux (0)
- Utility (17)
- Net Digest (4)
- windows 2003 (10)
- Other (4)
- English (1)
- IT Term (1)
最新评论
-
w497480098h:
学习了 很好谢谢
SQL Server下无限多级别分类查询解决办法(简单查询树形结构数据库表) -
main_fun:
确实不错
iframe自适应高度 -
jveqi:
...
DBA -
mxcie:
其它版本没有确认,今天使用vs2003时,其.sln文件也需要 ...
彻底删除项目的VSS源代码管理信息 -
moneyprosper:
就只有IE支持,火狐和谷歌都不支持此种方法。正在寻找中。。。
从父页面读取和操作iframe中内容方法
简单验证:
<form name="myform">
用户名:<input type="text" name="username" id="username"/><br />
密码:<input type="password" name="password" id="password" /><br />
<button onclick="javascript:return checkLogin()">登陆</button>
<form>
<script type="text/javascript">
function checkLogin(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username==null||username==""){
alert("用户名不能为空!");
return false;
}
if(password==""||password==null){
alert("密码不能为空!");
return false;
}
if(username=="admin"&&password=="112233"){
alert("登陆成功!");
return true;
}
alert("用户名或密码有误!");
return false;
}
</script>
获取表单的值:
<form name="myform">
请输入姓名:<input type="text" name="username" value="请输入您的姓名" onfocus="javascript:clearText()"/><br />
性别:<input type="radio" checked="checked" value="男" name="sex"/>男
<input type="radio" value="女" name="sex" />女
<br />
爱好:<input type="checkbox" value="聊天" name="chat" />聊天
<input type="checkbox" value="上网" name="online" />上网
<input type="checkbox" value="足球" name="football"/>足球
<br />
<button onclick="javascript:register()">注册</button>
<input type="reset" value="重置"/>
<form>
<script type="text/javascript">
function register(){
var username=document.myform.username.value;
var sex;
var like="";
if(!document.myform.sex[0].checked){
sex=document.myform.sex[1].value;
}else{
sex=document.myform.sex[0].value;
}
if(document.myform.chat.checked){
like+=document.myform.chat.value+"、";
}
if(document.myform.online.checked){
like+=document.myform.online.value+"、";
}
if(document.myform.football.checked){
like+=document.myform.football.value;
}
alert("姓名:"+username+" ,性别:"+sex+" ,爱好:"+like);
}
function clearText(){
document.myform.username.value="";
}
</script>
以上是笨办法我们可以把checkbox框的name全改成like-->然后:
<script type="text/javascript">
function register(){
var username=document.myform.username.value;
var sex;
var like="";
if(!document.myform.sex[0].checked){
sex=document.myform.sex[1].value;
}else{
sex=document.myform.sex[0].value;
}
var like=document.myform.like;//这里获取的是数组
var likeValue="";
for(var i=0;i<like.length;i++){
if(like[i].checked){
likeValue+=like[i].value+"、";
}
}
alert("姓名:"+username+"\n性别:"+sex+"\n爱好:"+likeValue);
//获得数组对象方式一
//var like=document.myform.like;
//获得数组对象方式方式二
//var like=document.getElementsByName("like");
//获得数组对象方式三
//var like=document.getElementsByTagName("input");
/*for(var i=0;i<like.length;i++){
if(like[i].type=="checkbox"){
//boolValue该变量为传递进来的参数是bool类型,全选/反选两按钮时用.
like[i].checked=boolValue;
}
}*/
}
function clearText(){
document.myform.username.value="";
}
</script>
计算闰年: //if((year % 400 == 0)||(year % 4 == 0)&&(year % 100 != 0))
<script type="text/javascript">
function checkLeap(){
var year=document.getElementById("year").value;
if(year==null||year==""){
alert("请输入年份!");
return;
}
if((year%4==0&&year%100!=0)||(year%400==0&&year%100==0)){
alert(year+"是闰年!");
}else{
alert(year+"是平年!");
}
}
</script>
<form name="myform">
请输入年份:<input type="text" id="year" name="year"/>
<button onclick="javascript:checkLeap()">提交</button>
</form>
获得焦点和失去焦点:
<form name="myform">
<input type="text" id="username" value="请输入姓名" onblur="javascript:checkTextIsNull()"
onfocus="javascript:selectTextValue()"/>
<form>
<script type="text/javascript">
var username=document.getElementById("username");
username.focus();
function selectTextValue(){
//onfocus:获得焦点
document.getElementById("username").select();
}
function checkTextIsNull(){
//onblur失去焦点
if(username.value==""||username.value==null){
alert("用户名不能为空!");
username.focus();
}
}
</script>
全选,返选:
<form name="myform">
<input type="checkbox" name="chat" value="聊天" />聊天
<input type="checkbox" name="online" value="上网" />上网
<input type="checkbox" name="football" value="足球" />足球
<br />
<a href="#" onclick="javascript:isSelect(true);">全选</a>
<a href="#" onclick="javascript:isSelect(false);">反选</a>
<form>
<script type="text/javascript">
function isSelect(boolValue){
var like=document.getElementsByTagName("input");
for(var i=0;i<like.length;i++){
if(like[i].type=="checkbox"){
like[i].checked=boolValue;
}
}
}
</script>
select多选跳转:
<form name="myform">
<select name="sel" size="5" multiple="multiple">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.cn">谷歌</option>
<option value="http://www.163.com">163</option>
</select>
<button onclick="javascript:transition();">跳转</button>
</form>
<script type="text/javascript">
function transition(){
var sel=document.myform.sel;//因为是多选框,所以这里得到的是数组
for(var i=0;i<sel.length;i++){
if(sel[i].selected){
alert("11");
window.open(sel[i].value);
}
}
}
</script>
select单选跳转:
<form name="myform">
<select name="sel">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.126.com">126</option>
<option value="http://www.163.com">163</option>
</select>
<button onclick="javascript:transition();">跳转</button>
</form>
<script type="text/javascript">
function transition(){
document.myform.action=document.getElementById("sel").value;
//表单提交
document.myform.submit();
}
</script>
change事件跳转:
<form name="myform">
<select name="sel" onchange="javascript:transition()">
<option value="http://www.qq.com">QQ</option>
<option value="http://www.126.com">126</option>
<option value="http://www.163.com">163</option>
<option selected="selected" value="psel">请选择</option>
</select>
</form>
<script type="text/javascript">
function transition(){
var links=document.getElementById("sel").value;
if(links!="psel"){
window.location.href=links;
}
}
</script>
javascript操作css:
<form name="myform">
<button onclick="javascript:changeColor();">变色</button>
<button onclick="javascript:hidden();">隐藏</button>
<button onclick="javascript:present();">呈现</button>
<button onclick="javascript:test1();test2();">调用两函数</button>
</form>
<script type="text/javascript">
function changeColor(){
document.getElementById("tt").style.color="#00ffff";
}
function hidden(){
document.getElementById("tt").style.display="none";
}
function present(){
document.getElementById("tt").style.display="block";
//设置display="";也可呈现.
//document.getElementById("tt").style.display="";
}
function test1(){
alert("调用事件时只要加\";\"号就可以同时调用多个函数哦!!!");
}
function test2(){
alert("调用事件时只要加\";\"号就可以同时调用多个函数哦!!!");
}
</script>
javascript分栏模式:
<table width="483" height="419" border="1">
<tr>
<td width="215" align="center" id="menu">
<p><a href="#">栏目1</a></p>
<p><a href="#">栏目2</a></p>
<p><a href="#">栏目3</a></p>
<p><a href="#">栏目4</a></p>
<p><a href="#">栏目5</a></p>
<p><a href="#">栏目6</a></p>
<p><a href="#">栏目7</a></p>
<p><a href="#">栏目8</a></p></td>
<td width="7"><span id="imgHinddenAndPresent"><img src="toleft.gif" onclick="javascript:Hidden();" /></span></td>
<td width="238"> </td>
</tr>
</table>
<script type="text/javascript">
function Hidden(){
document.getElementById("menu").style.display="none";
document.getElementById("imgHinddenAndPresent").innerHTML="<img src=\"toright.gif\" onclick=\"javascript:Present();\" />";
}
function Present(){
document.getElementById("menu").style.display="";
document.getElementById("imgHinddenAndPresent").innerHTML="<img src=\"toleft.gif\" onclick=\"javascript:Hidden();\" />";
}
</script>
Regular Expression简单示例:
示例1:
<script type="text/javascript">
var str="windows是一款非常优秀的操作系统,我喜欢windows!";
/*Javascript正则表达式写在双斜线"/ /"之间,
g代表global全局范围查找,如果没有g只替换第一个.*/
var regular=/windows/g; //创建正则表达式模式
var tmp=str.replace(regular,"linux");
alert(tmp);
</script>
示例2:
<script type="text/javascript">
var str="Windows是一款非常优秀的操作系统,我喜欢Windows!";
//这里加上了一个i,"i"代表不区分(忽略)大小写,如果去掉i就无法匹配了.
var regular=/WINDOWS/gi;
var tmp=str.replace(regular,"linux");
alert(tmp);
</script>
示例3:
<script type="text/javascript">
var str="Windows是一款非常优秀的操作系统,我喜欢Windows!";
//这里加上了一个i,"i"代表不区分(忽略)大小写,如果去掉i就无法匹配了.
var regular=/WINDOWS/gi;
/*match方法:使用正则表达式模式,对字符串执行查找,并将包含查找的结果
作为数组返回*/
var tmp=str.match(regular);
for(var i=0;i<tmp.length;i++){
alert(tmp[i]);
}
</script>
示例4:
//以XXX开头 ^
/*var reg=/^中/g; //正则表达式模式设置以'中'开头.
var str="中国万岁,我爱中国!";
var found=str.match(reg);
alert(found);
str=str.replace(reg,"宗");
alert(str);*/
/*以XXX结尾 $
var reg=/t$/g;
var str="got got got";
//替换结尾的t为'xx'
str=str.replace(reg,"xx");
alert(str);*/
//表示任意一个字符 .
//匹配'想.想'的字符串
/*var reg=/想.想/g;
//得到和'想.想'匹配的字符串.
var str="想想想, 想一想,想太多想不想.";
str=str.match(reg);
alert(str);*/
//字边界 \b
/*var reg=/\bor/g;
var str="origami";
alert(str.replace(reg,"xx"));
var str1="gaormaor";
var reg1=/or\b/g;
alert(str1.replace(reg1,"xx"));*/
//非字边界
/*var reg=/\Bor/g;
var str="maortt";
alert(str.replace(reg,"xx"));*/
/*var reg1=/or\B/g;
var str="ttorma";
var str1="origami";
alert(str.replace(reg1,"xx"));
alert(str1.replace(reg1,"xx"));*/
/*var reg=/\Bor\B/;
var str="normal";
alert(str.replace(reg,"xx"));*/
//匹配除换行以外的任意字符 ...
/*var reg=/.../g;
str="ABC";
str1="\ntt";
alert(str.replace(reg,"ttt"));
alert(str1.replace(reg,"ttt"));*/
/*字符集 [...] -->多选一被[]
括起来的内容可以任意选一个*/
/*var reg=/[an]bc/gi;
str="ABCDEFG ABCDE NBCDDDFG";
alert(str.match(reg));
*/
//数字 \d
//匹配以三个数字开头,以三个数字结尾
/*var reg=/^\d\d\d$/g;
str="123";
alert(str.match(reg));*/
//正则表达式对象的一个方法:test()
/*var reg=/^\d\d\d$/g;
var str="123";
//如果符合正则表达式定义将弹出true;
//否则弹出false
var t=reg.test(str);
if(t){
alert("验证通过!");
}else{
alert("验证未通过!");
}
*/
/*规定只能输入的6位数字,以6位数字开头
,以6位数字结尾,{}限定输入的位数*/
/*var reg=/^\d{6}$/g;
var str="112233";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/
/*验证qq密码,{6,18}代表只能是数字
并且在6-18位之间*/
/*var reg=/^\d{6,18}$/g;
var str="111111111";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/
/*验证必须以3个以上,数字,下划线,字母开头
和结尾
*/
/*var reg=/^\w{3,}$/g;
var str="839237384783";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/
//[^...] 非字符集-->不能括起来的内容之一
/*var reg=/a[^eg-]/g;
var str="ab ac aa ae ag a- at";
alert(str.match(reg));*/
/*
? 相当于匹配0-1个,可以理解成:{0,1},
+ 相当于匹配一至多个,可以理解{1,},
* 相当于匹配零至多个,可以理解{0,},
\d{6} 规定只能输入6位数字
\d{15,18} 规定只能输入15-18个数字
\w{3,} 规定至少有3个字母或下划线或数字以上
() 代表分组
*/
/*var reg=/ab?c/g
var str="abbd addb ac abc acb";
alert(str.match(reg));
*/
/*var reg=/ab+c/g
var str="abbd addb ac abc acb";
alert(str.match(reg));*/
/*var reg=/ab*c/g;
var str="accd abbbd addbc abbc acbbd abc";
alert(str.match(reg));*/
// | 选择符
//相当于匹配got或get
/*var reg=/got|get/g;
var str="gggt gtoo gto got gpj get";
window.alert(str.match(reg));*/
//验证国内的电话号码
/*var reg=/\d{3}-\d{8}|\d{4}-\d{7}/;
var str="0579-11223322";
if(reg.test(str)){
alert("验证通过!");
}else{
alert("验证未通过!");
}*/
//匹配特殊字符如: \. \/
/*var reg=/\./g;
var str="a.a.a.c";
alert(str.match(reg));*/
/*var reg=/\//g;
var str="a/a/a/c";
alert(str.match(reg));*/
//验证考试成绩:(匹配数字可以有小数点)
var reg=/^\d+(\.\d+)?$/g;
var str="98";
var str2="98.a";
alert(reg.test(str));//output:true
alert(reg.test(str2));//output:false;
示例5:
为空验证,验证是否中文,清除前后空格:
<script type="text/javascript">
function check(){
var username=document.myform.username.value;
/*这种方式验证表单的弊端,
如果用户在文本框上输入空格,
也能通过验证,我们可以通过正则表达式来解决*/
if(username==""||username==null){
alert("用户名不能为空!");
return;
}
//正则表达式中是可以输入空格的如:/ +/g,但是确切的写法应该是/\s+/g
/*该示例中在正则表达式模式中
输入'空格+' 代表匹配
1-n个空格*/
/*var reg=/\s+/g;
if(reg.test(username)){
alert("不能输入一连串的空格!");
return;
}*/
//以上做法输入任意字符只要有空格就会验证不通过
/*假设在文本框中输入用户名
的前后加空格就不能通过验证,如果
允许在用户名前后加空格则可以:
/^ +$/g 以一个或者多个空格开头
和以一个或者多个空格结尾,这样做匹配了
输入的所有字符必须是空格.从而解决了以上
的验证问题.
*/
var reg=/^\s+$/g;
if(reg.test(username)){
alert("不能输入一连串的空格!");
return;
}
//验证输入的是否是否是中文:
var reg=/^[\u4e00-\u9fa5]+$/g;
if(!reg.test(username)){
alert('姓名必须是中文!!!');
return;
}
//这里在末尾加上$的目的是为了方便查看结尾是否有空格
alert("验证通过\n你输入的是:"+trim(username)+"$");
}
//去除空格
function trim(str){
//去除起始位置一个以上的空格及结尾位置一个以上的空格
return str.replace(/(^\s+)|(\s+$)/g,"");
}
</script>
</head>
<body>
<form name="myform">
姓名:<input type="text" name="username"/>
<button onclick="javascript:check();">验证</button>
</form>
</body>
示例6:
//验证qq号码:(必须在5位数字以上!)
var reg=/^\d{5,}$/g;
var str="1111";
var str1="22222";
alert(reg.test(str)); //output: true
alert(reg.test(str1)); //output: false
发表评论
-
简单选项卡制作方式
2009-10-26 15:16 1000<!DOCTYPE html PUBLIC " ... -
字体放大效果,字体[大][中][小]
2009-10-20 16:12 1049<!DOCTYPE html PUBLIC " ... -
JS中保留两位小数
2009-10-19 11:22 3164//这里使用字符串的"123.0000" ... -
JS中String,Date,Math常用函数
2009-10-11 18:25 3678String,Date,Math常用函数 ... -
eval,confirm,alert,prompt函数
2009-10-11 12:23 1451eval()函数JavaScript有许多小窍门来使编程更加容 ... -
从零开始学习jQuery(剧场版) 你必须知道的javascript
2009-10-03 11:28 857一.摘要 本文是jQuery系列教程的剧场版, 即和jQue ... -
深入浅出JSON
2009-10-02 20:27 661JSON定义 JSON(JavaScript Objec ... -
数据类型和Json格式
2009-10-02 19:53 8791. 前几天,我才知 ... -
防止网页被嵌入框架的代码
2009-10-02 17:31 889<script type="text/java ... -
学习javascrip闭包 (closure)
2009-10-02 16:53 849闭包(closure)是Javascript语言的一个难点 ... -
花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight
2009-09-30 18:41 17271. top 此属性仅仅在对象的定位(position ... -
document.write()和document.writeln()的区别
2009-09-18 11:06 8167解决思路: 两者都是JavaScript向客户端输出的方法,对 ... -
几个常用的小函数(检查是否为数字,否为电话号码,num是否是负数,检查是否为日期...)
2009-09-10 17:41 1127//函数名:chkemail//功能介绍:检查是否为Email ... -
为什么二月的天数比其他月少?
2009-09-06 09:10 1453——公元前46年,罗马皇帝恺撒在修改历法时,规定每年为12个月 ... -
iframe自适应高度
2009-09-01 23:40 3222Demo页面:主页面 iframe_a ... -
document.body和document.documentElement的区别
2009-09-01 22:25 2350document.body:是DOM中Document对象里的 ... -
从父页面读取和操作iframe中内容方法
2009-08-27 20:50 3613基本的操作方法: ... -
JsTAB选项卡示例集合(二)
2009-08-15 23:25 1784仿163的一款TAB选项卡,有的人也称它为网页标签。本标签用到 ... -
Js Tab选项卡示例集合
2009-08-15 23:22 7928清新选项卡(一个页面布局两个) 一个横排的清新选项卡, ... -
Js事件列表
2009-08-15 20:41 879js事件列表 onkeypress,onkeyd ...
相关推荐
03第3章 实用JavaScript函数 04第4章 日期和时间 05第5章 文字特效 5.1 文字的颜色变换 5.2 改变文字大小 5.3 文字显示效果 5.4 指定文字位置 5.5 文字动态移动 5.6 文字立体效果 5.7 文字动画效果...
看似需要 JavaScript 实现的效果,其实仅用到了 CSS 的示例集合。该项目学习意义大于实用价值,更多的时候是为了让你知道原来 CSS 还能这么用
Javascript经典特效示例集,图片特效集集合打包
JavaScript
JavaScript
wke示例-集合-20160728.rar,html和javascript调用wke的范例源码。
学习JS 一组用于学习 JavaScript 的示例代码。 这是我用来存储所有用于学习目的的 JavaScript 示例代码的地方。
js_dom_jquery 用于DOMJavaScript的快速参考指南。
在讲授JavaSript课程第七章时,发现课件中没有把JavaScript的数组讲清楚。因为,JavaScript的数组非常特殊,...注:本示例代码注释非常详细,请仔细阅读体会JavaScript数组的奇特用法,以及对象的构造方法的书写格式。
使用JavaScript可以很方便地实现方差的计算,下面是一个示例代码: 这个函数接受一个包含数据值的数组作为参数,并返回数据集合的方差。函数先计算出数据集合的平均值,然后对每个数据值与平均值的差的平方求和,再...
使用JavaScript可以很方便地实现标准差的计算,下面是一个示例代码: 这个函数接受一个包含数据值的数组作为参数,并返回数据集合的标准差。函数先计算出数据集合的平均值,然后对每个数据值与平均值的差的平方求和...
例子用于教学和学习Vue的Vue.js参考示例的集合。 这些示例假定读者没有前端的经验。 我本人有作为后端工程师的更多经验,并且发现大多数前端示例都需要非常熟悉HTML,Javascript和前端堆栈。 我记录了这些示例,以...
展示如何使用 ArcGIS API for JavaScript 创建各种可视化效果的示例集合。 要探索这些示例,您可以: 单击下面的任何缩略图以查看实时示例 点击缩略图下的标题查看代码 样品 基本的 显示唯一值 增强选项 信息...
使用ArcGIS API for JavaScript的自定义图层示例的集合。风格的丘陵从ArcGIS Online世界高程服务生成轮廓通过ArcGIS Online高级高程服务生成轮廓
一个利用Flutter开发的一些示例App集合
js-例子js 示例集合
此文件夹包含javaScript示例,这些示例应出现在我网站上的相应博客文章中。 原型文件夹 此文件夹包含javaScript项目示例的原型,将来在某个博客文章中可能会或可能不会出现。 其中许多可能以不同程度的完成而存在,...
前端示例和后端代码库的集合和规范
可以在此处找到示例集合: 使用过滤器建模的简单系统的独立演示。(源代码) 使用 VueJs 创建的交互式演示,允许尝试不同的设置。(源代码) 有关变量的一些示例和解释,请查看此博客文章。 更多详情、使用方法,...
D3-例子使用 D3 和 Strapdown 的示例集合这些可以作为进行查看。