天天看點
傳回

JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

JavaScript學習筆記（六）

    • 一、jQuery是什麼？
    • 二、jQuery的安裝
    • 三、載入事件差別
    • 四、jQuery對象和DOM對象的差別
        • DOM對象和Jquery對象互轉
    • 五、選擇器
      • 5.1 jQuery的選擇器
        • （1)基本選擇器
        • （2)層級選擇器
        • （3)篩選選擇器
        • 滑鼠事件
    • 六、元素對象
      • 6.1 屬性的擷取和修改
        • （1）屬性和元素内容的擷取
        • （2）屬性和元素内容的修改
        • （3）選中
      • 6.2 樣式的擷取和修改
        • （1）樣式的擷取和修改
        • （2）class屬性的操作
      • 6.3 坐标原點
        • 6.4 元素的高度和寬度
    • 七、DOM操作
      • 7.1 節點的添加操作
      • 7.2 節點的删除操作
    • 八、事件
      • 簡單示例:
      • 重點：留言闆動态元素綁定事件
    • 九. 案例
      • 1.手風琴
      • 2.淘寶精品(對應圖檔滾動)
      • 3.頁籤

一、jQuery是什麼？

jQuery是将JavaScript的操作進行了封裝，對外提供了API，我們可以通過API，寫少量的代碼做更多的事情（Write Less Do More）。
jQuery是一個工具類（類似于Java的封裝類），jQuery不是庫（RectJS/VUE等等庫，庫提供的是相關元件）

jQuery版本：

  • 1.X版本：能夠相容IE6、7、8浏覽器
  • 2.X版本：不相容IE6、7、8浏覽器
  • 3.X版本：不相容IE6、7、8浏覽器，代碼更加精簡

二、jQuery的安裝

通過讀取源碼，jquery檔案引入之後，匿名函數立即執行，并且給window對象添加一個屬性 
if ( !noGlobal ) {
   window.jQuery = window.$ = jQuery;
}

增加jQuery對象

<!-- JavaScript的外部引入JS檔案 -->
<!-- 外部引用JS，标簽之間不能再寫任何的JS代碼 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    console.log(window.jQuery);
    console.log(window.$);
</script>

三、載入事件差別 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload=function(){
                console.log("window.onload","當整個頁面資源加載完畢之後立即執行");
            }
        </script>
    </head>
    <body>
        <script>
            window.onload=function(){
                console.log("window.onload","如果存在多個window.onload隻會執行最後一個定義的");
            }
        </script>
        <img src="images/1.jpg">
        <!-- JavaScript的外部引入JS檔案 -->
        <!-- 外部引用JS，标簽之間不能再寫任何的JS代碼 -->
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            window.onload=function(){
                console.log("window.onload",Math.random());
            }
            $(document).ready(function(){
                console.log("jquery載入事件","當DOM準備就緒時，指定一個函數來執行")
            });
        </script>
        <script>0
            
            
            $(function(){
                console.log("jquery載入事件","存在簡寫方式")
                console.log("jquery載入事件","定義多次可以重複執行")
            });
        </script>
    </body>
</html>
  • jquery有簡寫方式,window沒有
  • jquery在DOM準備就緒時便執行,window在整個頁面資源加載完畢之後立即執行.jquery加載比window快
  • jquery可以重複多次執行,window隻可執行一次,後者覆寫前者

四、jQuery對象和DOM對象的差別

  1. DOM對象：使用JavaScript中的方法擷取頁面中的元素傳回的對象就是

    DOM對象

  • document.getElementById

  • document.getElementsByName

  • document.getElementsByTagName

  • document.getElementsByClassName

  • document.querySelector

  • document.querySelectorAll
  • 使用JavaScript的DOM節點查找的擷取對象
  1. jQuery對象：使用jQuery工具類提供的方法擷取頁面中元素傳回的對象就是

    jQuery對象

     ,使用選擇器擷取元素
  2. jQuery對象其實就是對DOM對象的包裝集（

    包

     裝了DOM對象的集合）
  3. DOM對象和jQuery對象的方法不能混用，但是兩者對象可以互相轉換
