js 一些小技巧

最新推荐文章于 2024-08-02 09:02:37 发布
最新推荐文章于 2024-08-02 09:02:37 发布
阅读量126 收藏 1
点赞数
分类专栏： javascript 文章标签： div居中 div拖拽 回车触发 回车导致 jquery ViewUI

 

1,表单中,回车导致下一个表单元素聚焦

/***
enter to make next object focus
*/
var pressFocusNext=function(event,next22){
    if(!event ||event==undefined){
        event=window.event; 
    }
    if(event.keyCode==13){//Enter
	    if(typeof next22 == 'string'){
	        next22=com.whuang.hsj.$$one(next22);
	    }
	    if(next22 && next22!=undefined){
	    	next22.focus();
	    }
	    
    }
}

 使用场景:

 <form id="leaveMessageForm" style="margin-bottom: 4px;width: 100%"  >
                    
                        <ul>
                            <li><label>单位名称</label><input type="text" name="company" placeholder="单位名称"  οnkeypress="pressFocusNext(event,'username')" /></li>
                            <li><label>称呼</label><input type="text" name="username" placeholder="您的称呼" οnkeypress="pressFocusNext(event,'email')" /></li>
                            <li><label>电话</label><input type="text" name="email" placeholder="您的电话号码"  οnkeypress="pressFocusNext(event,'object')" /></li>
                            <li><label>留言标题</label><input type="text" name="object" placeholder="留言标题"  οnkeypress="pressFocusNext(event,'content')" /></li>
                            <li class="ly" style="width:100%;" ><label  >留言内容</label>
                            
                                <textarea  name="content" placeholder="留言内容" ></textarea>
                            
                            </li>
                            <li class="submit"><input type="button" value="提交" οnclick="ajaxSubmitMessage()"  /></li>
                            <li class="reset"><input type="reset"  id="resetId" value="重写"/></li>

                        </ul>
                        
                    </form>

 

2,对某个表单控件回车触发指定事件

/***
 enter to to something identified by responseEvent
 */
var pressEnterTo=function(event,responseEvent){
    if(!event ||event==undefined){
        event=window.event;
    }
    if(event.keyCode==13){//Enter
        responseEvent();
    }
};

 使用场景:

<div id="register_user">

                                        <h2  style="margin-right: -15px;margin-left: -15px" ><span class="fontawesome-user"></span>注册</h2>

                                        <form action="#" method="POST">

                                            <fieldset class="submit2">

                                                <p><label for="username">用户名</label></p>

												<p><input type="text" name="username" placeholder="用户名"
														  οnkeypress="pressFocusNext(event,$('#register_user input[name=password]'))"
														  required></p>

                                                <p><label for="password">密码</label></p>

												<p><input type="password" name="password" placeholder="密码"
														  οnkeypress="pressFocusNext(event,$('#repassword'))" required>
												</p>

                                                <p><label for="repassword">确认密码</label></p>

												<p><input type="password" id="repassword" placeholder="确认密码"
														  οnkeypress="pressFocusNext(event,$('#register_user input[name=email]'))"
														  required></p>

                                                <p><label for="email">电子邮箱</label></p>

												<p><input type="text" name="email" placeholder="电子邮箱"
														  οnkeypress="pressEnterTo(event,user.register)" required></p>

                                                <p><input type="button" id="registerBtn" οnclick="user.register();"
                                                          value="注册"></p>

                                            </fieldset>

                                        </form>

                                    </div> <!-- end login -->

 对最后一个表单元素回车时触发登录

3,使div居中

/***
 * make dialog in center
 */
com.whuang.hsj.centerJQueryPos = function ($div22, isApplyVertical/*是否竖直方向也居中*/, isIncludeScroll/*是否包含滚动条高度*/) {
	var width = $div22.width();
	var height = $div22.height();


	var left = (getInner().width - width) / 2 + com.whuang.hsj.getScroll().left;
	var param = {'left': left};
	if (arguments.length === 1 || isApplyVertical) {//Vertical direction
		var top = (getInner().height - height) / 2;
		if (isIncludeScroll) {
			top = top + com.whuang.hsj.getScroll().top;
		}
		param['top'] = top;
	}
	$div22.css(param);
};//centerJQueryPos
com.whuang.hsj.centerX = function ($div22) {//只水平方向居中
	com.whuang.hsj.centerJQueryPos($div22, false, false);
};
com.whuang.hsj.centerXY = function ($div22) {//水平方向和竖直方向同时居中
	com.whuang.hsj.centerJQueryPos($div22, true, false);
};
//Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
    return {
        top:document.documentElement.scrollTop || document.body.scrollTop,
left:document.documentElement.scrollLeft || document.body.scrollLeft,
height:document.documentElement.scrollHeight ||document.body.scrollHeight
};
};
 
 
 使用场景:
 
 
