评论 - lizhenqiu blog

#¹⁰⁸⁴

作者：广西南宁市

css 设置文字垂直显示
1. writing-mode（设置对象书写方向）

　　语法：writing-mode : lr-tb、tb-rl
　　参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左 
　　示例：div { writing-mode: tb-rl; }

Run code

Cut to clipboard

2. text-align（设置对象中文本的对齐方式）

　　语法：text-align : left、right、center、justify 
　　参数：left：左对齐　　right：右对齐　　center：居中　　justify：两端对齐 
　　示例：div { text-align : center; }

Run code

Cut to clipboard

示例代码

<style>.div { writing-mode: tb-rl; } </style>
<div class="div">fdsafasdfads设置css文字居中</div>

Run code

Cut to clipboard

#,广西南宁市,2017-08-12,14:44:27,

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>竖列排版实例 在线演示 www.divcss5.com</title> 
<style> 
body{width: 20px;text-align:center; line-height:22px} 
/* CSS注释说明：设置css文字居中，css行高为22px间隔 */ 
</style> 
</head> 
<body> 
我<br>是<br>竖<br>列<br>排<br>版 
</body> 
</html>

Run code

Cut to clipboard

#,广西南宁市,2017-08-12,14:44:54,

<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-08-12, 14:42:35

展开↯

#¹⁰⁸⁵

作者：广西南宁市

浏览器对同一时刻的最大连接数一般是6个。。。

文章：HTTP,HTTP2.0,SPDY,HTTPS 发表时间：2017-08-11, 18:00:06

展开↯

#¹⁰⁸⁶

作者：广西南宁市

weiphp解决粉丝昵称、头像不显示等问题
修改方法：
1.下载附件覆盖插件UserCenter（附件会替换所有文件，有做过修改的记得备份修改）
2.修改/Application/Common/Common/function.PHP找到

/**
 * 短链接功能
 *
 * @param float $long_url
 *        	长链接
 * @return string 如果没有微信短链接接口权限或者不成功，就原样返回长链接，否则返回短链接
 */
function short_url($long_url)

Run code

Cut to clipboard

在这段代码之上增加以下代码

//处理头像
function get_name_by_touxiang($val) {
        if(!empty($val)){
                return('<img height="48px" src="'.$val.'" />');
        }else{
                return('<img height="48px" src="'.ADDON_PUBLIC_PATH.'/face.png" />');
        }
}
 
// 拉取10000个用户列表,通过openid获取微信用户基本信息,此功能只有认证的服务号才能用
function getWeixinUserAllInfo($token) {
        $access_token = get_access_token ( $token );
        if (empty ( $access_token )) {
                return false;
        }
         
        $param ['access_token'] = $access_token;
         
        $url = 'https://api.weixin.qq.com/cgi-bin/user/get?'. http_build_query ( $param );
        $content = file_get_contents ( $url );
        $content = json_decode ( $content, true );
        return $content;
}

Run code

Cut to clipboard

3.修改/Application/Common/Model/FollowModel.class.php

<?php

namespace Common\Model;

use Think\Model;
use User\Api\UserApi;

/**
 * 粉丝操作
 */
class FollowModel extends Model {
 function init_follow($openid) {
                if (empty ( $openid ) || $openid == - 1)
                        return false;
                
                $data ['token'] = get_token ();
                $data ['openid'] = $openid;
				$winfo = getWeixinUserInfo ($openid, $data ['token']); //获取用户所有信息
                $info = $this->where ( $data )->find ();

                if ($info) { 
                        $save ['subscribe_time'] = $winfo ['subscribe_time'];
                        $save ['nickname'] = $winfo ['nickname'];
                        $save ['sex'] = $winfo ['sex'];
                        $save ['city'] = $winfo ['city'];
                        $save ['province'] = $winfo ['province'];
                        $save ['country'] = $winfo ['country'];
                        $save ['headimgurl'] = $winfo ['headimgurl'];
                        $res = $this->where ( $data )->save ( $save );
                } else {
                //        $data ['subscribe_time'] = time ();
                //        $uid = $this->get_uid_by_ucenter ( $data ['openid'], $data ['token'] );
                        //if ($uid > 0) {
                        //        $data ['id'] = $uid;
                        $data ['subscribe_time'] = $winfo ['subscribe_time'];
                        $data ['nickname'] = $winfo ['nickname'];
                        $data ['sex'] = $winfo ['sex'];
                        $data ['city'] = $winfo ['city'];
                        $data ['province'] = $winfo ['province'];
                        $data ['country'] = $winfo ['country'];
                        $data ['headimgurl'] = $winfo ['headimgurl'];

                        $res = $this->add ( $data );
                        //}
                        
                        $info = $data;
                }
                return $info;
        }

