2. 程式人生 > >jQuery學習記錄一

jQuery學習記錄一

阿新 • • 發佈：2018-11-08

jQuery:就是JavaScript庫中的一種,jQuery,很多優點

    * JavaScript庫也可以叫JavaScript函式庫
    * JavaScript庫:把一些瀏覽器相容性的程式碼或者是常用的函式封裝在一個js檔案中,這個檔案就是一個JavaScript庫,common.js可以看成是一個js庫.
    *
    * 封裝了很多js程式碼的一個js檔案,就是一個庫
    *
    * 有的js庫封裝的程式碼很少,小型的js庫
    * 有的js庫封裝的程式碼很多,大型的js庫
    * 有的js庫是一個人編寫的,這樣的js庫可能是免費的
    * 有的js庫是一個團隊(公司)編寫,這樣的js庫可能是收費
    *
    * 物件.on事件名字=匿名函式;
    *
    * jQuery是JS庫中的一種,
    * JS庫也叫JS函式庫
    * Prototype、YUI(網路反響一般)、Dojo、ExtJS、jQuery等 都是JS庫
    *
    * jQuery的優點:寫的少做的多,體積小,功能強大,鏈式程式設計,隱式迭代.外掛豐富,開源,免費

jQuery初試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>
    <input type="button" value="顯示效果" id="btn">
    <div id="dv"></div>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $('#btn').click(function () {
            $('#dv').css({'width':'200px','height':'200px','backgroundColor':'blue'});
        });
    </script>
</body>
</html>

jQuery再體驗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<p>第一個</p>
<p>第二個</p>
<script src="jquery-1.12.1.js"></script>
<script>

  //jQuery版本的
  $("#btn").click(function () {
    $("p").text("我們都是p,我驕傲");
  });
</script>
</body>
</html>

jQuery中的頂級物件

    * 瀏覽器中的頂級物件:window,瀏覽器中和頁面中所有的東西都是window的
    * 頁面中的頂級物件:document,頁面中某些東西是document
    *
    *
    * jQuery中的頂級物件:jQuery----可以用$符號來代替,為了方便,jQuery(jQuery的js檔案中的所有的東西都是jQuery或者都是$符號下的)
    *
    *
    * 如果想要使用jQuery中的屬性或者方法,那麼需要jQuery.屬性或者jQuery.方法()來使用
    *
    * 簡單的寫法:$.屬性,或者$.方法
    *
    * 大多數情況下,jQuery中幾乎都是方法,屬性很少
    *
    * jQuery中幾乎把DOM中的事件都封裝成了一個方法,在jQuery中幾乎是把on去掉,然後變成方法了
    *
    * DOM中註冊事件
    * 例子:
    * document.getElementById("id屬性值").onclick=匿名函式;
    * jQuery中註冊事件
    *
    * 例子:
    * $("#id屬性值").click(匿名函式);

jQuery和DOM物件的裝換

    *什麼是DOM物件？什麼是jQuery物件

  //這個按鈕----如果通過DOM獲取----DOM物件
  //這個按鈕----如果通過$或者是jQuery的方式獲取---jQuery物件

    *為什麼要把DOM物件轉jQuery物件,為什麼又把jQuery物件轉DOM物件
  //DOM操作很麻煩(相容,一個功能寫好多程式碼)---->轉jQuery物件,操作簡單,不需要寫相容，
  //jQuery操作中,有一些相容沒封裝在jQuery中,轉DOM物件,通過原生的js程式碼實現功能,如果後面都解決了,又想簡單的寫程式碼操作內容,再轉回jQuery物件

    *轉化

  //DOM物件
  var btnObj=document.getElementById("btn");
  //jQuery物件
  //$(btnObj)             ---------->通過這樣就可以實現DOM物件和jQuery之間的轉換

  //jQuery獲取的---jQuery物件
  //var btnObj2=$("#btn");

//  btnObj2[0].onclick=function () {     ----------->通過這種方式 btnObj2[0] 可以實現之間的轉換
//    console.log("哈哈,我又變帥了");
//  };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>
    <input type="button" value="顯示效果" id="btn">
    <div id="dv"></div>
    <script src="jquery-1.12.1.js"></script>
    <script>
        var btnObj=$('#btn');
        btnObj[0].onclick=function () {
            alert();
        }
    </script>
