扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
手机浏览多是由开源浏览器内核webkit衍生出来的，而这个浏览器正是谷歌浏览器，所以说，只要是谷歌浏览器支持的jquery框架，手机浏览器都支持，当然会有一定的差异性，推荐使用jquerymobile,在兼容性处理方面可能会更好一点！
为镇宁等地区用户提供了全套网页设计制作服务，及镇宁网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、镇宁网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
最近做移动端的项目，涉及触摸事件很频繁；我接下来介绍下三个基本的触摸事件：
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
下面是我刚写的一个小demo，可以复制体验下，测试的话打开浏览器的开发者工具的手机模式，点击屏幕移动就能体验到了，滚动鼠标是无效的哦~
!DOCTYPE html
html
head
meta charset="UTF-8"
titless/title
style.sb{width: 100%;height: 200px;background-color: red}/style
script typet="text/javascript" src=""/script
/head
body
div style="height: 3000px"
div /div
/div
script
//touchmove 手指不放发生
$('body').on('touchmove',function(){
$('.sb').css({'display':'none'}) //隐藏div
})
//touchend 手指放开发生
$('body').on('touchend',function(){
$('.sb').css({'display':'initial','position':'fixed'}) //显示，固定div
})
/script
/body
/html
1、jquery 监听页面滚动使用的方法：.scroll()。
2、新建一个HTML文档，定义body的高度。
3、创建JS脚本，使用.scroll() 方法监听页面滚动。
4、如果页面发生滚动，则执行函数，弹出一个hello。
5、保存文件，查看.scroll()监听页面滚动的效果。
//声明一个为0的变量做记录值
doucument.body.addEvenetListener('touchstart',function(e){
//记录下按下时的e.touches[0].clientY或者e.touches[0].pageY;
});
document.body.addEventListener('touchmove',function(e){
//获取当前e.touches[0].clientY或者e.touches[0].pageY 并且与之前记录的值比较 当前值大于之前值的话就可以判断当前动作是在向上滑动 然后做翻页的操作即可
});
如果用现成的js框架做的话 有一个叫quo.js的框架非常不错
jquery手机触屏左右滑动切换栏目
$(function(){
TouchSlide({
slideCell:"#slideBox",
titCell:".myhd
ul",
//开启自动分页
autoPage:true
，此时设置
titCell
为导航元素包裹层
mainCell:".bd
ul",
effect:"leftLoop",
autoPage:true,//自动分页
autoPlay:true
//自动播放
});
div
id="slideBox"
class="slideBox"
div
class="bd"
ul
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news1.png"
//a
a
class="tit"
href="#"墨西哥教师罢工
与警察激烈冲突/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news2.jpg"//a
a
class="tit"
href="#"日右翼游行纪念钓岛"国有化"周年/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news3.jpg"//a
a
class="tit"
href="#"女兵竞选美国小姐鼓励女性自强/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news4.jpg"//a
a
class="tit"
href="#"济南现“最窄人行道”
仅0.2米宽/a
/li
/ul
/div
div
class="myhd"
ul
style="height:
28px;"/ul
/div
/div
本文实例讲述了jQuery实现手机号正则验证输入及自动填充空格功能。分享给大家供大家参考，具体如下：
先来看看运行效果（在删除时连删即可）：
具体代码：
!DOCTYPE
html
html
lang="en"
head
meta
charset="UTF-8"
titleDocument/title
/head
body
input
type="text"
id="inp"
script
src="jquery-1.12.3.min.js"/script
script
$(function(){
$("#inp").keyup(function(){
/*
手机号验证时：
var
pattern
=
/^1[3|4|5|7|8]\d{1}\s\d{4}\s\d{4}$/;
pattern.test(str);
*/
_self
=
$(this);
if(_self.val().length
==
3
||
_self.val().length
==
8){
var
str
=
_self.val()+"
";
_self.val(str);
}
});
});
/script
/body
/html
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
正则表达式在线生成工具：
更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网