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. Jenkins 配置 SpringBoot 自动构建部署

    服务器版本 Linux version 3.10.0-957.12.1.el7.x86_64 (mockbuild@kbuilder.bsys.centos.org) (gcc version 4.8 ...

  2. Keil5调试过程中遇到的一些警告和错误

    最近用keil5调试代码出了一些警告与错误,整理如下: 1.warning: #1295-D: Deprecated declaration run_c - give arg types void r ...

  3. 自己动手写Spring框架--IOC、MVC

    对于一名Java开发人员,我相信没有人不知道 Spring 框架,而且也能够轻松就说出 Spring 的特性-- IOC.MVC.AOP.ORM(batis). 下面我想简单介绍一下我写的轻量级的 S ...

  4. Unity学习--捕鱼达人笔记

    1.2D模式和3D模式的区别,2D模式默认的摄像机的模式是Orthographic(正交摄像机),3D模式默认的摄像机的模式是Perspective(透视摄像机).3D会额外给你一个平衡光.3D模式修 ...

  5. Hystrix超时测试

    package com.cookie.test; import com.netflix.hystrix.HystrixCommand; import com.netflix.hystrix.Hystr ...

  6. JAVA-SpringMVC 概述及组件介绍

    一.SpringMVC概述 SpringMVC是一个WEB层.控制层框架,主要用来负责与客户端交互,业务逻辑的调用. SpringMVC是Spring家族中的一大组件,Spring整合SpringMV ...

  7. Fabric项目学习总结

    1.Hyperledger Fabric的基本架构 2.PKI机制

  8. 监控JVM

    WAS配置visualVM 在was控制台:找到应用程序服务器--java和进程管理--进程定义--JAVA虚拟机/通用JVM 参数 ,对应英文Application servers > ser ...

  9. 2017版 Jetbrains 系列软件激活方法

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...

  10. C++通过宏定义判断操作系统及编译器

    INTRODUCTION: C++的编译环境千奇百怪,很多时候一些代码在某些编译环境下可用,一旦移到其他环境下,就会干脆Compile Error 对此,我们可以使用C++的宏定义来判断操作系统,从而 ...