监听css3动画结束事件,兼容写法:
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 选择器
在通过DOM的属性进行选择是要加上双引号才能选择到,例如 : document.querySelector('img[alt=1]') ,这样是会报错的,document.querySelector('img[alt=" 1 "]') ,这样才能选择到。
document.querySelectorAll 配合ES6的扩展符可以直接获取DOM的数组,而非类数组,要这样写 [...document.querySelectorAll('div')]
iOS移动端点击阴影如何去除
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
清除input或button的默认样式
-webkit-appearance: none ;
手机号验证
input type=number 在苹果上没效,可以用input type=tel 代替,因为maxlength属性在type=number上是没效的
不过如果需求更进一步,不准用户输入除数字之外的任何字符,可以加入下面的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.
单选框、复选框与文字垂直居中
以vertical-align:middle为基础的
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"; };