移動端檢測javascript
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";
監聽css3動畫結束事件,兼容寫法:css
function whichAnimationEvent(){ var t, el = document.createElement("fakeelement"); var animations = { "animation" : "animationend", "OAnimation" : "oAnimationEnd", "MozAnimation" : "animationend", "WebkitAnimation": "webkitAnimationEnd" } for (t in animations){ if (el.style[t] !== undefined){ return animations[t]; } } }
qruerySelector 選擇器html
在經過DOM的屬性進行選擇是要加上雙引號才能選擇到,例如 : document.querySelector('img[alt=1]') ,這樣是會報錯的,document.querySelector('img[alt=" 1 "]') ,這樣才能選擇到。java
document.querySelectorAll 配合ES6的擴展符能夠直接獲取DOM的數組,而非類數組,要這樣寫 [...document.querySelectorAll('div')]android
iOS移動端點擊陰影如何去除css3
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
清除input或button的默認樣式web
-webkit-appearance: none ;
手機號驗證正則表達式
input type=number 在蘋果上沒效,能夠用input type=tel 代替,由於maxlength屬性在type=number上是沒效的windows
不過若是需求更進一步,不許用戶輸入除數字以外的任何字符,能夠加入下面的oninput事件數組
<input type="tel" name="phone" maxlength="11" class="phone" oninput="this.value=this.value.replace(/[^0-9.]+/,'');">
var reg=/^1[3|4|5|8]\d{9}$/; //驗證手機的正則
input 還有一個pattern屬性,規定用於驗證輸入字段的模式。模式指的是正則表達式。
例子:http://www.w3school.com.cn/tags/att_input_pattern.asp
propertychange 和 input 事件:
1)propertychange只要當前對象的屬性發生改變就會觸發該事件
2)input是標準的瀏覽器事件,通常應用於input元素,當input的value發生變化就會發生,不管是鍵盤輸入仍是鼠標黏貼的改變都能及時監聽到變化
$(function(){
$('#username').bind('input propertychange', function() {
$('#result').html($(this).val().length + ' characters');
});
})
這裏bind同時綁定了input和propertychange兩個方法。
css3動畫停留在完成狀態
animation-fill-mode: forwards; //在應用動畫的元素上加上這個屬性,就能夠在動畫完成後停在結束的狀態,不會返回原始狀態animation屬性以後,否則沒效;
will-change:xxx; //提早告訴瀏覽器那些屬性會發生變化,例如背景色會變,就把xxx寫上background,主要做用是優化css的動畫或變化效果
Swiper插件經常使用屬性備忘//初始化
var mySwiper = new Swiper('.swiper-container',{ initialSlide :2, //設定初始化時slide的索引 autoplay: 5000,//可選選項,自動滑動 direction : 'vertical', //輪播方向,horizontal 水平方向(默認)vertical 垂直方向 speed:300, //輪播速度 loop:ture , //循環 pagination : '.swiper-pagination', //使用分頁器 prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next', //使用前進後退按鈕 effect : 'fade', //切換效果 默認爲slide }) mySwiper.activeIndex //當前頁的索引
/*改變前進後退按鈕的樣式*/
<style> /*Swiper原樣式 */ .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");} /*改變了顏色和加粗的樣式*/ .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");} </style>
將swiper對象的顯示slider定位到指定的索引
mySwiper.slideTo(index);
注意:若是swiper-container是設置了display:none;的話,是沒法初始化的,若是必定要隱藏的話,要麼初始化後再隱藏,要麼用別的方法隱藏(opacity:0;之類的),要麼在外層在套一層div.
單選框、複選框與文字垂直居中
css代碼以下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;
參考: input 對齊
改變input 的 placehoder 屬性的樣式
input::-webkit-input-placeholder { /* WebKit browsers*/ color:#999;font-size:14px; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/ color:#999;font-size:14px; } input::-moz-placeholder { /* Mozilla Firefox 19+*/ color:#999;font-size:14px; } input:-ms-input-placeholder { /* Internet Explorer 10+*/ color:#999;font-size:14px; }
移動端長按會出現複製黏貼菜單按鈕,通過查詢資料,解決了此問題;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
蘋果端能夠css解決:*{-webkit-touch-callout: none;}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
安卓端須要添加js解決:
window.ontouchstart = function(e) {
e.preventDefault();
};
/** *禁止出現右鍵菜單,移動端防止微信長按出現菜單 * */ function contextmenu(){ $(document).on('contextmenu', function(e){ e.preventDefault(); }); }
/** *@desc 自動播放音樂(微信端) 安卓和IOS均可以自動播放 * * @param {dom} dom 直接的dom,不是JQ對象 */ function autoPlay(dom){ if(window.WeixinJSBridge){ WeixinJSBridge.invoke('getNetworkType', {}, function(e) { dom.play(); }, false); }else{ document.addEventListener("WeixinJSBridgeReady", function() { WeixinJSBridge.invoke('getNetworkType', {}, function(e) { dom.play(); }); }, false); } }
//設置rem 50px function setRem() { var cw=document.body.clientWidth || document.documentElement.clientWidth; document.getElementsByTagName("html")[0].style.fontSize = cw / 7.5 + "px"; };