分类目录归档：JavaScript

在Json中查找 Javascript search inside a JSON object

JavaScript 
var jsonObj ={"list": [
  {"name":"my Name","id":12,"type":"car owner"},
  {"name":"my Name2","id":13,"type":"car owner2"},
  {"name":"my Name4","id":14,"type":"car owner3"},
  {"name":"my Name4","id":15,"type":"car owner5"}
]};
var results = [];
var searchField = "name";
var searchVal = "my Name";
for (var i=0 ; i < jsonObj.list.length ; i++)
{
  if (jsonObj.list[i][searchField] == searchVal) {
    results.push(jsonObj.list[i]);
  }
}
alert(results[0]["id"]);

jQuery 选择器

JQuery

jQuery 选择器

选择器 实例 选取
* $(“*”) 所有元素
#id $(“#lastname”) id=”lastname” 的元素
.class $(“.intro”) 所有?class=”intro”?的元素
element $(“p”) 所有 <p> 元素
.class.class $(“.intro.demo”) 所有 ?class=”intro” 且?的元素
:first $(“p:first”) 第一个 <p> 元素
:last $(“p:last”) 最后一个 <p> 元素
:even $(“tr:even”) 所有偶数 <tr> 元素
:odd $(“tr:odd”) 所有奇数 <tr> 元素
:eq(index) $(“ul li:eq(3)”) 列表中的第四个元素（index 从 0 开始）
:gt(no) $(“ul li:gt(3)”) 列出 index 大于 3 的元素
:lt(no) $(“ul li:lt(3)”) 列出 index 小于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不为空的 input 元素
:header $(“:header”) 所有标题元素 <h1> – <h6>
:animated 所有动画元素
:contains(text) $(“:contains(‘W3School’)”) 包含指定字符串的所有元素
:empty $(“:empty”) 无子（元素）节点的所有元素
:hidden $(“p:hidden”) 所有隐藏的 <p> 元素
:visible $(“table:visible”) 所有可见的表格
s1,s2,s3 $(“th,td,.intro”) 所有带有匹配选择的元素
[attribute] $(“[href]”) 所有带有 href 属性的元素
[attribute=value] $(“[href=’#’]”) 所有 href 属性的值等于 “#” 的元素
[attribute!=value] $(“[href!=’#’]”) 所有 href 属性的值不等于 “#” 的元素
[attribute$=value] $(“[href$=’.jpg’]”) 所有 href 属性的值包含以 “.jpg” 结尾的元素
:input $(“:input”) 所有 <input> 元素
:text $(“:text”) 所有 type=”text” 的 <input> 元素
:password $(“:password”) 所有 type=”password” 的 <input> 元素
:radio $(“:radio”) 所有 type=”radio” 的 <input> 元素
:checkbox $(“:checkbox”) 所有 type=”checkbox” 的 <input> 元素
:submit $(“:submit”) 所有 type=”submit” 的 <input> 元素
:reset $(“:reset”) 所有 type=”reset” 的 <input> 元素
:button $(“:button”) 所有 type=”button” 的 <input> 元素
:image $(“:image”) 所有 type=”image” 的 <input> 元素
:file $(“:file”) 所有 type=”file” 的 <input> 元素
:enabled $(“:enabled”) 所有激活的 input 元素
:disabled $(“:disabled”) 所有禁用的 input 元素
:selected $(“:selected”) 所有被选取的 input 元素
:checked $(“:checked”) 所有被选中的 input 元素

参阅

js验证代码

JavaScript

1.JS判断是否是邮编

<script>
function isPostalCode(s)
{
//var patrn=/^[a-zA-Z0-9]{3,12}$/;
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}
var a = "315400";
alert(a+"是否合法!");
alert(isPostalCode(a));
a = "ab";
alert(a+"是否合法!");
alert(isPostalCode(a));
</script>

2.JS判断电话传真号码是否有效

<script>
function isTel(s)
{
var patrn=/^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}
var a = "0574-56158888";
alert(a+"是否合法!");
alert(isTel(a));
a = "123456a";
alert(a+"是否合法!");
alert(isTel(a));
</script>

3.js正则判断：只能输入5-20个以字母开头、可带数字、“_”、“.”的字符串

<script>
function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}
var a = "abc";
alert(a+"是否合法!");
alert(isRegisterUserName(a));
a = "abcdef";
alert(a+"是否合法!");
alert(isRegisterUserName(a));
</script>

4.判断身份证号码的JS函数

<script type="text/javascript">
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}
function cidInfo(sId)
{
var iSum=0
var info=""
if(!/^d{17}(d|x)$/i.test(sId))
{
return false;
}
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)
{
return false;
}
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))
{
return false;
}
for(var i = 17;i>=0;i --)
{
iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
}
if(iSum%11!=1)
{
return false;
}
return true;
}
alert(cidInfo("3432423432423432"));
</script>