	//处理头像
	function get_name_by_touxiang($val) {
			if(!empty($val)){
					return('<img height="48px" src="'.$val.'" />');
			}else{
					return('<img height="48px" src="'.ADDON_PUBLIC_PATH.'/face.png" />');
			}
	}
	// 自动初始化微信用户
	function get_uid_by_ucenter($openid, $token) {
		static $_email_int = 0;
		$info ['openid'] = $openid;
		$info ['token'] = $token;
		$res = M ( 'ucenter_member' )->where ( $info )->find ();
		
		if ($res)
			return $res ['id'];
		
		$email = time () . rand ( 01, 99 ) . $_email_int . '@weiphp.cn';
		$nickname = uniqid () . rand ( 01, 99 ) . $_email_int;
		
		/* 调用注册接口注册用户 */
		$User = new UserApi ();
		$uid = $User->register ( $nickname, '123456', $email, '', $openid, $token );
		
		$_email_int += 1;
		
		return $uid;
	}
	
	/**
	 * 获取粉丝全部信息
	 */
	public function getFollowInfo($id) {
		static $_followInfo;
		if (isset ( $_followInfo [$id] )) {
			return $_followInfo [$id];
		}
		
		$_followInfo [$id] = $this->find ( $id );
		return $_followInfo [$id];
	}
}
?>

Run code

Cut to clipboard

4.进入后台，模型管理-粉丝管理-编辑，把列表定义改成：

id:粉丝编号
openid:OpenId
headimgurl|get_name_by_touxiang:头像
nickname:昵称
sex|get_name_by_status:性别
province:省份
city:城市
subscribe_time|time_format:关注时间
ids:操作:[EDIT]|编辑

Run code

Cut to clipboard

5.进入前台，基础插件-微信用户中心-拉取10000个已有粉丝，搞定

文章：weiphp微信框架耗时卡慢解决办法发表时间：2017-08-11, 17:43:21

展开↯

#¹⁰⁸⁷

作者：广西南宁市

谈在一个将TXT按章节分割的PHP程序中的收获
最近在做一个自动分割txt小说的东西，能够将一整个txt文件按照章节进行分割，然后分解成一个个小的.txt文件保存起来并且能够获取有多少章节和每章的章节名。

我最初的想法是：
① 先使用fopen打开文件，然后while循环使用fgets函数按txt文件中每一行读取
② 边读取边使用正则匹配出是否在这一句话中含有 “第**章”或者是“第**节”的字符串。如果有的话就把它存到一个数组中去。
③ 全部循环完成后使用count来计算数组的大小，然后使用foreach循环数组，将每一章的章节名进行字符串拼接(比如拼接成 '#章节名#' 这样的形式存到数据库中便于以后使用explode等函数进行章节名的分割)。

然后我就按照这个思路开始敲代码了。。但是很快便遇到了第一个问题
---- 如何使用正则表达式来匹配中文！！！

之前一直都是使用正则表达式来匹配一些英文啊字符啊什么的，我也一直以来都以为正则表达式可以直接匹配汉字的，于是就写了下面这样的代码

if(preg_match("/第[0-9一二两三四五六七八九十百千万]*[章节]/i",$hangdata,$matches)){
    
}

