保持谦卑之心
No design , No code

JS一些常用的类库

吴庆宝阅读(381)

一、返回上一页(history)

发觉有两种用法:

1、javascript:history.back(-1);

2、javascript:history.go(-1);

它们俩的区别是:

history.back(-1):直接返回当前页的上一页,数据全部消息,返回新页面

history.go(-1):也是返回当前页的上一页,表单里的数据依然还在

其语法为:

history.go(num);

history. back(num); ( num — 负数为后退指定的页数,正数为前进指定的页数)

示例:<a href=”javascript:history.go(-1);”>返回上一页</a>

<input type=”button” value=”Back” onclick=”javascript:history.back()” />

二、confirm 确认/取消

var flag=confirm(“确定删除?”);//弹出 确认、取消对话框 点击确认返回true 取消 返回false

if(flag){

alert(“确定”);

}else{

alert(“取消”);

}

三、prompt 提示输入框

var num=prompt(“请输入一个数字”,0);//提示输入框 点击确定获得输入的值 取消返回null

alert(num);

四、open 打开新窗口

window.open(“https://www.baidu.com/”);//新建页面打开百度

window.open(“https://www.baidu.com/”,”baidu”);//新建页面并命名窗口 打开百度

window.open(“https://www.baidu.com/”,”_parent”);//在本页面打开百度

window.open(“https://www.baidu.com/”,”_blank”);//新建页面打开百度

window.open(“https://www.baidu.com/”,”baidu”,”width=500,height=600,top=100,left=200,toolbar=yes”);

五、定时任务/间歇任务

//================定时调用===================

//直接使用函数传入的方法,扩展性好,性能更佳。

window.setTimeout(box,5000);

function box(){

console.info(“定时调用====》普通函数”);

}

//匿名函数法 ECMA推荐使用

window.setTimeout(function(){

console.info(“定时调用======》匿名函数”);

},2000);

/*取消定时器

setTimeout 返回一个数值ID,这个ID就是当前这个定时方法的唯一标识符,

通过它可以取消这个定时调用计划

*/

var timeId=setTimeout(function(){

alert(“取消定时器”);

},3000);

clearTimeout(timeId);

//================间歇调用=================

var intId=setInterval(function(){

console.info(“间歇调用”);

},3000);

clearInterval(intId);//取消间歇任务

/*

一般在开发环境中很少使用间歇任务,因为需要根据情况来取消ID(间歇任务),

并可能造成同步的一些问题,建议使用定时任务赖替代间歇任务。

*/

//使用定时任务模拟间歇任务

(function(){

var num=0;

var max=5;

function box(){

num++;

if(num===max){

alert(“5秒后结束”);

}else{

setTimeout(box,1000);

}

}

setTimeout(box,1000);

})();

六、location 对象

//http://localhost:8080/html/bom.html?a=123#hash

var port=location.port;//获取端口号  8080

var hash=location.hash;//获取#和号后面的字符串  #hash

var hostName=location.hostname;//获取主机名  localhost

var pathname=location.pathname;//获取当前路径 /html/bom.html

var protocol=location.protocol;//获取当前协议 http:

var search=location.search;//获取请求参数 ?a=123

var href=location.href;//获取当前URL(完整)路径

// location.assign(“http://www.baidu.com”);//跳转到指定的URL

// location.replace(“http://www.baidu.com”);//跳转到指定的URL 清除之前的历史记录

location.reload();//重新加载  可能从缓存中加载

location.reload(true);//重新加载  从服务器加载

}

//获取请求参数

function getArgs(keyStr){

var map=new Object();

//获取请求参数

var searchs=location.search.length>0?location.search.substring(1):””;

var items=searchs.split(“&”);

if(searchs!=””){

for(var i=0;i<items.length;i++){

var items_t=items[i].split(“=”);

map[items_t[0]]=items_t[1];

}

console.info(map);

return map[keyStr];

}

MUI 页面跳转、传参与刷新

吴庆宝阅读(255)

一、页面跳转

初始化时创建子页面
mui.init({  
    subpages: [{  
        url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址  
        id: your - subpage - id, //子页面标志  
        styles: {  
            top: subpage - top - position, //子页面顶部位置  
            bottom: subpage - bottom - position, //子页面底部位置  
            width: subpage - width, //子页面宽度,默认为100%  
            height: subpage - height, //子页面高度,默认为100%  
            ......  
        },  
        extras: {} //额外扩展参数  
    }]  
});
直接打开新页面

MUI封装了自己的页面打开的方法

mui.openWindow({  
    url: new - page - url,  
    id: new - page - id,  
    styles: {  
        top: newpage - top - position, //新页面顶部位置  
        bottom: newage - bottom - position, //新页面底部位置  
        width: newpage - width, //新页面宽度,默认为100%  
        height: newpage - height, //新页面高度,默认为100%  
        ......  
    },  
    extras: {  
        ..... //自定义扩展参数,可以用来处理页面间传值  
    }  
    show: {  
        autoShow: true, //页面loaded事件发生后自动显示,默认为true  
        aniShow: animationType, //页面显示动画,默认为”slide-in-right“;  
        duration: animationTime //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;  
    },  
    waiting: {  
        autoShow: true, //自动显示等待框,默认为true  
        title: '正在加载...', //等待对话框上显示的提示内容  
        options: {  
            width: waiting - dialog - widht, //等待框背景区域宽度,默认根据内容自动计算合适宽度  
            height: waiting - dialog - height, //等待框背景区域高度,默认根据内容自动计算合适高度  
            ......  
        }  
    }  
})
预加载页面
// 方式1  
mui.init({  
    preloadPages: [{  
        url: prelaod - page - url,  
        id: preload - page - id,  
        styles: {}, //窗口参数  
        extras: {}, //自定义扩展参数  
        subpages: [{}, {}] //预加载页面的子页面  
    }]  
});  

// 方式2  
var page = mui.preload({  
    url: new - page - url,  
    id: new - page - id, //默认使用当前页面的url作为id  
    styles: {}, //窗口参数  
    extras: {} //自定义扩展参数  
});
子页面使用场景
  1. 子页面适用于侧滑菜单
  2. 子页面适用于频繁切换的情况
  3. 子页面适用于下拉刷新和上拉加载

二、页面传参

通过extras传参
// 传递参数
mui.openWindow({url:'B.html',extras:{id:'100'}});
// 接收参数
var self=plus.webview.currentWebview();//获取当前窗体对象
var receiveID=self.id;//接收A页面传入的id参数值
通过fire()传参
// 传递参数 ( 要触发其他页面的自定义监听事件必须要先进行页面的预加载)
mui.init({
     preloadPages:[{
       id:'detail.html',
       url:'detail.html'
      }]
 });
mui.fire(plus.webview.getWebviewById('page-id'), "pageRefresh",{
    name: 'zhangsan'
  })
//  接收参数
window.addEventListener("pageRefresh", function (e) {
    //获得事件参数
    var id = e.detail.id;
});

三、页面刷新

页面切换时刷新

webview有show事件及hide事件

先创建子页面

var subpages = ['./views/tab-webview-subpage-home.html', './views/tab-webview-subpage-list.html','./views/tab-webview-subpage-map.html', './views/tab-webview-subpage-setting.html'];
            var subpage_style = { // 子页面位置调整
                top: '70px',
                bottom: '51px'
            };
            var aniShow = {};

             //创建子页面,首个选项卡页面显示,其它均隐藏;
            mui.plusReady(function() {
                var self = plus.webview.currentWebview();
                for (var i = 0; i < 4; i++) {
                    var temp = {};
                    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                    if (i > 0) {
                        sub.hide();
                    }else{
                        temp[subpages[i]] = "true";
                        mui.extend(aniShow,temp);
                    }

                    self.append(sub);
                }

                 plus.device.setWakelock(true);
            });

创建当前页的 show 监听事件。代码如下:

   mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            self.addEventListener('show',function(){
                console.log('show');
                // ... 后续为渲染页面代码
            });
        });
父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数
// 父页面自定义页面刷新事件 
window.addEventListener("pageRefresh", function (e) {
    // 重新获取数据或触发刷新
});
// 子页面触发父页面的自定义页面刷新事件 
mui.fire(plus.webview.getWebviewById('page-id'), "pageRefresh" );

返回刷新

mui.plusReady(function() {
var old_back = mui.back;
mui.back = function() {
var wobj = plus.webview.getWebviewById("page-id"); 
wobj.reload(true);
old_back();
}
});

 

H5+的重载方法
在子页面初始化时,注册beforeback方法;

mui.init({ 
beforeback: function() { 
//获得列表界面的webview 
var list = plus.webview.currentWebview().opener(); 
//触发列表界面的自定义事件(refresh),从而进行数据刷新 
mui.fire(list, 'refresh'); 
//返回true,继续页面关闭逻辑 
return true; 
} 
});
// 或者~
mui.init({
beforeback: function(){
//获得列表界面的webview
var i = plus.webview.getWebviewById("./views/lsit.html");
if(i){
//触发列表界面的自定义事件(refresh),从而进行数据刷新
i.evalJS("getUserInfo()");
}
return true;
}
});
在父页面中添加事件监听
window.addEventListener('refresh', function(e) { 
location.reload(); 
})

 

js返回上一页并刷新代码整理

吴庆宝阅读(32)

一:JS 重载页面,本地刷新,返回上一页
复制代码 代码如下:

<a>返回上一页</a>
<a>重载页面,本地刷新</a>
<a>返回上一页重载页面,本地刷新</a>

返回前二页并刷新的JS代码应该怎样写。
复制代码 代码如下:

history.go(-2);
location.reload();

二:js 方法
复制代码 代码如下:

<a href="#">返回</a>

asp自动返回并刷新的方法:
复制代码 代码如下:

response.Write("<script language=javascript>self.location=document.referrer;</script>")

一般用于向一个页面提交action后返回前一页并刷新!

1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2);
2. history.back().
3. window.history.forward()返回下一页
4. window.history.go(返回第几页,也可以使用访问过的URL)

例:
<a>向上一页</a>

response.Write("<script language=javascript>")
response.Write("if(!confirm('完成任务?')){history.back();}")
response.Write("</script>")
response.Write("<script language=javascript>history.go(-1);</script>")
<a>向上一页</a>

页面跳转:onclick="window.location.href='list.aspx'"
P.S.
小技巧(JS引用JS):
<script type=text/javascript>
<!--
if (typeof SWFObject == "undefined") {
document.write('<scr' + 'ipt type="text/javascript" src="/scripts/swfobject-1.5.js"></scr' + 'ipt>');}
//-->
</script>

Javascript刷新页面的几种方法:

1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href

自动刷新页面的方法:
1.页面自动刷新:把如下代码加入区域中其中20指每隔20秒刷新一次页面.

2.页面自动跳转:把如下代码加入区域中其中20指隔20秒后跳转到http://www.javaeye.com页面

3.页面自动刷新js版
<script language="JavaScript">
function myrefresh()
{
       window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

ASP.NET如何输出刷新父窗口脚本语句
1. this.response.write("<script>opener.location.reload();</script>");
2. this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");
3. Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</script>")

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用
<script language=JavaScript>
   parent.location.reload();
</script>

//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a>刷新</a> )

//如何刷新另一个框架的页面用
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>

如果想关闭窗口时刷新或者想开窗时刷新的话,在中调用以下语句即可。

开窗时刷新
关闭时刷新

<script language="javascript">
window.opener.document.location.reload()
</script>

三:在ASP中利用JS实现返回上一页并刷新
在ASP中利用JS实现返回上一页并刷新我想是利用ASP开发网站的时候经常使用的。但写法也有几种,但目的都是一样的。
复制代码 代码如下:

&lt;%
response.write("已经删除成功!font&gt;")
%&gt;
<div align="center">[<a class="fontsize14" href="/"><span style="color: #cc0033;">返回</span></a>]</div>
这段代码实现的功能是告知用户要是实现的功能已经达到,但在返回的时候最好是刷新一下原来的页面让新信息显示出来或者是让删除的东西不在显示。但这段代码却不能在返回的时候刷新原来的网页。
所以需要在原来的页面加上这样一段代码:
<script> 
if(window.name != "Bencalie"){ 
//如果页面的 name 属性不是指定的名称就刷新它 
location.reload(); 
window.name = "Bencalie"; 
} 
else{ 
//如果页面的 name 属性是指定的名称就什么都不做,避免不断的刷新
window.name = ""; 
} 
</script>

这样就可以达到我们的目的了--返回上一页并刷新。
当然还有比这个要简单的代码,response.write"<script>alert('删除成功!');window.location='原来的页面'';</script>"

 

HBuilder mui 手势事件

吴庆宝阅读(57)

在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:

分类 参数 描述
点击 tap 单击屏幕
doubletap 双击屏幕
长按 longtap 长按屏幕
hold 按住屏幕
release 离开屏幕
滑动 swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
拖动 dragstart 开始拖动
drag 拖动中
dragend 拖动结束

手势事件配置

根据使用频率,mui默认会监听部分手势事件,如点击、滑动事件;为了开发出更高性能的moble App,mui支持用户根据实际业务需求,通过mui.init方法中的gestureConfig参数,配置具体需要监听的手势事件,。

mui.init({
  gestureConfig:{
   tap: true, //默认为true
   doubletap: true, //默认为false
   longtap: true, //默认为false
   swipe: true, //默认为true
   drag: true, //默认为true
   hold:false,//默认为false,不监听
   release:false//默认为false,不监听
  }
});

注意:dragstart、drag、dragend共用drag开关,swipeleft、swiperight、swipeup、swipedown共用swipe开关

事件监听

同标准click事件一样,上述手势事件支持添加到任意DOM对象上,如下为一个示例:

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

 

jQuery各版本CDN

吴庆宝阅读(27)

jquery-2.1.1

 

注:jquery-2.0以上版本不再支持IE 6/7/8)百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况)

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/2.1.1/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-2.1.1.min.js”></script>

jquery-2.0.0

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-2.0.0.min.js”></script>

 

jquery-1.11.1

 

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/1.11.1/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>

 

jquery-1.10.2

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/1.10.2/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>

jquery-1.9.1

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script>

jquery-1.8.3

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/1.8.3/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-1.8.3.min.js”></script>

 

jquery-1.7.2

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/1.7.2/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>

 

jquery-1.6.4

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/1.6.4/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>

HBuilder中的遍历添加数据+全选+删除+批量删除+更改+排序

吴庆宝阅读(52)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟</title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var app = angular.module("myapp",[]);
			app.controller("mycon",function($scope){
				$scope.mohu="";
				$scope.pxfs="";
				$scope.qxz="--请选择--";
				$scope.orderFlag="";
				$scope.orderLine="";
				$scope.xinshuzu=[];
				
				//点击删除执行的方法
				$scope.dleone=function(bian){				
					for(var i=0;i<$scope.data.length;i++){
						if($scope.data[i].bianhao==bian){
							$scope.data.splice(i,1);
						}
					}
				}
				
				//点击更改执行的方法
				$scope.updeteprice=function(price){				
					for(var i=0;i<$scope.data.length;i++){
						if($scope.data[i].jiage==price){
							var updprice = parseInt(window.prompt("请输入要修改的价格",price));
							if(updprice < 0) {
								alert("输入有误,请重新更改");
							} else {
								if(window.confirm("确定要将" + $scope.data[i].mingcheng + "的价格更改为:" + updprice + "吗?")) {
									$scope.data[i].jiage = updprice;
								}
							}
						}
					}
				}
				
				$scope.aaa=function(nan){				
					$scope.pxfs = nan;
					if($scope.orderFlag == ""){
						$scope.orderFlag = "-";
					}else{
						$scope.orderFlag = "";
					}
				}
				
				//全选按钮的判断
				$scope.seleall="";
				$scope.selectAllFun = function() {
					if($scope.seleall) {
						for(index in $scope.data) {
							$scope.data[index].state = true;
						}
					} else {
						for(index in $scope.data) {
							$scope.data[index].state = false;
						}
					}
				}
				
//				//反选  
//				$scope.checkSelecetAll = function() {
//					var flag = false;
//					//遍历数组,获得对象的状态
//					for(index in $scope.data) {
//						//alert($scope.products[index].state);
//						//如果有一个对象状态是false即未选中状态,就把标志位flag变为true。
//						if(!$scope.data[index].state){
//							flag = true;
//						}
//					}
//					//判断是否没有一个是未选中状态
//					if(flag){//这是正面至少有一个未选中
//						$scope.seleall = false;//全选状态为false
//					}else{//一定是全部被选中
//						$scope.seleall = true;//全选状态为true
//					}
//				}
 
				$scope.plsc=function(){
					for(inde in $scope.data){
						if($scope.data[inde].state){
							$scope.xinshuzu.push($scope.data[inde]);
						}
					}
					
					for(xin in $scope.xinshuzu){
						var ff = $scope.xinshuzu[xin].bianhao;
						for(inde in $scope.data){
						var ssc = $scope.data[inde].bianhao;
						if(ssc==ff){
							$scope.data.splice(inde,1)
						}
					}
					}
					
				}
				
				
				//全选按钮的判断
				$scope.seletwo = function() {
					var flag =true;
						for(index in $scope.data) {
							if($scope.data[index].state==false){
								flag=false;
							}
						}
					
					if(flag){
							$scope.seleall=true;
						}else{
							$scope.seleall=false;
						}
					}
					
				
				
				
				$scope.data=[{
					bianhao:80,
					mingcheng:"iphone",
					jiage:5400,
					state: false
				},{
					bianhao:290,
					mingcheng:"ipad",
					jiage:1420,
					state: false
				},{
					bianhao:500,
					mingcheng:"ipad air",
					jiage:2340,
					state: false
				},{
					bianhao:910,
					mingcheng:"imac",
					jiage:15400,
					state: false
				},{
					bianhao:1200,
					mingcheng:"ipad mini",
					jiage:2200,
					state: false
				}];
				
				$scope.ifShow = function(price){
					if($scope.qxz == "--请选择--"){
				
						return true;
					}else{
						var arr = $scope.qxz.split("-");
						var priceMin = arr[0];
						var priceMax = arr[1];
					
						if(price<priceMin || price>priceMax){
							//alert("111");
							return false;
						}else{
							return true;
						}
					}
				}
				
				
			});
		</script>
	</head>
	<body ng-app="myapp" ng-controller="mycon">
		<center>
			<h2>购物车</h2>
			<input type="text" placeholder="产品名称" ng-model="mohu" />
			产品价格 <select ng-model="qxz">
				<option>--请选择--</option>
				<option>0-2000</option>
				<option>2001-3000</option>
				<option>4001-5000</option>
				<option>5001-6000</option>
				<option>6001-7000</option>
			</select>
			
			<select ng-model="pxfs">
				<option value="">排序方式 </option>
				<option value="bianhao">id正序</option>
				<option value="-bianhao">id逆序</option>
				<option value="jiage">价格正序</option>
				<option value="-jiage">价格逆序</option>
			</select>
			
			<button ng-click="plsc()">批量删除</button>
			
			<table style="border: 1px solid black; width: auto;" border="1px" cellpadding="10" cellspacing="1">
				<tr>
					<td><input type="checkbox" ng-model="seleall" ng-click="selectAllFun()"/></td>
					<td ng-click="aaa('bianhao')">产品编号</td>
					<td ng-click="aaa('mingcheng')">产品名称</td>
					<td ng-click="aaa('jiage')">产品价格</td>
					<td>操作</td>
				</tr>
				<tr ng-repeat="inde in data | filter:mohu |orderBy:(orderFlag+pxfs)" ng-if="ifShow(inde.jiage)">
					<td><input type="checkbox" ng-model="inde.state" ng-click="seletwo()"/></td>
					<td>{{inde.bianhao}}</td>
					<td>{{inde.mingcheng}}</td>
					<td>{{inde.jiage}}</td>
					<td><button ng-click="dleone(inde.bianhao)">删除</button> <button ng-click="updeteprice(inde.jiage)">修改</button></td>
				</tr>
			</table>
			
		</center>
	</body>
</html>

 

js中事件绑定3种方法以及事件委托

吴庆宝阅读(39)

事件绑定

首先,我先来介绍我们平时绑定事件的三种方法。
1.嵌入dom

<button onclick="open()">按钮</button>

<script>
function open(){
    alert(1)
}
</script>

2.直接绑定

<button id="btn">按钮</button>
<script>
document.getElementById('btn').onclick = function(){
    alert(1)
}
</script>

3.事件监听

<button id="btn">按钮</button>
<script>
document.getElementById('btn').addEventListener('click',function(){
    alert(1)
})
//兼容IE
document.getElementById('btn').attachEvent('click',function(){
    alert(1)
})
</script>

事件委托

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只制定一个事件处理程序,就可以管理某一类型的所有事件。例如click事件一直会冒泡到document层。也就是我们可以只指定onclick事件处理程序,而不必给每个事件分别添加处理程序。
下面我们来看一个阿里巴巴笔试题的例子。

样式以及DOM结构

<style>
   * {
     padding: 0;
     margin: 0;
   }

   .head, li div {
     display: inline-block;
     width: 70px;
     text-align: center;
   }

   li .id, li .sex, .id, .sex {
     width: 15px;
   }

   li .name, .name {
     width: 40px;
   }

   li .tel, .tel {
     width: 90px;
   }

   li .del, .del {
     width: 15px;
   }

   ul {
     list-style: none;
   }

   .user-delete {
     cursor: pointer;
   }

 </style>
</head>

<body>
<div id="J_container">
    <div class="record-head">
      <div class="head id">序号</div><div class="head name">姓名</div><div class="head sex">性别</div><div class="head tel">电话号码</div><div class="head province">省份</div><div class="head">操作</div>
    </div>
   <ul id="J_List">
     <li><div class="id">1</div><div class="name">张三</div><div class="sex">男</div><div class="tel">13788888888</div><div class="province">浙江</div><div class="user-delete">删除</div></li>
     <li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">四川</div><div class="user-delete">删除</div></li>
     <li><div class="id">3</div><div class="name">王二</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">广东</div><div class="user-delete">删除</div></li>
   </ul>
 </div>
 </body>

不用事件委托。而这种方法造成的代价是,性能的大量浪费。如果是成千上万条数据,页面将会严重卡顿,甚至崩溃。

function Contact(){
    this.init();
}


Contact.prototype.init = function(){
    var userdel = document.querySelectorAll('.user-delete');
    for(var i=0;i<lis.length;i++){
        (function(j){
            userdel[j].onclick = function(){
    userdel[j].parentNode.parentNode.removeChild(userdel[j].parentNode);
            }
        })(i);
    }   
}

new Contact();

使用事件委托,只绑定一次事件,大大减少了性能的损耗。也是在需要大量事件处理程序中一种非常好的解决方式。

function Contact(){
    this.init();
}


Contact.prototype.init = function(){
    var lis = document.querySelector('#J_List');
    lis.addEventListener('click', function(e){
        var target = e.target || e.srcElement;
        if (!!target && target.className.toLowerCase()==='user-delete') {               target.parentNode.parentNode.removeChild(target.parentNode);
        }
    })
}

new Contact();

 

mui.init 初始化参数

吴庆宝阅读(30)

mui.init({
    //子页面
    subpages: [{
        //...
    }],
    //预加载
    preloadPages:[
        //...
     ],
    //下拉刷新、上拉加载
     pullRefresh : {
       //...
    },
    //手势配置
      gestureConfig:{
       //...
    },
    //侧滑关闭
    swipeBack:true, //Boolean(默认false)启用右滑关闭功能

    //监听Android手机的back、menu按键
    keyEventBind: {
        backbutton: false,  //Boolean(默认truee)关闭back按键监听
        menubutton: false   //Boolean(默认true)关闭menu按键监听
    },
    //处理窗口关闭前的业务
    beforeback: function() {
        //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
    },
    //设置状态栏颜色
    statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
    preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})

加载子页面:

mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度,默认为100%
        height:subpage-height,//子页面高度,默认为100%
        ......
      },
      extras:{}//额外扩展参数
    }]
  });

 

