前端開發筆記

時間 2019-12-05

標籤前端開發筆記简体版

原文原文鏈接

1，頁面作媒體查詢需添加head頭

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
//移動端加上這個標籤纔是真正的自適應複製代碼

<meta content="yes" name="apple-mobile-web-app-capable">//IOS中safari容許全屏瀏覽複製代碼

<meta content="black" name="apple-mobile-web-app-status-bar-style">
//IOS中Safari頂端狀態條樣式複製代碼

<meta content="telephone=no" name="format-detection"> //忽略將數字變爲電話號複製代碼

<meta content="email=no" name="format-detection"> //忽略識別email複製代碼

2，監聽視頻是否加載完成，禁止選擇文本，禁止長按連接與圖片彈出菜單去除A鏈接input標籤，點擊出現自帶的陰影樣式屏蔽陰影:

videoElem.addEventListener('canplaythrough',function(){});//監聽視頻是否加載完成複製代碼

2.1禁止選擇文本和默認的菜單事件：

Html,body{
    -webkit-user-select: none; user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none;
}複製代碼

pointer-events: none;//禁用鼠標：複製代碼

ime-mode:disabled;//禁用輸入法：複製代碼

-webkit-touch-callout:none;//禁用系統默認菜單：複製代碼

pointer-events: none;//禁用觸發鼠標或者觸屏事件：複製代碼

