2019-04-22

jQuery

jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，

使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让

写出来的代码更加优雅, 更加健壮，“如虎添翼”. 同时网络上丰富的 jQuery 插件也让我

们的工作变成了"有了 jQuery,一切 soeasy."--因为我们已经站在巨人的肩膀上了。

jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自

世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，

jQuery 已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超

过 55%在使用 jQuery。

一、jQuery 的下载和安装

1. 官网

http://jquery.com/ 下载

2. 版本

jQuery 2.x has the same API as jQuery 1.x, but does not support

Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)

（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码想高手学习是最好学习方法)

（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)

3. 优点

（1）提供了强大的功能函数

（2）解决浏览器兼容性问题

（3）实现丰富的 UI 和插件

（4）纠正错误的脚本知识

太多了! 等待我们一一去发现...............

4. 安装

在页面引入即可

二、jQuery 核心

"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象，通过该对象

可以获取 jQuery 对象，调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供

的方法。

$ <==> jQuery

三、DOM 对象和 jQuery 包装集对象

明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对

象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery

获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提

供的方法。

1. Dom 对象

javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:

var div = document.getElementById("testDiv");

var divs = document.getElementsByTagName("div");

2. jQuery 包装集|对象

可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组,

都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:

var jQueryObject = $("#testDiv");

3. Dom 转 jQuery 对象

Dom 对象转为 jQuery 对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv'); // 获取 Dom 对象

mydiv = $(domDiv);

4. jQuery 对象转 Dom 对象

jQuery 对象转 Dom 对象，只需要取数组中的元素即可

//第一种方式获取 jQuery 对象

var jqueryDiv = jQuery('#mydiv');

//第二种方式获取 jQuery 对象

jqueryDiv = $('#mydiv');

var dom = jqueryDiv[0];//将以获取的 jquery 对象转为 dom

通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象

$('#mydiv').each(function() {//遍历

var jquery = $(this);

})

案例

<div id="mydiv">write less, do more</div>

console.log("-------------获取 dom 对象------------------")

//dom 对象

var domDiv = document.getElementById("mydiv");

console.log(domDiv);

console.log("-------------获取 jquery 对象------------------")

//获取 jquery 对象

//第一种方式

var jqueryDiv = jQuery('#mydiv');

console.log(jqueryDiv);

//第二种方式

jqueryDiv = $('#mydiv');

console.log(jqueryDiv);

console.log("-------------dom 转 jquery------------------")

//dom 转 jquery 包装集/对象

var obj = $(domDiv);

console.log(obj);

console.log("-------------jquery 转 dom------------------")

//jquery 对象转 dom 对象

var dom = $('#mydiv')[0];//获取 jquery 对象转为 dom

//或

var dom2 = jqueryDiv[0];//将 jquery 对象转为 dom

console.log(dom);

console.log(dom2);

/*this 代表了 dom 对象，不是 jquery 对象*/

console.log("-------------dom 转 jquery------------------")

$('#mydiv').each(function() {//通过 id 选择器选择了 id 为 mydiv 的所有元素

然后进行遍历，那么遍历出的每个元素就是 id 为 mydiv 的标签元素，而 this 就代表了当前

的这个元素

var jquery = $(this);

})

console.log("-------------jquery 转 dom------------------")

$('#mydiv').each(function() {

var dom3 = this;

})

</script>

四、jQuery 选择器

和使用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提

供了简便的方式供我们查找|定位元素，称为 jQuery 选择器，选择器可以说是最考验一个人

jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。只

要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形

式返回。

jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。

基础选择器掌握即可 ,其他用到再查阅。

1. 基础选择器 Basics（掌握即可）

选择器名称举例

id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素

元素名称选择器 element $("div")选择所有 div 元素

类选择器 .class $(".blue")选择所有 class=blue 的元素

选择所有元素 * $("*")选择页面所有元素

组合选择器 selector1,