DOM對象和jQuery對象的方法不能混用 
$(document).ready(function () {
    console.log("1.DOM對象的擷取和操作")
    let clothObj = document.getElementById("cloth");//DOM對象
    clothObj.style.backgroundColor="deeppink";

    console.log("2.jQuery對象，寫的少做的多");
    let $li = $("li");//使用元素選擇器
    $li.css("font-size","20px");//css方法是jquery提供

    console.log("3.DOM對象,操作，代碼多了");
    let liList = document.querySelectorAll("li");
    for(let oLi of liList){
      oLi.style.textAlign="center";
    }

    console.log("=============DOM對象和jQuery對象的方法不能混用=================");
    //$li.style.color="blue";//Cannot set property 'color' of undefined

DOM對象和Jquery對象互轉 

console.log("A.将DOM對象轉換為jQuery對象的寫法：$(DOM對象)=>jQuery對象");
    $(clothObj).css("color","blue");

    console.log("B.将jQuery對象轉換為DOM對象的寫法：jQuery其實就是包裝DOM集合");
    $li[1].style.backgroundColor="green";//$li[1]得到DOM對象
    $li.get(2).style.backgroundColor="yellow";//$li.get(2)得到DOM對象

五、選擇器

write less,do more在沒有jquery的時候，代碼量相對來說比較多！

隔行變色 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

  </head>
  <body>
    <ul>
      <li>我是第1個li</li>
      <li>我是第2個li</li>
      <li>我是第3個li</li>
      <li>我是第4個li</li>
      <li>我是第5個li</li>
      <li>我是第6個li</li>
      <li>我是第7個li</li>
      <li>我是第8個li</li>
      <li>我是第9個li</li>
      <li>我是第10個li</li>
    </ul>
    <script src="lib/jquery-1.12.4.min.js"></script>
    <script>
      $(document).ready(function () {
        let liList = $("li");//jQuery提供元素選擇器，擷取集合
        for(let i=0;i<liList.length;i++){
          //擷取DOM對象
          var o = liList[i];
          if(i%2==0){
            o.style.backgroundColor="pink";
          }else{
            o.style.backgroundColor="while";
          }

        }
      });
    </script>
  </body>
</html>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

5.1 jQuery的選擇器

jQuery選擇器是jQuery為我們提供的一組方法，目的就是為了更好的擷取頁面中的元素。jQuery的選擇器有很多，但是基本上使用的都是相容CSS的選擇器，并且jQuery還提供了更加複雜的選擇器。

（1)基本選擇器

JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

（2)層級選擇器

JavaScript學習筆記（六）(Jquery入門)注意:attr和prop
注意:

+

 尋找的兄弟元素隻找相鄰元素

（3)篩選選擇器

在選擇器的基礎上在進行篩選
  • 上文隔行變色: 
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>我是第1個li</li>
        <li>我是第2個li</li>
        <li>我是第3個li</li>
        <li>我是第4個li</li>
        <li>我是第5個li</li>
        <li>我是第6個li</li>
        <li>我是第7個li</li>
        <li>我是第8個li</li>
        <li>我是第9個li</li>
        <li>我是第10個li</li>
    </ul>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        console.log("jQuery對象和DOM對象的方法不能混用，但是可以代碼可以混寫！");
        $(document).ready(function () {
            $("li:even").css("background","yellow");//改變偶數索引行，也就是第奇數行的元素
            $("li:odd").css("background","green");//索引是奇數
        });
    </script>
</body>
</html>
  • 表單操作
let arr = . m a k e A r r a y ( .makeArray( .makeArray(hobby);//将jquery對象轉換為數組 
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="checkbox" name="hobby" value="111">籃球
    <input type="checkbox" name="hobby" value="222" checked>足球
    <input type="checkbox" name="hobby" value="333">乒乓
    <input type="checkbox" name="hobby" value="444" checked>音樂
    <input type="checkbox" name="hobby" value="555">小說

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            let $hobby = $("input[name='hobby']:checked");
            let arr = $.makeArray($hobby);//将jquery對象轉換為數組
            console.log(arr);
            var newArray = $.map(arr,(element,index)=>element.value);//回調函數傳回新數組
            console.log(newArray);
        })
    </script>