5.验证日期是否合法的JS函数

<script type="text/javascript">
function isDateFormat(txt){ //是否为合法的日期格式:YYYY-MM-DD
if(txt==null || txt == ""){return false;}
else{
var regex = /[0-9]{1,4}-[0-9]{1,2}-[0-9]{1,2}/;
if( regex.test(txt) ){
var noArr = txt.split("-");
var year = eval(noArr[0]);
var month = eval(noArr[1]);
var day = eval(noArr[2]);
if ( year < 1 || month < 1 || month > 12 || day < 1 || day > 31) {return false;}
if ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30){return false;}
if (month == 2){
if ((year % 4 != 0) && day > 29) { return false;}
if (year % 4 == 0){
if(year % 100 == 0 && year % 400 != 0 && day > 29){return false;}
else if (day > 28){ return false;}
}
}
return true;
}else{return false;}
}
}
alert("2008-05-11是日期吗?答:"+isDateFormat("2008-05-11"));
</script>

6.验证手机号码固定电话号码的JS函数

<script type="text/javascript">
function isPhoneNum(txt){ //检测是否为电话号码(固定电话或手机)
return isPhone(txt)||isMobile(txt);
}
function isPhone(txt){//检测是否为固定电话号码
if(txt == null || txt == ""){return false;}
else{
var regex = /[0-9]{1}[0-9]{2,3}-[1-9]{1}[0-9]{5,8}/;
return regex.test(txt);
}
}
function isMobile(txt){//检测是否为手机号码
if(txt == null || txt == ""){return false;}
else{
var regex = /13[0-9]{9}/;
return regex.test(txt);
}
}
alert(isPhone("0574-56157573"));
alert(isMobile("0574-56157574"));
alert(isMobile("13956122541"));
</script>

7.控制文本框输入长度的例子

<script>
function test()
{
if(a.value.length>10){
alert("不能超过10个字符");
a.focus();
}
else
top.location.href="http://www.baidu.com";
}
</script>
<input type="text" name=a><input type="button" value="测试" onclick="test();">

8.JS判断中文的正则表达式

<script>
function strChinese(str){
var pattern = /[^u4E00-u9FA5]/;
return !pattern.test(str);
}
alert(strChinese("中文"))
alert(strChinese("abc"))
alert(strChinese("中文Abc"))
</script>

9.验证email邮箱地址的js

<script type="text/javascript">
function isEmail(str){
res = /^[0-9a-zA-Z_-.]+@[0-9a-zA-Z_-]+(.[0-9a-zA-Z_-]+)*$/;
var re = new RegExp(res);
return !(str.match(re) == null);
}
alert(isEmail("abc.com"));
alert(isEmail(""));
</script>

JS operations on JSON summary

JavaScript、、

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
本文主要是对JS操作JSON的要领做下总结。
在JSON中，有两种结构：对象和数组。

  1. 一个对象以{（左括号）开始，}（右括号）结束。每个“名称”后跟一个:（冒号）；“‘名称/值’ 对”之间运用 ,（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。例如： 
    var o = {
  "xlid": "cxh",
  "xldigitid": 123456,
  "topscore": 2000,
  "topplaytime": "2009-08-20"
}
  2. 数组是值（value）的有序集合。一个数组以[（左中括号）开始，]（右中括号）结束。值之间运用 ,（逗号）分隔。例如： 
    var jsonranklist = [{
  "xlid": "cxh",
  "xldigitid": 123456,
  "topscore": 2000,
  "topplaytime": "2009-08-20"
}, {
  "xlid": "zd",
  "xldigitid": 123456,
  "topscore": 1500,
  "topplaytime": "2009-11-20"
}];