if (isCenter) {
			   jqueryObjParam.$dialogPanel.show('normal', function () {
				   com.whuang.hsj.centerXY(jqueryObjParam.$dialogPanel);
				   jqueryObjParam.$dialogPanel.css("position", 'fixed');//保证固定在可视范围内
			   });

		   }
 
 
 注意:div的position的值必须是fixed或absolute
 
 
4,获取浏览器可视区域的大小,与是否有滚动条无关
 
 
//Cross browser gets the size of Visual area window,Have nothing to do with scroll bars
var getInner=(function() {
	// alert(typeof window.innerWidth !== 'undefined');
	if (typeof window.innerWidth !== 'undefined') {//Notice:'undefined' is right
		return function(){
			return {
				width : window.innerWidth,
				height : window.innerHeight
			}
		}
	} else {
		return function(){
			return {
				width : document.documentElement.clientWidth,
				height : document.documentElement.clientHeight
			}
		}
	}
})();
 
 
 
 
 
 
 
 
5,日期格式化
 
 
/***
format date or time
*/
Date.prototype.format =function(format)
{
	var o = {
		"M+" : this.getMonth()+1, //month
		"d+" : this.getDate(), //day
		"h+" : this.getHours(), //hour
		"m+" : this.getMinutes(), //minute
		"s+" : this.getSeconds(), //second
		"q+" : Math.floor((this.getMonth()+3)/3), //quarter
		"S" : this.getMilliseconds() //millisecond
	}
	if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
	(this.getFullYear()+"").substr(4- RegExp.$1.length));
	for(var k in o)if(new RegExp("("+ k +")").test(format))
	format = format.replace(RegExp.$1,
	RegExp.$1.length==1? o[k] :
	("00"+ o[k]).substr((""+ o[k]).length));
	return format;
}
Date.prototype.format2 = function(fmt)   
{ //author: meizz   
  var o = {   
    "%m" : this.getMonth()+1+'',                 //月份   
    "%d" : this.getDate() + '',                  //日   
    "%H" : this.getHours()+'',                   //小时   
    "%M" : this.getMinutes()+'',                 //分   
    "%S" : this.getSeconds()+''                //秒   
    //"q+" : Math.floor((this.getMonth()+3)/3), //季度   
  };   
  // 年份  2015
  if(/(%Y)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"")); 

  // 两位年份  15
  if(/(%y)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(2));     

  //getTime返回的是以毫秒为单位的，转为秒
  if(/(%s)/.test(fmt))   
    //fmt=fmt.replace(RegExp.$1, this.getTime()/1000); 
    fmt=fmt.replace(RegExp.$1, (this.getTime()+'').slice(0, 10)); 

  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt)){   
        fmt = fmt.replace(RegExp.$1, (o[k].length == 2 ? o[k] : '0' + o[k]));   
    }
  return fmt;   
}   
 
 
 常用场景:
 
 
var releaseDate=new Date(Number(obj.releaseTime)*1000).format('yyyy-MM-dd');//把毫秒数转化为日期
 
 
 
 
 
 
 
 
6,设置和获取html元素的自定义属性
 
 
com.whuang.hsj.getCustomAttr=function(htmlNode22,attr)
{
	var hospitalId=htmlNode22[attr];
	if(hospitalId==undefined||hospitalId==null){
        hospitalId=htmlNode22.getAttribute(attr);
    }
	if(hospitalId==undefined||hospitalId==null){
		if(htmlNode22.attributes){
			hospitalId=htmlNode22.attributes[attr].nodeValue;
		}
	}
    return hospitalId;
}
com.whuang.hsj.setCustomAttr=function(htmlNode22,attr22,attrValue)
{
	if(htmlNode22.setAttribute===undefined)
	{
		htmlNode22.attributes[attr22].nodeValue = attrValue;
	}else{
		htmlNode22.setAttribute(attr22,attrValue);  // 设置自定义属性的值
	}
}
 
 
 使用场景:
 
 
var currentPage=com.whuang.hsj.getCustomAttr($ul_list.get(0),"currentPage");
        var isOver=Boolean.parse(com.whuang.hsj.getCustomAttr($ul_list.get(0),"isOver2"));
 com.whuang.hsj.setCustomAttr(newsPanel_ul,"currentPage",data.currentpage);
            com.whuang.hsj.setCustomAttr(newsPanel_ul,"isOver2",data.over);
 
 
 
 
 
