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

本文主要是介绍jQuery中focusin()和focus()、find()和children()的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>