Run code

Cut to clipboard

我真的是把这个想的太容易了一点。。。结果就是什么也没有匹配出来。。

很多时候遇到问题第一想法就是不可能！！！然后就用把这行简单的代码看了一下，却没有发现有什么问题啊。。于是便开始百度，不得不说百度真的有很多有用的东西，很快便找到了网友共享的匹配中文字符的内容，要把汉字改成Unicode编码形式再去匹配。。。下面则是修改之后的代码

if(preg_match("/(\x{7b2c})(\s*)([\x{4e00}\x{4e8c}\x{4e09}\x{56db}\x{4e94}\x{516d}\x{4e03}\x{516b}\x{4e5d}\x{5341}\x{767e}\x{5343}0-9]+)(\s*)([\x{7ae0}\x{8282}]+)/u",$hangdata,$matches)){

}

Run code

Cut to clipboard

我想这次应该是没有问题了吧~正高兴着刷新了一下网页。。。我去怎么又没出来东西。。是不是网友的贡献出错了？于是仔细检查了一边却还是没发现有什么问题，于是网上找个一个php在线中文手册看了一下，原来使用preg_match匹配中文要求被匹配的内容是UTF-8编码。。而从txt中读取出来的一般是GBK编码的

于是又在前面加了一行字符转换代码

$hangdata=mb_convert_encoding($hangdata,"UTF-8","GBK");

Run code

Cut to clipboard

现在一运行~OK 完成了

但是就在滚动页面的时候却发现同一个章节的名字却被匹配出来两次甚至更多。。这个错误很严重啊，之前人家作者写了一章的内容，用这个一分变成好多章了。。
于是就在匹配出每一章的章节名的时候和距离他最近的读取出来的章节名进行对比，看是不是一样。
于是就在最开始定义了一个空的字符串变量
每次循环的时候都与当前章节名进行对比如果一样，就不再把当前的这一个章节名记录下来，如果不一样就记录下了并把章节名赋给这个变量。

虽然还有一点不尽人意的地方，但是主要的功能基本都已经实现了

文章：PHP分割txt纯文本小说格式章节发表时间：2017-08-11, 16:53:17

展开↯

#¹⁰⁸⁸

作者：广西南宁市

PHP用特殊符号分割小说内容和章节

$conn =file_get_contents('2.txt'); //读取内容
$conn=mb_convert_encoding($conn,"UTF-8","GBK");//设置不乱码


$arr = explode('#',$conn);用#号把标题扩起来分割,('#'也可以用其它的代替)
$result = array();


for($i = 1; $i < count($arr); $i++){ //循环数组,达到小说章节做为键,章节内容做为值


$result[$arr[$i]] = $arr[$i+1];


$i ++; 


} 
$k1 = array();
$v1 = array();
foreach ($result as $key => $v) {
$k1[] = $key;
$v1[] = $v;
}
//var_dump($k1);
//var_dump($v1); //不懂得小伙伴可以打印一下,,也可以私聊我>

Run code

Cut to clipboard

文章：PHP分割txt纯文本小说格式章节发表时间：2017-08-11, 16:50:44

展开↯

#¹⁰⁸⁹

作者：广西南宁市

		// 自动同步微信用户
		C ( 'USER_LIST' ) && $this->_autoUpdateUser ();
		C ( 'USER_GROUP' ) && $this->_updateWechatGroup ();

Run code

Cut to clipboard

#,广西南宁市,2017-08-11,16:03:51,

#,广西南宁市,2017-08-11,16:04:12,

function _autoUpdateUser

Run code

Cut to clipboard

文章：weiphp微信框架耗时卡慢解决办法发表时间：2017-08-11, 16:02:17

展开↯

#¹⁰⁹⁰

作者：广西南宁市

没有宽度和高度的盒子需要水平居中和垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin:0; padding:0;}
	.father{
		width:100%;
		height: 300px; 
		background: pink;
		
		text-align: center;
		line-height:300px;
	}
	.father li{
		border:1px solid red;
		
		display: inline-block; 
		_display:inline; 
	}
	</style>