7,使用jquery时如何判断元素是否为空呢?
 
 
错误:if($thisForm==null)
 
 
正确:
 
 
if ($thisForm.length == 0) {
        alert("can not get form ,maybe not pass on form object.");
        return;
    }
 
 
 
 
 
if(form.length==0){
		alert("没有找到表单");
		return;
	}
 
 
 
 
 
通过length来判断,因为使用jquery获取元素,就算元素不存在也会返回一个对象.
 
 
8,如何判断参数是否为空
 
 
bbs.add_bbsReply = function (self) {
    if (cardid == null) {
        alert("cardid is null");
        return;
    }
    var $thisForm = null;
    if (arguments.length > 0) {//说明传入了参数self
        $thisForm = $(self);
    } else {
        $thisForm = $("#formBBS_reply");
    }
}
 
 
范例: 
 
 
function tabSelect(url, aHref, isNav, showslider) {
    showMask();
    if (isNav) {
        $('#nav li').removeClass("current")/*.removeClass("focus ")*/;
    }

    if (arguments.length > 3 && showslider) {
        $slider_carousel.show();
        $left_sidebar.show();
    } else {
        $slider_carousel.hide();
        $left_sidebar.hide();
    }
    ajaxHtml(url + "&recordsPerPage=5&random22=" + Math.random(), $exchangeDiv);//page.js
    if (isNav) {
        $(aHref).parent().addClass("current");
    }
    ui_tab_wh(jQuery);
}
 
 
 
 
 
通过arguments.length来判断比通过self==null||self==undefined要好
 
 
9,创建对象
 
 
var tip = {};
 
 
 10 使悬浮的div可以拖动
 
 
com.whuang.hsj.drag = function ($obj, hn) {
    if (arguments.length == 0) {
        return;
    }
    if ($obj == null || $obj == undefined) {
        return;
    }
    if (typeof  $obj == 'string') {//when $obj is a string
        $obj = $($obj);
    }
    var $hn = null;
    if (arguments.length > 1) {
        $hn = $obj.find(hn);//div h1,h2...
    } else {
        $hn = $obj.find("h2");
    }
    $hn.on({
        mousedown: function (e) {
            e.preventDefault();
            var t = $obj.offset(),
                o = e.pageX - t.left,
                i = e.pageY - t.top;
            //$obj.css("position", 'fixed');
            $(document).on("mousemove.drag", function (e) {
                $obj.offset({
                    top: e.pageY - i,
                    left: e.pageX - o
                })
            })
        },
        mouseup: function () {
            $(document).unbind("mousemove.drag");
            $obj.css("position", 'fixed');
        }
    });
};//drag
 
 
 使用场景:
 
 
 com.whuang.hsj.drag("#subPagePanel", "h2");//增加拖动对话框的功能
    com.whuang.hsj.drag("#subPageBBS", "h2");
 
 
 

 
 
 
 
 


                

        

        




    

  


    

      

        

            

              
                
                  调皮的芋头
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Javascript常用小技巧汇总

				
			

			

				

					10-24
				

			

		

		

			
				
JavaScript是一种广泛应用于Web开发的脚本...总之，熟练掌握这些JavaScript小技巧能帮助开发者写出更高效、更简洁的代码。在实际开发中，应该根据项目需求和团队规范灵活运用这些技巧，同时保持代码的可读性和维护性。

			
		

	



                

              
                



	

		

			

				
					
JavaScript 学习笔记一些小技巧

				
			

			

				

					12-09
				

			

		

		

			
				
本篇学习笔记将探讨一些JavaScript中的基础知识点和实用小技巧，帮助开发者提升编程效率和代码质量。  1. **try...catch 语句的大小写敏感性**  在JavaScript中，`try...catch` 语句用于处理可能抛出的异常。值得...

			
		

	



                


  
              

                


	

		

			

				
					
js小技巧

				
			

			

				

					chp891202的博客
				

				

					12-19
					
					836
					
				

			

		

		

			
				
每一项都是js中的小技巧，但十分的实用！ 
1.document.write(""); 输出语句 
2.JS中的注释为// 
3.传统的HTML文档顺序是:document->html->(head,body) 
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 
5.得到表单中元素的名称和值:d

			
		

	





	

		

			

				
					
每个开发者都应该知道的20个JavaScript技巧和提示

					
最新发布

				
			

			

				

					Yvette Lau的专栏
				

				

					08-02
					
					335
					
				

			

		

		

			
				
