前端开发之常用方法

最新推荐文章于 2022-12-27 14:00:56 发布

weixin_30872157

最新推荐文章于 2022-12-27 14:00:56 发布

阅读量163

点赞数

文章标签：前端 json javascript ViewUI

原文链接：http://www.cnblogs.com/xingxia/p/js_methods.html

版权

在进行前端开发中，经常会使用一些常用的方法来解决问题，汇总在此。

一　　表单相关

　　1）获取下拉框的值

$('#名称').val();   //直接定位元素，获取值即可

　　2）获取单选框/复选框的值

$('元素 :checked').val();  //定位元素并且是被选中的，获取其值即可

//判断单选框/复选框是否被选中
$('复选框元素').is(':checked');

　3）文本框

resize:none;  //禁止文本框被拖拽

　　4）表单提交

//禁止表单提交事件
1）onSubmit事件
<form οnsubmit="return false;">
    ...
</form>

2） 使用ajax进行提交
$.click(function(e){
        var e = e || window.event;
        e.preventDefault();  //阻止提交
        window.event.returnValue = false; //兼容IE6~8
});

　　5）表单监听事件

//添加页面中的按键监听事件    
$(document).ready(function(){ 
        document.onkeydown = keyDownEvent;
}); 
//具体回车事件
function keyDownEvent(e)
{
         var theEvent = e || window.event;
         var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
         if(theEvent.keyCode == 13){
            jump();//todo 调用方法
            return false;
         }
         return true;
}

二　　　　js初始化加载

　　1）在body里面写初始化方法

<body οnlοad='init()'>
</body>

<script type="text/javascript">
    function init(){
         // 初始化内容       
    }
</script>

　　2） window.onload = function(){}

<script type="text/javascript">
    window.οnlοad=function(){ 
        // 初始化内容 
    }
</script>

　　3) 按照页面执行的顺序，添加初始化方法

<script type="text/javascript">
    function init() { 
        // 初始化内容
    }; 
    init(); 
</script>

　　4）jQuery的加载方式

// 1.$(function(){})
<script type="text/javascript">
    $(function() {// 初始化内容
    });  
</script>
// 2.$(document).ready(function(){})
<script type="text/javascript">
    $(document).ready(function(){  
        // 初始化内容
    });  
</script>

// 3.jQuery(function($){})
<script type="text/javascript">
    jQuery(function($){  
        // 初始化内容
    });  
</script>

　　注： js的初始化方式是在页面中的内容全部加载完毕之后，执行初始化方法，jQuery是等待页面数据全部加载，以及页面部分元素（不包括视频，图片）

三　　常用函数

　　1）JSON.parse与JSON.stringify

json.parse : 将字符串解析成对象
json.stringify:  将对象解析成字符串

　　注：在将PHP内容直接json输出到页面中可以作为对象来进行数据处理并且不需要使用引号进行包含

　　　　其他

　　1）获取当前访问的地址的域名

function getUrl(){
		var domain = '';
		url = location.href;
		offset = url.indexOf('?');
		if(offset >= 0){
			domain = url.substring(0,offset);
		}else{
			domain = url;
		}
		return domain;
}

　　2）刷新图片验证码

$('#id_img_captcha').click(function() {  
        var timestamp = new Date().getTime();  
        $(this).attr("src", $("#id_url_captcha").val() + '?'+ timestamp);  
});

　　3）定时关闭弹框

var n = 3;
function showTime() {
      n--;
      if (n == 0) 
           $('.pop-small').hide(); //需要进行关闭的节点
      else
           setTimeout('showTime()', 1000);
}

　　4）监测大写键盘是否开启

function detectCapsLock(event){
        var e = event||window.event;
        var o = e.target||e.srcElement;
        var oTip = o.nextSibling;
        var keyCode = e.keyCode||e.which; // 按键的keyCode 
        var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住
        if (
            ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键 
            || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键
        ){
            oTip.style.display = ''; //开启，显示提示信息
        }else{
            oTip.style.display = 'none'; //关闭，隐藏提示信息
        } 
}
document.getElementById('password').onkeypress = detectCapsLock; //给元素添加监听事件

　　5）获取当前的时间（年-月-日时：分：秒）

<script type="text/javascript">
 $(function(){
 	setInterval(function(){
 		var time = new Date();
 		var m = time.getMonth() + 1;
 		var t = time.getFullYear() + '-' + m + '-' + time.getDate() + ' ' + time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
 		$('#time').html(t);
 	},1000);
 });
</script>

　　6）发送手机号成功提示

function displayMobile() {
        var mobile = $(".tel").val();
        var phoneNo = mobile.substr(0, 3) + '****' + mobile.substr(7, mobile.length);
        alert('已向您输入的手机号码  ' + phoneNo + ' 发送短信验证码。'); //进行提示
};

　　7）发送验证码之后的倒计时

//函数外部定义时间变量
    var seconds = 60;
    //内部方法
    $(".yzm-btn").attr("disabled", "disabled");   //禁止点击
    var _res = setInterval(function() {
		$('.yzm-btn').addClass('small27').text(seconds + '秒后重新获取');  //倒计时显示
		seconds--;
		if (seconds <= 0) {
				$(".yzm-btn").removeAttr("disabled");  //移除 禁用属性
			        $('.yzm-btn').removeClass('small27').text('获取验证码');  //显示提示信息
			        seconds = 60;
				clearInterval(_res);
		}
    }, 1000);

　　8）对于viewport

一般对于专门为PC端开发的网页，如果放在手机端那么他的样式可能会发生错乱，影响用户的正常访问，这个时候就需要进行适配

<meta name="viewport" content="width=devide-width,height=devide-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

转载于:https://www.cnblogs.com/xingxia/p/js_methods.html

weixin_30872157

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端开发之常用方法

在进行前端开发中，经常会使用一些常用的方法来解决问题，汇总在此。一　　表单相关　　1）获取下拉框的值$('#名称').val(); //直接定位元素，获取值即可　　2）获取单选框/复选框的值$('元素 :checked').val(); //定位元素并且是被选中的，获取其值即可　//判断单选框/复选框是否被选中$('复选框元素...
复制链接

扫一扫