记录日常点点滴滴,欢迎来到我的小站。

0%

如何实现刷新当前页面呢?借助js你将无所不能。

1,reload 方法,该方法强迫浏览器刷新当前页面。
语法:location.reload([bForceGet])
参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。
语法: location.replace(URL)
通常使用: location.reload() 或者是 history.go(0) 来做。
此方法类似客户端点F5刷新页面,所以页面method=”post”时,会出现”网页过期”的提示。
因为Session的安全保护机制。
当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。
如果有这种应用: 需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not IsPostback 的。
这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
代码: location.replace(location.href);

阅读全文 »

jquery中使用load加载外部html文件,不执行JavaScript的解决办法
最近自己在写jquery的扩展插件

遇到个问题就是,使用load加载外部的html文件,但是加载了想要加载的内容之后,发现JavaScript不执行,并没有加载进来,上网看了看解决办法

找到答案如下

load加载的外部文件会把Script部分删除掉

所以推荐使用$.get来异步加载外部页面,具体代码如下

1
2
3
4
5
6
$.get('partial.html', function(result){
$result = $(result);

$result.find('#content').appendTo('#new_content');
$result.find('script').appendTo('#new_content');
}, 'html');

利用jQuery对对象进行排序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>jQuery数组和字符串--对象数组排序</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>

<script type="text/javascript">

<!--
$(
function()
{
var students =[
{'sid':'ST001','sname':'张三','sage':18},
{'sid':'ST004','sname':'赵六','sage':23},
{'sid':'ST002','sname':'李四','sage':42},
{'sid':'ST003','sname':'王五','sage':35}
];
//表格显示
$.each(students,
function(index, value)
{
$('#ia').append('<tr><td>' + value.sid +
'</td><td>' + value.sname +
'</td><td>' + value.sage + '</td></tr>');
}
);
//按照SID排序
var sidOrder = students.sort(
function(a, b)
{
if(a.sid < b.sid) return -1;
if(a.sid > b.sid) return 1;
return 0;
}
);
$.each(sidOrder,
function(index, value)
{
$('#ib').append('<tr><td>' + value.sid +
'</td><td>' + value.sname +
'</td><td>' + value.sage + '</td></tr>')
}
);
//按照SAGE排序
var sageOrder = students.sort(
function(a, b)
{
return (a.sage - b.sage);
}
);
$.each(sageOrder,
function(index, value)
{
$('#ic').append('<tr><td>' + value.sid +
'</td><td>' + value.sname +
'</td><td>' + value.sage + '</td></tr>')
}
);
}
);
//-->
</script>
</head>
<body>
<h5>未排序对象数组:</h5>
<table id='ia' border="1"></table>

<h5>按照SID排序对象数组:</h5>
<table id='ib' border="1"></table>

<h5>按照SAGE排序对象数组:</h5>
<table id='ic' border="1"></table>

</body>
</html>

使用jquery从后台获取JSON数据,显示

知识点:

  1. 使用了require JS 框架

  2. 用Jquery的两种方法获取后台数据

1)ajax 方法,传回的都是json数据

2)getJSON, 直接封装了一些参数{command : GetRegsiterJsonData}

阅读全文 »

最近做的项目好不容易生成了自己的JSON文件, 放在服务器上提示

1
XMLHttpRequest cannot load http://www.ttwinbug.com/XXXX.json No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.
阅读全文 »

pop 方法

移除数组中的最后一个元素并返回该元素。
arrayObj.pop( )
必选的 arrayObj 引用是一个 Array 对象。
说明
如果该数组为空,那么将返回 undefined。

shift 方法

移除数组中的第一个元素并返回该元素。
arrayObj.shift( )
必选的 arrayObj 引用是一个 Array 对象。
说明
shift 方法可移除数组中的第一个元素并返回该元素。
Java代码

1
2
3
4
var arr = new Array(0,1,2,3,4);  
var remove = arr.pop();
alert(remove);
alert(arr.length);
阅读全文 »

