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);// 調用