</body>
</html>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

滑鼠事件

  • onmouseover

     :滑鼠經過事件

  • onmouseout

     :滑鼠離開事件

  • onmouseenter

     :滑鼠進入事

  • onmouseleave

     :滑鼠離開事件 
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-image: url(imgs/0010.jpg);
    }

    .wrap li {
      background-image: url(imgs/0007.jpg);
    }

    .wrap > ul > li {
      float: left;
      margin-right: 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>

</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">玄幻</a>
      <ul class="ul">
        <li><a href="javascript:void(0);">大主宰</a></li>
        <li><a href="javascript:void(0);">完美世界</a></li>
        <li><a href="javascript:void(0);">寸芒</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">奇幻</a>
      <ul>
        <li><a href="javascript:void(0);">黎明醫生</a></li>
        <li><a href="javascript:void(0);">詭秘之主</a></li>
        <li><a href="javascript:void(0);">第一序列</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">曆史</a>
      <ul>
        <li><a href="javascript:void(0);">覆漢</a></li>
        <li><a href="javascript:void(0);">紹宋</a></li>
        <li><a href="javascript:void(0);">北頌</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="lib/jquery-1.12.4.min.js"></script>
<script>
  $(function(){
    //onmouseover:滑鼠經過事件
    //onmouseout:滑鼠離開事件
    //onmouseenter:滑鼠進入事件
    //onmouseleave:滑鼠離開事件
    let $li = $(".wrap>ul>li");
    //$li設定滑鼠經過事件（進入事件），讓自己的ul顯示處理
    $li.mouseenter(function(){
      //console.log(this,"DOM對象");
      //console.log($(this),"jQuery對象");
      $(this).children("ul").show();
    });
    $li.mouseleave(function(){
      //console.log(this,"DOM對象");
      //console.log($(this),"jQuery對象");
      $(this).children("ul").hide();
    });
  });
</script>
</body>
</html>

六、元素對象

我們通過jQuery提供的API文檔，可以擷取一組jQuery對象（就算是一個元素，也會被封裝到數組中），當我們擷取jQuery對象的時候，我們需要對其内部的屬性、元素内容、CSS樣式進行相關的操作示範

6.1 屬性的擷取和修改

（1）屬性和元素内容的擷取 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="text" name="age" id="age" value="199" love="自定義屬性：cute">
        <p id="p1">
            天樞<strong>星河</strong>
        </p>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){/*當整個頁面中DOM元素加載完畢立即執行*/
                console.log("1.擷取屬性對應的值");
                console.log("A.擷取value屬性的值");
                console.log($("#age").val(),$("#age")[0].value);
                console.log("B.擷取其他屬性的值"); 
                console.log($("#age").attr("type"),$("#age").attr("love"),$("#age").attr("value"));
                console.log("2.擷取元素内容");
                console.log("擷取文本内容",$("#p1").text());//innerText:轉義html
                console.log("擷取元素内容",$("#p1").html());//innerHTML:解釋html
            });
        </script>
    </body>
</html>

（2）屬性和元素内容的修改 

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>屬性操作</title>
  </head>
  <body>
    <input type="text" id="name" value="天樞">
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
      console.log("1.value屬性的擷取與指派");
      console.log($("#name").val());
      console.log($("#name").attr("value"));
      console.log("2.value屬性的修改");
      console.log("下面兩種修改方法一起出現時,val方法具有優先級")
      //$("#name").val("星河");
      $("#name").attr("value","銀河");
      console.log("3.其他屬性");
      console.log($("#name").attr("type"));
      $("#name").attr("type","radio");
      $("#name").attr("hobby","music");
      $("#name").attr("love","cute");
      console.log("4.設定選中");
      //$("#name").attr("checked","true");
      $("#name").prop("checked","true");//官方推薦寫法
    </script>
  </body>
</html>

