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中的6种运算符总结

    JavaScript 运算符主要包括: 算术运算符 赋值运算符 比较运算符 三元运算符 逻辑运算符 字符串连接运算符 运算符 说明 例子 运算结果 + 加 y = 2+1 y = 3 - 减 y = ...

  2. How To Use ggplot in ggplot2？

    1.What is ggplot2 ggplot2基本要素 数据(Data)和映射(Mapping) 几何对象(Geometric) 标尺(Scale) 统计变换(Statistics) 坐标系统(C ...

  3. 用SourceTree轻松Git项目图解

    这篇文档的目的是:让使用Git更轻松. 看完这篇文档你能做到的是: 1.简单的用Git管理项目. 2.怎样既要开发又要处理发布出去的版本bug情况. SourceTree是一个免费的Git图形化管理工 ...

  4. linux命令之crontab定时执行任务

    一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动c ...

  5. 笔记：查看linux系统开机时间

    [root@localhost ~]# uptime -s -- :: 通过命令uptime -s 查看系统开机时间

  6. linux c socket 并发 服务端

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types. ...

  7. vue学习笔记-one

    学习vue基础以来,看各种教程,练习,随手写写,有错误请大家指导, 目前vue已经升级到2.0的版本,学习也最好是2.0的版本开始. 先看vue的几个特点:1,简单,2,轻量,3,模块友好 4, 组件 ...

  8. (转载)Google的PageRank算法

    本文由张洋(敲代码的张洋)投稿于伯乐在线. 本文转载于:http://blog.jobbole.com/23286/ 很早就对Google的PageRank算法很感兴趣,但一直没有深究,只有个轮廓性的 ...

  9. Python re 正则表达式简介

    1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...

  10. IOC容器的依赖注入

    1.依赖注入发生的时间 当Spring IoC容器完成了Bean定义资源的定位.载入和解析注册以后,IoC容器中已经管理类Bean定义的相关数据,但是此时IoC容器还没有对所管理的Bean进行依赖注入 ...