js取整数、取余数的方法

吴庆宝阅读(31)

1.丢弃小数部分,保留整数部分

parseInt(5/2)

2.向上取整,有小数就整数部分加1

Math.ceil(5/2)

3,四舍五入.

Math.round(5/2)

4,向下取整

Math.floor(5/2)

Math 对象的方法
FF: Firefox, N: Netscape, IE: Internet Explorer

方法 描述 FF N IE
abs(x) 返回数的绝对值 1 2 3
acos(x) 返回数的反余弦值 1 2 3
asin(x) 返回数的反正弦值 1 2 3
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 1 2 3
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间) 1 2 3
ceil(x) 对一个数进行上舍入。 1 2 3
cos(x) 返回数的余弦 1 2 3
exp(x) 返回 e 的指数。 1 2 3
floor(x) 对一个数进行下舍入。 1 2 3
log(x) 返回数的自然对数(底为e) 1 2 3
max(x,y) 返回 x 和 y 中的最高值 1 2 3
min(x,y) 返回 x 和 y 中的最低值 1 2 3
pow(x,y) 返回 x 的 y 次幂 1 2 3
random() 返回 0 ~ 1 之间的随机数 1 2 3
round(x) 把一个数四舍五入为最接近的整数 1 2 3
sin(x) 返回数的正弦 1 2 3
sqrt(x) 返回数的平方根 1 2 3
tan(x) 返回一个角的正切 1 2 3
toSource() 代表对象的源代码 1 4 –
valueOf() 返回一个 Math 对象的原始值