selection { background: #e2eae2; }//自定義文本選擇：複製代碼

-webkit-touch-callout:none;//禁用ios彈出各類操做窗口複製代碼

2.2，禁止長按連接與圖片彈出菜單

1，圖片必須是背景圖，javascript

2，css禁止：php

*{
  margin: 0;
  padding: 0;
  - moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}複製代碼

3，Js禁止css

window.ontouchstart = function (e) {
    e.preventDefault();
};複製代碼

2.3去除a標籤input標籤，點擊出現自帶的陰影樣式

設置input標籤不能編輯設置屬性：readOnly="true"html

outline:none;去掉input標籤的邊框java

a,input{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
node

Textarea固定寬高resize:none;
jquery

滾動條卡頓在body上加css屬性 -webkit-overflow-scrolling: touch; android

2.4屏蔽標籤默認陰影:

-webkit-appearance:none;   複製代碼

能夠同時屏蔽輸入框怪異的內陰影，解決iOS下沒法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性後，iOS下默認仍是帶有圓角的，不過可使用 border-radius屬性修改。ios

2.5漸變透明背景

background:-moz-linear-gradient(top,#70D4F5,#E5F4FB);//火狐background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#70D4F5), to(#E5F4FB)); /* Safari 4-5, Chrome 1-9*/background: -webkit-linear-gradient(top, #70D4F5, #E5F4FB); //Safari5.1 Chrome 10+複製代碼

兩塊背景色web

.bg{width:100%;height:100%;position: fixed;background-size: 100%;background-image:linear-gradient(to top,red 0%,red 49%,yellow 50%,yellow 100%) ;}background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));複製代碼

3，禁止屏幕滑動

$(document).ready(function(e) {function stopScrolling( touchEvent ) {touchEvent.preventDefault();touchEvent.stopPropagation();}
//註釋此句會致使click事件和選擇按鈕點擊無效複製代碼

document.addEventListener( 'touchstart' , stopScrolling , false );

document.addEventListener( 'touchmove' , stopScrolling , false );

4，旋轉動效

.right_top{position: absolute;width: 14%;right: 3%;top: 44%;border: none;}.center{position: absolute;width: 18%;right: 9%;top: 49%;border: none;}.right_top,.center{animation: roll 3s linear 0s;-webkit-animation: roll 3s linear 0s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;animation-direction: normal;-webkit-animation-direction: normal;animation-fill-mode: both;-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;-webkit-transform-origin:50% 50%;}@keyframes roll{0% {transform: translateX(0%) translateY(0%) scaleX(1) scaleY(1) rotate(0deg) skewX(0deg) skewY(0deg) ;}100% {transform: translateX(0%) translateY(0%) scaleX(1) scaleY(1) rotate(360deg) skewX(0deg) skewY(0deg) ;}}@-webkit-keyframes roll{0% {-webkit-transform: translateX(0%) translateY(0%) scaleX(1) scaleY(1) rotate(0deg) skewX(0deg) skewY(0deg) ;}100% {-webkit-transform: translateX(0%) translateY(0%) scaleX(1) scaleY(1) rotate(360deg) skewX(0deg) skewY(0deg) ;}}複製代碼

4，選中圖片radio按鈕也會被選上

<input type="radio" value= "lanrentuku" id= "333" name="aaa" ><lable for=」333」>;複製代碼

5，視頻循環播放

var vList = ['視頻地址url1', 'url2', '...']; // 初始化播放列表var vLen = vList.length; // 播放列表的長度var curr = 0; // 當前播放的視頻var video = new Video();video.addEventListener('end', play);play();function play(e) {video.src = vList[curr];video.load(); // 若是短的話，能夠加載完成以後再播放，監聽 canplaythrough 事件便可video.play();curr++;if (curr >= vLen) curr = 0; // 播放完了，從新播放}複製代碼

6，HTML中讓表單input等文本框爲只讀不可編輯的方法

方法1: onfocus=this.blur() 當鼠標放不上就離開焦點

<input type="text" name="input1" value="中國" onfocus=this.blur()> 複製代碼

方法2:readonly

<input type="text" name="input1" value="中國" readonly="true"> 複製代碼

方法3: disabled

<input type="text" name="input1" value="中國" disabled="true">複製代碼

7，去除Android click事件的背景色

-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;複製代碼

8，驗證手機號

function checkMobile(value){var reg = /^0?13|4|5|8\d{8}$/;if (reg.test(value)) {return true;}else{return false;};};複製代碼

9，驗證郵箱

function checkEmail(s){if (s.length > 100) {return false;};
var regu = "[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?";
var re = new RegExp(regu);複製代碼

if (s.search(re) != -1) 
{return true;} 
else {return false;
};
};複製代碼

10，頁面切換動效

$(window).load(function(){  var body = $("body");  var html = $("html");  var content = $(".container");  var input = $(".info input");  var bigtitle = $(".bigtitle");  input.focus(function(){  content.css({"position":"relative", "overflow":"auto"});  stopPreventEventDefault = true;  });  input.blur(function(){ content.css({"position":"relative", "overflow":"hidden"});  stopPreventEventDefault = false;  });  });複製代碼

var bool = true;$(function(){var isH =window.innerHeight;console.log(isH);window.onresize = function(){if(window.innerHeight<isH){$("body").css("height",isH + "px");$(".content").css("height",isH + "px");}}複製代碼

$(window).load(function(){$("input").focus(function(){var h=$(window).height()+800;bool=false;$(".form,.ov").css({"position":"relative","overflow-y":"scroll","padding-bottom":"20%","overflow-x":"hidden","height":h});stopPreventEventDefault=false;});$("input").blur(function(){bool=true;$(".form,.ov").css({"position":"relative","overflow":"hidden","padding-bottom":"0%"});stopPreventEventDefault=false;});});});複製代碼

11，禁止屏幕滑動

$('html,body').on(touchmove,function(e){e.preventDefault()});複製代碼

12，阻止冒泡事件

event.stopPropagation();

13，獲取鼠標位置

alert("Current mouse position: " + event.pageX + ", " + event.pageY );
//獲取鼠標當前相對於頁面的座標複製代碼

14，表單內容若是是必填的，則加紅星標識.

$(function(){//若是是必填的，則加紅星標識.$("form :input.required").each(function(){   var required = $("<strong class='high'> *</strong>"); //建立元素$(this).parent().append(required); //而後將它追加到文檔中});});複製代碼

15，去除webkit的滾動條

element::-webkit-scrollbar{display: none;}複製代碼

16，去除button在ios上的默認樣式

-webkit-appearance: none;border-radius: 0複製代碼

17，頁面高度渲染錯誤

document.documentElement.style.height = window.innerHeight + 'px'; 
複製代碼

18，疊加區高亮

-webkit-tap-highlight-color:rgba(0,0,0,0); 
複製代碼

19，禁掉手機頁面的分享

function onBridgeReady(){
  WeixinJSBridge.call('hideOptionMenu');
  }
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    }else if (document.attachEvent){
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
  }else{
  	onBridgeReady();
  }複製代碼

20，表單提交滾動

$(window).load(function(){
	var body = $("body");
	var html = $("html");
	var biaodan = $(".biaodan input");
	input.focus(function(){
		biaodan.css({"position":"relative", "overflow":"auto"});
		stopPreventEventDefault = true;
	});
	input.blur(function(){
		biaodan.css({"position":"relative", "overflow":"hidden"});
		stopPreventEventDefault = false;
	});
});複製代碼

2爲單頁面裏input標籤

<script>window.onresize = function() {document.body.style.height = '568px';document.body.css('overflow-y', 'auto');};</script>複製代碼

3從新計算

<script>$(function() {resize();});$(window).load(function(){resize();});function resize() {var sw = $(window).width();var sh = $(window).height();var h = $(".wrapper").height();var r = parseFloat(sw/300, 10);var top = h*(r-1)/2;var left = (sw-300)/2;$(".wrapper").css({"-webkit-transform": "scale("+r+","+r+")",});}</script>複製代碼

5單頁面表單解決安卓手機出現輸入法屏幕被壓縮問題

<script>var isH = window.innerHeight;</script><script>$(function(){window.onresize = function(){if(window.innerHeight<isH){$("body").css("height",isH + "px");}}});
</script>複製代碼

4晃動動效

.pointer{animation:swing 1.5s linear infinite 0.2s;-webkit-animation:swing 1.5s linear infinite 0.2s;}@keyframes swing {0%, 50%, 56%, 62%, 68%, 75%, 100% { transform: rotate(0deg); }53%, 65% { transform: rotate(20deg); }59%, 72% { transform: rotate(-20deg); }}@-webkit-keyframes swing {0%, 50%, 56%, 62%, 68%, 75%, 100% { -webkit-transform: rotate(0deg); }53%, 65% { -webkit-transform: rotate(20deg); }59%, 72% { -webkit-transform: rotate(-20deg); }}複製代碼

21，垂直居中

.content {width: 300px;height: 300px;background: orange;margin: 0 auto; //水平居中position: relative; //脫離文檔流top: 50%; //偏移margin-top: -150px;}2.content {width: 300px;height: 300px;background: orange;margin: 0 auto; //水平居中position: relative; //脫離文檔流top: 50%; //偏移transform: translateY(-50%);}3 body {display: flex;align-items: center; //定義body的元素垂直居中justify-content: center; //定義body的裏的元素水平居中}.content {width: 300px;height: 300px;background: orange;}複製代碼

22，設置錨點

//跳同頁面
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
//寫法一
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
//寫法二，是a標籤能夠這樣
<a name="div1">div1</a>
<a name="div2">div2</a>
<a name="div3">div3</a>複製代碼

//跳到不一樣頁
//index.html頁面
<a href="index2.html#div1">問題二的解答</a>
//index2.html頁面
<div id="div1">div1</div>複製代碼

24，循環遍歷

var var42 = "";var a = $("input[name='check4-2']");for (var i = 0; i < a.length; i++) {    if (a[i].checked) {        temp = a[i].value;        var42 += temp;    }}複製代碼

25，判斷橫豎屏

//判斷手機橫豎屏狀態：function hengshuping(){if(window.orientation==180||window.orientation==0){alert("豎屏狀態！")}if(window.orientation==90||window.orientation==-90){alert("橫屏狀態！")}}window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);//移動端的瀏覽器通常都支持window.orientation這個參數，經過這個參數能夠判斷出手機是處在橫屏仍是豎屏狀態。從而根據實際需求而執行相應的程序。經過添加監聽事件onorientationchange，進行執行就能夠了。@media screen and (orientation: portrait) { }@media screen and (orientation:landscape) { }複製代碼

26，解決屏幕閃白現象

.css {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);}複製代碼

27，pc和手機端上下滑動事件

(‘body’).swipeDown(function(e){ alert(‘swipeDown’);//偶爾有效 })(‘body’).swipeLeft(function(){ alert(‘swipeLeft’);//ok }) $(‘body’).swipeRight(function(){ alert(‘swipeRight’);//ok })//手機端上下滑動先禁掉手機自帶的上下滑動事件document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);複製代碼

28，菜單滑出與消失

$(".fan").click(function(){var biaozi=$(this).next().css("display");$(".show").slideUp();if(biaozi=="none")$(this).next().slideDown(500);else$(this).next().slideUp(500);}複製代碼

29，閃動光點

.guang_yi{animation:guang 0.5s linear infinite 0.5s;-webkit-animation:guang 1s linear infinite 0.5s;}.guang_er{animation:guang 0.5s linear infinite 0.8s;-webkit-animation:guang 1s linear infinite 0.8s;}.guang_san{animation:guang 0.5s linear infinite 1.1s;-webkit-animation:guang 1s linear infinite 1.1s;}@keyframes guang {0% {opacity: 0;}100% {opacity: 1.0;}}@-webkit-keyframes guang {0% {opacity: 0;}100% {opacity: 1.0;}}複製代碼

30，正反交錯旋轉的圓

.animate7{animation: index1_animate7 2s linear 0s;-webkit-animation: index1_animate7 2s linear 0s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;animation-direction: normal;-webkit-animation-direction: normal;animation-fill-mode: none;-webkit-animation-fill-mode: none;-ms-animation-fill-mode: none;-webkit-transform-origin:50% 50%;}.animate9{animation: index1_animate7 4s linear 0s;-webkit-animation: index1_animate7 4s linear 0s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;animation-direction: normal;-webkit-animation-direction: normal;animation-fill-mode: none;-webkit-animation-fill-mode: none;-ms-animation-fill-mode: none;-webkit-transform-origin:50% 50%;}@keyframes index1_animate7{0%{transform:rotate(0deg);}100% {transform:rotate(360deg);}}@-webkit-keyframes index1_animate7{0%{-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(360deg);}}.animate8{animation: index1_animate8 3s linear 0s;-webkit-animation: index1_animate8 3s linear 0s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;animation-direction: normal;-webkit-animation-direction: normal;animation-fill-mode: none;-webkit-animation-fill-mode: none;-ms-animation-fill-mode: none;-webkit-transform-origin:50% 50%;}@keyframes index1_animate8{0%{transform:rotate(0deg);}100% {transform:rotate(-360deg);}}@-webkit-keyframes index1_animate8{0%{-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(-360deg);}}複製代碼

31，去除div給img附帶的下邊距

body{margin:0;padding:0;-webkit-text-size-adjust:none;color:#000;}img{border:0;vertical-align:bottom;}複製代碼

32，使用對齊文本

$ensp;等於半個中文字符寬度

$emsp;等於一箇中文字符寬度

最高心法：經過添加<span style="opacity:0;">填充文字寬度</span>

33，block和inline，inline-block的區別inline-table，list-item能夠爲div設置前綴圖片

Block可讓行內元素轉換爲塊級元素

inline可讓塊級元素轉換爲行內元素，可是不能設置寬度，效果和inline-block相似，可是後者能夠設置寬度。

33，彈動動效

.tandong{-webkit-animation:bounce 1s .2s ease both;-moz-animation:bounce 1s .2s ease both;}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px)}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)}40%{-moz-transform:translateY(-30px)}60%{-moz-transform:translateY(-15px)}}複製代碼

34，閃動

.scan{-webkit-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;animation:scanup 1s linear 3 0s;-webkit-animation:scanup 1s linear 3 0s;}@-webkit-keyframes scanup {0%{ opacity:0; }100% { opacity:1; }}@keyframes scanup {0%{ opacity:0; }100% { opacity:1; }}複製代碼

35，指紋掃描動畫

.scan{

-webkit-transform-origin:50% 50%;

-o-transform-origin:50% 50%;

transform-origin:50% 50%;

animation:scanup 2s linear infinite 0s;

-webkit-animation:scanup 2s linear infinite 0s;

}

@-webkit-keyframes scanup {

0%{ -webkit-transform:translate(0,0) }

100% { -webkit-transform:translate(0,-20%) }

}

@keyframes scanup {

0%{ transform:translate(0,0) }

100% { transform:translate(0,-20%) }

}

36，出現隨機一段字符

<script>$(function(){/back home/$(".backHome").click(function(){window.location.href="index_support.html";});function randomStr(num){var chars = "dasfdhsdfgj2346158709fds";var len = chars.length;var str = "";for(i=0;i<num;i++){str+=chars.charAt(Math.floor(Math.random()*len));}return str;}// alert(randomStr(10));$(".message").html(randomStr(10));});// function getfirstpage(){// window.location.href="index_support.html"// }</script>複製代碼

37，Edm排版

<tr><td><table></table></td></tr><tr><td><table></table></td></tr><tr><td><table></table></td></tr></table>複製代碼

38，自動輸入

<script>function focusTxt_en(){marquee_en(1);}function marquee_en(i){var showString= "OceanStor 9000 V100R001C30";var stringLength= showString.length;$(".serch_input").val(showString.substring(0, i));i++;var timeID= setTimeout("marquee_en("+i+")",100);if (i > stringLength){clearTimeout(timeID);}$(".serch_input").blur();//每獲取一次焦點就取消一次焦點，防止平板觸摸鍵盤自動彈出}</script><body><input type="text" class="serch_input" onfocus="focusTxt_en()" value="" title="Please enter keywords."></body>複製代碼

39，關於對話流的對話框背景鋪滿問題

40，事件委託 $(selector).live("click",callback)

jQuery的live事件綁定機制很是強大，普通的bind只能在dom元素生成後才能綁定事件，而live則能夠在任什麼時候候，即便元素尚未生成時就能綁定事件，

41，解決微信沒法播放音樂

function audioAutoPlay(id){ var audio = document.getElementById(id); 
var play = function() {          
document.removeEventListener("WeixinJSBridgeReady", play); 
document.removeEventListener("YixinJSBridgeReady", play); 
audio.play(); 
audio.pause(); 
// document.removeEventListener("touchstart", play, false); }; 
audio.play(); 
audio.pause(); 
//weixin document.addEventListener("WeixinJSBridgeReady", play, false); 
//yixin document.addEventListener('YixinJSBridgeReady', play, false); 
// document.addEventListener("touchstart", play, false); } 
audioAutoPlay('audio1');複製代碼

42，關於瀏覽器的判斷

if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/6./i)=="6."){ alert("IE 6"); } else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i)=="7."){ alert("IE 7"); } else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8."){ alert("IE 8"); } else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i)=="9."){ alert("IE 9"); }複製代碼

43，判斷是pc端仍是移動端

function browserRedirect() {var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp = sUserAgent.match(/midp/i) == "midp";var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";var bIsAndroid = sUserAgent.match(/android/i) == "android";var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";document.writeln("您的瀏覽設備爲：");if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {document.writeln("phone");} else {document.writeln("pc");}}browserRedirect();複製代碼

43，判斷是不是微信瀏覽器

<script type="text/javascript">function isMicroMessenger(){var result=false;var ua=navigator.userAgent;if(us.indexOf('MicroMessenger')>-1){result=true;}return result;}</script>複製代碼

44，取出數組的相同項並由大到小排序

<script>var a=[1,3,1,4,2,3,6,2,6,1,5];var c=[];var zi;var k=0;var len_a=a.length;for(var i=0;i<len_a;i++){for(var j=0;j<len_a;j++){if(a[i]==a[j]&&i!=j){zi=a[i];}}var len_t=c.length;// alert(len_t);if(len_t==0){c[k]=zi;k=k+1;//console.log(c);}else if(len_t>0){var t=c.indexOf(zi);if(t==-1){c[k]=zi;k=k+1;//console.log(c);}}}for(var f=0;f<c.length;f++){for(var r = f + 1;r<c.length;r++){if(c[f]<c[r]){var temp = c[r];c[r] = c[f];c[f] = temp;}}console.log(c);}</script>複製代碼

46，iframe裏面傳值問題

46.1子頁面內容

// iframe裏面的子頁面的值傳到父頁面var data1=a;var data2=fxzi;parent.GetData(data1,data2);//子頁面調用父頁面的函數//window.parent.sharefun();複製代碼

46.2父頁面內容

// iframe裏面的子頁面的值傳到父頁面
function GetData(data1,data2){// if(data==a)//alert(data1);a=data1;fxzi=data2;// alert(a);// alert(fxzi);sharefun();}複製代碼

47，錯誤SyntaxError illegal character的解決方法

注意：函數調用過程當中中英文符號的使用，例如（，或；）

48，讓浮動元素填充內容

<div class="clear"></div>1. clear{overflow:auto/hidden;zoom:1;}2. clear:after{content:」dddd」;height:0;visibility:none;clear:both;}3. 添加一個空的p標籤而後給p標籤設置樣式清除浮動複製代碼

49，獲取連接後面的參數

<script>function getPar(par){//獲取當前URLvar local_url = document.location.href;//獲取要取得的get參數位置var get = local_url.indexOf(par +"=");if(get == -1){return false;}//截取字符串var get_par = local_url.slice(par.length + get + 1);//判斷截取後的字符串是否還有其餘get參數var nextPar = get_par.indexOf("&");if(nextPar != -1){get_par = get_par.slice(0, nextPar);}return get_par;}alert(getPar("p"));</script>複製代碼

50，stop（）函數參數問題

stop(true)等價於stop(true,false): 中止被選元素的全部加入隊列的動畫。

stop(true,true):中止被選元素的全部加入隊列的動畫，但容許完成當前動畫。

stop()等價於stop(false,false):中止被選元素當前的動畫，但容許完成之後隊列的全部動畫。

stop(false,true):當即結束當前的動畫到最終效果，而後完成之後隊列的因此動畫

51手動開啓硬件加速，在你打開或顯示一個窗口頁面時設置樣式裏 styles: { top: 0, bottom: 0, hardwareAccelerated: true,//開啓硬件加速 scrollIndicator: 'none' }

52，還回上一頁

onclick="history.go(-1)"< a href="javascript:history.go(-1)">返回</ a>複製代碼

53，文檔首字母設置

text-transform:capitalize; 首字母大寫

text-transform:uppercase;全部單詞大寫

text-transform:lowercase;全部單詞小寫

54，禁止觸摸移動事件

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);複製代碼

55，解決ie8兼容background

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='....', sizingMethod='scale'); 能夠解決ie不識別background-size的屬性

56，localStorage與sessionStorage用法

localStorage.setItem('myCat', 'Tom');設置

var cat = localStorage.getItem("myCat");拿取

localStorage.removeItem("myCat");移除

sessionStorage.setItem('can','true');設置值

var can = sessionStorage.getItem('can');獲取值

頁面關閉值被清除

57，關於input標籤獲取值問題

var scbn=$("input[name='na"+scan+"']:checked").length;

判斷被選中的個數

ti4=parseInt($("input[name=na4]:checked").val());

獲取被選中的按鈕的value值

$("input[name='na"+i+"']").attr("checked",false);

全部選中重置

58，滾動條，滑動效果

window.onload=function(){var scrollT = $(window).scrollTop();if(scrollT == 0){$(".product").addClass("slide");setTimeout(function(){$(".prodcDiv .rowEvs,.prodcDiv .more").addClass("slide");},800);}$(window).scroll(function(){var scrollT = $(window).scrollTop();if(scrollT > 50){$(".solution").addClass("slide");setTimeout(function(){$(".data,.soluDiv .more").addClass("slide");},800);}});}複製代碼

60，禁用頁面的右鍵菜單

<script>$(document).ready(function(){$(document).bind("contextmenu",function(e){return false;});});</script>複製代碼

62，判斷瀏覽器類型

<script>// Firefox 2 and aboveif (Misplaced &.browser.version= "1.8" ){// do something}// Safariif( $.browser.safari ){// do something}// Chromeif( $.browser.chrome){// do something}// Operaif( $.browser.opera){// do something}// IE6 and belowif (Misplaced &.browser.version <= 6 ){alert("ie6")}// anything above IE6if (Misplaced &.browser.version6){alert("ie6以上")}});</script>複製代碼

63，輸入框文字獲取和失去焦點

<input type="text" class="text1"/><script>$(document).ready(function() {$("input.text1").val("Enter your search text here.");textFill( $('input.text1') );}); function textFill(input){ //input focus text functionvar originalvalue = input.val();input.focus( function(){if( $.trim(input.val()) == originalvalue ){input.val('');}}).blur( function(){if( $.trim(input.val()) == '' ){input.val(originalvalue);}});}</script>複製代碼

64，獲取鼠標位置

<script>

    $(document).ready(function () {

        $(document).mousemove(function(e){

            $('#XY').html("X : " + e.pageX + " | Y : " + e.pageY);

        });

    });

</script>
複製代碼

65，判斷元素是否存在

<script>
    $(document).ready(function() {
        if ($('#XY').length){
            alert('元素存在!')
        }else{
            alert('元素不存在!')
        }
    });
</script>
複製代碼

66，點擊div也能夠跳轉

<div style="width:200px;height:40px;background:#eee;cursor:pointer;">
    <a href="http://www.cssrain.cn">home</a>
</div>
<script>
    $(document).ready(function() {
        $("div").click(function(){
            window.location=$(this).find("a").attr("href");
            return false;
        });
    });
</script>
複製代碼

67，根據瀏覽器大小添加不一樣的樣式

<style>    
body.large{        
font-size:20px;    
}    
body.large a{
        font-size:20px;
        color:red;
    }
</style>
</head>
<body>
<ul>
    <li><a title="百　度" target="_blank" href="http://www.baidu.com/index.php?tn=monline_5_dg">百　度</a></li>   
    <li><a title="Google" target="_blank" href="http://i.firefoxchina.cn/parts/google_rdr.html">Google</a></li>    
    <li><a title="新浪" target="_blank" href="http://www.sina.com.cn/">新浪</a></li>
</ul>
<script>    
$(document).ready(function() {
        function checkWindowSize() {
            if ( $(window).width() > 900 ) {
                $('body').addClass('large');
            }else{
                $('body').removeClass('large');
            }
        }
        $(window).resize(checkWindowSize);
    });
</script>複製代碼

68，設置div在屏幕中央

<style>    
#XY{
        width:460px;
        height:300px;
        background:#aaa;
    }
</style>
</head>
<body>
<div id="XY">
</div>
<script>
    $(document).ready(function() {
        jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", ( $(window).height() - this.height() )/ 2+$(window).scrollTop() + "px");
            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
            return this;
        }
        //use        
        $("#XY").center();
    });
</script>複製代碼

69，關閉全部動畫效果

<style>
    #XY{
        width:40px;
        height:100px;
        background:#aaa;
    }
</style>
<button id="XY1" class="box">開始動畫</button>
<button id="XY2" class="box">關閉動畫</button>
<button id="XY3" class="box">開啓動畫</button>
<div id="XY" class="box"></div>
<script>
    $(document).ready(function() {
        $("#XY1").click(function(){
            animateIt();
        });
        $("#XY2").click(function(){
            jQuery.fx.off = true;
        });
        $("#XY3").click(function(){
            jQuery.fx.off = false;
        });
    });
    function animateIt() {
        $("#XY").slideToggle("slow");
    }
</script>複製代碼

70，檢測鼠標的右鍵和左鍵

<style>
    #XY{
        width:40px;
        height:100px;
        background:#aaa;
    }
</style>
<div id="XY" class="box"></div>
<script>
    $(document).ready(function() {
        $("#XY").mousedown(function(e){
            alert(e.which)  // 1 = 鼠標左鍵 ; 2 = 鼠標中鍵; 3 = 鼠標右鍵
        })
    });
</script>
複製代碼

71，回車提交表單

<style>
    #XY{
        width:40px;
        height:100px;
        background:#aaa;
    }
</style>
<input type="input" />
<script>
    $(document).ready(function() {
        $("input").keyup(function(e){
            if(e.which=="13"){
                alert("回車提交!")
            }
        })
    });
</script>
複製代碼

72，設置全局Ajax參數

<style>
    #load{
        display:none;
    }
</style>
<div id="load">加載中...</div>
<input type="button" id="send1" value="ajax"/>
<div id="resText1"></div>
<script>
    $(document).ready(function() {
        $('#send1').click(function() {
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){
                        $("#resText1").empty();
                        $.each(data.items, function( i,item ){
                            $("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
                            if ( i == 3 ) {
                                return false;
                            }
                        });
                    }
            );
        });
        $.ajaxPrefilter(function( options ) {
            options.global = true;
        });
        $("#load").ajaxStart(function(){
            showLoading(); //顯示loading
            disableButtons(); //禁用按鈕
        });
        $("#load").ajaxComplete(function(){
            hideLoading(); //隱藏loading
            enableButtons(); //啓用按鈕
        });
    });
    function showLoading(){
        $("#load").show();
    }
    function hideLoading(){
        $("#load").hide();
    }
    function disableButtons(){
        $("#send1").attr("disabled","disabled");
    }
    function enableButtons(){
        $("#send1").removeAttr("disabled");
    }