</body>
</html>

jQuery檔案匯入的一個小問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<script src="jquery-1.12.1.js">
</script>
<script>
    $("#btn").click(function () {
        console.log("班主任好漂亮啊");
    });            /*這裡一定要加分號，這裡預設認為直接呼叫了下面程式碼，報錯*/
    (function () {
        console.log('hello world!');
    })();
</script>

</body>
</html>

老版本的body開關燈

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls{
      background-color: black;
    }
  </style>
</head>
<body>
<input type="button" value="關燈" id="btn"/>
<script>

  //DOM版本的---10行程式碼
  document.getElementById("btn").onclick=function () {
      //判斷
    var body=document.body;
    if(body.className=="cls"){
      body.className="";
      this.value="關燈";
    }else{
      body.className="cls";
      this.value="開燈";
    }
  };
</script>
</body>
</html>

jQuery版本的開關燈

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls{
      background-color: black;
    }
  </style>
</head>
<body>
<input type="button" value="開關" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>

  $("#btn").click(function () {
    //判斷body標籤是否應用了cls的類樣式
    if($("body").hasClass("cls")){
      //此處應用了cls類樣式,那麼就移除這個類樣式
      $("body").removeClass("cls");
    }else{
      //此處沒有應用類樣式cls,那麼就新增類樣式
      $("body").addClass("cls");
    }
  });

//  $("#btn").click(function () {
//    if($("body")[0].className=="cls"){
//      $("body")[0].className="";
//    }else{
//      $("body")[0].className="cls";
//    }
//  });
</script>
</body>
</html>

表單標籤DOM操作中設定和獲取value屬性的值---->物件.value
  //jQuery中:
  * jQuery物件.val();-------表示的是獲取該元素的value屬性值
  * jQuery物件.val("值");----表示的是設定該元素的value屬性
  * jQuery物件.css("css的屬性名字","屬性的值");---->設定元素的樣式屬性值
  * 注意:
  * .css("屬性","值");屬性的寫法可以是DOM操作中的js寫法,也可以是css中的寫法

於是開關燈案例又有了一種新實現

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<input type="button" value="關燈" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>
  $("#btn").click(function () {
    if($(this).val()=="關燈"){
      $("body").css("backgroundColor","black");
      $(this).val("開燈");
    }else{
      $("body").css("backgroundColor","");
      $(this).val("關燈");
    }
  });
</script>
</body>
</html>

頁面載入的不同方式

    *不載入

//    $("#btn").click(function () {
//      console.log("小蘇好帥哦");
//    });

    *DOM載入：頁面全部載入完畢才觸發(標籤,文字,圖片,引入的檔案)

//    window.onload=function () {
//      console.log("小蘇好帥");
//    };

    *jQuery的第一種載入方式：同上DOM載入

//    $(window).load(function () {
//      console.log("小蘇好猥瑣哦");
//    });

    *jQuery的第二種載入方式：比上面第一種的快---頁面中的基本的元素載入後就觸發

    $(document).ready(function () {
      console.log("1");
    });

    *jQuery的第三種載入方式：頁面中基本的元素載入後就觸發

    jQuery(function () {
      console.log("頁面載入了1111");
    });             ↑  或者 ↓

    $(function () {
      console.log("頁面載入了1");
    });

