find()与children()

<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
</body>

find

$(".level-2").find("li").css("border", "1px solid red");

结果:

children

$(".level-2").children().css("border", "1px solid red");

结果

结论:

两者都是用来寻找当前结点的后代元素,但children找的是直系(只向下找一级),find找的是所有的子孙后代;用法上,chilren不用跟参数,find则必须跟参数。

绑定与解绑事件

bind()

用法:

bind(eventType [, eventData ], handler)

handler是绑定到当前选中的元素,所以这些元素在调用bind之前必须存在

自jQuery3.0开始,已不建议使用

<body>
<p>Click or double click here.</p>
<span></span>
</body>
$("p").bind("click", function (event) {
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});


对于动态增加的元素,之前通过bind绑定的事件对它不起作用。例如:

$("body").append("<p>新增</p>");

live

用法:

live(events, handler)

描述:

Attach an event handler for all elements which match the current selector, now and in the future.

自jQuery1.7开始,已不建议使用

小结论:bind和live一次只能绑定一个事件,且都已不被建议使用。

delegate

用法:

delegate(selector, eventType, handler)

描述:

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

自jQuery3.0开始,已不建议使用

<body>
<p>Click me!</p>
</body>
$("body").delegate("p", "click", function () {
$(this).after("<p>Another paragraph!</p>");
});

结果:点击p都会产生新的"Another paragraph!",而对新产生的p标签点击之后也绑定了click事件。

点击原有的p标签



点击新生的p标签

on

用法:

on(events [, selector ] [, data ], handler)

描述:

Attach an event handler function for one or more events to the selected elements.

<body>
<p>click me</p>
</body>
$("p").on("click select", function () {
alert("attention");
});
$("body").append("<p>new one</p>");

结果



结论

函数名 可绑定的事件数 能对后添加元素绑定事件 jQuery建议版本
bind 1 不能 <=3.0
live 1 <=1.7
delegate <=3.0
on 不能 now

对应的解绑函数分别为 unbind() die() undelegate() off()

jQuery中易混淆知识点总结(持续更新)的更多相关文章

  1. js中一些小知识点总结--持续更新

    以下知识点来自于编写高质量代码-改善JavaScript程序的188个建议,只用于自我知识的补充. 一.NaN 1.NaN是一个特殊的数量值,不表示一个数字,尽管下面的代码仍然是返回类型为number ...

  2. JQuery中易混淆的概念

    append(): 向每个匹配的元素内部追加内容. <p>I would like to say: </p> $("p").append("< ...

  3. C#中易混淆的知识点

    C#中易混淆的知识点 一.引言 今天在论坛中看到一位朋友提出这样的一个问题,问题大致(问题的链接为:http://social.msdn.microsoft.com/Forums/zh-CN/52e6 ...

  4. Java-web易混淆知识点整理

    Java-web易混淆知识点 post和get区别 post: 数据不会显示在地址栏 安全 大小无限制 可以提交二进制文件 get: 数据显示在地址栏 不安全 get方式提交有大小限制(约4kb) 相 ...

  5. lua中易混淆函数

    lua中易混淆的函数 ipairs和pairs: ipairs只能顺序遍历table,遇到key不是数字就会退出 pairs可以遍历table中所有元素 ----------------------- ...

  6. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  7. PHP 日常开发过程中的bug集合(持续更新中。。。)

    PHP 日常开发过程中的bug集合(持续更新中...) 在日常php开发过程中,会遇到一些意想不到的bug,所以想着把这些bug记录下来,以免再犯! 1.字符串 '0.00'.'0.0'.'0'  是 ...

  8. C#、Java中的一些小知识点总结(持续更新......)

    前言:在项目中,有时候一些小的知识,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小知识点,以备用,并持续更新...... 1.禁用DataGridV ...

  9. C# 知识点记录(持续更新中)

    从看C#入门经典开始系统的学习C#,本文主要记录学习过程中的一些知识点,也是我博客生涯的开始,比较重要成体系的部分会单重新写文章整理归纳. 1.一字不变的字符串 @字符 使转义序列不被处理,按照原样输 ...

随机推荐

  1. 以正确的姿势实现一棵JavaScript菜单树

    菜单树是常见的前端特效, 一般长下面这样 还有各种形态的变种, 有长这样的 也有长这样的 尽管这些菜单的相貌都不尽相同, 在功能实现的本质上却都是相同的.实现程序的大致流程如下 读取服务器端的菜单数据 ...

  2. Eclipse中Maven插件部分常用功能命令介绍

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6689010.html Eclipse中安装Maven插件之后,就能很方便的管理Maven项 ...

  3. [UWP]了解模板化控件(4):TemplatePart

    1. TemplatePart TemplatePart(部件)是指ControlTemplate中的命名元素.控件逻辑预期这些部分存在于ControlTemplate中,并且使用protected ...

  4. 转账示例(三):service层面实现(线程管理Connection)(本例采用QueryRunner来执行sql语句,数据源为C3P0)

    缺点:Service层面还是不应该出现关于事务的操作1.自行创建C3P0Uti,account数据库,导入Jar包 2.Dao层面 接口: package com.learning.dao; impo ...

  5. 一条SQL搞定信息增益的计算

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 周东谕,2011年加入腾讯,现任职于腾讯互娱运营部数据中心,主要从事游戏相关的数据分析和挖掘工作. 信息增益原 ...

  6. 使用Spring标签<form:textarea>时,用readonly=“readonly”属性时不起作用。

    最近的一个项目用到了Spring标签<form:textarea>,当在设置其只读属性时,使用readonly="readonly"不起作用,还是能修改内容. 在网上找 ...

  7. [Git]06 如何提交空目录

     git和 svn不同,仅仅跟踪文件的变动,不跟踪目录.所以,一个空目录,如果里面没有文件,即便 git add 这个目录,另外在别处 check out 的时候,是没有这个空目录的. 只跟踪文件 ...

  8. hadoop高可靠性HA集群

    概述 简单hdfs高可用架构图 在hadoop2.x中通常由两个NameNode组成,一个处于active状态,另一个处于standby状态.Active NameNode对外提供服务,而Standb ...

  9. 蓝桥杯-李白打酒-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  10. hdu1054最小顶点覆盖

    最小定点覆盖是指这样一种情况: 图G的顶点覆盖是一个顶点集合V,使得G中的每一条边都接触V中的至少一个顶点.我们称集合V覆盖了G的边.最小顶点覆盖是用最少的顶点来覆盖所有的边.顶点覆盖数是最小顶点覆盖 ...