什么是链式编程
链式编程 是将多个操作(多行代码)通过点号"."链接在一起成为一句代码。 链式代码通常要求操作有返回值, 但对于很多操作大都是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>