天天看點
傳回

jQuery - 01. jQuery特點、如何使用jQuery、jQuery入口函數、jQuery和DOM對象的差別、jQuery選擇器、...

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. 查找所有後代子元素
      2. children：親兒子
        1. 父元素.children（‘要查找的子元素’）
        2. 僅查找子元素
    2. ：eq（index）
    3. next（）；下一個兄弟節點
    4. parent（）：擷取該元素的父元素
    5. siblings：所有的兄弟節點（不包括本身） 
      <!DOCTYPE html>
<html>
<head >
    <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>
      手風琴案例

轉載于:https://www.cnblogs.com/mingm/p/6746541.html

javascript
上一篇: org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert val
下一篇: 大白話講解Promise

繼續閱讀