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

this指的是原生js的DOM对象

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

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

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

　　　　jQuery特点

链式编程

jq.shou（3000）.html（内容）

相当于

jq.shou（3000）
jq.gtml（内容）

隐式迭代

隐式实用for循环、迭代
如何使用jQuery

引包

一定要在使用之前
<script src = ‘’><>

入口函数

$（document）.ready（function（｛｝））

绑定时间

事件源.事件（function（）｛事件驱动函数｝）
jQuery入口函数

文档加载完毕，图片未加载的时候执行函数

$（document）.ready（function（｛｝））
$(function(){})

文档和图片都加载完毕执行函数

$(window).reday(function(){})

JS入口只能有一次，多次会覆盖
jqery可有多个入口函数
$ === jQuery
jQuery和DOM对象的区别
jQuery对象是一个数组，包含原生jsDOM对象
原生js对象是一个原生对象
jQuery对象名 = $（js对象名）
js对象转换为jQuery对象

jquery对象名[索引值]
jquery对象名.get(wwm索引值）

不同的对象有不同的方法
JQuery对象方法包含原生js对象方法.
jQuery对象.length的返回值是元素个数
jQuery选择器
基本：#id、.类、标签名、

*通配符选择器

层级选择器

子代选择器 >
后代选择器空格隔开
基本过滤选择器

： eq（index）遍历元素数组
：odd 获取偶数位索引的元素
：even获取奇数位索引值的元素

筛选选择器

find（selector）：找到父元素的素所有子元素

父元素.find（‘要查找的子元素’）
查找所有后代子元素

children：亲儿子

父元素.children（‘要查找的子元素’）
仅查找子元素

：eq（index）
next（）；下一个兄弟节点
parent（）：获取该元素的父元素

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选择器、

jQuery选择器

相关文章