jQuery代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$.ajax({
type:"GET",
url: "http://www.ttwinbug.com/json/json.php",
dataType:"json",
jsonp:'jsoncallback',
global: false,
success:function(data){
//json文件中已product为主要项
var productList = data.product;
//str变量为需要读取的指定id
$.each(str, function(y, yu){
for(var i = 0; i<productList.length; i++){
if(str[y] == productList[i].idlist.ID){
title = productList[i].idlist.post_title;
content = productList[i].idlist.post_content;
attribe[0]=productList[i].idlist.attrib.recording_media;
attribe[1]=productList[i].idlist.attrib.image_sensor_size;
attribe[2]=productList[i].idlist.attrib.aspect_ratio;
attribe[3]=productList[i].idlist.attrib.lens_mount;
$.each(attribe, function(zindex, zvalue){
if(!attribe[zindex]){
attribe[zindex] = "-";
}
});
jsonData += "product:" + title + ",<br/> introduce:" + content + ",<br/> attribe:" + attribe + "<br/><br/><br/>";
}
}
});

alert(jsonData);
$('.cp_title').html(jsonData);
//以下部分为全部读取json里的内容
/*for(var i=0; i<productList.length; i++){

var title = productList[i].idlist.post_title;
var content = productList[i].idlist.post_content;
var attribe = Array();
attribe[0]=productList[i].idlist.attrib.recording_media;
attribe[1]=productList[i].idlist.attrib.image_sensor_size;
attribe[2]=productList[i].idlist.attrib.aspect_ratio;
attribe[3]=productList[i].idlist.attrib.lens_mount;
$.each(attribe, function(zindex, zvalue){
if(!attribe[zindex]){
attribe[zindex] = "-";
}
});

jsonData += "product:" + title + ",<br/> introduce:" + content + ",<br/> attribe:" + attribe + "<br/><br/><br/>";
}*/


}
});
阅读全文 »

使用方法

1
2
3
var checkNum = /^[A-Za-z0-9]+$/;

checkNum.test($(this).val());

1.非负整数 /^/d+$/

2.正整数 /^[0-9][1-9][0-9]$/

3.非正整数 /^((-/d+)|(0+))$/

4.负整数 /^-[0-9][1-9][0-9]$/

5.整数 /^-?/d+$/

6.非负浮点数 /^/d+(/./d+)?$/

7.正浮点数 /^(([0-9]+/.[0-9][1-9][0-9])|([0-9][1-9][0-9]/.[0-9]+)|([0-9][1-9][0-9]))$/

8.非正浮点数 /^((-/d+(/./d+)?)|(0+(/.0+)?))$/

9.负浮点数 /^(-(([0-9]+/.[0-9][1-9][0-9])|([0-9][1-9][0-9]/.[0-9]+)|([0-9][1-9][0-9])))$/

10.浮点数 /^(-?/d+)(/./d+)?$/

11.数字 /^/d+(/.{1}/d+)?$/

12.由26个英文字母组成的字符串 /^[A-Za-z]+$/

13.由26个英文字母的大写组成的字符串 /^[A-Z]+$/

14.由26个英文字母的小写组成的字符串 /^[a-z]+$/

15.由数字和26个英文字母组成的字符串 /^[A-Za-z0-9]+$/

16.由数字、26个英文字母或者下划线组成的字符串 /^/w+$/

17.匹配所有单字节长度的字符组成的字符串 /^[/x00-/xff]+$/

18.匹配所有双字节长度的字符组成的字符串 /^[^/x00-/xff]+$/

19.字符串是否含有双字节字 /[^/x00-/xff]+/

20.email地址 /^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$/

或者 /w+([-+.]w+)@w+([-.]w+).w+([-.]w+)*/

21.url地址 /^[a-zA-z]+://(/w+(-/w+))(/.(/w+(-/w+)))(/?/S)?$/

或者 /http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?/

22.匹配中文字符的正则 /[u4e00-u9fa5]/

23.匹配双字节字符(包括汉字在内) /[^x00-xff]/

应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

1
2
3
4
5
6

String.prototype.len=function(){

return this.replace([^x00-xff]/g,”aa”).length;

}

24.匹配空行的正则 /n[s| ]*r/

25.匹配HTML标记的正则 /<(.)>.</1>|<(.*) />/

