评论 - lizhenqiu blog

#¹¹⁰³

作者：广西南宁市

谈在一个将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

展开↯

#¹¹¹⁹

作者：广西南宁市

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

jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

$(document).scrollTop() 获取垂直滚动的距离即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端只需要获取到scrollTop()==0的时候就是顶端了

要获取底端只要获取

scrollTop()>=$(document).height()-$(window).height()

Run code

Cut to clipboard

就可以知道已经滚动到底端了

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

Run code

Cut to clipboard

自己做个实验就知道了

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

Run code

Cut to clipboard

#,广西南宁市,2017-08-10,10:17:18, 不错！简洁有力。但是要获取底端只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了可以只判断scrollTop()=$(document).height()-$(window).height()吗？小于是什么情况会出现？

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

展开↯

#¹¹²⁰

作者：广西南宁市

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

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

展开↯

#¹¹²¹

作者：北京市

有一段和《两个只能活一个》共用的配乐。和《放逐》《复仇》组成三部曲，标题就叫《任达华叫黄秋生去杀黄秋生不想杀的三个人》。

文章：那些质量很高却冷门的电影发表时间：2017-08-10, 01:32:14

展开↯

Records:2804 59/148 «‹55 56 57 58 59 60 61 62 63 ›»