21. 发送AJAX 的时候,能够事先定义个变量 data 而后直接赋值给 ajax这样能够作到修改一个地方,全局改变 或者弄个数组存储全部的date 请求地址也是一个数组
这样能够作到动态改变全部.... 若是接口换掉了,或者说接口修改了,(重写个接口的js,而后直接引入)直接替换个js,全局修改.
22.
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
这几个均可以刷新
window.location.reload();刷新
window.location.href=window.location.href;刷新
window.close();关闭窗口，不弹出系统提示，直接关闭
window.close()至关于self属性是当前窗口
window.parent.close()是parent属性是当前窗口或框架的框架组
页面实现跳转的九种方法实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text
ml; charset=utf-8" />
<title>navigate</title>
<script language="JavaScript">
setTimeout('window.navigate("top.html");',2000);
setTimeout('window.document.location.href="top.html";',2000);
setTimeout('window.document.location="top.html";',2000);
setTimeout('window.location.href="top.html";',2000);
setTimeout('window.location="top.html";',2000);
setTimeout('document.location.href="top.html";',2000);
setTimeout('document.location="top.html";',2000);
setTimeout('location.href="top.html";',2000);
setTimeout('location.replace("top.html")',2000);
//window对象
//document对象
//location对象
//href属性
//1.window.document.location.href
//2.window.document.location
//3.window.location.href
//4.window.location
//5.document.location.href
//6.document.location
//7.location.href
//8.window.navigate
//9.location.replace
//只要使用location方法，和任意的window对象，location对象，href属性连用，均可以页面的跳转////
</script>
</head>
今天朋友问我一个问题，我如今须要屡次匹配同一个内容，可是为何我第一次匹配，直接是 true，而第二次匹配确实 false 呢？
var s1 = "MRLP"; var s2 = "MRLP"; var reg = /mrlp/ig; console.log(reg.test(s1)); console.log(reg.test(s2));
这时候你会发现，咱们在连续使用一个正则匹配其余字符串的时候，第一次匹配是 true，而第二次匹配则是 false。
等等，WHT？我匹配的是 MRLP，并且我还特地加上i 用于不区分大小写，能够为何第一次能够正常匹配，第二次就不行了呢？
这也就是我今天要跟你们说的，关于 JS 中的 lastIndex。
2. lastIndex
在开始讲解以前，首先先带你们简单回顾一下 JS中正则表达式的使用方式。
JS 中正则表达式的使用方式有两种:
第一种是正则表达式对象的方法，经常使用方法有两个。
- exec(str) : 检索字符串中指定的值。返回找到的值，并肯定其位置
- test(str) : 检索字符串中指定的值。返回 true 或 false
第二种是字符串对象的方法，经常使用方法有四个。
- match(regexp) : 找到一个或多个正则表达式的匹配
- replace(regexp) : 替换与正则表达式匹配的子串
- search(regexp) : 检索与正则表达式相匹配的值
- split(search) : 把字符串分割为字符串数组
而这些方法和我们今天所说的 lastIndex 有什么关系呢？
lastIndex 属性用于规定下次匹配的起始位置。
上次匹配的结果是由方法 RegExp.exec( ) 和 RegExp.test( ) 找到的，它们都以 lastIndex 属性所指的位置做为下次检索的起始点。
这样，就能够经过反复调用这两个方法来遍历一个字符串中的全部匹配文本。
并且须要注意，该属性只有设置标志 g才能使用。
既然已经知道这个东西的造成缘由，那么解决起来就很是简单了。
3.解决方案
3.1 第一种解决方案
如上面所述，咱们 lastIndex 属性必需要设置 g 标签才能使用。
那么咱们在匹配的时候，能够根据状况，直接去掉 g 标签就能够啦。
var s1 = "MRLP"; var s2 = "MRLP"; var reg = /mrlp/i; console.log(reg.test(s1)); //true console.log(reg.test(s2)); //true
24. AJAX锚点
window.onhashchange=hashChange;
function hashChange(){
if(!location.hash || location.hash =="#yqq"){
alert("yqq");
}
else if(location.hash =="#ycq"){
alert("ycq")
} else if(location.hash =="#etq"){
alert("etq");
}
}
25.限制文字输入字数超出
<textarea id="aaa" onkeyup="returnLength(10);"></textarea>//使用方法
//定义方法
function returnLength(MaxLength){
var objField = document.getElementById("aaa");
if (objField.value!="")
{
if(objField.value.length>MaxLength)
{
alert("输入的文字长度超过字段限制，只可输入"+MaxLength+"个字");
objField.value=objField.value.substring(0,MaxLength);
objField.focus();
return;
}
}
26.拦截ctrl+s 保存编辑
- function keyDown(e){
- e.preventDefault();
- var currKey=0, e=e||event||window.event;
- currKey = e.keyCode||e.which||e.charCode;
- if(currKey == 83 && (e.ctrlKey||e.metaKey)){
- $('#btn_save').click();
- return false;
- }
- } document.onkeydown = keyDown;
}
27 JAVA incloud 页面
28.阻止Zepto冒泡事件
29.maxlength
textarea 限制最大长度,CSS3属性 不支持IE10如下浏览器
30.writing-mode 让文字竖排
http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/
31.IE 鼠标锁定 setCapture
32.a.filter(x => b.indexOf(x) == -1).concat(b.filter(x => a.indexOf(x) == -1)) 找出数组var a = [1,2,3]; var b = [8,7,6,5,4,3,2,1]; 不一样的值
33.数组去重
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
34. || 的用法 与 三目运算
35.数组排序
var arrDemo = new Array();
arrDemo[0] = 10;
arrDemo[1] = 50;
arrDemo[2] = 51;
arrDemo[3] = 100;
arrDemo.sort(); //调用sort方法后，数组自己会被改变，即影响原数组
alert(arrDemo);//10,100,50,51 默认状况下sort方法是按ascii字母顺序排序的，而非咱们认为是按数字大小排序
arrDemo.sort(function(a,b){return a>b?1:-1});//从小到大排序
alert(arrDemo);//10,50,51,100
arrDemo.sort(function(a,b){return a<b?1:-1});//从大到小排序
alert(arrDemo);//100,51,50,10
36.input的type状态为number时解决maxlength无效的问题
<input type="text" maxlength="5" /> 效果ok，当 <input type="number" maxlength="5" />时maxlength失效，长度能够无限输入。
解放方案：
<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />
37.使用html2canvas实现浏览器截图 http://www.cnblogs.com/yanweidie/p/5203943.html
38.解决ios键盘事件 ==> 点击屏幕外除了键盘的时候,键盘不消息的状况
原文地址:http://www.it165.net/pro/html/201404/12672.html
//判断是否为苹果
var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;
// 元素失去焦点隐藏iphone的软键盘
function objBlur(id,time){
if(typeof id != 'string') throw new Error('objBlur()参数错误');
var obj = document.getElementById(id),
time = time || 300,
docTouchend = function(event){
if(event.target!= obj){
setTimeout(function(){
obj.blur();
document.removeEventListener('touchend', docTouchend,false);
},time);
}
};
if(obj){
obj.addEventListener('focus', function(){
document.addEventListener('touchend', docTouchend,false);
},false);
}else{
throw new Error('objBlur()没有找到元素');
}
}
if(isIPHONE){
var input = new objBlur('input');
input=null;
}
39 元素上下居中(未测试)
父元素相对定位
.margin-auto {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
40.
41.移动端页面禁用长按选中功能
- <style>
- <!--
- * {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- -->
- </style>
42. js 获取浏览器版本信息（全） http://blog.csdn.net/qq_16559905/article/details/51746330
43.for in 循环走的是系统的array prototype 对于 对array的扩展有可能会失效
45,监听全局事件，删除全局事件 地址：http://blog.csdn.net/wl110231/article/details/7597143
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
alert(this.id);
}, false);
缘由：删除监听不支持匿名函数
react用的时候，方法后面不要加括号
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！
react调用：
document.addEventListener('touchmove',_this.returnMr,false);
document.removeEventListener('touchmove',_this.returnMr,false);
returnMr(event){
event.preventDefault();
}
46.
一、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，因此能够用这两个的和来求scrollTop
二、scrollHeight、clientHeight 在DTD已声明的状况下用documentElement，未声明的状况下用body
这里以前有误， document.compatMode 能够用来判断是否声明了DTD， 值为"BackCompat"：未声明，值为"CSS1Compat"：已声明。
因此，判断滚动条是否已拉到页面最底部，能够用以下代码
window.onscroll = function (){
var marginBot = 0;
if (document.compatMode === "CSS1Compat"){
marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop) -
document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
47. var scroll_top = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
或者 var scroll_top = document.documentElement.scrollTop + document.body.scrollTop;
48.苹果高清屏存在1像素滚动条不滚动的问题
解决方案为 % 取余判断若是值不为偶数则+1
获取目标点的scrollTop值，若是不为偶数，则+1
49.事件监听，删除事件监听
document.body.addEventListener('touchmove',_this.returnMr,false);//事件监听
document.body.removeEventListener('touchmove',this.returnMr,false); //删除事件监听
50.var relf = /[^\?]+/g;
ll.match(relf)
["agdsagdasg", "dasgadsgagda"]
其实用split更简单
window.location.href.split("?")[0]
var x = "www.zhidao.baidu.com" //问题，把全部的点换成 / 反斜杠
x.split(".").reverse().join("/")
51.if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href=
"http://weixin.psmchina.cn"
;;
}
else
if
(/iPad/i.test(navigator.userAgent)){
window.location.href=
"http://www.qq.com/pad/"
;;
}
52. 设定不一样的dpr有不一样的大小 [data-dpr="2"] div{ } [data-dpr="3"] div{ }
53.
js获取select标签选中的值 (地址:https://www.cnblogs.com/qq3245792286/p/6390504.html)
var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
jQuery中得到选中select值
第一种方式
$('#testSelect option:selected').text();//选中的文本
$('#testSelect option:selected') .val();//选中的值
$("#testSelect ").get(0).selectedIndex;//索引
54.
<script language="javascript">
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
</script>
55.
<textarea id="a123" class='addrress' style="width:300px; height:20px; font-size: 14px; line-height:20px;" maxlength="64"></textarea>
var autoTextarea = function (elem, extra, maxHeight) { extra = extra || 0; var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window, isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'), addEvent = function (type, callback) { elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent('on' + type, callback); }, getStyle = elem.currentStyle ? function (name) { var val = elem.currentStyle[name]; if (name === 'height' && val.search(/px/i) !== 1) { var rect = elem.getBoundingClientRect(); return rect.bottom - rect.top - parseFloat(getStyle('paddingTop')) - parseFloat(getStyle('paddingBottom')) + 'px'; }; return val; } : function (name) { return getComputedStyle(elem, null)[name]; }, minHeight = parseFloat(getStyle('height')); elem.style.resize = 'none'; var change = function () { var scrollTop, height, padding = 0, style = elem.style; if (elem._length === elem.value.length) return; elem._length = elem.value.length; if (!isFirefox && !isOpera) { padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom')); }; scrollTop = document.body.scrollTop || document.documentElement.scrollTop; elem.style.height = minHeight + 'px'; if (elem.scrollHeight > minHeight) { if (maxHeight && elem.scrollHeight > maxHeight) { height = maxHeight - padding; style.overflowY = 'auto'; } else { height = elem.scrollHeight - padding; style.overflowY = 'hidden'; }; style.height = height + extra + 'px'; scrollTop += parseInt(style.height) - elem.currHeight; document.body.scrollTop = scrollTop; document.documentElement.scrollTop = scrollTop; elem.currHeight = parseInt(style.height); }; }; addEvent('propertychange', change); addEvent('input', change); addEvent('focus', change); change();}; var text = document.getElementById("a123"); autoTextarea(text);// 调用