jQuery 學習筆記（二）

要點

掌握索引值的擷取方法
必須掌握動态設定class的方法
了解鍊式程式設計的基本思路
掌握表單相關方法
必須掌握節點的添加删除操作
掌握jQuery的事件委托文法
掌握鍵盤事件和鍵碼(13)的使用

一、動态設定class的方法

1.1、索引值方法

在JS中，一堆元素的排序是按照索引值來排列的，索引值是從0開始，并且用index來表示.

在JQ中，**index()**是一個方法(函數)，是以必須加括号！用來擷取目前元素在父級中的索引值。

文法：

代碼舉例：

// 原生方法
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
    btns[i].setAttribute("myindex", i);
    btns[i].onclick = function () {
      	console.log(this.getAttribute("myindex"));
    };
}

// JQ index方法
$("button").click(function(){	
  var index = $(this).index();
  console.log(index);
})

索引值可以說是JS裡面非常重要的一個組成部分，經常使用于以下幾種狀況：導航欄、tab欄、焦點圖等等功能的實作。

1.2、 addClass與removeClass方法

文法：

// 給某個元素添加類名，理論上，一個标簽可以添加無數多個類名，用空格分開
$(selector).addClass(“className1  className2  className3”)

// 給某個元素移除類名
$(selector).removeClass(“className1  className2  className3”)

練習（Tab欄）

提供html與css代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tab欄</title>
    <style type="text/css">
        div,
        span,
        ul,
        li,
        h2,
        body {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .all {
            width: 440px;
            border: 1px solid #000;
            padding: 10px;
            margin: 80px auto;
        }

        .all h2 {
            height: 30px;
            text-align: center;
            display: flex;
            justify-content: space-between;
        }

        .all h2 span {
            width: 100px;
            height: 30px;
            background: #CCC;
            text-align: center;
            cursor: pointer;
        }

        .all h2 span.current {
            background: #FF3366;
        }

        .all ul li {
            display: none;
            background: #FF3366;
            height: 200px;
        }

        .all ul li.current {
            display: block
        }
    </style>
</head>
<body>
    <div class="all">
        <h2>
            <span class="current">新聞</span>
            <span>娛樂</span>
            <span>遊戲</span>
            <span>财經</span>
        </h2>
        <ul>
            <li class="current">新聞</li>
            <li>娛樂</li>
            <li>遊戲</li>
            <li>财經</li>
        </ul>
    </div>
</body>
</html>

《Tab欄》案例代碼：

// 原生方法
var btns = document.getElementsByTagName("span");
var pages = document.getElementsByTagName("li");
for (var i = 0; i < btns.length; i++) {
    btns[i].index = i;
    btns[i].onmouseenter = function () {
        for (var j = 0; j < btns.length; j++) {
            btns[j].className = "";
            pages[j].className = "";
        }
        this.className = "current";
        pages[this.index].className = "current";
    };
}

// JQ方法
$("span").hover(function () {
    var index = $(this).index();
    $(this).addClass("current").siblings().removeClass("current");
    $("li").eq(index).addClass("current").siblings().removeClass("current");
});

1.3、 toggleClass

文法：

// 切換某個元素的類名（添加或删除）
$(selector).toggleClass(“className”)

練習（百度風雲榜）

提供html和css代碼：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度風雲榜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        ul {
            padding: 10px;
            margin: 100px auto;
            border: 1px solid #000;
            width: 100px;
        }

        ul>li {
            cursor: pointer;
        }

        span {
            background: url(images/close.gif) no-repeat left center;
            padding-left: 20px;
        }

        span.open {
            background-image: url(images/open.gif);
        }

        ol {
            display: none;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <span>音樂</span>
            <ol>
                <li>你好毒</li>
                <li>該死的溫柔</li>
                <li>演員</li>
            </ol>
        </li>
        <li>
            <span>電影</span>
            <ol>
                <li>釜山行</li>
                <li>戰狼</li>
                <li>殺破狼</li>
            </ol>
        </li>
        <li>
            <span>小說</span>
            <ol>
                <li>天龍八部</li>
                <li>三生三世</li>
                <li>小時代</li>
            </ol>
        </li>
    </ul>
</body>
</html>

《百度風雲榜》案例代碼：

$('span').click(function(){
  // 讓目前清單切換收放
  $(this).toggleClass('open').siblings('ol').slideToggle();
  // 讓其他清單收起
  $(this).parent().siblings().children('ol').slideUp().siblings('span').removeClass('open');
})

// 代碼優化：
// 鍊式程式設計的原理：每一個方法都會去找最近的一個對象(事件源)
$('span').click(function(){
  $(this).toggleClass('open')// "目前span"
    	 .siblings('ol')// 将事件源"目前span"變成了"目前ol"
          .slideToggle()// "目前ol"
          .parent()// 将"目前ol"變成了"目前父級li"
          .siblings()// 将"目前父級li"變成了"其他父級li"
          .children('ol')// 将"其他父級li"變成了"其他父級的ol"
          .slideUp()// "其他父級的ol"
          .siblings('span')// 将"其他父級的ol"變成了"其他父級的span"
          .removeClass('open');// "其他父級的span"
})

二、表單相關方法

2.1、val擷取表單中的值

擷取input 或 textarea 的值我們可以通過以下方式擷取：

// ()内部寫入文本可以實作修改功能
$('input').val()
$('textarea').val()

擷取select下拉框的值

<select id="selectBrowser">
    <option value="1">pc</option>
    <option value="2">phone</option>
    <option value="3">pad</option>
</select>
<script>
    $("#selectBrowser").change(function(){
        console.log($(this).val());
    })
</script>

2.2、trim去除前後空格

表單輸入時去除前後空格，我們可以用：

$.trim()

代碼示例：

// 通常來說送出表單時，輸入框的值是不允許為空的，并且包括空格，這樣的資料是無意義的，此時需要做校驗，提示使用者重新輸入
var val = $('input').val();
if( $.trim(val)=="" ){
  	alert('請重新輸入');
}

三、節點控制

3.1、什麼是節點

關于節點，其實在body裡面，任何标簽、文字、圖檔、空格、換行等都是節點，既然是節點，就擁有增、删、改、查這幾個功能。

節點node	nodeType	nodeName	nodeValue
元素節點	1	标簽名（大寫）	null
屬性節點	2	屬性名	屬性值
文本節點	3	#text	文本内容
CDATA節點	4	#cdata-section	CDATA區域内容
實體引用名稱節點	5	引用名稱	null
實體名稱節點	6	實體名稱	null
處理指令節點	7	target	entire content cluding the target
注釋節點	8	#comment	注釋内容
文檔節點	9	#document	null
文檔類型節點	10	doctype的名稱	null
文檔片段節點	11	#document-fragment	null
DTD聲明節點	12	符号名稱	null

3.2、增加子節點（重點）

文法：

// 在某個元素的子級中，往後面添加節點
$(element).append('子節點')
// 在某個元素的子級中，往前面添加節點
$(element).prepend('子節點')

代碼舉例：

<input type="text">
  <button class="before">往前添加</button>
<button class="after">往後添加</button>
<ul>
  <li>我本來就存在</li>
</ul>

<script>
  // 點選增加一個li标簽在ul的最前
  $('.before').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').prepend('<li>'+val+'</li>');
    $('input').val("");
  })

  // 點選增加一個li标簽在ul的最後
  $('.after').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').append('<li>'+val+'</li>');
    $('input').val("");
  })