</head>
<body>
	<ul class="father">
		
		<Li>1</Li>
        <li>2</li>
		<Li>1</Li>
        <li>2</li>
		<Li>1</Li>
        <li>2</li>
	</ul>
	
</body>
</html>

Run code

Cut to clipboard

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.big{
		width:500px; height:500px; background: pink;
		text-align: center;
		display: table;
		_position: relative;

	}
	.small{
		
		display: table-cell; 
		vertical-align: middle;
		_position:absolute;
		_top:50%;
		_left:50%;

	}
	.content{
	}
	</style>
</head>
<body>
	<div class="big">
		<div class="small">
			<div class="content">
				
				范德萨
			</div>
		</div>
	</div>
</body>
</html>

Run code

Cut to clipboard

#,广西南宁市,2017-06-27,17:31:29, kmp算法时间复杂度

#,广西南宁市,2017-06-27,17:34:41,@1, js curry 高阶函数链式操作 javascript高级属性、方法和对象

#,广西南宁市,2017-07-19,16:16:55, JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

#,广西南宁市,2017-08-11,15:38:45,

<!--盒子自动居中 类 middlesjs 加最后-->
<style>	.middlesjs{width:auto;display: inline-block;}</style>
<script>
	//自动居中
	$(document).ready(function(){
		  $(".middlesjs").each(function(){
			 var nw=$(this).width();
			 $(this).css({'left':'50%','margin-left':'-'+(nw/2)+'px','position':'relative'});
		  });
	});
</script>
<!--end-->

Run code

Cut to clipboard

#,广西南宁市,2017-08-11,15:39:08,@4,

<div class="bt1 middlesjs">

Run code

Cut to clipboard

文章：JavaScript的if判断的四种书写方式发表时间：2017-06-06, 10:11:21

展开↯

#¹⁰⁹¹

作者：广西南宁市

HTML <map> 标签
实例
带有可点击区域的图像映射：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

Run code

Cut to clipboard

文章：$(window) $(document) 区别发表时间：2017-08-11, 11:37:49

展开↯

#¹⁰⁹²

作者：北京市

在线小说阅读标题不对

#,北京市,2017-08-10,23:45:24, 看来4杯25℃得水倒在一起变成100℃这个传言是真的了。

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-08-10, 21:08:53

展开↯

#¹⁰⁹³

作者：广西南宁市

十种图片替换文本CSS方法

很多网站的logo都使用图片替换文本来实现，而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过，那么今天我老话重谈，整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理：

使用图片替换文本，其原理是相当的简单：就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点，优点就是能实现一些特殊的页面效果，缺点就是需要加载图片，而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处，另外据说会对搜索引擎的搜索有影响，对于这一点没有考究过。那么我们也不去控寻这方面的问题，我们一起来看今天所要说的图片替换文本的制作方法。

方法一：
HTML Markup

<h1 id="technique-one">
  <a href="#">w3cplus</a>
</h1>

Run code

Cut to clipboard

CSS Code:

#technique-one {
  width: 329px;
  height: 79px;
  background-image: url(images/w3cplus-logo.png);
}
#technique-one a {
  display: none;
}

Run code

Cut to clipboard

这种方法被称为“FIR”方法， Joe Clark在《Facts and Opinion About Fahrner Image Replacement》一文中有做深入的介绍。使用这种方法需要注意两点：

结构性需要增加一个标签包裹文本；如上面的HTML Markup所示；
需要把背景图设置在外标签上，并且将文本外标签隐藏。
这种方法有一个不好的地方就是不利于阅读器浏览网页。

方法二：
HTML Markup

<h1 class="technique-two">w3cplus</h1>

Run code

Cut to clipboard

CSS Code

.technique-two {
  width: 2329px;
  height: 79px;
  background: url(images/w3cplus-logo.png) no-repeat top right;
  margin: 0 0 0 -2000px;
}

