什么是链式编程
链式编程 是将多个操作（多行代码）通过点号"."链接在一起成为一句代码。 链式代码通常要求操作有返回值， 但对于很多操作大都是void型，什么也不返回，这样就很难链起来了， 当然也有解决办法，可能不太优雅。 链式编程的新思想在jQuery中已流行使用；那么接下来咱们看一下链式编程。
链式编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: green;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
// 获取按钮调用点击事件,获取div设置p标签内容，点击按钮设置背景颜色
$('#btn').click(function () {
// 普通写法
$('#dv').html('<p>我是一个p</p>');
$('#dv').css('backgroundColor', 'red');
// 链式编程： Object.method().method()..... 前提方法的返回值 仍然是一个这个对象
$('#dv').html('<p>我是一个p</p>').css('backgroundColor', 'red');
// 断链
// 此时.html() 是获取的字符串对象 而不是当前对象
var obj = $('#dv').html().css('backgroundColor', 'red');
// $(...).html(...).css is not a function
console.log(obj);
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv">
</div>
</body>
</html>链式编程案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-1.12.2.js"></script>
<script>
// 获取列表中所有li，当鼠标进入后，当前的li有高亮显示。点击的时候，当前点击的li的字体变大并且颜色发生改变，改变字体
$(function () {
$('ul > li').mouseover(function () {
$(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor', '').css('color', 'green');
}).click(function () {
$(this).css('fontSize', '30px').siblings('li').css('fontSize', '16px');
})
});
// 点击按钮改变按钮的value值，鼠标进入到按钮中 按钮的宽高改变，鼠标离开的时候按钮颜色为绿色
$(function () {
$('#btn').click(function () {
$(this).val('已经改变的效果');
}).mouseover(function () {
$(this).css({'height': '100px', 'width': '120px'});
}).mouseout(function () {
$(this).css('backgroundColor', 'green');
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>拓展 获取兄弟元素的一些方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
// 获取ul中所有的li 为每个li注册鼠标进入的事件
// 当鼠标获取到时，对当前元素的兄弟元素进行操作
$('#uu > li').mouseenter(function () {
// .next() 获取当前元素的下一个兄弟元素
$(this).next().css('backgroundColor', 'green');
// .nextAll() 获取当前元素下面的所有兄弟元素
$(this).nextAll().css('backgroundColor', 'red');
// .prev() 获取当前元素的前一个元素
$(this).prev().css('backgroundColor', 'yellow');
// .prevAll() 获取当前元素前面所有的元素
$(this).prevAll().css('backgroundColor', 'black');
// ,siblings() 获取当前元素的所有兄弟元素 不包括自己
$(this).siblings().css('backgroundColor', 'pink');
});
});
</script>
</head>
<body>
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>啤酒案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
width: 200px;
position: absolute;
left: 500px;
}
ul li {
margin-top: 10px;
cursor: pointer;
text-align: center;
font-size: 20px;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
// 获取ul中所有li 有鼠标进入事件 鼠标离开事件 点击事件
$(function () {
$('ul > li').mouseenter(function () {
$(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');
}).mouseleave(function () {
$(this).css('backgroundColor', '').siblings('backgroundColor', '');
}).click(function () {
// // 当前元素前面所有兄弟元素，背景为黄色
// $(this).prevAll().css('backgroundColor', 'yellow');
// // 当前元素后面所有兄弟元素，背景为蓝色
// $(this).nextAll().css('backgroundColor', 'blue');
// 链式编程
// 如果直接调用 会出现断链
// 当执行到第一个css方法时，返回对象是当前对象之前的所有兄弟对象，然后再次调用当前对象的所有兄弟对象会出现我们不想看到的结果
// .end() 回复到断链之前的对象
$(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
});
});
</script>
</head>
<body>
<ul>
<li>青岛啤酒（TsingTao）</li>
<li>瓦伦丁（Wurenbacher）</li>
<li>雪花（SNOW）</li>
<li>奥丁格教士（Franziskaner）</li>
<li>科罗娜喜力柏龙（Paulaner）</li>
<li>嘉士伯Kaiserdom</li>
<li>罗斯福（Rochefort）</li>
<li>粉象（Delirium）</li>
<li>爱士堡（Eichbaum）</li>
<li>哈尔滨牌蓝带</li>
</ul>
</body>
</html>