selector2,

selectorN

$("#testDiv,span,.blue")同时选中这几个选

择器匹配的元素

.blue{

background: blue;

}

</style>

<body>

<div id="mydiv2" class="blue">元素选择器</div>

<span class="blue">样式选择器</span>

</body>

charset="utf-8">

</script>

//id 选择器

console.log("======id====");

var idSelecter = $('#mydiv1');

console.log(idSelecter.html());

console.log(idSelecter.text());

//元素选择器

console.log("======name====");

var nameSe = $('div');//有多个 div 元素

nameSe.each(function(){

//this 是 dom 对象，$(this)是 jquery 对象

console.log($(this).text());

});

//类选择器，class

console.log("======class====");

var classSe = $('.blue');//有多个 class=blue 的元素

classSe.each(function(){

console.log($(this).text());

});

//通用选择器：*

console.log("======所有元素====");

var all = $("*");

console.log(all.length);

//组合选择器

console.log("======组合====");

var unionSe = $('span, .blue,div');

unionSe.each(function(){

console.log($(this).text());

});

</script>

dom：innerHTML="...."，innerText="....."

jquery： .html("...")，.text("......")

2. 层次选择器 Hierarchy

选择器名称举例

后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素

子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素

相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素

同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素

<!DOCTYPE html>

<html>

<head>

<title>层次选择器</title>

type="text/javascript">

</script>

.testColor{

background: green;

}

.gray{

background: gray;

}

</style>

</head>

<body>

<div id="parent">层次择器

<div id="child" class="testColor">父选择器

<img src="http://www.baidu.com/img/bd_logo1.png"

width="270" height="129" />

<img src="http://www.baidu.com/img/bd_logo1.png"

width="270" height="129" />

</div>

<div>

选择器 2<div>选择器 2 中的 div</div>

</div>

</body>

console.log("=========后代选择器-选择所有后代=====");

var ancestorS = $('#parent div');

ancestorS.each(function(){

console.log($(this).text());

});

console.log("=========子代选择器-选择儿子辈=====");

var child = $('#parent>div');

child.each(function(){

console.log($(this).text());

});

console.log("=========相邻选择器=====");

var pre_next = $(".gray + img");

console.log(pre_next.length);

console.log("=========同辈选择器,其后，（弟弟）=====");

var pre_siblings = $(".gray ~ img");

console.log(pre_siblings.length);

</script>

</html>

3. 表

单选择

器

Forms j/x 选择器

名称举例

表单选择器 :input 查找所有的 input 元素：$(":input")；注意：会匹配所

有的 input、textarea、select 和 button 元素。

文本框选择器 :text 查找所有文本框：$(":text")

密码框选择器 :password 查找所有密码框：$(":password")

单选按钮选择器 :radio 查找所有单选按钮：$(":radio")

复选框选择器 :checkbox 查找所有复选框：$(":checkbox")

提交按钮选择器 :submit 查找所有提交按钮：$(":submit")

图像域选择器 :image 查找所有图像域：$(":image")

重置按钮选择器 :reset 查找所有重置按钮：$(":reset")

按钮选择器 :button 查找所有按钮：$(":button")

文件域选择器 :file 查找所有文件域：$(":file")

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

</head>

<body>

<input type="hidden" name="uno" value="9999"

disabled="disabled"/>

姓名:<input type="text" id="uname" name="uname" /><br />

密码:<input type="password" id="upwd" name="upwd"

value="123456" /><br />

年龄:<input type="radio" name="uage" value="0"

checked="checked"/>小屁孩

<input type="radio" name="uage" value="1"/>你懂

得 <br />

爱好:<input type="checkbox" name="ufav" value="篮球"/>篮

球

<input type="checkbox" name="ufav" value="爬床

"/>爬床

<input type="checkbox" name="ufav" value="代码

"/>代码<br />

来自:<select id="ufrom" name="ufrom">

