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. oracle-11g2下载安装笔记

    一.下载链接地址 http://download.oracle.com/otn/nt/oracle11g/112010/win64_11gR2_database_1of2.zip http://dow ...

  2. 七牛云qshell工具定时备份空间文件到本地

    qshell 是利用七牛文档上公开的 API实现的一个方便开发者测试和使用七牛API服务的命令行工具,使用该工具可以实现很多的功能,今天就分享一下利用qshell定时备份空间文件到本地 1.下载qsh ...

  3. 记录用友T+接口对接的心酸历程

    前言:公司的业务主要是对接财务系统做单据传输或者凭证处理的,难免少不了和各大财务软件做数据对接,其中当然是必须通过接口来传递数据了.于是乎,用友T+的版本来了,对接的工作自然是我来做,可没想到就是这样 ...

  4. APPCAN   版本控制SVN

      1.检出代码 checkout 常规的操作     appcan 中,在官网新建一个项目后,就会有一项目的svn 地址,而且已经是主干分支了,这个是项目的位移目录,不能再trunk目录同级创建分子 ...

  5. 以kaldi中的yesno为例谈谈transition

    在基于GMM-HMM的传统语音识别里,比音素(phone)更小的单位是状态(state).一般每个音素由三个状态组成,特殊的是静音(SIL)由五个状态组成.这里所说的状态就是指HMM里的隐藏的状态,而 ...

  6. flink 1.7.2 安装详解

    ##flink 1.7.2 安装需要java环境 下载地址 https://flink.apache.org/downloads.html#1.单机版 #创建用户flinkuseradd flink ...

  7. lnmp环境搭建方法

    网上目前的一键搭建方法: 命令行安装: 1.源码编译安装:(个性化配置,安装配置过程繁琐) 2.使用yum或apt直接安装:(使用编译好的二进制文件安装,速度快) 3.军哥的lnmp一键脚本安装: 4 ...

  8. .Net Mvc过滤器观察者模式记录网站报错信息

    基本介绍: 观察者模式是一种对象行为模式.它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.在观察者模式中,主题是通知的发布者,它发出通知时并不 ...

  9. 偏差和方差以及偏差方差权衡(Bias Variance Trade off)

    当我们在机器学习领域进行模型训练时,出现的误差是如何分类的? 我们首先来看一下,什么叫偏差(Bias),什么叫方差(Variance): 这是一张常见的靶心图 可以看左下角的这一张图,如果我们的目标是 ...

  10. windows下搭建syslog服务器及基本配置

    一.环境 windows7 64位+ kiwi_syslog_server_9.5.0 kiwi_syslog百度云下载地址: 链接: https://pan.baidu.com/s/1EpPBNsL ...