本篇內(nèi)容：

• 一，jQuery簡介
• 二，實(shí)戰(zhàn)

一，jQuery簡介

1.通過選擇器查找元素

• $('選擇器')
• jQuery支持絕大部分的CSS選擇器

2.屬性操作

• 獲得屬性：$('選擇器').attr('屬性名');
• 設(shè)置屬性：$('選擇器').attr('屬性名', '屬性值');

3.顯示和隱藏

• 顯示：$('選擇器').show();
• 隱藏：$('選擇器').hide();
• 顯示和隱藏來回切換：$('選擇器').toggle();

4.事件綁定

• 點(diǎn)擊事件(常用)
  $('選擇器').click(function() {
  // 實(shí)現(xiàn)點(diǎn)擊按鈕想做的事情
  }).hide();
  // 先給節(jié)點(diǎn)綁定事件，再隱藏

• 點(diǎn)擊事件(不常用)
  function login() {
  // 實(shí)現(xiàn)點(diǎn)擊按鈕想做的事情
  }
  $('選擇器').click(login);

二，實(shí)戰(zhàn)

主要做的效果如下圖：

• jquery效果

代碼如下：具體看注釋哦

<script src="../jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

    /*
    //1，jquery的基本操作
    //原來的方法獲取src，獲取的是絕對路徑
    var imImage = document.getElementById("zhang");
    alert(imImage.src);

    //jquery獲取src，獲取的是絕對路徑
    var imImage01 = $("img");
    alert(imImage.src);
    //這種是沒有簡寫的，這種寫法是錯(cuò)誤的哦
    //alert($("img").src);

    //jquery獲取src，獲取相對路徑
    var imImage02 = $("img");
    alert(imImage02.attr("src"));
    //簡寫為
//   alert($("img").attr("src"));
    */

    //2，jquery可以同時(shí)進(jìn)行多個(gè)操作，如同時(shí)把上面的圖片改為另外一張圖片，還可以指定進(jìn)行更改
    function changeAllPics() {
        //jquery可以同時(shí)進(jìn)行多個(gè)操作，如同時(shí)把上面的圖片改為另外一張圖片
        $("img").attr("src","src/images/img_02.jpg")
    }

    function changeAllPicsBack() {
        //jquery可以同時(shí)進(jìn)行多個(gè)操作，如同時(shí)把上面的圖片改為另外一張圖片
        $("img").attr("src","src/images/img_01.jpg")
    }

    function changeSomePics() {
        $(".a").attr("src","src/images/img_04.jpg");
    }


    //3，jQuery還可以監(jiān)聽事件
    //注意：這里是click而不是onclick哦
    $("img").click(function () {
        alert("干嘛要點(diǎn)擊我，我只是張圖片！");
    })

//    $("*").click(function () {
//        alert("點(diǎn)擊了一個(gè)標(biāo)簽，雖然我不知道是什么標(biāo)簽");
//    })

    //4, jquery的默認(rèn)方法
    function showAllPics() {
        $("img").show();
    }
    function hideAllPics() {
        $("img").hide();
    }

    function toggle() {
        $("img").toggle(2000);
    }

    //5， 突然發(fā)現(xiàn)可以直接取出按鈕進(jìn)行點(diǎn)擊監(jiān)聽
    $("#imBtn").click(function () {
//        $("img").slideDown(2000);
//        $("img").fadeIn(2000);
        $("img").fadeOut("slow");
    })
</script>