jQuery中focus()和focusin()、focus()和children()的差别

focus()和focusin()

focus()和focusin()的差别在于focusin()支持事件的冒泡。以下举例说明：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>focusin demo</title><style>span {display: none;}</style><script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body><p><input type="text"> <span>focusin fire</span></p>
<p><input type="password"> <span>focusin fire</span></p><script>
$( "p" ).focusin(function() {$( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});
</script></body>
</html>

当我们点击输入框时。其获得焦点。导致获得焦点事件向上冒泡，使得p标签触发获得焦点事件，而focus()并不支持事件冒泡，相同地。focusout()支持事件冒泡，而blur()不支持。

find()和children()

find()和children()的差别在于find()向下追溯多级子节点，而children()仅仅向下追溯一级子节点。find()和children()相同的地方是他们在寻找子节点时都不包括自身节点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">p{font-size: 20px;width: 200px;color: blue;font-weight: bold;margin: 0 10px;}.hilite {background: yellow;}#test{font-weight: bolder;}</style>
</head>
<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><script src="jquery-2.1.4.js"></script><script>$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );</script></body>
</html>

倘若将上例中的find()替换为children()，会得到不同的结果。

jQuery中focusin()和focus()、find()和children()的差别相关推荐

jQuery中blur和focus事件的应用
本文转自:http://blog.csdn.net/gaolinwu/article/details/7240674 jQuery中blur和focus事件的应用一.需求原因在填写表单时需要实现如 ...
jquery 中后代遍历之children、find区别
jquery 中children.find区别首先看一段HTML代码,如下: 1 <table id="tb"> 2 <tr> 3 <td>0 ...
php 获得焦点,jquery中blur()失去焦点与focus() 获取焦点事件
以前我们在js中写input各种事件时都会直接在input中写,昨天开始我开始全面使用jquery了,现在来谈一下我对jquery blur() focus()事件的学习笔记. 对于元素的焦点事件,我 ...
JQuery中的动画效果
show() hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画 JQuery中的动画效果.html <!DOCTYPE html&g ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
Jquery中bind和live的区别
Jquery中bind和live的区别 Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind(" ...
Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
jQuery中的事件机制与DOM操作
jQuery事件机制 jQuery的事件机制,指的是jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定.事件解绑.事件触发. 下面我们先来回顾一下事件的几种类型. 事件描述 c ...
jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...

jQuery中focusin()和focus()、find()和children()的差别

jQuery中focus()和focusin()、focus()和children()的差别

focus()和focusin()

find()和children()

jQuery中focusin()和focus()、find()和children()的差别相关推荐

最新文章

热门文章