jquery事件链式写法

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title> Hello JQuery</title>
    <script  lang ="javascript" type ="text/javascript" src ="JQuery/jquery-2.1.0.min.js"> 
    </script>
    <style type ="text/css">
        .divFrm {
            width:300px;border: 2px solid #625d5d; font-size:12px;
        }
        .divTitle {
            background-color:#08fcfc;padding :5px;
        }
        .divContent {
            padding:5px;display:none;
        }
        .divCurrColour {
            background-color:red;
        }
    </style>
</head>
<body>
     <!-- 添加jquery的引用文件-->
    <script type ="text/javascript">
        $(function () {
            $(".divTitle").click(function () {
                $(this).addClass("divCurrColour")
                    .next(".divContent").css("display", "block")
            });
        });
    </script>
     <div class = "divFrm">
       <div class ="divTitle"> 主题</div>
       <div class ="divContent">
           <a href="http://baidu.com">链接一</a><br />
           <a href="http://jquery.com">链接二</a><br />
           <a href="http://www.google.com/">链接三</a>
           <!-- <a></a> 链接的标记字段-->
       </div>
     </div>
</body>
</html>

说明：

中间红色的为事件的链式写法，实现两个事件：

1、改变 <div class ="divTitle"> 主题</div> 的颜色

2、显示   <div class ="divContent">

中间通过.next链接起来

时间： 2024-08-03 16:12:15

jquery事件链式写法的相关文章

JQuery事件的链式写法

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery事件的链式写法</title> <link type="tex

Jquery | 基础 | 事件的链式写法

$(".title").click(function () { $(this).addClass("curcol").next(".content").css("display", "block"); }); <!DOCTYPE html> <html> <head> <title>jQuery事件的链式写法</title> <script

简述jQuery的链式操作

首先,两个问题: JQuery的链式操作是如何实现的? 为什么要用链式操作? 怎样使用链式操作? 原理百度上面一大把,我也不能很好的解释,不过它的用法很简单: 关键就在于对象里的方法有:return this.这就是说调用了方法之后把对象给返回了回来,不就可以继续调用方法了吗?所以链式操作就这样实现了.举个栗子: //定义一个类 function Obj(){} //扩展它的原型 Obj.prototype = { setName:function(name){ this.name = name

Delphi Sysem.JSON 链式写法

链式写法有很多优点:连贯.语意集中.简洁.一气呵成.可读性强.比如要把 3.1415926 中的 59 提取为一个整数:Pi.ToString().Substring(5,2).ToInteger() 轻车熟路的感觉,让人觉得,哇!好帅的写法,牛x. 以前以为只有 TJSONBuilder 才支持链式语法,今天发现 TJSONObject 也支持,比如要生成下面的 JSON { "name": "张三", "vip": true, "t

Java 链式写法

Java链式写法,子类继承父类的属性,也可以返回子类的对象,只是需要重写基类的Set方法 public class MyLS { public static void main(String[] args) { // TODO Auto-generated method stub System.out.println(new Student().setName("1").setAge(21).toString()); System.out.println(new NAN().setNa

Java链式写法

原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11613067.html Java 链式写法:详细看代码 package chain; /** * TODO * 解析器 */ public class Parser { private String id; private String mode; private String concatIdMode; public static Parser parse(){ return new Pa

JQuery的链式编程，隐式迭代是啥意思？

链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明'; obj.age =  155: //链式编程是这样的. obj.name('小明').age(15); 2.注意 链式编程注意: $('div').html('设置值').val('设置值');这样是可以的. 但是$('div').html().text()这样是不对的,因为获取值时返回的是获取的字符串而

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

这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jquery源码分析(http://www.cnblogs.com/aaronjs/p/3279314.html),自己写出来的一个实现,选择器用的querySelector,关于链式编程也只是返回this而已,这也算是自己看jquery源码解决的第一个问题吧,继续加油. 现在想来当年面试官确实没说错,我jquer

jQuery的链式编程和隐式迭代

1.链式编程 链式编程示例: .html('v').text('v'); 注意:$('div').html('设置值').val('设置值');这样可以,但是$('div').html().text();这样是不对的,因为获取值时返回的是获取的字符串,而不是对象本身,所以不能链式编程. "破坏链"的问题 链式编程的时候一定要注意在什么时候"破坏"了链,当前对象的传递,如果传递被破坏,则继续链式编程会有意想不到的结果. nextAll() prevAll() sibi