Run code

Cut to clipboard

这种方法是Radu Darvas创建的，使用负margin配合宽度来制作。如果运用在简单之处，此方法可行，但对于复杂的布局中，大家还需慎用。因为其有可能会影响你的页面布局。

方法三：
HTML Markup

<h1 class="technique-three">w3cplus</h1>

Run code

Cut to clipboard

CSS Code

.technique-three {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

Run code

Cut to clipboard

这种方法是由Mike Rundle创建，并且简称为Phark方法，也是目前使用图片替换文本常和的方法。这种方法简单易懂而且支持阅读器之类浏览网页。其关键之处使用“text-indent属性，并且给其设置一个较大的负值，达到隐藏文本的效果，”如果你想了解的更深可以参考一下Malarkey Image Replacement (MIR)。

方法四：
HTML Markup

<h1 class="technique-four">
  <a href="#">
   <img src="images/w3cplus-logo.png" alt="w3cplus" />
 </a>
</h1>

Run code

Cut to clipboard

CSS Code

.technique-four {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

Run code

Cut to clipboard

这种方法，我不知道来自源于何处，也不知道其有什么优势之处，可以说他和方法三没有多大的区别，只是上面的替换的是文本，下面是替换的图片而以。这样使用我至今没有整明白是为什么?不知道是不是和SEO方面有关系。无从考究，先放上来给大家参考一下。

方法五：
HTML Markup

<h1 class="technique-five">
  <img src="images/blank.gif" alt="w3cplus" />
  <span>w3cplus</span>
</h1>

Run code

Cut to clipboard

CSS Code

.technique-five {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-five span {
  display: none;
}

Run code

Cut to clipboard

这种方法有一个特别之处我们此处使用一个透明的gif图片，通过在img标签中的“alt”属性来弥补display:none。这样阅读器之类的就能阅读到所替换的文本是什么。

方法六：
HTML Markup

<h1 class="technique-six">w3cplus</h1>

Run code

Cut to clipboard

CSS Code

.technique-six {
  width: 329px;
  padding: 79px 0 0 0;
  height: 0px;
  font-size: 0;
  background: url(images/w3cplus-logo.png);
  overflow: hidden;
}

Run code

Cut to clipboard

这种方法是由Seamus Leahy和Stuart Langridge发明。使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值。

方法七：
HTML Markup

<h1 class="technique-seven">
    <span>w3cplus</span>
</h1>

Run code

Cut to clipboard

CSS Code

.technique-seven {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-seven span {
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}

Run code

Cut to clipboard

Leon Dwyer想出的这种方法，通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果。真是好方法。

方法八：
HTML Markup

<h1 class="technique-eight">
  <span></span>w3cplus
</h1>

Run code

Cut to clipboard

CSS Code


.technique-eight {
  width: 329px;
  height: 79px;
  position: relative;
}
.technique-eight span {
  background: url(images/w3cplus-logo.png);
  position: absolute;
  width: 100%;
  height: 100%;
}

Run code

Cut to clipboard

Levin Alexander。这种方法在利用一个空白的span标签来放置背景图片，并对其进行绝对定位，使用覆盖文本，达到隐藏替换文本的效果。

方法九：
HTML Markup

<h1 class="technique-nine">w3cplus</h1>

Run code

Cut to clipboard

CSS Code

.technique-nine {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  font-size: 1px;
  color: white;
}

Run code

Cut to clipboard

Levin Alexander写的这种方法很独特，设置字体为微小值，但这里需要注意一点不能忘了设置字体色和替换图片色一样，不然会有一个小点显示出来。

方法十：
HTML Markup

<h1 class="technique-ten"><span>w3cplus</span></h1>

Run code

Cut to clipboard

CSS Code

.technique-ten {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
			
.technique-ten span {
  border: 0 !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px,1px,1px,1px);
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px;
}

Run code

Cut to clipboard

Jonathan Snook使用css的clip属性来实现图片替换文本的效果，详细可以参考Hiding Content for Accessibility。

方法十一
以前是通过text-indent的负值来隐藏文本，但其实还有一种类似的方法：

.hidden-text {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
}

Run code

Cut to clipboard

方法十二
今天在整理SASS的Mixin时，打算写一个图片替代文本的效果，让我意外发现一种新的图片替代文本方法，特意动手一试，还真心不错：

<a class="ir" id="logo" href="http://www.w3cplus.com">W3cplus</a>

Run code

Cut to clipboard

上面的结构，大家都清楚，就是一个logo的居住地，接下来，我们来看实现代码

#logo {
  background-image: url(http://www.w3cplus.com/sites/all/themes/w3cplusResponsive/logo.png);
  width: 125px;
  height: 115px;
  display: block;
  /*下面是关键代码*/
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}
#logo:before {
 content: "";
 display: block;
 width: 0;
 height: 150%;
}

Run code

Cut to clipboard

其中把起这个功能作用的代码抽出来，并定义为`ir`

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Run code

Cut to clipboard

最终效果，可以猛击：DEMO
转载 W3CPLUS

文章：a标签中写有文字并有图片如何隐藏文字只显示图片发表时间：2017-08-10, 15:17:30

展开↯

#¹⁰⁹⁴

作者：广西南宁市

jquery click事件如何在移动端自动转换成touchstart事件。
因为移动端click事件会比touchstart事件慢几拍
移动设备某个元素上事件执行顺序是：

touchstart
touchmove
touchend
click｛mousedown->mousemove->mouseup｝

Run code

Cut to clipboard

click事件在移动设备上虽然会识别但却是最后一个执行的，所以如果不把click事件换成touchstart事件的话，就可能造成延时导致交互上也慢了几拍
所以在移动端最好把click事件换成touchstart事件。
那么如何添加事件比较简单呢.
于是乎有了以下这种写法：

var handle = function (e) {
　　e.preventDefault(); // 阻止浏览器默认行为
　　alert('fuck world');
}
$('body').on(‘touchstart mousedown’,  handle );

Run code

Cut to clipboard

这样在pc端浏览器上面alert只执行一次，触发的事件是mousedown
在ios设备safari浏览器上面alert也只执行一次，触发的事件是touchstart

为什么只执行一次？
秘密在于当执行的是touchstart后，preventDefault掉了后面的click就不执行了，“非常完美”.
^_^! 一如既往的android设备蛋疼是必须的，测试发现除qq浏览器外其它浏览器都会alert两次
也就是说touchstart和mousedown的handle函数都执行了，似乎是e.preventDefault()没有起作用。具体原因不明...

因为要兼容，所以就没办法了只能通过判断是否支持touch事件来分别添加事件了..
那就扩展一个jquery方法插件吧仿一个on方法的插件方法比如名称为quickOn，

;(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
    　　if(!$.fn.quickOn){
            $.fn.quickOn= function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return $.fn.on.apply(this, arguments);    
            };
        }
　　})();

Run code

Cut to clipboard

quickOn虽然名字尴尬了一点，但是能用，例如：

$('body').quickOn('click', function(){
    alert('fuck world') ;
})

Run code

Cut to clipboard

额。。后来想想，为什么不直接重载jquery的on方法呢？？
来吧，试试

;(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on;
            $.fn.on = function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return _on.apply(this, arguments); 
            };
    })();