<option value="-1" selected="selected">请选

择</option>

</select><br />

简介:<textarea rows="10" cols="30"

name="uintro"></textarea><br />

头像:<input type="file" /><br />

<input type="image"

src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/>

<button type="submit" onclick="return checkForm();">提交

</button>

</form>

</body>

</html>

function checkForm(){

//获取所有的表单元素

$(":input").each(function(){

//console.log($(this)[0]);

console.log($(this)[0].tagName);

})

console.log("------+++++++++++++++++++++--------")

//获取 text

console.log("text-->"+$(":text").length); //1

//获取 password

console.log("password-->"+$(":password").length);//1

//获取 radio

console.log("radio-->"+$(":radio").length);//2

//获取 checkbox

console.log("checkbox-->"+$(":checkbox").length);//3

//获取 file

console.log("file-->"+$(":file").length);//1

//获取按钮

console.log("button-->"+$(":button").length);//2

//获取 submit 按钮

console.log("submit-->"+$(":submit").length);//1

//获取 image 按钮

console.log("image-->"+$(":image").length);//1

//获取 reset 按钮

console.log("reset-->"+$(":reset").length);//1

return false;

}

</script>

五、jQuery DOM 操作

jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的基础之上进行了优化，使用起来

更加方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节

点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式；动

画操作等。注意：以下的操作方式只适用于 jQuery 对象。

1. 操作元素的属性

获取属性

方法说明举例

attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回

checked，没有选中返回 undefined。

attr('checked')

attr('name')

prop(属性名称) 获取具有 true 和 false 两个属性的属性值 prop('checked')

<input type="checkbox" name="ch" checked="checked"/> aa

<input type="checkbox" name="ch" /> bb

</form>

var ch = $("input[type='checkbox']")

console.log(ch)

ch.each(function(idx, em){

console.log(idx + "-" + $(em) + "=" + this)

console.log($(em).attr('checked') + "==" + $(em).prop('checked'))

console.log('--------------')

})

</script>

设置属性

方法说明举例

attr(属性名称，属性值) 设置指定的属性值，操作 checkbox

时选中返回 checked，没有选中返

回 undefined。

attr('checked',’checked’)

attr('name',’zs’)

prop(属性名称，属性值) 设置具有 true 和 false 两个属性的

属性值

prop('checked',’true’)

移除属性

方法说明举例

removeAttr(属性名) 移除指定的属性 removeAttr('checked')

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

</head>

<body>

<pre>

<h5>1.attr()</h5>:设置或者返回元素的属性 ;

<h5>2.prop()</h5>:设置具有 true 和 false 两个属性的属性，

如 checked, selected 或者 disabled。

</pre>

<hr />

<input type="checkbox" name="all" checked="checked"/>全选

</body>

//获取属性值：attr

console.log($('#a1').attr('href'));

console.log($(':checkbox').attr('name'));

console.log($(':checkbox').attr('checked'));//若未选中显示

undefined，选中显示 checked

//获取属性值：prop

console.log($(":checkbox").prop('checked'));//若未选中显示

false，选中显示 true

console.log($('#a2').prop('href'))

//设置属性值

$('#a1').attr('href','http://www.shsxt.com');

$(":checkbox").prop("checked",false);

//移除属性

$('#a2').removeAttr('href');

</script>

</html>

2. 操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理

外还可以有专门的方法进行处理。

方法说明

attr(“class”) 获取 class 属性的值，即样式名称

attr(“class”,”样式名”) 修改 class 属性的值，修改样式

addClass(“样式名”) 添加样式名称

css() 添加具体的样式

removeClass(class) 移除样式名称

增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})

例：css({"background-color":"red","color":"#fff"});

2）css(“样式名”,”样式值”)

例：css('color','white')

<!DOCTYPE html>

<html>

<head>

<title>设置元素样式</title>

charset="utf-8"></script>