代码案例:

<script type="text/javascript">
//取整
function getResult(num){
return parseInt(num);
}
//四舍五入到num后面的n位
function getResult(num,n){
return Math.round(num*Math.pow(10,n))/Math.pow(10,n);
}
//截取n位
function getresult(num,n){
return num.toString().replace(new RegExp("^(\\-?\\d*\\.?\\d{0,"+n+"})(\\d*)$"),"$1")+0;
}
</script>
 var mLength = textMn.length; 
 var mFirst = parseInt(mLength/60); 
 //取整 
 //alert(mLength); 
 var mLast = mLength; //取余 
 if(mLast>0){ 
 $(".mood_content").height((mFirst+1)*20);
 }

 

javascript去除字符串左右两端的空格

吴庆宝阅读(30)

去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim,但在js中却没有这3个内置方法,需要手工编写。下面的实现方法是用到了正则表达式,效率不错,并把这三个方法加入String对象的内置方法中去。

写成类的方法格式如下:(str.trim();)

<script language="javascript">
   String.prototype.trim=function(){
     return this.replace(/(^\s*)|(\s*$)/g, "");
   }
   String.prototype.ltrim=function(){
     return this.replace(/(^\s*)/g,"");
   }
   String.prototype.rtrim=function(){
     return this.replace(/(\s*$)/g,"");
   }

写成函数可以这样:(trim(str))

<script type="text/javascript">
   function trim(str){ //删除左右两端的空格
       return str.replace(/(^\s*)|(\s*$)/g, "");
   }
   function ltrim(str){ //删除左边的空格
       return str.replace(/(^\s*)/g,"");
   }
   function rtrim(str){ //删除右边的空格
       return str.replace(/(\s*$)/g,"");
   }
  </script>

 

吴庆宝的技术博客

技术博客github