</script>複製代碼

73，獲取選中的下拉框

<input type="button" id="send1" value="get"/>
<select id="someElement">
    <option>一班</option>
    <option>二班</option>
    <option>三班</option>
</select>
<script>
    function getObj(){
        var $obj = $('#someElement').find('option:selected');
        alert( $obj.val() );
    }
</script>
複製代碼

74，切換複選框

<button>toggle</button>
<input type="checkbox" value="1" />籃球
<input type="checkbox" value="2" />足球
<input type="checkbox" value="3" />羽毛球
<script>
    var tog = false;
    $('button').click(function(){
        $("input[type=checkbox]").attr("checked",!tog);
        tog = !tog;
    });
</script>複製代碼

75，使用siblings()來選擇同輩元素

<style>
    li.active{
        font-size:20px;
        color:red;
    }
</style>
<ul id="nav">
    <li>Google</li>
    <li>百　度</li>
    <li>新浪</li>
</ul>
<script>
    /* 不這樣作
     $('#nav li').click(function(){
     $('#nav li').removeClass('active');
     $(this).addClass('active');
     });
     */
    //替代作法是
    $('#nav li').click(function(){
        $(this).addClass('active')
                .siblings().removeClass('active');
    });
</script>複製代碼

76，檢查某個元素是否包含某個類或是元素