div{

padding: 8px;

width: 180px;

}

.blue{

background: blue;

}

.larger{

font-size: 30px;

}

.green {

background : green;

}

</style>

</head>

<body>

<h3>css()方法设置元素样式</h3>

</body>

//获取样式名称

console.log($("#remove").attr("class"));

//修改样式，那么 id 为 remove 的元素样式 class 只有 green

//$('#remove').attr("class","green")

//添加样式名称，class 名称 --叠加

//$('#conBlue').addClass("blue larger");

//添加元素具体样式

//{ "":"" , "":"" } 名:值对

$('#conRed').css({"background-color":"red","color":"#fff"});

$('#remove').css('color','red');

//移除样式

//$("#remove").removeClass("blue larger");

</script>

</html>

3. 操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是 html。

方法说明

html() 获取元素的 html 内容

html("html 内容") 设定元素的 html 内容

text() 获取元素的文本内容，不包含 html

text("text 内容") 设置元素的文本内容，不包含 html

val() 获取元素 value 值

val(‘值’) 设定元素的 value 值

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

</head>

<body>

<h3><span>html()和 text()方法设置元素内容</span></h3>

</body>

//获取 HTML 内容，包括 HTML 标签

console.log($('h3').html());

//获取文本内容，不包括 HTML 标签

console.log($('h3').text());

//获取 value 值

console.log($('[name=uname]').val());

//设置

$('#html').html("<p>使用 html 设置,看不到标签</p>");

$('#text').text("<p>使用 text 设置,能看到标签</p>");

$('[name=uname]').val("哈哈哈");

// console.info("abc");

// console.log("abc");

// console.warn("abc")

// console.error("abc");

</script>

</html>

4. 创建元素

在 jQuery 中创建元素很简单，直接使用核心函数即可

$(‘元素内容’)

$(‘<p>this is a paragraph!!!</p>’)

5. 添加元素

方法说明

prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以

是字符、HTML 元素标记。

$(content).prependTo(

selector)

把 content 元素或内容加入 selector 元素开头

append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以

是字符、HTML 元素标记。

$(content).appendTo(s

elector)

把 content 元素或内容插入 selector 元素内，默认是在尾部

before() 在元素前插入指定的元素或内容:$(selector).before(content)

after() 在元素后插入指定的元素或内容:$(selector).after(content)

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

div {

margin: 10px 0px;

}

span{

color: white;

padding: 8px

}

.red{

background-color: red;

}

.blue{

background-color: blue;

}

.green{

background-color: green;

}

</style>

</head>

<body>

<h3>prepend()方法前追加内容</h3>

<h3>prependTo()方法前追加内容</h3>

<h3>append()方法后追加内容</h3>

<h3>appendTo()方法后追加内容</h3>

</div>

</body>

</html>

var str ="<span id='mydiv' style='padding: 8px;width:

180px;background-color:#ADFF2F;'>动态创建 span</span>";

//1、使用 prepend 前加内容

$("body").prepend(str);

//2、使用 prependTo 前加内容

$("<b>开头</b>").prependTo('body');

//3、使用 append 后加内容

$("body").append(str);

//$("div").append($('.red'));//当把已存在的元素添加到另一处的时候相当于

移动

//4、使用 appendTo 后追加内容

$(str).appendTo('body');

//$('.blue').appendTo("div");

</script>

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

span{

color: white;

padding: 8px

}

.red{

background-color: red;

}

.blue{

background-color: blue;

}

.green{

background-color: green;

}

</style>

</head>

<body>

<h3>before() 和 after()方法在元素之前后插入内容</h3>

</body>

</html>

var str1 = "<span class='red'>土豪</span>";

var str2 = "<span class='blue'>暴发户</span>";

$(".green").before(str1); //前置元素

$(".green").after(str2); //后存元素

</script>

6. 删除元素

方法说明

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。

empty() 清空所选元素的内容

<!DOCTYPE html>