26.匹配首尾空格的正则 /(^s*)|(s*$)/

应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现,如下:

1
2
3
4
5
String.prototype.trim = function(){

return this.replace(/(^s*)|(s*$)/g, “”);

}

27.匹配IP地址的正则 /(d+).(d+).(d+).(d+)/

应用:利用正则表达式匹配IP地址,并将IP地址转换成对应数值的Javascript程序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function IP2V(ip){

re=/(d+).(d+).(d+).(d+)/g;

if(re.test(ip)){

return RegExp.$1*Math.pow(255,3))+

RegExp.$2*Math.pow(255,2))+

RegExp.$3*255+RegExp.$4*1;

}

else{

throw new Error(“Not a valid IP address!”);

}

}

其实直接用split函数来分解可能更简单,程序如下:

1
2
3
4
5
var ip=”10.100.20.168″;

ip=ip.split(“.”);

alert(“IP值是:”+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1));

28.去除字串中重复的字符的javascript程序

1
2
3
4
5
6
7
8
9
var s=”abacabefgeeii”;

var s1=s.replace(/(.).*1/g,”$1″);

var re=new RegExp(“["+s1+"]“,”g”);

var s2=s.replace(re,”");

alert(s1+s2); //结果为:abcefgi

/*使用后向引用取出包括重复的字符,再以重复的字符建立第二个表达式,取到不重复的字符,

两者串连。这个方法对于字符顺序有要求的字符串可能不适用。*/

29.用正则表达式从URL地址中提取文件名的javascript程序

1
2
3
4
5
s=”http://www.9499.net/page1.htm“;

s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″);

alert(s); //结果为page1

30.限制表单文本框输入内容

只能输入中文:

onkeyup=”value=value.replace(/[^u4E00-u9FA5]/g,”)”

onbeforepaste=”clipboardData.setData(‘text’,

clipboardData.getData(‘text’).replace(/[^u4E00-u9FA5]/g,”))”

只能输入全角字符:

onkeyup=”value=value.replace(/[^uFF00-uFFFF]/g,”)”

onbeforepaste=”clipboardData.setData(‘text’,

clipboardData.getData(‘text’).replace(/[^uFF00-uFFFF]/g,”))”

只能输入数字:

onkeyup=”value=value.replace(/[^d]/g,”)”

onbeforepaste=”clipboardData.setData(‘text’,

clipboardData.getData(‘text’).replace(/[^d]/g,”))”

只能输入数字和英文:

onkeyup=”value=value.replace(/[W]/g,”)”

onbeforepaste=”clipboardData.setData(‘text’,

clipboardData.getData(‘text’).replace(/[^d]/g,”))”

31.验证文件名由字母,数字,下滑线组成 /^((/w+)(/.{1})(/w+))$/

32.匹配日期(1900-1999)

/^19/d{2}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3([0|1])))$/

33.匹配日期(2000-2999)

/^20/d{2}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3([0|1])))$/

34.匹配日期时间

