链式编程

多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程

.html(‘val’).text(‘val’).css()链式编程,隐式迭代

链式编程注意:$(‘div’).html(‘设置值’).val(‘设置值’);这样可以,但是$(‘div’).html().text()这样是不对的,因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。

案例:

页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红,
当点击某个li的时候,让该li之前的所有li背景色变黄,之后的所有li背景色变蓝。自
己不变色。注意:nextAll()、prevAll()等方法返回值是一个元素集合,这里链式编程
时要想清楚当前返回的值是什么。

获得兄弟元素的几个方法:

next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素(上一个)
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素

以下代码为主要代码:

$("ul>li").mouseenter(function () {
  $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
  }).click(function () {
    $(this).prevAll().css("backgroundColor","yellow");
  $(this).nextAll().css("backgroundColor","blue");
  }).mouseleave(function () {
  $(this).css("backgroundColor","");
});

显示效果:

特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢

jQuery链式编程的更多相关文章

  1. Jquery链式编程及Index()详解

    Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...

  2. jQuery——链式编程与隐式迭代

    链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...

  3. jQuery链式编程时修复断开的链

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

  4. [jQuery]jQuery链式编程(六)

    链式编程 节约代码量 <button>快速</button> <button>快速</button> <button>快速</butt ...

  5. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  6. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  7. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  8. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

  9. 模拟jquery底层链式编程

    //特点1:快级作用域,程序启动自动执行 //内部的成员变量,外部无法访问(除了var) //简单的函数链式调用 function Dog(){ this.run=function(){ alert( ...

随机推荐

  1. SpringCloud学习系列之二 ----- 服务消费者(Feign)和负载均衡(Ribbon)使用详解

    前言 本篇主要介绍的是SpringCloud中的服务消费者(Feign)和负载均衡(Ribbon)功能的实现以及使用Feign结合Ribbon实现负载均衡. SpringCloud Feign Fei ...

  2. WebApi用户登录验证及服务器端用户状态存取

    最近项目需要给手机端提供数据,采用WebApi的方式,之前的权限验证设计不是很好,这次采用的是Basic基础认证. 1.常见的认证方式 我们知道,asp.net的认证机制有很多种.对于WebApi也不 ...

  3. Smobiler Service是什么?(Smobiler——.NET移动开发平台)

    在得知Smobiler即将推出新产品SmobilerService之后,许多人第一个疑问便是——Smobiler Service是什么? Smobiler的开发者对这个exe窗口一定不陌生,有时候因为 ...

  4. maven私服上传jar包

    将一下脚本保存在.bat文件执行,红色部分按实际情况修改: @echo off set groupId=com.xxxset artifactId=xxxset version=0.0.1set ja ...

  5. Odoo 12 开发手册指南(八)—— 业务逻辑 – 业务流程的支持

    在前面的文章中,我们学习了模型层.如何创建应用数据结构以及如何使用 ORM API 来存储查看数据.本文中我们将利用前面所学的模型和记录集知识实现应用中常用的业务逻辑模式. 本文的主要内容有: 以文件 ...

  6. 通过 mysqlbinlog 和 grep 命令定位binlog文件中指定操作

    1.binlog日志基本知识 MySQL的二进制日志binlog可以说是MySQL最重要的日志,它记录了所有的DDL和DML语句(除了数据查询语句select),以事件形式记录,还包含语句所执行的消耗 ...

  7. 20190429 - 如何访问 macOS 的 httpd、mysql 等服务

    问题:在局域网,通过其它机器访问 macOS 上的服务时,提示拒绝. 解决:将 macOS 防火墙 80.3306 端口打开. macOS 内置防火墙,也许开启了防火墙.Icefloor 是一个老牌的 ...

  8. ES6 模块化笔记

    ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量. ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入. // ...

  9. Hadoop系列001-大数据概论

    本人微信公众号,欢迎扫码关注! 大数据概论 1.大数据概念 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式才能具有更强的决策力.洞察发 ...

  10. 部署tomcat环境

    1.安装java jdk Java环境变量配置 2.下载64位tomcat https://tomcat.apache.org/download-70.cgi 3.配置service 打开cmd,执行 ...