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. mysql主从配置详解(图文)

    最近工作不是很忙,把以前整理的mysql数据库的主从配置过程记录一下,有不足之处,请各位多多纠正指教 #环境配置#master IP:192.168.46.137 slave IP:192.168.4 ...

  2. spark 入门教程合集

    看到一篇不错的 spark 入门教程的合集,在此记录一下 http://www.cnblogs.com/shishanyuan/p/4699644.html

  3. node命令行工具之实现项目工程自动初始化的标准流程

    一.目的 传统的前端项目初始流程一般是这样: 可以看出,传统的初始化步骤,花费的时间并不少.而且,人工操作的情况下,总有改漏的情况出现.这个缺点有时很致命. 甚至有马大哈,没有更新项目仓库地址,导致提 ...

  4. 【模板】珂朵莉树（ODT）（Codeforces 896C Willem, Chtholly and Seniorious）

    题意简述 维护一个数列,支持区间加,区间赋值,区间求第k小,区间求幂和 数据随机 题解思路 ODT是一种基于std::set的暴力数据结构. 每个节点对应一段区间,该区间内的数都相等. 核心操作spl ...

  5. 第一次Git使用以及码云(Gitee)

    下载安装Git,官网下载地址https://git-scm.com/downloads,我用的是Win10版,下载好后一路默认安装,安装时会给你自动添加环境变量,完成后打开cmd,输入git --ve ...

  6. Go-json解码到接口及根据键获取值

    Go-json解码到接口及根据键获取值 package main import ( "encoding/json" "fmt" "github.com ...

  7. web 前端开发学习路线

    初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...

  8. 读书分享全网学习资源大合集，推荐Python3标准库等五本书「02」

    0.前言 在此之前,我已经为准备学习python的小白同学们准备了轻量级但超无敌的python开发利器之visio studio code使用入门系列.详见 1.PYTHON开发利器之VS Code使 ...

  9. POJ 3186

    题意略. 思路:有一点区间dp的意思. 我令dp[ i ][ j ]表示:区间[1 , i]和区间[j , N]按某种顺序插值排好,所能获得的最大值. 状态转移方程:dp[ i ][ j ] = ma ...

  10. Leetcode之深度优先搜索（DFS）专题-1020. 飞地的数量（Number of Enclaves）

    Leetcode之深度优先搜索(DFS)专题-1020. 飞地的数量(Number of Enclaves) 深度优先搜索的解题详细介绍,点击 给出一个二维数组 A,每个单元格为 0(代表海)或 1( ...