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. ipv6的连接

    基础知识不说了,网上一大堆! 基本内容不说了,写字太累了! 只说三点细节,记住就行: 1.ff开头的是多播地址,只能用于udp多播 2.fe80开头的是本地link地址,不管ping也好,connec ...

  2. c#小灶——数据类型

    C#中有许多数据类型,存储不同的数据要用不同的数据类型.我们这里面向初学只介绍值类型,引用类型和指针类型在后续的学习中会有接触. 整型 int是最常用的整型,用来存储整数.除了int之外,还有其他不常 ...

  3. Broadcast 使用详解

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  4. getpost请求案例

    public class MainActivity extends AppCompatActivity { private ListView lv; @Override protected void ...

  5. 关于JSON解析的问题（js序列化及反序列化）

    我们都知道,现在的开发模式都是前后端分离的,后台返回数据给前端,前端负责数据交互并渲染到页面,所以我们需要从后端接口上获取数据显示到页面上.在接受服务器端数据数据时,一般是字符串.这时,就需要用到JS ...

  6. JS鼠标吸粉特效

    HTML <canvas id=canvas></canvas> CSS * { margin: 0; padding: 0; } html { overflow: hidde ...

  7. websocket初体验（小程序）

    之前上个公司做过一个二维码付款功能,涉及到websocket功能,直接上代码 小程序onShow方法下加载: /** 页面的初始数据 **/ data: { code: "", o ...

  8. 使用sc 命令写脚本 添加和删除服务 简单应用

    添加服务 @echo.服务启动...... @echo off @sc create 服务名 binPath= "%~dp0\服务路径" @sc config 服务名 start= ...

  9. [AI] 论文笔记 - CVPR2018 Super SloMo: High Quality Estimation of Multiple Intermediate Frames for Video Interpolation

    写在前面 原始视频(30fps) 补帧后的视频(240fps) 本文是博主在做实验的过程中使用到的方法,刚好也做为了本科毕设的翻译文章,现在把它搬运到博客上来,因为觉得这篇文章的思路真的不错. 这篇文 ...

  10. PrintWriter out = response.getWriter();乱码解决

     resopnse  request的乱码问题 今天在改项目时,发现这个简单又容易忽视在问题.说起这个问题,比较简单,但也比较容易忽视.下面就具体讲讲这个问什么会出现乱码问题. request乱码指的 ...