Run code

Cut to clipboard

这样暴力的来那么一下后，mmm....，on方法还是原来的用法，但如果你on的是click事件，那么在移动平台上会被替换成touchstart以迅速响应操作。

#,广西南宁市,2017-08-10,10:49:52, 弊端太大，比如说，如果是a标签新打开一个页面的话，会直接打开两个

#,广西南宁市,2017-08-10,11:07:20, 要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。

#,广西南宁市,2017-08-10,11:08:43, 在有用到滚动touch相关的事件里阻止了默认行为时，对DIV的点击绑定失效时，
将其转成A标签即可。

#,广西南宁市,2017-08-10,11:09:13, $('.class').on("click",function(){……});相当于$('.class').bind("click",function(){……});
$(document).on("click",'.class',function(){……});相当于$('.class').live("click",function(){……});
js生成的元素绑定事件必须使用live，但新版的jq，已经淘汰了live，可以用on方法代替，但必须注意写法。

文章：on click事件在移动端点击无效bug 发表时间：2017-08-10, 10:49:37

展开↯

#¹⁰⁹⁵

作者：广西南宁市

<style>
    .next_button{
        cursor:pointer
    }
</style>
<div class="button">
    <div class=" next_button button_left btn_red" style="width: 345px;">
    下一步
    </div>