<style type="text/css">
    body {
        margin: 10px auto;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
        color: #999999;
    }
    a {
        color:#333399;
    }
    a:hover {
        text-decoration: none;
    }
    a.pdf {
        background: url(img/file-red.gif) no-repeat;
        padding-left: 16px;
    }
    a.zip {
        background: url(img/file-orange.gif) no-repeat;
        padding-left: 16px;
    }
    a.psd {
        background: url(img/file-blue.gif) no-repeat;
        padding-left: 16px;
    }
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<p><a href="http://www.webdesignerwall.com/file/wdw-logo.pdf">PDF file</a>(wdw-logo.pdf)</p>
<p><a href="http://www.webdesignerwall.com/file/wdw-logo.psd">PSD file</a>(wdw-logo.psd)</p>
<p><a href="http://www.webdesignerwall.com/file/wdw-logo.zip">Zip file</a>(wdw-logo.zip)</p>
<script type="text/javascript">
    $(document).ready(function(){
        $("a[href$='pdf']").addClass("pdf");
        $("a[href$='zip']").addClass("zip");
        $("a[href$='psd']").addClass("psd");
    });
</script>複製代碼

77，在一段時間以後自動隱藏或關閉元素

<p><button>Run</button></p>
<div class="first">Test</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function() {
            $("div").slideUp(300).delay(3000).fadeIn(400);
        });
        /*
         //這是1.3.2中咱們使用setTimeout來實現的方式
         setTimeout(function() {
         $('div').fadeIn(400)
         }, 3000);
         */
        //而在1.4以後的版本可使用delay()這一功能來實現的方式
        //$("div").slideUp(300).delay(3000).fadeIn(400);
    });
