Maison > Article > interface Web > La différence entre focusin() et focus() et find() et children() dans jQuery
La différence entre focusin() et focus() et find() et children() dans jQuery
- 黄舟original
- 2017-06-27 13:19:001508parcourir
La différence entre focus() et focusin(), focus() et children() dans jQuery
focus() et focusin()
La différence entre focus() et focusin() est que focusin() prend en charge le bouillonnement d'événements. Voici un exemple :
<!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>Quand on clique sur. la zone de saisie, qui obtient le focus, fait remonter l'événement focus, provoquant le déclenchement de l'événement focus par la balise p, et focus() ne prend pas en charge le bouillonnement d'événements. De même, focusout() prend en charge le bouillonnement d'événements, mais flou() le fait. pas.
find() et children()
La différence entre find() et children() est que find() retrace plusieurs niveaux de nœuds enfants, tandis que children () Ne tracez qu'un seul niveau de nœuds enfants. La même chose entre find() et children() est qu'ils n'incluent pas leurs propres nœuds lors de la recherche de nœuds enfants.
<!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>Si vous remplacez find() dans l'exemple ci-dessus par children(), vous obtiendrez des résultats différents.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!