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

最新推荐文章于 2024-11-11 19:29:13 发布

weixin_30532369

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量89

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mingm/p/6746541.html

版权

this指的是原生js的DOM对象

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

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

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

　　　　jQuery特点

链式编程
1. jq.shou（3000）.html（内容）
  1. 1. 相当于
      1. jq.shou（3000）
      2. jq.gtml（内容）
隐式迭代
1. 隐式实用for循环、迭代
  
  如何使用jQuery
引包
1. 一定要在使用之前
2. <script src = ‘’><>
入口函数
1. $（document）.ready（function（｛｝））
绑定时间
1. 事件源.事件（function（）｛事件驱动函数｝）
  
  jQuery入口函数
文档加载完毕，图片未加载的时候执行函数
1. $（document）.ready（function（｛｝））
2. $(function(){})
文档和图片都加载完毕执行函数
1. $(window).reday(function(){})
JS入口只能有一次，多次会覆盖
jqery可有多个入口函数
$ === jQuery

jQuery和DOM对象的区别
jQuery对象是一个数组，包含原生jsDOM对象
原生js对象是一个原生对象
jQuery对象名 = $（js对象名）
js对象转换为jQuery对象
1. jquery对象名[索引值]
2. jquery对象名.get(wwm索引值）
不同的对象有不同的方法
JQuery对象方法包含原生js对象方法.
jQuery对象.length的返回值是元素个数
jQuery选择器
基本：#id、.类、标签名、
1. *通配符选择器
层级选择器
1. 子代选择器 >
2. 后代选择器空格隔开
3. 基本过滤选择器
  1. 1. ： eq（index）遍历元素数组
    2. ：odd 获取偶数位索引的元素
    3. ：even获取奇数位索引值的元素

筛选选择器

find（selector）：找到父元素的素所有子元素
1. 1. 父元素.find（‘要查找的子元素’）
  2. 查找所有后代子元素
2. children：亲儿子
  1. 父元素.children（‘要查找的子元素’）
  2. 仅查找子元素
：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>