this指的是原生js的DOM对象

.css（“”）：只写一个值是取值，写俩值是赋值

window.onload   ===   $(document).ready();

$(“”):获取元素   标签名、.类名、#id

　　　　jQuery特点

  1. 链式编程
    1. jq.shou（3000）.html（内容）
        1. 相当于
          1. jq.shou（3000）
          2. jq.gtml（内容）
  2. 隐式迭代
    1. 隐式实用for循环、迭代

      如何使用jQuery

  3. 引包
    1. 一定要在使用之前
    2. <script src = ‘’><>
  4. 入口函数
    1. $（document）.ready（function（｛｝））
  5. 绑定时间
    1. 事件源.事件（function（）｛事件驱动函数｝）

      jQuery入口函数

  6. 文档加载完毕，图片未加载的时候执行函数
    1. $（document）.ready（function（｛｝））
    2. $(function(){})
  7. 文档和图片都加载完毕执行函数
    1. $(window).reday(function(){})
  8. JS入口只能有一次，多次会覆盖
  9. jqery可有多个入口函数
  10. $ === jQuery

    jQuery和DOM对象的区别

  11. jQuery对象是一个数组，包含原生jsDOM对象
  12. 原生js对象是一个原生对象
  13. jQuery对象名 = $（js对象名）
  14. js对象转换为jQuery对象
    1. jquery对象名[索引值]
    2. jquery对象名.get(wwm索引值）
  15. 不同的对象有不同的方法
  16. JQuery对象方法包含原生js对象方法.
  17. jQuery对象.length的返回值是元素个数

    jQuery选择器

  18. 基本：#id、.类、标签名、
    1. *通配符选择器
  19. 层级选择器
    1. 子代选择器 >
    2. 后代选择器 空格隔开
    3. 基本过滤选择器
        1. ： eq（index）遍历元素数组
        2. ：odd 获取偶数位索引的元素
        3. ：even获取奇数位索引值的元素
  20. 筛选选择器
    1. find（selector）：找到父元素的素所有子元素
        1. 父元素.find（‘要查找的子元素’）
        2. 查找所有后代子元素
      1. children：亲儿子
        1. 父元素.children（‘要查找的子元素’）
        2. 仅查找子元素
    2. ：eq（index）
    3. next（）；下一个兄弟节点
    4. parent（）：获取该元素的父元素
    5. siblings：所有的兄弟节点（不包括本身） 
      <!DOCTYPE html>
      
<html>
      
<head lang="en">
      
    <meta charset="UTF-8">
      
    <title></title>
      
    <style type="text/css">
      
        * {padding: 0;margin: 0;}
      
        ul { list-style-type: none;}

        .parentWrap {
      
            width: 200px;
      
            text-align:center;

        }

        .menuGroup {
      
            border:1px solid #999;
      
            background-color:#e0ecff;
      
        }

        .groupTitle {
      
            display:block;
      
            height:20px;
      
            line-height:20px;
      
            font-size: 16px;
      
            border-bottom:1px solid #ccc;
      
            cursor:pointer;
      
        }

        .menuGroup > div {
      
            height: 200px;
      
            background-color:#fff;
      
            display:none;
      
        }

    </style>
      
    <script src="jquery-1.11.1.min.js"></script>
      
    <script>
      
        $(function () {
      
            //需求：鼠标点击span，让他下面的div显示出来。让其他的div隐藏。
      
            $(".parentWrap span").click(function () {
      
//                $(this).next().show();
      
//                //让其他的隐藏
      
//                //点击的span的父亲li，的所有的兄弟元素li，的孩子元素div全部隐藏。
      
//                $(this).parent("li").siblings("li").children("div").hide();
      
                //连式编程
      
                $(this).next().show().parent("li").siblings("li").find("div").hide();
      
            });
      
        })
      
    </script>
      
</head>
      
<body>
      
<ul class="parentWrap">
      
    <li class="menuGroup">
      
        <span class="groupTitle">标题1</span>
      
        <div>我是弹出来的div1</div>
      
    </li>
      
    <li class="menuGroup">
      
        <span class="groupTitle">标题2</span>
      
        <div>我是弹出来的div2</div>
      
    </li>
      
    <li class="menuGroup">
      
        <span class="groupTitle">标题3</span>
      
        <div>我是弹出来的div3</div>
      
    </li>
      
    <li class="menuGroup">
      
        <span class="groupTitle">标题4</span>
      
        <div>我是弹出来的div4</div>
      
    </li>
      
</ul>
      
</body>
      
</html>

      手风琴案例

jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、的更多相关文章

  1. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  2. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  3. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  4. jQuery对象与dom对象的区别与相互转换

    什么是jQuery对象? 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.例如: $("#test").htm ...

  5. jQuery学习-----（二）JQuery对象与DOM对象的区别与转换

    1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...

  6. 关于jquery对象和DOM对象的区别

    这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所 ...

  7. jquery对象和DOM对象的区别和转换

    jquery对象和DOM对象的区别和转换 在使用jquery时,我们直接通过jq的选择器获取元素,然后对元素进行操作,用jq选择器获取到的对象是一个jq对象,jq对象能够使用jq提供的方法,但是不能用 ...

  8. jQuery对象和普通DOM对象的区别

    1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...

  9. 深刻了解jQuery对象和普通DOM对象的区别

    深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样 ...

随机推荐

  1. feign传输String json串 自动转义 \ 解决方法

    @RequestMapping(value={"/sysOrgRest/getInfoByOrgIds"}, method={org.springframework.web.bin ...

  2. Win服务程序编写以及安装一般步骤

    Win服务程序编写以及安装一般步骤 Windows服务的优点有:1. 能够自动运行.2. 不要求用户交互.3. 在后台运行.本文将介绍常见服务程序编写的一般步骤以及注意事项. 设计服务程序实例: 创建 ...

  3. 02、安装Linux系统

    1.我们打开VM软件,然后点击“创建新的虚拟机”,选择“经典”选项 2.选中“稍后安装操作系统”单选按钮,然后单击“下一步”按钮 3.将客户机操作系统的类型选择为“Linux”,版本为"Re ...

  4. memcached中hash表相关操作

      以下转自http://blog.csdn.net/luotuo44/article/details/42773231 memcached源码中assoc.c文件里面的代码是构造一个哈希表.memc ...

  5. ajax+JQuery实现类似百度智能搜索框

    最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助. 下面先 ...

  6. 自己实现spring核心功能 一

    聊聊spring spring对于java开发者来说,是最熟悉不过的框架了,我们日常开发中每天都在使用它.它有着各种各样的好处,简单易用,得心应手... ... 我们一说到spring就会讲到ioc ...

  7. Linux 目录递归赋权，解决 Linux权限不够

    如你要操作一个目录下的文件时,系统提示 “权限不够”,可用以下方法解决. 如 test 文件目录. 1.用root账号登陆系统. 2.输入如下命令: chmod 777 test -R 这样访问.修改 ...

  8. Unity进阶之ET网络游戏开发框架 03-Hotfix层启动

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  9. 最大层内元素和----leetcode周赛150_1002

    题目描述: 给你一个二叉树的根节点 root.设根节点位于二叉树的第 1 层,而根节点的子节点位于第 2 层,依此类推. 请你找出层内元素之和 最大 的那几层(可能只有一层)的层号,并返回其中 最小 ...

  10. spring-boot-plus V1.2.1 发布 文件上传下载和静态资源访问

    [V1.2.1-RELEASE] 2019.08.21 ⭐️ New Features 文件上传保存到服务器指定目录 文件下载 访问上传的图片等资源 启用项目静态资源访问,可访问static/temp ...