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()的差别的更多相关文章

  1. jQuery中val()、text()、html()之间的差别

    一.括号里没有值时表示取值    val获取表单中的值: text获取对象中的文本内容,不包含html标签: html获取对象中的内容,包括html标签 <!DOCTYPE HTML> & ...

  2. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  3. jquery 中后代遍历之children、find区别

    jquery 中children.find区别 首先看一段HTML代码,如下: <table id="tb"> <tr> <td>0</t ...

  4. jQuery中的常用方法：empty()、each()、$.each()、$.trim()、focus()（二）

    <!DOCTYPE html> <html> <head> <title>02_commonMethod.html</title> < ...

  5. 1. jQuery中的DOM操作

    1)查找节点 通过jQuery选择器来完成 2)创建节点 创建元素节点:var newTd = $("<td></td>") 创建文本节点:在创建元素节点时 ...

  6. 解决上一篇jquery中on的疑惑

    内容都是来自:http://www.365mini.com/page/jquery-on.htm.这里做一下收藏.文章的最后  疑问和解答可以解决所有的疑惑  看了之后能更好的整篇文章. on()函数 ...

  7. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  8. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  9. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

随机推荐

  1. mysql开发之---每日一得01

    2015年7月7日------------------------- 1.truncate表会清空建表语句auto_increment的值:某个表的id即是主键也是自增,你能够选择插入随意id值,假设 ...

  2. 在IntelliJ IDEA中创建Maven多模块项目

    在IntelliJ IDEA中创建Maven多模块项目 1,创建多模块项目选择File>New>Project 出现New Project窗口左侧导航选择Maven,勾选右侧的Create ...

  3. [Tailwind] Apply mobile-first Responsive Classes in Tailwind

    In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply st ...

  4. Python游戏server开发日记（二）绕过GIL启动多线程Python环境

    说道Python和多线程,非常easy想到GIL,GIL意味着仅仅要是用Python做的多线程程序.就无法利用多个CPU. 经过一些失败的尝试后,我也一度觉得GIL是无解的.我们甚至把注意力转向了Ir ...

  5. （十一）Unity5新特性----实战2D游戏

    孙广东  2015.7.11 在本教程中,将了解到U5新功能.你通过本教程.您将了解下面内容: Changes in Component Access Physics Effectors Adding ...

  6. 浅谈cocos2dx(17) 中单例管理模式

    ----我的生活,我的点点滴滴!. 首先明白一个问题.什么是管理者模式,管理类是用来管理一组相关对象的类,他提供了訪问对象的接口,假设这么说比較抽象的话.我们来看下cocos2dx中都有哪些类是管理类 ...

  7. 0x06 倍增

    这东西太玄学了我真是不太会... 对于这道例题,很容易看出最大值必然是最大减最小,次大减次小…… 常规的贪心思想,分的个数一样,总长度越大越好.其实我的第一想法是二分右端点..但是只有40,至今没有搞 ...

  8. 编程求解，输入两个整数n和m,从数列1,2,3，……n中随意取几个数，使其和等于m。要求将所有的可能组合列出来

    import java.util.LinkedList; import java.util.Scanner; public class Main { private static LinkedList ...

  9. SqlServer数据库字典

    网上有很多SQL Server数据库字典的SQL语句,七零八落,我在工作整理了一下思路,总结SQL代码如下.数据库字典包括表结构(分2K和2005).索引和主键. 外键.约束.视图.函数.存储过程.触 ...

  10. Oracle学习系类篇（二）

    1.Oracle对表的增删改 1.1添加列 1.2修改列 1.3 删除列 1.4 修改表名称 1.5 修改列名称 1.6 删除主键约束 1.7 添加主键约束 1.8 添加外键约束