</div>
<script>
$(document).on("click",".next_button",function(){
    alert();
});
</script>

Run code

Cut to clipboard

#,广西南宁市,2017-08-10,10:42:41, 正解，其实安卓和ios里面还有些不兼容的状态
使用苹果手机访问的时候，发现了一个坑爹的问题，如论如何点击“下一步”，都没有任何反应，可是在安卓和各种模拟器中一切正常。后来经过查找资料才知道，苹果有这么个设置：
对于点击的对象，拥有cursor:pointer这个样式的设置，也就是说，鼠标放上去，能够出现“手”型的图标才被认作可以使用点击事件，

#,广西南宁市,2017-08-10,10:46:31, 动态生成元素的点击事件

$(document).on("click",function(){})

Run code

Cut to clipboard

在andriod设备和电脑浏览器模拟上可以触发，而在apple移动设备上却无法触发。

试过很多办法，在元素生成后再绑定事件，把click改成touch事件，都没有用，最后好不容易百度到了解决办法
解决的方法很巧妙，就是给需要绑定事件的元素添加一个css

cursor: pointer

Run code

Cut to clipboard

selector {
  cursor:pointer
}

Run code

Cut to clipboard

文章：on click事件在移动端点击无效bug 发表时间：2017-08-10, 10:41:49

展开↯

#¹⁰⁹⁶

作者：广西南宁市

<script>
   $(selector).click(function(){console.log(‘1111‘)})
</script>

Run code

Cut to clipboard

文章：on click事件在移动端点击无效bug 发表时间：2017-08-10, 10:44:44

展开↯

#¹⁰⁹⁷

作者：广西南宁市

将click换成touchstart（在移动端基本都用吧）

 <script>
    $(document).on("touchstart",function(){console.log(‘22222‘)})
 </script>

Run code

Cut to clipboard

文章：on click事件在移动端点击无效bug 发表时间：2017-08-10, 10:43:32

展开↯

#¹⁰⁹⁸

作者：广西南宁市

JS 如何获取和监听屏幕方向的改变？
大概写一下：
方法一：用触发手机的横屏和竖屏之间的切换的事件

window.addEventListener("orientationchange", function() { 
// 宣布新方向的数值 
alert(window.orientation); 
}, false);

Run code

Cut to clipboard

方法二：监听调整大小的改变

window.addEventListener("resize", function() { 
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度) 
}, false);

Run code

Cut to clipboard

css判断横竖屏幕

@media screen and (orientation:portrait) { 
/* portrait-specific styles */ 
} 
/* landscape */ 
@media screen and (orientation:landscape) { 
/* landscape-specific styles */ 
}

Run code

Cut to clipboard

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

var mql = window.matchMedia("(orientation: portrait)"); 
// 如果有匹配，则我们处于垂直视角 
if(mql.matches) { 
// 直立方向 
alert("1") 
} else { 
//水平方向 
alert("2") 
} 
// 添加一个媒体查询改变监听者 
mql.addListener(function(m) { 
if(m.matches) { 
// 改变到直立方向 
document.getElementById("test").innerHTML="改变到直立方向"; 
} 
else { 
document.getElementById("test").innerHTML="改变到水平方向"; 
// 改变到水平方向 
} 
});

Run code

Cut to clipboard