</script>複製代碼

78，boder-radius愛心

.heart{    position: relative;    width: 160px;    height: 200px;}.heart:before{    position: absolute;    left: 20px;    width: 80px;    height: 120px;    content: " ";    background: #f00; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg);}.heart:after{ position: absolute; left: 48px; top: 0px; width: 80px; height: 120px; content: " "; background: #f00; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px 100px 0 0; -webkit-transform: rotate(45deg);}<div class="heart"></div>複製代碼

79，動態綁定事件

<script type="text/javascript">$(document).ready(function(){/*// 爲table裏面的td元素綁定click事件，無論td元素是一直存在仍是動態建立的// jQuery 1.4.2以前使用的方式$("table").each(function(){　　$("td", this).live("click", function(){　　　　$(this).toggleClass("hover");　　});});// jQuery 1.4.2 使用的方式$("table").delegate("td", "click", function(){　　$(this).toggleClass("hover");});*/// jQuery 1.7.1使用的方式$("table").on("click","td",function(){$(this).toggleClass("hover");});});</script>複製代碼

80，圓角bug

某些Android手機圓角失效

background-clip: padding-box;

81，長按觸發事件

1<script>var timeOutEvent=0;$(function(){$(".stage").on({touchstart: function(e){timeOutEvent = setTimeout("longPress()",2000);e.preventDefault();},touchmove: function(){clearTimeout(timeOutEvent);timeOutEvent = 0;},touchend: function(){clearTimeout(timeOutEvent);if(timeOutEvent!=0){alert("你這是點擊，不是長按");}return false;}})});function longPress(){timeOutEvent = 0;alert("長按事件觸發發");}</script>2$(window).load(function(){q=0;var timer;var timeout = 10;var touchshijian = $("#touch");touchshijian[0].addEventListener("touchstart", function(e) {e.preventDefault();q = 0;timer = setInterval(function() {q = q+1;if(q > timeout) {q=0;window.location.href="indexinner.php";clearInterval(timer);}},100);});touchshijian[0].addEventListener("touchend", function(e) {e.preventDefault();if(q <= timeout) {clearInterval(timer);}});});</script>複製代碼

82，animate詳解

Animate（{width:」100px」},2000,liners,function(){內容}）

1width後面的參數非數字必加引號

2回調函數必須是function不能直接是change（）否則會在開始時就調用change（）

83，解決彈窗

添加一個div層設置透明度爲0便可

position: absolute;width:100%;height:100%;top:0;left:0;background: rgba(0,0,0,0);-webkit-touch-callout: none;-webkit-user-select: none;複製代碼

84，關於stop（）函數參數分析

關於stop（）函數參數詳解第一個參數設置爲true，中止全部動畫，爲false僅中止當前動畫，第二個參數設置爲true，全部動畫保持完成狀態，爲false則僅停在被中止的地方

85，發短信打電話

<a href="tel:10086">10086</a>     //點擊後直接撥打10086
<a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a>  //點擊後直接給c1586@qq.com發郵件，主題爲：TestObject           
<a href="sms:10086?body=message_body">給 10086 發短信</a>          //點擊後直接給10086發信息，消息內容默認爲message_body   
<a href="geopoint:116.281469,39.866035">個人位置</a> //點擊後直接發送本身的位置複製代碼

86，禁止瀏覽器打開，僅在微信瀏覽器能夠打開

<script>var useragent = navigator.userAgent;if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {// 這裏警告框會阻塞當前頁面繼續加載alert('已禁止本次訪問：您必須使用微信內置瀏覽器訪問本頁面！');// 如下代碼是用javascript強行關閉當前頁面var opened = window.open('about:blank', '_self');opened.opener = null;opened.close();}</script> 複製代碼

87，判斷是否註冊，沒有調到註冊頁

function register(url){var f1 = localStorage.getItem("form1");if(f1 == 'true'){window.open(url);}else{window.location.href='register.html?source='+ document.getElementById('source').value;}}複製代碼

88，target

e = e || window.event;e.target = e.target || e.srcElement;alert(e.target.nodeName);複製代碼

89，解決ie8不能識別indexof問題

if (!Array.prototype.indexOf){Array.prototype.indexOf = function(elt /, from/){var len = this.length >>> 0;var from = Number(arguments[1]) || 0;from = (from < 0)? Math.ceil(from): Math.floor(from);if (from < 0)from += len;for (; from < len; from++){if (from in this &&this[from] === elt)return from;}return -1;};}複製代碼

90，ie8瀏覽器SCRIPT5007: 沒法獲取未定義或 null 引用的屬性「0」

數組最後元素的逗號要去掉

91，解決蘋果手機在placeholder裏面內容不能換行問題

var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示';$('textarea').val(placeholder);$('textarea').focus(function() {if ($(this).val() == placeholder) {$(this).val('');}});$('textarea').blur(function() {if ($(this).val() == '') {$(this).val(placeholder);}});複製代碼

92，解決ipad不兼容background-attachment: fixed;

body:before {content: ' ';position: fixed;z-index: -1;top: 0;right: 0;bottom: 0;left: 0;background: url(path/to/image) center 0 no-repeat;background-size: cover;}複製代碼

93，兼容禁止屏幕放大縮小

<script type="text/javascript">window.onload=function () {document.addEventListener('touchstart',function (event) {if(event.touches.length>1){event.preventDefault();}})var lastTouchEnd=0;document.addEventListener('touchend',function (event) {var now=(new Date()).getTime();if(now-lastTouchEnd<=300){event.preventDefault();}lastTouchEnd=now;},false)}</script>複製代碼

94，解決跨域問題

1，經過綁定一樣的域名，在同級下訪問

2，經過創建代理服務

95，建立幀動畫

window.requestAnimFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){window.setTimeout(callback, 1000 / 60);};})();(function animloop(){requestAnimFrame(animloop);render();})();
複製代碼

96，給後端傳&特殊字符會被轉義

解決辦法能夠經過escape轉義，而後在unescape轉義回來傳輸

97，數組經過關鍵詞排序

students:[
  {name:'jspang',age:32},
  {name:'Panda',age:30},
  {name:'PanPaN',age:21},
  {name:'King',age:45}
]複製代碼

//數組對象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}複製代碼

sortStudent:function(){
     return sortByKey(this.students,'age');
}複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。