</script>

3.3、增加同級節點（重點）

文法：

// 在element之前添加兄弟節點
$(element).before('兄弟節點') 
// 在element之後添加兄弟節點
$(element).after('兄弟節點')

代碼舉例：

<button>兄弟前添加</button>
<button>兄弟後添加</button>
<div>
  <p class="brother"></p>
</div>

<script>
  // 點選增加一個标簽在p.brother之前
  $('button').eq(0).click(function(){
    $('.brother').before('<p>我是前p</p>');
  })

  // 點選增加一個标簽在p.brother之後
  $('button').eq(1).click(function(){
    $('.brother').after('<p>我是後p</p>');
  })
</script>

3.4、節點的删除（重點）

文法：

// 将element節點中的子級節點包括内容清空
$(element).empty();
// 删除element節點包括内容
$(element).remove();

代碼舉例：

$('button').eq(0).click(function(){
  $('ul').empty();  // 清空ul中的内容
})

$('button').eq(1).click(function(){
  $('ul').remove(); // 直接删除ul
})

3.5、節點的替換

文法：

// 用後者替代前者
$(element1).replaceWith(element2);

代碼舉例：

$('button').click(function(){
    // p替代li
    $('li').eq(1).replaceWith(`<p>這是個p标簽</p>`);
})

四、事件委托

定義：

事件委托是利用事件冒泡，隻指定一個事件處理程式來管理某一類型的所有事件。

為什麼使用事件委托：

考慮一個ul，在li的數量非常少的時候，為每一個li添加事件當然會使用for循環；但是數量多的時候這樣做太浪費記憶體，長到上百上千上萬的時候，為每個li添加事件就會對頁面性能産生很大的影響。
給一個ul裡面的幾個li添加了事件但是如果動态又生成了li則剛生成的li不具備事件這時就需要用到委托。

事件委托的作用：

性能要好（為多個相同元素綁定事件）
針對新建立的元素，直接可以擁有事件（為不存在的元素綁定事件）

文法：

// 事件和函數是必填的，子級選擇器選填（不填就是普通事件綁定）
$(selector).on(事件,children,function(e){...})

代碼舉例：

