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. java 基础知识三 java变量

    java  基础知识 三 变量 1.作用域 {} 包围起来的代码 称之为代码块,在块中声明的变量只能在块中使用 2.常量 就是固定不变的量,一旦被定义,它的值就不能再被改变. 3.变量 变量必须在程序 ...

  2. jsel、tl是什么

    el 表达式是什么? * sun 制订的一种用于计算的一种规则,可以给元素赋值,也可以直接输出 el表达式:${el表达式}实验1:简单的使用el表达式获取值<%request.setAttri ...

  3. jenkins+webhook+docker做持续集成

    简介:我们现在都流行把项目封装成docker的镜像,不过实际用的时候就会发现很麻烦,我们每次更改代码了以后都要打包成docker容器 ,事实证明项目比较多的时候真的会让人崩溃,我这边用spring c ...

  4. Unity加载场景、计时器、加载时不销毁某物体

    异步加载场景,SceneManager.LoadSceneAsync(SceneName);需引用 using UnityEngine.SceneManagement;命名空间, Applicatio ...

  5. UITableView grouped样式使用探索

    UITableView的style有plain和grouped两种样式,两种样式各有不同的风格和功能,plain样式已经封装好了悬停功能,gouped样式则为我们在区头和区尾在实际项目开发中需要我们选 ...

  6. 跨语言学习的基本思路及python的基础学习

    笔者是C#出身,大学四年主修C#,工作三年也是C#语言开发.但在学校里其他的语言也有相应的课程,eg:Java,Php,C++都学过,当然只是学了皮毛(大学嘛,你懂得),严格来说未必入门,但这些语言的 ...

  7. 数据结构与算法(c++)——跳跃表(skip list)

    今天要介绍一个这样的数据结构: 单向链接 有序保存 支持添加.删除和检索操作 链表的元素查询接近线性时间 ——跳跃表 Skip List 一.普通链表 对于普通链接来说,越靠前的节点检索的时间花费越低 ...

  8. 用Web抓包分析工具Livepool 实现本地替换开发

    这是官方的介绍: LivePool 是一个基于 NodeJS,类似 Fiddler 支持抓包和本地替换的 Web 开发调试工具,是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷 ...

  9. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  10. Vue 项目实战系列 （一）

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...