（3）選中 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" name="age" id="age" value="199" love="自定義屬性：">
<hr/>
<input type="checkbox" name="hobby" value="100">籃球
<input type="checkbox" name="hobby" value="200">足球
<input type="checkbox" name="hobby" value="300">排球
<input type="checkbox" name="hobby" value="400">網球
<input type="checkbox" name="hobby" value="500">看書
<hr/>
<select id="city">
  <option value="">請選擇城市</option>
  <option value="1001">吉林</option>
  <option value="1002">遼甯</option>
  <option value="1003">黑龍江</option>
</select>
<p id="p1">
 www
  天樞<strong>星河</strong>
</p>
<script src="lib/jquery-1.12.4.min.js"></script>
<script>
    console.log("1.屬性的修改");
    let $input = $("#age");
    console.log("value屬性的修改")
    $input.val(Number.parseInt($input.val())+1);//擷取和修改
    console.log("其他屬性的修改");
    $input.attr("type","number");
    $input.attr("step",2);
    $input.attr("love","cute");
    console.log("2.1複選框的選中，設定第一個為選中狀态");
    //$("input[type='checkbox']").first().attr("checked","checked");
    $("input[type='checkbox']").first().prop("checked",true);
    console.log("2.2有具體的資料使用數組設定選中");
    let num = 300;
    $("input[type='checkbox']").val([num]);
    $("input[type='checkbox']").val([100,200,400]);
    console.log("3.設定select預設選中");
    num = 1002;
    $("#city").val(num);
    console.log("4.元素内容");
    $("#p1").html($("#p1").html()+"<u>八戒</u>");



  });
</script>
</body>
</html>

注意:attr和prop

- attr和prop差別

attr 是從頁面搜尋獲得元素值，是以頁面必須明确定義元素才能擷取值，相對來說較慢。

prop是從屬性對象中取值，屬性對象中有多少屬性，就能擷取多少值，不需要在頁面中顯示定義。

  • attr和prop怎麼選擇？

對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。快速，準确。

對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

6.2 樣式的擷取和修改

（1）樣式的擷取和修改 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #div1{
        width: 200px;
        background-color: deeppink;
        border: 5px solid black;
      }
    </style>
  </head>
  <body>
  <div id="div1" style="height: 100px;"></div>
  <script src="lib/jquery-1.12.4.min.js"></script>
  <script>
    console.log("1.擷取樣式")
      console.log($("#div1").css("height"));//内聯樣式
      console.log($("#div1").css("width"));//非内聯樣式
      console.log($("#div1").css("border-width"));
      console.log("2.設定樣式");
      $("#div1").html("天樞<strong>星河</strong>");
      $("#div1").css("font-size","20px");
      $("#div1 > strong").css({
        "color":"#FFF",
        "text-decoration":"underline"
      });
    
  </script>
  </body>
</html>

