- 概述
jQuery的原则英文的就是"Write Less,Do More"即写更少的代码,做更多的事,其隐式迭代与链式编程的两大特点很好的诠释和实现了jQuery的目的;
1)通过示例来了解隐式迭代实现的底层逻辑
2)通过示例来了解链式编程的原理;了解什么情况下可以使用链式编程,什么情况破坏了链式编程中的链,如何操作才能继续使用链式编程
- 隐式迭代
隐式迭代:遍历内部DOM元素的过程 称之为隐式迭代
jQuery可以实现隐式迭代的原因是被jQuery包装的对象就是一个JQ的对象集合;
JQ隐式迭代底的层逻辑就是把jQuery对象集合中的元素在方法内部进行循环遍历,让每一个元素都执行同一个方法
小案例:让每个li背景色变为红色(样式可以自己随便写)
<button id="btn1">JS方式</button>
<button id="btn2">JQ方式</button>
<ul id="ul1">
<li>百度</li>
<li>搜狐</li>
<li>新浪</li>
</ul>
<script type="text/javascript">
//隐式迭代
$(function () {
//通过js实现
document.getElementById('btn1').click = function () {
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'red';
//第二种方法 为每一项添加此类名
//lis[i].className = 'red';
}
}
//通过JQ实现
$('#btn2').click(function () {
$("ul li").css('backgroundColor', 'red');
//$("ul li").addClass('red');
});
});
</script> 案例中: JQ中的$("ul li")相当于JS的lis;JQ的css()方法相当于JS的整个for循环内容
由此不难理解JQ隐式迭代的底层就是通过css()内部的循环来实现的
通过JQ与JS在实现同一种功能的对比,不难看出JQ使用代码更少的原因是大量的底层代码是在引入的jQuery文件中书写的,由此显现出了隐式迭代的一大特点
JS原生代码与JQ隐式迭代的代码即实现结果
- 链式编程
链式编程:在JQ中使用jquery方法后会直接返回当前的jquery对象
链式编程的应用就是将多个操作通过点号"."链接在一起让其成为一个整体
应用格式:$(选择器).方法名1.方法名2..例如 $('#dv1').css().css()...
1 通过示例了解链式编程的原理
//创建一个对象
var obj = new Object();
//为对象添加一个属性和两个方法
obj.name = '链式编程';
//无法链式编程的方法
obj.sayHi = function () {
//方法由obj调用,所以this表示对象obj,可以点出其属性
console.log('=====sayHi方法=====');
console.log(this.name);
}
//可以链式编程的方法
obj.sayHello = function () {
console.log('=====sayHello方法=====');
console.log(this.name);
//直接返回当前对象
return this;
}
//调用方法
obj.sayHello().sayHello();
obj.sayHi().sayHi(); 
链式编程的原理
图中错误信息的意思是调用了未定义对象的方法,因为没有返回对象
jQuery中的链式编程底层逻辑与此类似,只是实现方式与此不同
var sp1 = $('#sp1');
//JQ内部重新创建一个新的对象
//将获取的元素赋值给新对象
var jqSp1 = sp1;
//通过JQ对象调用方法
jqSp1.css('font-size', '30px'); 这样做的好处是在jQuery中对象随便切换,方法由JQ统一调用,方便外界使用
2 链式编程的破坏性操作
在jQuery中的方法不可能无限制的一直链下去,在jQuery中是否可以持续链式编程的核心就看其返回值
在jQuery方法返回值大体有三种:
2.1 方法返回当前对象,可以继续使用链式编程
2.2 方法返回,但返回值不是对象,而是字符串的方法,例如text(),val()等方法
2.3 方法返回的不是当前对象而是新对象,例如next(),siblings等方法
注意:text(),val(),css()等方法只是获取值时无法链式编程,但是设置值时又可以链式编程,原因就是又返回了当前对象
<ul id="ulList">
<li>华为</li>
<li>中兴</li>
<li>京东方</li>
</ul>
//========破坏链式编程的方法=========
//1 返回字符串
console.log($('#ulList li').text());//华为中兴京东方
//2 返回新对象
//返回两个它的兄弟对象
console.log($('#ulList li:eq(0)').siblings()); 链式编程时在“.”的时候是针对的上个方法的返回值的节点集合的操作;链式编程就是将当前对象像田径比赛的接力棒一样一棒棒向下传,能不能继续链接就看方法的返回值
3 通过JQ的 end()方法返回被破坏前的对象
end()方法:结束当前链条中的最近的筛选操作,还原为之前的JQ对象
与电脑上的ctrl＋z的功能类似;
<ul id="ulList">
<li>华为</li>
<li>中兴</li>
<li>京东方</li>
</ul>
//将第一个li前景色设置为蓝色
$('#ulList li:eq(0)').css('color', 'blue');
//通过end()方法返回第一个li对象,重新设置为红色
$('#ulList li:eq(0)').siblings().end().css('color', 'red');