以下是20个JavaScript技巧和提示，每个开发者都应该了解，以便编写更清晰、更高效的代码，并改善他们的开发工作流程。????1. 使用let和const代替var ????避免使用var来声明变量。相反，使用let和const来确保块级作用域并避免变量提升问题。letname='John';
constage=30;2. 解构赋值 ????解构允许你从数组中提取值或从对象中提取属性到不同的变量中。...

			
		

	



		

			
		



	

		

			

				
					
一些JS小技巧

				
			

			

				

					可以叫我啪叽的石头
				

				

					08-26
					
					381
					
				

			

		

		

			
				
整理一些自己遇到的 js 小技巧，希望以后能变成一个炫技派，哈哈哈～

1、对象深拷贝的小方法



JSON.parse(JSON.stringify(obj));

2、数组去重



const deleteSame = array =&gt; [...new Set(array)];

3、用Object.is(a, b) 代替 ===



if (Object.is(a, b)) {
...

			
		

	





	

		

			

				
					
JS一些小技巧

				
			

			

				

					yangtjh的博客
				

				

					01-11
					
					2163
					
				

			

		

		

			
				
每一项都是js中的小技巧，但十分的实用！ 
1.document.write(""); 输出语句 
2.JS中的注释为// 
3.传统的HTML文档顺序是:document->html->(head,body) 
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 
5.得到表单中元素的名称和值:d

			
		

	





	

		

			

				
					
js 小技巧

				
			

			

				

					言淼淼
				

				

					10-12
					
					521
					
				

			

		

		

			
				
使用 Array.includes 来处理多重条件
举个栗子 

			
		

	





	

		

			

				
					
javascript一些实用技巧小结

				
			

			

				

					01-19
				

			

		

		

			
				
JS对象之Table表格对象(摘抄）      Table对象集合 Table对象:表示HTML文档中的表，对于文档中每个标记，浏览器都创建一个Table对象.   集合  描述  cells[] 获取包含表格中所有单元格的数组js 取行中列 代码如下: ...

			
		

	





	

		

			

				
					
Javascript 实用小技巧

				
			

			

				

					10-29
				

			

		

		

			
				
在本篇标题为“Javascript实用小技巧”的文章中，作者分享了一系列实用的JavaScript代码片段，旨在帮助学习JavaScript的人士掌握一些提高编程效率的技巧。文章内容涉及了JavaScript的Function对象的apply和call方法...

			
		

	





	

		

			

				
					
js的小技巧

				
			

			

				

					qingfengyecao的博客
				

				

					06-05
					
					359
					
				

			

		

		

			
				
技巧1

console.time()以及console.timeEnd();用来测试从一开始到结束这个js的脚本一共执行了多少毫秒；

使用场景，用于检验脚本的一个性能；



技巧2：

let arr = [];

let arr2 = [1,2,3,4];

let arr3= [5,6,7,8];

arr = [...arr2,...arr3];//arr = [1,2,3,4,5...

			
		

	





	

		

			

				
					
12 个 JS 技巧

				
			

			

				

					weixin_30237281的博客
				

				

					04-17
					
					502
					
				

			

		

		

			
				
1. 过滤唯一值
ES6 引入了 Set 对象和延展（spread）语法…，我们可以用它们来创建一个只包含唯一值的数组。

复制代码








const array = [1, 1, 2, 3, 5, 5, 1]





const uniqueArray = [...new Set(array)];





console.l...

			
		

	





	

		

			

				
					
17个你可能还不知道 JS 技巧！

					
热门推荐

				
			

			

				

					粉丝们务必加入微信粉丝群
				

				

					12-15
					
					1万+
					
				

			

		

		

			
				
作者：Rahul
译者：前端小智
来源：dev

双12 A 里服务器27块，通用点击这里购买可以找我返现30，等于27块就能买到了，只限新用户，可以用家人的手机号购买！
1.三元运算符
新手
let hungry = true;
let eat; 
if (hungry == true) {
       eat = 'yes'; 
} else {
       eat = 'no';
}

老手
let hungry = true;
let eat = hungry == true ? 'yes' .

			
		

	





	

		

			

				
					
JS 小技巧

				
			

			

				

					那个西瓜有点甜
				

				

					04-06
					
					460
					
				

			

		

		

			
				
JS 小技巧

			
		

	





	

		

			

				
					
JS小技巧

				
			

			

				

					打伞的鱼
				

				

					08-05
					
					1382
					
				

			

		

		

			
				
对象：
   //  删除对象无用属性
    const obj = { a: 0, b: 1, c: 2 }; // 只想拿b和c
    const { a, ...rest } = obj;
    rest => { b: 1, c: 2 }




			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值