（2）class屬性的操作 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .userName{
                color: red;
            }
            .author{
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>星河</li>
            <li class="userName">星河</li>
            <li>星河</li>
            <li class="userName bookName">星河</li>
            <li class="userName">星河</li>
            <li>星河</li>
        </ul>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
           
                //$("ul li").removeClass("userName");//移除
                //$("ul li").addClass("author");
                //$("ul li.userName.bookName").addClass("author");//新增
                $("ul li").toggleClass("userName");//切換 :原來有這個類屬性沒有了該屬性的效果,原來沒有這個類屬性的有了屬性效果
        </script>
    </body>
</html>

6.3 坐标原點

  • offset：目前元素對象的原點是目前元素的左上角
  • client：目前元素對象的原點是目前視窗的左上角
  • page：目前元素對象的原點是目前頁面的左上角 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

      .mydiv{
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        position: absolute;
        left: 100px;
        top: 400px;
      }
    </style>
  </head>
  <body style="height: 2000px;">
  <div class="mydiv"></div>
  <script src="lib/jquery-1.12.4.min.js"></script>
  <script>
    $(function(){/*當整個頁面中DOM元素加載完畢立即執行*/
      $(".mydiv").click(function(event){
        console.log(this,"DOM對象")
        console.log("offsetX值",event.offsetX,"offsetY值",event.offsetY);
        console.log("clientX值",event.clientX,"clientY值",event.clientY);
        console.log("pageX值",event.pageX,"pageY值",event.pageY);
        console.log("網頁被卷去的高:"+document.body.scrollTop,"垂直方向滾動的值:"+document.documentElement.scrollTop);
        console.log("返復原動條的垂直位置"+$(window).scrollTop());//和$(document).scrollTop()效果相同,但window被所有浏覽器支援
        console.log("擷取目前元素的坐标：");
        let position = $(this).position();
        console.log("目前元素的坐标",position.left,position.top);
      });
    });
  </script>
  </body>
</html>

6.4 元素的高度和寬度 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    .mydiv{
      width: 200px;
      height: 300px;
      background-color: deepskyblue;
      position: absolute;
      left: 100px;
      top: 400px;
      border: 10px solid black;
      padding: 20px;
    }
  </style>
</head>
<body style="height: 2000px;">
<div class="mydiv"></div>
<script src="lib/jquery-1.12.4.min.js"></script>
<script>
  $(function(){/*當整個頁面中DOM元素加載完畢立即執行*/
    var mydiv = $(".mydiv");
    console.log("元素的高度和寬度",mydiv.width(),mydiv.height(),"牢記這個");
    console.log("pading+本身高度和寬度",mydiv.innerWidth(),mydiv.innerHeight());
    console.log("pading+本身高度和寬度+border",mydiv.outerWidth(),mydiv.outerHeight());
  });
</script>
</body>
</html>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

七、DOM操作

7.1 節點的添加操作 

<body>
  <p id="p1">
    天樞<strong>星河</strong>
  </p>
  <script src="lib/jquery-1.12.4.min.js"></script>
  <script>
    /*1.對子節點操作*/
    console.log("A_建立節點")
    let aElement01 = $("<a></a>").attr("href","http://www.4399.com/").attr("target","_blank").html("輕松一下");
    let aElement02 = $("<a href='https://cn.bing.com' target='_blank'>必應</a>");
    //console.log(aElement,"jQuery對象");
   // console.log(aElement[0],"DOM對象");
    console.log("追加到末尾")
    $("#p1").append(aElement01);
    $("#p1").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");

    //這種方式必須存在标簽節點,不能是文本節點
    aElement02.appendTo("#p1");

    console.log("追加到前面")
    $("#p1").prepend("<u>銀河</u>")
    $("<span>搖光</span>)").prependTo($("#p1"));

    /*2.對兄弟節點操作*/
    $("<del>兄弟節點</del>").insertBefore($("#p1"));
    $("#p1").before("文本");
    $("<del>兄弟節點:yyy</del>").insertAfter($("#p1"));
    $("#p1").after("<span>kkk</span>");
  </script>
  </body>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

7.2 節點的删除操作 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p id="p1">
            天樞
            <strong>星河</strong>
        </p>
        <p id="p2">
           天樞
            <strong>星河</strong>
        </p>
        <p class="userName">
             天樞
            <strong>星河</strong>
        </p>
        <script src="lib/jquery-1.12.4.min.js"></script>
        <script>
            $("#p1").remove();//将元素删除
            $("#p2").empty();//将元素内容清空
            $("p").remove(".userName");
        </script>
    </body>
</html>

八、事件

在jquery1.7之後，jQuery統一了所有的事件的處理方式：

on

方法綁定事件

1.7之前:簡單事件綁定->bind事件綁定->delegate事件綁定->on事件綁定（個人推薦）

簡單示例: 

<body>
        <h3>正常的表單送出</h3>
        <form action="http://www.baidu.com">
            <button>自動送出按鈕-表單有送出事件</button>
        </form>
        <h3>阻止表單送出</h3>
        <form action="http://www.baidu.com" onsubmit="return false;">
            <button>自動送出按鈕-表單有送出事件</button>
        </form>
        <h3>簡單事件</h3>
        <form action="http://www.baidu.com" id="myform01">
            <button>自動送出按鈕-表單有送出事件</button>
        </form>
        <h3>ON綁定</h3>
        <form action="http://www.baidu.com" id="myform02">
            <button>自動送出按鈕-表單有送出事件</button>
        </form>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function(){
               /**1.簡單事件的綁定*/
               $("#myform01").submit(function(){
                   console.log("阻止送出事件");
                   return false;
               });
               $("#myform02").on("submit",function(){
                   let num = Math.trunc(Math.random()*5);
                   console.log(num);
                   if(num==3){
                       return true;//送出表單
                   }else{
                       return false;//阻止表單的自動送出
                   }
                });
            });
        </script>
    </body>
