记录一些实用JQ功能

本文介绍了手机端使用JQ的一些实用功能,包括获取屏幕真实高度并设置页面体高度,自动添加输入框清除功能,监听手机端的左右滑动事件,实现通用数据交互等待效果,拦截Android返回键,判断页面是否引入js,以及通过鼠标或手指左右滑动切换内容的实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 获取手机端屏幕宽高(根据头部高度和底部高度动态设置页面体高度)
//网页可见区域宽:document.body.clientWidth 
//网页可见区域高:document.body.clientHeight 
//网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
//网页可见区域高:document.body.offsetHeight (包括边线的宽) 
//网页正文全文宽:document.body.scrollWidth 
//网页正文全文高:document.body.scrollHeight 
//网页被卷去的高:document.body.scrollTop 
//网页被卷去的左:document.body.scrollLeft 
//网页正文部分上:window.screenTop 
//网页正文部分左:window.screenLeft 
//屏幕分辨率的高:window.screen.height 
//屏幕分辨率的宽:window.screen.width 
//屏幕可用工作区高度:window.screen.availHeight 
//屏幕可用工作区宽度:window.screen.availWidth 
/*自动计算并设置内容窗体高度,用户自动适应所有页面布局开始 */
//入参:顶部容器ID、底部容器ID、要计算高度容器ID
function resizePageBodyHeight(topId,bottomId,resetId){
	var totalHeight = document.body.clientHeight;
	//alert(totalHeight);
	var topHeight = $("#"+topId).css("height");
	//alert(parseFloat(topHeight));
	var bottomHeight = $("#"+bottomId).css("height");
	//alert(parseFloat(bottomHeight));
	//alert(parseFloat(totalHeight)-parseFloat(topHeight)-parseFloat(bottomHeight));
	$("#"+resetId).css("height",parseFloat(totalHeight)-parseFloat(topHeight)-parseFloat(bottomHeight));
}
  1. 自动为输入框添加清除图片并实现点击清空输入框值
    清除图片
    CSS代码(具体的样式需要自己实现,此处仅为参考):

    	.clearImg{
    	    display:none;
    	    width: 0.24rem;
    	    height: 0.24rem;
    	    float: right;
    	    margin-top: -0.33rem;
    	    z-index: 30;
    	    position: inherit;
    	    margin-right: 0.1rem;
    	}
    

    HTML和JQ代码:

    	<input name="userId" id="userId" type="text" required="required" placeholder="请输入用户名" class="formInput" >
    	<img alt="" src="imgs/clean.png" class="clearImg imgOne">
    	/*自动为输入框增加清除输入图片开始 */
    	$('input').bind('input propertychange', function() {
    		var name = $(this).val();
    		if(""!=name){
    			$(this).next().css("display","block");
    		}else{
    			$(this).next().css("display","none");
    		}
    	});
    	$(".clearImg").on("tap"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值