文章：$(window) $(document) 区别发表时间：2017-08-10, 10:35:46

展开↯

#¹⁰⁹⁹

作者：广西南宁市

用JS或者jQuery可以监听浏览器窗口的变化吗 5
我要的效果是这样的：当浏览器窗口大小变化时（缩小或者放大浏览器窗口），能够实时获取当前浏览器窗口的宽度和高度。我说的实时指不用刷新当前页面，当浏览器窗口大小改变时就触发事件。
试试resize事件

$(window).resize(function() {
    var width = $(this).width();
    var height = $(this).height();
});

Run code

Cut to clipboard

不过resize事件好像对框架不起作用

#,广西南宁市,2017-08-10,10:34:25, 方法一：在标签上加入 onLoad="" onResize="" 方法写上对应的方法即可
方法二：window.onresize=function(){///.....} 在方法里面写上对应的代码即可
着两种方法基本都可以解决你的问题了

文章：$(window) $(document) 区别发表时间：2017-08-10, 10:33:47

展开↯

#¹¹⁰⁰

作者：广西南宁市

$(document).ready()于$(window).load()的区别。
1.执行时间不同：
从字面的意思上理解，$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档，dom树已经建立起来了，这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了，但页面不一定加载完毕，如一些大的图片等，加载完成就需要一定的时间；但是页面加载完毕后，dom肯定也就建立起来了；但是有些文字或者图片链接等需要在文档加载完毕前，dom树建立后就进行的，这时就要用到$(document).ready()了。
2.可以被执行的次数不同：
$(document).ready()可以在JavaScript代码中出现多次，并且里面的函数或者代码都可以得到执行；而$(window).load()只能在JavaScript代码中出现一次，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖;

<script>
$(document).ready(function(){
alert("test1");//这段代码会被执行
});
$(document).ready(function(){
alert("test2");//这段代码会被执行
});
$(window).load(function(){
alert("test1");//这段代码不会被执行
});
$(window).load(function(){
alert("test2");//这段代码将被执行
});
</script>

Run code

Cut to clipboard

3.执行的效率不同：
如要在dom的元素节点中添加onclick属性节点，这时用$(document).ready()就要比用$(window).load()的效率高；但是在某些时候还必须得用$(window).load()才行，如之前写的app下载，如果要关闭这个下载框，则必须要在整个下载框加载完毕后，才能点击关闭图标，对app下载框执行隐藏。

<script>
$(document).ready(function(){
$(".the_body a").attr("onclick","alert('test')");
});
$(window).load(function(){
$(".close_btn").click(function(){
$("#app_down").hide();
});
});
</script>

Run code

Cut to clipboard

文章：$(window) $(document) 区别发表时间：2017-08-10, 10:32:07

展开↯

#¹¹⁰¹

作者：广西南宁市

$(document) 是当前文档，就是你看到的整个网页
$(window) 如果没有框架则就是你浏览的当前浏览器的窗口

$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，因为它可以极大地提高web应用程序的响应速度

首先我解释一下jQuery jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之前执行。
为什么不用window.onload()，因为window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的。
但是 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数. $(document).ready(function(){ // 你的代码 });
$(document)意思是说，获取整个网页文档对象（类似的于window.document），

$(document).ready意思就是说，获取文档对象就绪的时候。上面这段代码的意思是检查文档对象直到它能够允许被操作

文章：$(window) $(document) 区别发表时间：2017-08-10, 10:30:58

展开↯

#¹¹⁰²

作者：广西南宁市

首先
$(document)这个是获取文档对象
$(window)这个是获取窗口对象，也就是浏览器客户区
给大家举个例子就非常直接明了了

$(document).height()
$(window).height()

Run code

Cut to clipboard

注意，让网页有滚动条
然后输出一下这两个值得大小，你就知道什么区别了

文章：$(window) $(document) 区别发表时间：2017-08-10, 10:18:14

展开↯

Records:2788 58/147 «‹54 55 56 57 58 59 60 61 62 ›»