</html>

重點：留言闆動态元素綁定事件 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>留言闆</title>
  </head>
  <body>
    <h3>留言闆</h3>
    <input type="text" id="message" placeholder="請輸入留言" required autofocus><button id="send">留言</button>

    <ul>
      <li>星河<a href="javascript:;">删除</a> </li>
      <li>搖光<a href="javascript:;">删除</a> </li>
    </ul>
    <script src="lib/jquery-1.12.4.min.js"></script>
    <script>
      $("ul").on("click","li a",function (){//動态綁定:$(selector).on(event,childSelector,data,function,map)

        //console.log(this,"DOM對象");
        if (window.confirm("确定要删除此條留言嗎?")){
          $(this).parent().remove();
        }

      })

      $("#send").click(function (){
        let message = $("#message").val();
        let $li = $("<li></li>");
        $li.append(message);
        $("<a href='javascript:;'>新删除</a>").appendTo($li);

        $("ul").prepend($li);

        $("#message").focus();//擷取光标
        $("#message").val("");//清空留言
      });
      $("#message").keyup(function (e){
        if(e.which==13){
          let message = $("#message").val();
          let $li = $("<li></li>");
          $li.append(message);
          $("<a href='javascript:;'>新删除</a>").appendTo($li);

          $("ul").prepend($li);

          $("#message").focus();//擷取光标
          $("#message").val("");//清空留言
        }
      })
    </script>
  </body>
</html>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

九. 案例

1.手風琴

  • next()

     :取得比對元素的一個後面緊鄰的兄弟節點

  • 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;}/*ul前無标記*/

      .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;/*div元素隐藏*/
      }

    </style>

  </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>
    <script src="lib/jquery-1.12.4.min.js"></script>
    <script>
      $(function(){
        //我們一點點處理
        $(".groupTitle").on("click",function(){
          //this轉換為jQuery對象
          console.log($(this).next()[0])
          //顯示目前的元素
          $(this).next().show();
          //隐藏目前元素的同級别節點的内容
          $(this).parent().siblings().children("div").hide();
        })
      });
    </script>
  </body>
</html>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

2.淘寶精品(對應圖檔滾動) 

<!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>



</head>
<body>
<div class="wrapper">

    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女褲</a></li>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮帶</a></li>
        <li><a href="#">圍巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男包</a></li>
    </ul>

</div>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        $("#left>li").mouseenter(function(){
           $("#center>li:eq("+$(this).index()+")").show().siblings().hide();
        });
        $("#right>li").mouseenter(function(){
            $("#center>li:eq("+($(this).index()+9)+")").show().siblings().hide();
        });
    });
</script>
</body>
</html>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop

3.頁籤

  • <li active>

     :active有顯示的作用 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>


</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">國際大牌<span>◆</span></li>
        <li class="tab-item">國妝名牌<span>◆</span></li>
        <li class="tab-item">清潔用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="../images/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="../images/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="../images/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="../images/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        $(".tab-item").mouseenter(function(){
            $(this).addClass("active").siblings().removeClass("active");
            let index = $(this).index();
            $(".main").eq(index).addClass("selected").siblings().removeClass("selected");
        });
    });
</script>
</body>
</html>
JavaScript學習筆記（六）(Jquery入門)注意:attr和prop
# JavaScript jquery
上一篇: android入門：zxing學習筆記（六）
下一篇: Spring學習筆記之Spring MVCSpring學習筆記之Spring MVC

繼續閱讀