// 1ms之後再添加一下li元素
setTimeout(function () {
  	$('ul').append('<li>6</li>')
}, 1)
// 普通事件綁定（辦不到）
// $('li').click(function(){
//     var index=$(this).index()+1
//     console.log(index);
// })
// 事件委托（重點）
$('ul').on('click', 'li', function () {
    var index = $(this).index() + 1
    // 此時this指向的是‘li’
    console.log(this, index);
})

// 事件解綁
$('ul').click(function(){
    console.log(111);
})
$("button").click(function(){
    $('ul').off('click', 'li')
})

// 另一種詭異寫法（JQ項目很多這樣的寫法）
setTimeout(function () {
  	$('ul').append('<li οnclick="getIndex(this)">6</li>')
}, 1)
function getIndex(myThis){
    var index=$(myThis).index()+1
    console.log(index);
}

五、鍵盤事件和鍵碼

5.1、鍵盤事件

我們已經講過了很多滑鼠事件，可以直接使用

$(selector).事件(function(){...});

，接下來我們來學習鍵盤事件，用法也是類似的：

$(selector).keydown(function(){...});// 鍵盤按下事件
$(selector).keyup(function(){...});// 鍵盤松開事件

5.2、鍵碼

e.keyCode – 鍵碼

這裡提供一張鍵碼表，但并不需要專門去記住：

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-nm8WpX6f-1628046221788)(.\images\keycode.png)]

六、作業：微網誌釋出

項目連結：http://codesohigh.com/weibo/

請完成以下效果：

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-sdkdy4ad-1628046221791)(.\images\homework3.gif)]

思路提示：

聚焦(focus)、失焦(blur) 事件設定邊框的顔色
輸入事件（建議使用keyup）要判斷 “釋出” 按鈕是否可點選（樣式和實際flag）
聚焦事件也需要判斷“釋出” 按鈕是否可點選（可以封裝成函數）
通過keyCode可以判斷回車(13或enter)，可以進行釋出操作（将釋出功能封裝成函數）
點選"釋出"按鈕，可以直接掉用釋出方法
點選删除的效果，使用jq的事件委托

提供html+css代碼（動畫不做要求，主要完成功能）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微網誌釋出</title>
    <style>
        *{margin: 0;padding: 0;border: 0;list-style: none;}
        body{background: #efefef;}
        section{overflow: hidden;width: 800px;padding: 10px;background: #fff;margin: 100px auto 20px;}
        h4{color: #426c81;font-weight: normal;}
        textarea{width: 100%;resize: none;border: 1px solid #ccc;outline: none;margin-top: 10px;margin-bottom: 10px;height: 70px;}
        div{width: 90px;height: 30px;line-height: 30px;text-align: center;background: #ff8140;color: #fff;border-radius: 6px;float: right;opacity: 0.8;cursor: not-allowed;}
        ul{width: 800px;padding: 10px;background: #fff;margin: 0 auto;overflow: hidden;}
        li{border-bottom: 1px dashed #ccc;line-height: 30px;height: 30px;margin-top: 5px;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;width: 100%;box-sizing: border-box;}
        p{width: 95%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        span{cursor: pointer;width: 20px;height: 20px;text-align: center;line-height: 20px;background: #ccc;border-radius: 3px;}
        textarea.active{border-color: #ff8140;}
        div.active{opacity: 1;cursor: pointer;}
    </style>
</head>
<body>
    <section>
        <h4>有什麼新鮮事想告訴大家?</h4>
        <textarea></textarea>
        <div>釋出</div>
    </section>
    <ul>
        <!-- <li>
            <p></p>
            <span>x</span>
        </li> -->
    </ul>
</body>
</html>

jQuery 學習筆記（二）

要點

一、動态設定class的方法

1.1、索引值方法

1.2、 addClass與removeClass方法

練習（Tab欄）

1.3、 toggleClass

練習（百度風雲榜）

二、表單相關方法

2.1、val擷取表單中的值

2.2、trim去除前後空格

三、節點控制

3.1、什麼是節點

3.2、增加子節點（重點）

3.3、增加同級節點（重點）

3.4、節點的删除（重點）

3.5、節點的替換

四、事件委托

五、鍵盤事件和鍵碼

5.1、鍵盤事件

5.2、鍵碼

六、作業：微網誌釋出

思路提示：

繼續閱讀

用jQuery實作一個簡易的聊天框

使用canvas制作簡易的資料結構核心算法示範系統——線性表(三)——頭插法

Jquery 拖動視窗

用js實作的一個加載中狀态的動态效果

jquery實作複制到剪貼闆通用

Jquery 實作複制到剪貼闆

ZeroClipboard2.2.0版本跨浏覽器複制（兼解決IE下相容問題）

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關

jQuery實作Ajax通訊的幾種常用方式

jqGrid的使用筆記：5. 事件

jQuery實作百度搜尋框

2010年終總結--技術篇

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

jquery_126_demo