<html>

<head>

charset="utf-8"></script>

span{

color: white;

padding: 8px;

margin: 5px;

float: left;

}

.green{

background-color: green;

}

.blue{

background-color: blue;

}

</style>

</head>

<body>

<span class="green">jquery<a>删除</a></span>

<span class="blue">javase</span>

<span class="blue">servlet</span>

</body>

</html>

//删除所选元素或指定的子元素

//$("span").remove();

//删除样式为 blue 的 span

//$("span.blue").remove();

//清空元素

//$("span").empty();

//$(".green").empty();

</script>

7. 遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element 是当前的元素，此时是 dom 元素。

<!DOCTYPE html>

<html>

<head>

span{

color: white;

padding: 8px;

margin: 5px;

float: left;

}

.green{

background-color: green;

}

.blue{

background-color: blue;

}

</style>

type="text/javascript" charset="utf-8"></script>

</head>

<body>

<span class="green">jquery</span>

<span class="green">javase</span>

<span class="green">servlet</span>

</body>

$('span').each(function (idx , e) {

console.log(idx + " ---> " + $(e).text());

})

</script>

</html>

六、Jquery 事件

1. ready()加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

<!DOCTYPE html>

<html>

<head>

<title>ready 事件</title>

charset="utf-8"></script>

//文档载入完便触发 ready 方法

$(document).ready(function(){

$("div").html("ready go...");

})

//$(document).ready(function(){}) == $(function(){})

$(function(){

$("p").click( function () {

$(this).hide();

});

$(function(){

$("#btntest").bind("click",function(){

$("div").html("剁吧...");

});

</script>

</head>

<body>

<h3>页面载入时触发 ready()事件</h3>

</body>

</html>

2. bind()绑定元素事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject))

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可

以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click,

dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,

mouseleave,change, select, submit, keydown, keypress, keyup, error 。

[, eventData]：传递的参数，格式：{名:值,名 2:值 2}

handler(eventObject)：该事件触发执行的函数

简单的 bind()事件

$(function(){

/*$("#test").bind("click",function(){

alert("世界会向那些有目标和远见的人让路！！");

});*/

* js 的事件绑定

ele.onclick=function(){};

* */

//等同于上面的放方法

$("#test").click(function(){

alert("世界会向那些有目标和远见的人让路！！");

});

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件（事件类型）

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

* */

$("#btntest").bind('click',function(){

//$(this).attr('disabled',true);

$(this).prop("disabled",true);

})

});

</script>

<body>

<h3>bind()方简单的绑定事件</h3>

<div id="test" style="cursor:pointer">点击查看名言</div>

</body>

绑定多个事件

$(function(){

//绑定 click 和 mouseout 事件

/*$("h3").bind('click mouseout',function(){

console.log("绑多个事件");

});*/

//链式编程

$("h3").bind('click',function(){

alert("链式编程 1");

}).bind('mouseout',function(){

$("#slowDiv").show("slow");//让 slowDiv 显示

});

/*$("#test").click(function(){

console.log("点击鼠标了....");

}).mouseout(function () {

console.log("移出鼠标了...");

});*/

$("#test").bind({

click:function(){

alert("链式编程 1");

mouseout:function(){

$("#slowDiv").show("slow");

}

});

</script>

<body>

<h3>bind()方法绑多个事件</h3>

<div id="test" style="cursor:pointer">点击查看名言</div>

人之所以能，是相信能

</div>

</body>

自学 jQuery 动画

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 219,753评论 6赞 508
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,668评论 3赞 396
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 166,090评论 0赞 356
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,010评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,054评论 6赞 395
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,806评论 1赞 308
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,484评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,380评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,873评论 1赞 319
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,021评论 3赞 338
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,158评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,838评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,499评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,044评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,159评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,449评论 3赞 374
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,136评论 2赞 356

2019-04-22

推荐阅读更多精彩内容