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. Felx布局（三）

    flex网格布局 平均分布 最简单的网格布局,就是平均分布.在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放

  2. VC++内置数据类型存储及取值范围

    亲测,基于win7 32位,vs2012编译 结果: 代码: #include "stdafx.h" #include <iostream> #include < ...

  3. Go语言及Web框架Beego环境

    Go语言及Web框架Beego环境无脑搭建 [原]Go语言及Web框架Beego环境无脑搭建 本文涉及软件均以截至到2013年10月12日的最新版本为准 1. 相关软件准备: 1) go1.2rc1. ...

  4. 【转载】stm32的GPIO八种工作模式

    一.推挽输出:可以输出高.低电平,连接数字器件:推挽结构一般是指两个三极管分别受两个互补信号的控制,总是在一个三极管导通的时候另一个截止.高低电平由IC的电源决定.         推挽电路是两个参数 ...

  5. JS中的循环嵌套 BOM函数

    [嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做 ...

  6. linq语句复杂查询和分开查询的性能对比

    刚开始以为复杂的linq语句查询会不会比分开来写效率高,因为复杂的语句关联和嵌套多,执行应该慢.分开写虽然多了一次io处理,但是关联比较少,数据了比价少,和朋友讨了一下,回家就做了个测试,废话不多说, ...

  7. CVSS3.0打分学习

    打分计算器: Common Vulnerability Scoring System Version 3.0 Calculator: https://www.first.org/cvss/calcul ...

  8. Java多线程中线程间的通信

    一.使用while方式来实现线程之间的通信 package com.ietree.multithread.sync; import java.util.ArrayList; import java.u ...

  9. Python 基础 四 面向对象杂谈

    Python 基础  四  面向对象杂谈 一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...

  10. poj2785双向搜索

    The SUM problem can be formulated as follows: given four lists A, B, C, D of integer values, compute ...