为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js
在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：

  • JSON字符串: 
    var str1 = '{ "name": "cxh", "sex": "man" }';
  • JSON对象: 
    var str2 = { "name": "cxh", "sex": "man" };
  1. JSON字符串转换为JSON对象,要运用上面的str1，必须运用下面的要领先转化为JSON对象： 
    var obj = eval('(' + str + ')');//由JSON字符串转换为JSON对象

    或者

    var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

    或者

    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

    然后，就可以这样读取：

    Alert(obj.name);
Alert(obj.sex);

    特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。

  2. 可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
    例如：

    var last=obj.toJSONString(); //将JSON对象转化为JSON字符

    或者

    var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

    alert(last);

    留心：上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。

js提交表单

JavaScript、

1.document.forms.from.submit();
document.form.sumbit();
document.form.submit.click();
this.form.submit();
以上几种形式的js表单提交在firefox浏览器下是不起作用的
2.必须遵循w3c标准：
1).获得form时应使用getElementById()方法
2).用.submit()方法提交表单
3).button的name/id绝对不能命名为”submit”
4).form中所有的组件（按钮，文本框等）的name/id也不能命名为”submit”

js页面跳转的几种方法

JavaScript

通过js或者html或者php等动态程序都可以方便的实现跳转，这里搜集了几种页面跳转的方式

js方式的页面跳转
1.window.location.href方式
    <script language="javascript" type="text/javascript">
           window.location.href="http://www.dayanmei.com/";
    </script>
2.window.navigate方式跳转
   <script language="javascript">
    window.navigate("top.jsp");
</script>

3.window.loction.replace方式实现页面跳转，注意跟第一种方式的区别
<script language="javascript">
    window.location.replace("http://www.dayanmei.com");
</script>
有3个jsp页面（1.jsp, 2.jsp, 3.jsp），进系统默认的是1.jsp ，当我进入2.jsp的时候， 2.jsp里面用window.location.replace("3.jsp");与用window.location.href ("3.jsp");从用户界面来看是没有什么区别的，但是当3.jsp页面有一个"返回"按钮，调用window.history.go(-1); wondow.history.back();方法的时候，一点这个返回按钮就要返回2.jsp页面的话，区别就出来了，当用 window.location.replace("3.jsp");连到3.jsp页面的话，3.jsp页面中的调用 window.history.go(-1);wondow.history.back();方法是不好用的，会返回到1.jsp 。
4.self.location方式实现页面跳转，和下面的top.location有小小区别
   <script language="JavaScript">
          self.location=’top.htm’;
   </script>
5.top.location
   <script language="javascript">
          top.location=’xx.jsp’;
   </script>

6.不推荐这种方式跳转
    <script language="javascript">
    alert("返回");
    window.history.back(-1);
   </script>

在php程序中,这种方式跳转前面不能有任何输出
<?php
header("url.php");
?>

meta方式实现跳转(content = 3 单位是秒)
<meta http-equiv=refresh content=3;URL="http://www.dayanmei.com">

总结二：

1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2);
2. history.back().
3. window.history.forward()返回下一页
4. window.history.go(返回第几页,也可以使用访问过的URL)
例:
<a href="javascript:history.go(-1);">向上一页</a>
response.Write("<script language=javascript>")
response.Write("if(!confirm(‘完成任务?’)){history.back();}")
response.Write("</script>")
response.Write("<script language=javascript>history.go(-1);</script>")
<a href="javascript:history.go(-1);">向上一页</a>
页面跳转:onclick="window.location.href=’list.aspx’"
P.S.
小技巧(JS引用JS):
<script type=text/javascript>
<!–
if (typeof SWFObject == "undefined") {
document.write(‘<scr’ + ‘ipt type="text/javascript" src="/scripts/swfobject-1.5.js"></scr’ + ‘ipt>’);}
//–>
</script>
Javascript刷新页面的几种方法：
1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand(‘Refresh’)
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href
自动刷新页面的方法:
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">
其中20指隔20秒后跳转到http://www.wyxg.com页面
3.页面自动刷新js版
<script language="JavaScript">
function myrefresh()
{
       window.location.reload();
}
setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
</script>
ASP.NET如何输出刷新父窗口脚本语句
1.   this.response.write("<script>opener.location.reload();</script>");
2.   this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");
3.   Response.Write("<script language=javascript>opener.window.navigate(”你要刷新的页.asp”);</script>")
JS刷新框架的脚本语句
//如何刷新包含该框架的页面用
<script language=JavaScript>
   parent.location.reload();
</script>
//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a>   )
//如何刷新另一个框架的页面用
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>
如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。
<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>