頁面載入問題：頁面時至上而下載入的，如果繫結的時候，需要繫結的元素並沒有載入，事件是無法繫結的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //頁面載入的事件
    $(function () {
      //根據id獲取按鈕,新增點選事件
      $("#btn").click(function () {
        console.log("哈哈,真的好帥");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>

DOM中獲取元素的方式

    * 根據id獲取元素
    * document.getElementById("id屬性的值");
    * 根據標籤名字獲取元素
    * document.getElementsByTagName("標籤名字");
    * 根據name屬性獲取元素
    * document.getElementsByName("name屬性的值");
    * 根據類樣式名字獲取元素
    * document.getElementsByClassName("類樣式的名字");
    * 根據選擇器獲取元素
    * document.querySelector("選擇器");---->id選擇器,類選擇器,標籤選擇器...一個
    * document.querySelectorAll("選擇器");多個的

jQuery中獲取元素的方式:
    * $("選擇器")----jQuery物件

案例：id選擇器取值和設定值，注意語法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        console.log($(this).val());
        $(this).val("嘎嘎,下雨了");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>

案例：標籤選擇器

    * id選擇器
    * $("#id屬性的值")---->某個元素
    * 標籤選擇器
    * $("標籤名字")------>多個元素或者是某個元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //.text()方法相當於DOM中的.innerText屬性
    //物件.text()----->獲取該元素的文字內容
    //物件.text("值")---->設定該元素的文字內容

    //本身程式碼沒有迴圈操作,jQuery中內部幫助我們迴圈操作的----->隱式迭代

    //頁面載入的事件
    $(function () {
      //根據id選擇器獲取按鈕,新增點選事件
      $("#btn").click(function () {
        //根據標籤選擇器獲取p標籤
        $("p").text("我們都是p");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<p>鳴人</p>
<p>佐助</p>
<p>卡卡西</p>
<p>自來也</p>
<p>大蛇丸</p>

</body>
</html>

案例：類選擇器的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //類選擇器:$(".類樣式的名字")---某個或者是多個
    //.css("屬性","值");-----設定某個元素的css樣式屬性值
    $(function () {
      //根據id選擇器獲取按鈕,新增點選事件
      $("#btn").click(function () {
        //獲取所有應用cls類樣式的元素,改變背景顏色
        $(".cls").css("backgroundColor","yellow");
        $(".cls").css("border","1px solid red");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div class="cls"></div>
<p class="cls">這是一個p</p>
<p>山東盛產一種補藥,藥力極強,男人吃了女人受不了，女人吃了男人受不了，記者問老農:這麼好的藥為什麼不多種一些,老農眯起眼睛:笑了笑,說:種多了,地受不了</p>
</body>
</html>

案例：交集選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls{
      background-color: blue;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //根據id選擇器獲取按鈕,新增點選事件
      $("#btn").click(function () {
        //交集選擇器----標籤+類選擇器
        //先找p標籤,從p標籤中找應用了cls類樣式的元素
        $("p.cls").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<p class="cls">小蘇喜歡助教很久了</p>
<p>其實助教也喜歡小蘇</p>
<ul>
  <li>小蘇</li>
  <li>助教</li>
  <li>班主任</li>
</ul>
<span class="cls">我和小蘇坐地鐵上班,看到了一個很漂亮的女生,旁邊站著一個很猥瑣的男生,我回頭和小蘇說:真想大聲的喊出來,好白菜都讓豬拱了,小蘇快速的拉動著我的衣角,千萬不要這麼做,我的輪椅都換了兩個了</span>
</body>
</html>

案例：並集選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    .cls{
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

    /*
    *
    * 交集選擇器 標籤名.類樣式的名字
    * 並集選擇器 選擇器,選擇器,選擇器...
    *
    * */

    //頁面載入的事件
    $(function () {

      $("#btn").click(function () {

        //div,p,span
        $("#dv,p,.cls").css("backgroundColor","orange");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
<p>這是一個p</p>
<span class="cls">這是一個span</span>
<ul>
  <li>小蘇喜歡吃榴蓮</li>
  <li>助教喜歡吃臭豆腐</li>
  <li>班主任都喜歡吃</li>
</ul>
</body>
</html>

案例:點選按鈕在div中新增一個p標籤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    /*
    * .val();----設定或者是獲取表單標籤的value屬性值
    * .text();----設定或者是獲取標籤中的文字內容---就相當於DOM中innerText
    * .css();-----設定元素的css樣式屬性值
    * .html();----設定或者是獲取標籤中的html內容---就相當於DOM中innerHTML
    * */

    $(function () {
      //點選按鈕
      $("#btn").click(function () {
        $("#dv").html("<p>這是一個p標籤</p>");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>

案例：點選按鈕設定元素的樣式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>

    //點選按鈕,設定div的寬,高,背景顏色,邊框
    $(function () {
      $("#btn").click(function () {
        $("#dv").css("width","300px");
        $("#dv").css("height","200px");
        $("#dv").css("backgroundColor","red");
        $("#dv").css("border","1px solid green");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>

案例：層級選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 500px;
      height: 300px;
      border:2px solid green;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //點選按鈕,設定div中span的樣式
      //層次選擇器---後代選擇器
      $("#btn").click(function () {
        //獲取的是div這個父級元素中所有span標籤(直接的子元素,孫子元素)
        //$("#dv span").css("backgroundColor","red");
        //獲取的是div這個父級元素中直接的子元素
        //$("#dv>span").css("backgroundColor","red");
        //獲取的是div這個父級元素後面的所有的兄弟元素---span
        //$("#dv~span").css("backgroundColor","red");
        //獲取的是div後面直接的兄弟元素
        //$("#dv+span").css("backgroundColor","red");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<span>這是div前面的兄弟元素span</span>
<div id="dv">
  <span>這是第一個span</span>
  <ul>
    <li>第一個li</li>
    <li>第二個li
      <span>第二個li中的span</span>
      <span>第二個li中的span</span>
    </li>
    <li>第三個li</li>
  </ul>
  <span>這是第二個span</span>
  <span>這是第三個span</span>
</div>
<p>這是p</p>
<span>這是div後面的兄弟元素span</span>
<span>這是div後面的兄弟元素span</span>
<span>這是div後面的兄弟元素span</span>
</body>
</html>

選擇器的總結

    //id選擇器
    //$("#id屬性值")
    //標籤選擇器
    //$("標籤名字")
    //類選擇器
    //$(".類樣式的名字")
    //交集選擇器--------標籤+類選擇器
    //$("標籤名.類樣式名字")
    //並集選擇器--------多條件選擇器
    //$("標籤名字,.類樣式名字,#id選擇器")
    //層次選擇器
    //$("選擇器 選擇器");======>$("#dv span")

案例：隔行變色輕鬆版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                $('#uu>li:even').css('backgroundColor','red');
                $('#uu>li:odd').css('backgroundColor','yellow');
            });
        });
    </script>
</head>
<body>
<input type="button" value="隔行變色" id="btn"/>
<ul id="uu">
    <li>喬峰:降龍十八掌</li>
    <li>張無忌:乾坤大挪移</li>
    <li>段譽:鱗波微步</li>
</ul>
</body>
</html>

案例：高亮顯示以及鏈式程式設計

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    ul {
      list-style-type: none;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //高亮顯示效果:滑鼠進入,當前的li有背景顏色,離開顏色就幹掉了
    //獲取ul中所有的li標籤,新增滑鼠進入和滑鼠離開事件

    //鏈式程式設計
    $(function () {
      //滑鼠進入
      $("#uu>li").mouseenter(function () {
        $(this).css("backgroundColor", "red");
      }).mouseleave(function () {
        $(this).css("backgroundColor", "");
      }).click(function () {
        $(this).css("color","green").css("fontSize","30px").css("fontFamily","全新硬筆行書簡");
      });
    });
  </script>
</head>
<body>
<ul id="uu">
  <li>倩女幽魂</li>
  <li>海闊天空</li>
  <li>千紙鶴</li>
  <li>真的愛你</li>
</ul>
</body>
</html>

案例：中文驗證

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>

    //點選按鈕,驗證使用者輸入的是不是中文名字,如果是中文名字，則文字框的背景為綠色,否則為紅色
    $(function () {
      //按鈕的點選事件
      $("#btn").click(function () {
        var reg=/^[\u4e00-\u9fa5]{2,6}$/;
        var flag=reg.test($("#txt").val());
        if(flag){
          $("#txt").css("backgroundColor","green");
        }else{
          $("#txt").css("backgroundColor","red");
        }
      });
    });
  </script>
</head>
<body>
請輸入中文名字：<input type="text" value="" id="txt"/><br/>
<input type="button" value="驗證" id="btn"/>

</body>
</html>

案例：顯示和隱藏下拉選單

    *頻繁的操作可能會延時執行，通過stop()方法可以將上一個操作清掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .wrap{
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            background-image: url(images/bg.JPG);
        }
        .wrap li{
            background-image: url(images/libg.JPG);
        }
        .wrap > ul > li{
            float: left;
            margin-left: 10px;
            position: relative;
        }
        .wrap a{
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }
        .wrap li ul{
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $('.wrap>ul>li').mouseenter(function () {
                $(this).children('ul').show(200);
            });
            $('.wrap>ul>li').mouseleave(function () {
                $(this).children('ul').hide(200);
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:;">吳建兵</a>
            <ul>
                <li>
                    <a href="javascript:;">吳建兵</a>
                </li>
                <li>
                    <a href="javascript:;">吳建兵</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">吳建軍</a>
            <ul>
                <li>
                    <a href="javascript:;">吳建軍</a>
                </li>
                <li>
                    <a href="javascript:;">吳建軍</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">吳建軍</a>
            <ul>
                <li>
                    <a href="javascript:;">吳建軍</a>
                </li>
                <li>
                    <a href="javascript:;">吳建軍</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

案例：精品服飾展示

    *注：右邊獲取index需要相加對應的 li 值，比如前邊有5個 li 後邊就要加上五

    //.index()方法---->當前這個元素的索引，從零開始異世界生活。。
    //:eq(索引值)---->選擇器---對應索引的元素

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .wrapper {
      width: 298px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      overflow: hidden;
    }

    #left, #center, #right {
      float: left;
    }

    #left li, #right li {
      background: url(images/lili.jpg) repeat-x;
    }

    #left li a, #right li a {
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }

    #left li a:hover, #right li a:hover {
      background-image: url(images/abg.gif);
    }

    #center {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>
    //頁面載入事件
    $(function () {
      
      //左邊的ul中的li
      $("#left>li").mouseenter(function () {
        //先獲取當前li的索引值
        var index=$(this).index();
        //先隱藏所有的li
        $("#center>li").hide();//隱藏
        //設定某個li顯示
        //$("#center>li:eq(索引值)")---->對應的li標籤
        //顯示當前的對應的li即可
        $("#center>li:eq("+index+")").show();

      });
      
      //右邊的ul中的li
      $("#right>li").mouseenter(function () {
        //先獲取當前li的索引值
        var index=$(this).index()+9;

        //先隱藏所有的li
        $("#center>li").hide();//隱藏
        //設定某個li顯示
        //$("#center>li:eq(索引值)")---->對應的li標籤
        //顯示當前的對應的li即可
        $("#center>li:eq("+index+")").show();

      });
    });

  </script>
</head>
<body>
<div class="wrapper">
  <ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    ...多個...
  </ul>
  <ul id="center">
    <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
    ...多個...
  </ul>
  <ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男包</a></li>
    ...多個...
  </ul>
</div>
</body>
</html>

 

相關推薦

jQuery學習記錄一

jQuery:就是JavaScript庫中的一種,jQuery,很多優點     * JavaScript庫也可以叫JavaScript函式庫     * JavaScript庫:把一些瀏覽器相容性的程式碼或者是常用的函式封裝在一個js

python 學習記錄一

python 每天學習筆記#!/usr/bin/pytholn# -*- coding: UTF-8 -*-import mathimport sysdef print_13(): #for i in range(10): man_age = int(raw_input(‘enter input age:\

學習記錄一

提示 相對 name 獲取 比較 div 就是 其中 dem 今天的話主要的精力都集中在郵件系統demo的實現，因為自己個人技術有限，所以做出來的相當簡陋，在其中碰到的問題其實也是比較多的，對於基於django的郵件相對來說比較容易，然後就是在提交數據，獲取post數據並加

[jQuery學習系列一]1-選擇器與DOM對象

還需 直接 itl java date js代碼 循環 ava 也會 前言: 好久沒有更新博客了, 最近想復習下 之前學過的JS的相關內容, 也算是自己的一種總結. 知識長時間不用就會忘記, 多學多記多用!! 下面的程序都可以在下面的網站進行在線調試: http://ww

jQuery學習筆記(一)

his this set 等待 例如 agg lin 不能 時機 　　jQuery的強大功能無需多言，其中學習的內容自然也是較多，查詢API是必經之路的，總結復習也是必不可少的，此筆記多數案例也是來自API文檔。 導入js文件 　　使用任意js框架，導入相關js文件

WebService學習記錄(一)

接受 語言 www. info sdl htm 容易 span 數據 1.1 什麽是WebService Web service是一個平臺獨立的，低耦合的，自包含的、基於可編程的web的應用程序，可使用開放的XML（標準通用標記語言下的一個子集）標準來描述、發布、發現、協調

Quartz學習記錄(一)

記錄 lib jobdetail 遞增 引入 指定 sim 其中 基於 1.quartz介紹和下載 官網：http://www.quartz-scheduler.org/ Quartz是OpenSymphony開源組織在Job scheduling領域又一個開源項目，它可以

Linux學習記錄(一)

應用服務 切換目錄 lin 平板電腦 路由器 成熟 區別 領導 計算機硬件 1.Linux的簡介 1.1．Linux的概述 Linux是基於Unix的開源免費的操作系統，由於系統的穩定性和安全性幾乎成為程序代碼運行的最佳系統環境。Linux是由Linus Torvalds（

Nginx學習記錄(一)

under 3.3 學習 color dex 穩定 靜態 inf 推薦 1. 什麽是nginx Nginx是一款高性能的http 服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器。由俄羅斯的程序設計師Igor Sysoev所開發，官方測試nginx能夠支支撐

MongoDB學習記錄一

users 泰安 系統設置 2.3 默認端口 erp nec acl 負責 本博客說明：最開始部分是一個運維部署案例模板，給開發安裝MongoDB都可以按照這個模板來進行基本部署，中間部分是自己研究其他博客記錄部署和授權相關內容，最後部分是網上視頻學習相關內容；www.mo

Nodejs學習記錄(一)--安裝設置篇

窗口切換 ati strong 直接 32位 回車 oot 目錄 release 安裝Node window window上安裝node可選擇以下兩種方式： 方式一：直接進入官網下載安裝 進入node.js官網點擊windows，選擇.msi後綴的，根據自己的電腦選擇對應的

windbg學習記錄(一)

1、安裝 如果你安裝了WDK或vs的相關版本，你都可以從安裝目錄中找到它們（一般在Debuggers目錄中）。如果沒有，你可以從下面的連結去下載安裝： Install Debugging Tools for Windows 32-bit Version http://www.mi

jQuery學習記錄四

元素的事件繫結     *如果是先建立元素,再為這個子元素繫結事件, 後面再建立的子元素,沒有事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

jQuery學習記錄三

元素新增方法     *注意兩者之間的區別：prepend()方法，新增的位置是元素的第一個子元素     *before()、after()方法新增的兄弟節點 <!DOCTYPE html> <html la

jQuery學習記錄二

索引選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script src="

Java學習記錄一

計算機基礎知識     ①計算機（Computer）全稱：電子計算機，俗稱電腦。是一種能夠按照程式執行，自動、高速處理海量資料的現代化智慧電子裝置。由硬體和軟體所組成，沒有安裝任何軟體的計算機稱為裸機。常見的形式有臺式計算機、筆記本計算機、大型計算機等。 &nb

View的學習記錄(一)

View的學習記錄 本篇目的 View的呼叫 View檢視樹 Activity中檢視的結構 View的測量 onMeasure() MeasurSpec類 重寫onMeasure()

git學習記錄一

一.git 安裝。     1.Linux安裝。可以試著輸入git，看系統中是否安裝git,如果沒有安裝會提示: $ git The program 'git' is currently not installed. You can install it by typin

python學習記錄一

一、目的   由於專案釋出點多，更新迭代耗時，想搞一個自動釋出的任務，以前也沒有用python寫過，這個任務當做練手了。 二、步驟 1、安裝python,pip。我安裝的是python3.6，只要在安裝過程中選擇安裝pip即可。 2、首先考慮的是弄一個定時鐘跑，check_

FriendlyARM-2440-Mini2440_學習記錄一

部分資訊來自《mini2440使用者手冊》pdf檔案 賬號資訊： user：  root （預設設定） password： fa（預設設定）   FTP： user：plg password：plg   可以連SSH去控制板子