/^(1|2/d{3}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3([0|1]))))( (/d{2}):(/d{2}):(/d{2}))?$/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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>
<title>Formatter and colorer of raw JSON code</title>
<meta name="description" content="A tool to format and color raw JSON code">
<meta name="keywords" content="Json, Printer, Colorer, Format, Color">
<script>
// we need tabs as spaces and not CSS magin-left
// in order to ratain format when coping and pasing the code
window.TAB = " ";
function IsArray(obj) {
return obj &&
typeof obj === 'object' &&
typeof obj.length === 'number' &&
!(obj.propertyIsEnumerable('length'));
}
function Process(){
var json = document.getElementById("RawJson").value;
var html = "";
try{
if(json == "") json = "/"/"";
var obj = eval("["+json+"]");
html = ProcessObject(obj[0], 0, false, false, false);
document.getElementById("Canvas").innerHTML = "<PRE class='CodeContainer'>"+html+"</PRE>";
}catch(e){
alert("JSON is not well formated:/n"+e.message);
document.getElementById("Canvas").innerHTML = "";
}
}
function ProcessObject(obj, indent, addComma, isArray, isPropertyContent){
var html = "";
var comma = (addComma) ? "<span class='Comma'>,</span> " : "";
var type = typeof obj;

if(IsArray(obj)){
if(obj.length == 0){
html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>"+comma, isPropertyContent);
}else{
html += GetRow(indent, "<span class='ArrayBrace'>[</span>", isPropertyContent);
for(var i = 0; i < obj.length; i++){
html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
}
html += GetRow(indent, "<span class='ArrayBrace'>]</span>"+comma);
}
}else if(type == 'object' && obj == null){
html += FormatLiteral("null", "", comma, indent, isArray, "Null");
}else if(type == 'object'){
var numProps = 0;
for(var prop in obj) numProps++;
if(numProps == 0){
html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>"+comma, isPropertyContent);
}else{
html += GetRow(indent, "<span class='ObjectBrace'>{</span>", isPropertyContent);
var j = 0;
for(var prop in obj){
html += GetRow(indent + 1, "<span class='PropertyName'>"+prop+"</span>: "+ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));
}
html += GetRow(indent, "<span class='ObjectBrace'>}</span>"+comma);
}
}else if(type == 'number'){
html += FormatLiteral(obj, "", comma, indent, isArray, "Number");
}else if(type == 'boolean'){
html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
}else if(type == 'function'){
obj = FormatFunction(indent, obj);
html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
}else if(type == 'undefined'){
html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");
}else{
html += FormatLiteral(obj, """, comma, indent, isArray, "String");
}
return html;
}
function FormatLiteral(literal, quote, comma, indent, isArray, style){
if(typeof literal == 'string')
literal = literal.split("<").join("&lt;").split(">").join("&gt;");
var str = "<span class='"+style+"'>"+quote+literal+quote+comma+"</span>";
if(isArray) str = GetRow(indent, str);
return str;
}
function FormatFunction(indent, obj){
var tabs = "";
for(var i = 0; i < indent; i++) tabs += window.TAB;
var funcStrArray = obj.toString().split("/n");
var str = "";
for(var i = 0; i < funcStrArray.length; i++){
str += ((i==0)?"":tabs) + funcStrArray[i] + "/n";
}
return str;
}
function GetRow(indent, data, isPropertyContent){
var tabs = "";
for(var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
if(data != null && data.length > 0 && data.charAt(data.length-1) != "/n")
data = data+"/n";
return tabs+data;
}
</script>
<style>
.Canvas
{
font: 10pt Georgia;
background-color:#ECECEC;
color:#000000;
border:solid 1px #CECECE;
}
.ObjectBrace
{
color:#00AA00;
font-weight:bold;
}
.ArrayBrace
{
color:#0033FF;
font-weight:bold;
}
.PropertyName
{
color:#CC0000;
font-weight:bold;
}
.String
{
color:#007777;
}
.Number
{
color:#AA00AA;
}
.Boolean
{
color:#0000FF;
}
.Function
{
color:#AA6633;
text-decoration:italic;
}
.Null
{
color:#0000FF;
}
.Comma
{
color:#000000;
font-weight:bold;
}
PRE.CodeContainer{
margin-top:0px;
margin-bottom:0px;
}
</style>
</head>
<body>
<div style="float:right;font-size:11px;">Quick Json Formatter 1.0 Copyright (c) 2008 Vladimir Bodurov <a href="http://www.ttwinbug.com">http://www.ttwinbug.com</a></div>
<h3 style="margin-bottom:2px">Formatter and colorer of raw JSON code</h3>
<div>Enter your JSON here:</div>
<textarea id="RawJson" cols="100" rows="25">
</textarea><BR/>
<input type="Button" value="Format" onClick="Process()"/>
<div id="Canvas" class="Canvas"></div>
</body>
</html>

经本人整理后正确能够运行的版本, 网上好多去掉内容,或是故意写错的版本,此处代码为修正代码,复制到文本编辑器内,保存成html格式即可运行。

为了保证自己辛苦写的javascript代码不被直接copy走,很多人都想对自己的javascript代码进行加密处理
使用以下代码可以完美的进行加密处理。
直接上javascript代码



基本上实现对普通js进行压缩加密解密的过程。