链式编程

1、原理:return this;

2、通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。

3、end():结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.1.js"></script>
<style>
ul {
list-style: none;
} li {
width: 50px;
background-color: #cccccc;
margin: 10px;
}
</style>
<script>
$(function () {
$("button").click(function () {
//end()会过滤一次返回$("li").eq(3)的对象
$("li").eq(3).css("height", 50).prevAll().css("height", 100).end().css("backgroundColor", "red");
});
});
</script>
</head>
<body>
<button>end()</button>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

隐式迭代

1、含义:方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。如果获取的是多元素的值,大部分情况下返回的是第一个元素的值

2、优点:jQuery这一特性相比较js而言,在注册事件上很方便,无需循环注册事件

3、each():函数遍历;虽然有隐式迭代,但是对每个元素做不同的处理,这时候就用到了each方法

//参数一表示当前元素在所有匹配元素中的索引号
//参数二表示当前元素(DOM对象)
//element是一个js对象,需要转换成jquery对象
$(selector).each(function(index,element){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.1.js"></script>
<style>
span {
font-size: 50px;
cursor: pointer;
}
</style>
<script>
$(function () {
//点到谁 谁就会变成实心的
//
$("span").mouseenter(function () {
$(this).text("★").prevAll().text("★").end().nextAll().text("☆");
});
$("div").mouseleave(function () {
$("span").each(function (index, ele) {
if ($(ele).attr("lighted") == 1) {
$(ele).text("★");
} else {
$(ele).text("☆");
}
});
});
$("span").click(function () {
$(this).attr("lighted", 1);
$(this).prevAll().attr("lighted", 1);
$(this).nextAll().attr("lighted", 0);
});
});
</script>
</head>
<body>
<div>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
</body>
</html>

jQuery——链式编程与隐式迭代的更多相关文章

  1. JQuery的链式编程,隐式迭代是啥意思?

    链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...

  2. JQuery的链式编程与隐式迭代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 大数据技术之_16_Scala学习_06_面向对象编程-高级+隐式转换和隐式值

    第八章 面向对象编程-高级8.1 静态属性和静态方法8.1.1 静态属性-提出问题8.1.2 基本介绍8.1.3 伴生对象的快速入门8.1.4 伴生对象的小结8.1.5 最佳实践-使用伴生对象解决小孩 ...

  4. Scala 中的隐式转换和隐式参数

    隐式定义是指编译器为了修正类型错误而允许插入到程序中的定义. 举例: 正常情况下"120"/12显然会报错,因为 String 类并没有实现 / 这个方法,我们无法去决定 Stri ...

  5. Scala隐式转换和隐式参数

    隐式转换 Scala提供的隐式转换和隐式参数功能,是非常有特色的功能.是Java等编程语言所没有的功能.它可以允许你手动指定,将某种类型的对象转换成其他类型的对象或者是给一个类增加方法.通过这些功能, ...

  6. Scala基础:闭包、柯里化、隐式转换和隐式参数

    闭包,和js中的闭包一样,返回值依赖于声明在函数外部的一个或多个变量,那么这个函数就是闭包函数. val i: Int = 20 //函数func的方法体中使用了在func外部定义的变量 那func就 ...

  7. 12、scala隐式转换与隐式参数

    一.隐式转换 1.介绍 Scala提供的隐式转换和隐式参数功能,是非常有特色的功能.是Java等编程语言所没有的功能.它可以允许你手动指定,将某种类型的对象转换成其他类型的对象. 通过这些功能,可以实 ...

  8. Scala 学习之路(十三)—— 隐式转换和隐式参数

    一.隐式转换 1.1 使用隐式转换 隐式转换指的是以implicit关键字声明带有单个参数的转换函数,它将值从一种类型转换为另一种类型,以便使用之前类型所没有的功能.示例如下: // 普通人 clas ...

  9. Scala 系列(十三)—— 隐式转换和隐式参数

    一.隐式转换 1.1 使用隐式转换 隐式转换指的是以implicit关键字声明带有单个参数的转换函数,它将值从一种类型转换为另一种类型,以便使用之前类型所没有的功能.示例如下: // 普通人 clas ...

随机推荐

  1. Self Centos + Windows server 2016

    Set up by Derek: 2019-1-25 登陆个人物理机: license  60天Free , 如果过期,就在 VMware ESXI 6.5.0的黑屏界面去reset. https:/ ...

  2. codevs——1430 素数判定

    1430 素数判定  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 青铜 Bronze 题解       题目描述 Description 质数又称素数.指在一个大于1的自然数中, ...

  3. Java使用JNative调用DLL库

    编写测试DLL文件,源文件参照JNA调用用的DLL文件.地址:http://www.cnblogs.com/vevy/p/9076941.html (很重要)右键项目 --> 属性 --> ...

  4. java ee标准DataSource理解

  5. Domino V8 在 UNIX/Linux 平台上的安装及其常见问题

    在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用 Domino V8 的安装需求 Domino V8 可以支持多种平台和操作系统,表1 列出了其支持的各种 UNIX/Lin ...

  6. MySQL计算字段

    计算字段 数据库中存放的表是按列存放,可是有时客户机想获得的信息是若干列之间的组合,或者求和的值.这个组合或者求和的动作能够放在客户机应用程序来做.可是在数据库中实现更为高效. 这个新计算出来的结果就 ...

  7. MVC异常过滤器 (错误页)

    控制器 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  8. IT痴汉的工作现状22-由Dalvik虚拟机引发的口水战

    Dalvik是啥呢? 从未知道冰岛有Dalvik这么一个重要的村庄.直到Dan Bornstein将自己为Android系统编写的进程虚拟机命名为Dalvik后才被我所知. 它是Android系统独有 ...

  9. canvas上的像素操作(图像复制,细调)

    canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...

  10. mysql sql执行错误#1436 Thread stack overrun

    1.mysql调用存储过程  call proc1() 时报错:Thread stack overrun: 6656 bytes used of a 8496 byte stack, and 1280 ...