前端點滴（jQuery）（一）

一、jQuery概述

1. 什麼是 jQuery

jQuery是一個js框架。封裝了很多實用的方法，基本解決了瀏覽器的兼容問題。

框架類似於現實生活中的毛坯房。比如說做一個項目好比蓋一座房子。

2. jQuery 特點

write less, do more. 寫的更少，做的更多。

1．語法簡練、語義易懂、學習快速、文檔豐富。

2．jQuery 是一個輕量級的腳本，其代碼非常小巧。

3．jQuery 支持 CSS1~CSS3 定義的屬性和選擇器

4．jQuery 是兼容瀏覽器的，它支持的瀏覽器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。

5．能將 JavaScript (行爲)腳本與 HTML (結構)源代碼完全分離，便於後期編輯和維護。

6．插件豐富，除了 jQuery自身帶有的一些特效外，可以通過插件實現更多功能

3. 網站

官方地址爲：http://jquery.com/

下載地址：http://www.jq22.com/jquery-info122 該網站內有很多插件的鏈接

最新版在線手冊手冊：http://jquery.cuishifeng.cn/

中文社區：http://jquery.org.cn/

4. 其他類型的框架

• Prototype：與面向對象的原型繼承關鍵字prototype一致，該框架的特點是功能擴展比較容易。

• YUI：該框架可以實現各種頁面佈局效果。

• Extjs : 是目前js框架包裏邊最爲時尚、前沿的。通過該框架包可以實現許多非常絢麗的效果。

• 該框架可以實現效果之一：頁面不同區域進行拖拽效果。由於實現的效果非常“絢麗”、導致其“實用”價值相對略低。

• Mootools框架，一款短小精悍的框架，完全採用面向對象的思想進行封裝，採用很多流行的技術，核心代碼只有8kb，是一款非常好用的JS框架。

• jQuery：使用前期，jquery側重快速找到頁面上各種節點。

  後期jquery豐富了事件操作、ajax操作、動畫效果、DOM操作等等。jQuery官方也提供了很多比較有效或有針對性的插件比如有jQueryUI、jQuery Mobile插件等。

二、jQuery 快速入門

1. 引入jquery文件：

下載：

1. 瀏覽器打開jquery官網進行下載。http://jquery.com/

2. 使用 jq22 庫文件下載jquery。

引入jquery文件

1. 引入cdn 。https://www.bootcdn.cn/jquery/
   

2. 引入已經下載好的jquery文件
   

2. 使用jquery，jquery基本語法

頁面加載完畢，設置頁面中的li標籤的樣式，要求字體顏色爲red，背景顏色爲#ccffcc。

<ul>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
</ul>

//使用js操作DOM
window.onload = function(){
    var lis = document.getElementsByTagName('li');
    for(var i in lis){
        lis[i].style.color = 'red';
        lis[i].style.backgroundColor = '#ccffcc';
    }
}

//使用jquery操作DOM
$(document).ready(function(){
    //jQuery可以進行鏈式操作，對同一元素的設置可以寫一行代碼，如下：
  	$('li').css('color','red').css('background-color','#ccffcc');
})
/**
*說明：
*$()是jQuery的一個函數，參數可以是一個dom對象，可以是選擇器，也可以是標籤。返回jQuery對象
*$(document)返回一個jQuery對象，表示整個文檔
*ready()是jQuery封裝好的一個事件，表示頁面加載完畢會觸發的一個事件，它是參數是一個函數，表示事件處理函數
*css()是jQuery封裝的一個方法，填一個參數，表示獲取元素的css；填兩個參數表示設置元素的css,注意：樣式名稱和css樣式名稱完全一致，不用去掉下劃線和字母變大寫
*/

//簡潔寫法
$(function(){
  	$('li').css('color','red').css('background-color','#ccffcc');
})

3. 常用的 jQuery 事件

鼠標事件	鍵盤事件	表單事件	文檔/窗口事件
click（點擊事件）	keypress（鍵盤按下事件）	submit（發送表單事件）	load（加載事件）
dblclick（雙重點擊事件）	keydown（鍵盤按下事件）	change（發生改變事件）	resize（窗口大小事件）
mouseenter（鼠標移入事件）	keyup（鍵盤彈起事件）	focus（聚焦事件）	scroll（窗口滾動事件）
mouseleave（鼠標移出事件）		blur（失焦事件）	unload（離開頁面事件）（廢除）
mouseover（鼠標移入事件）			ready（加載完成事件）
hover（鼠標移入移出事件）

注意： keypress,keydown,keyup的區別:

1. keydown：在鍵盤上按下某鍵時發生,一直按着則會不斷觸發（opera瀏覽器除外）, 它返回的是鍵盤代碼。

2. keypress：在鍵盤上按下一個按鍵，併產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字符，所以監聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件纔會觸發。若一直按着某按鍵則會不斷觸發。

3. keyup：用戶鬆開某一個按鍵時觸發, 與keydown相對, 返回鍵盤代碼。

注意： mouseover與mouseenter的區別：

mouseover 與mouseenter不同，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。但是只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。

4. 獲取事件對象

方法與JavaScript相同；

//比如說獲取表單鍵盤事件對象
input.keyup(function(evt){
    //在jQuery中使用which來代替keyCode
    var keyCode = evt.which;
    //...
})

三、修改可編輯表格案例

可編輯表格的JavaScript案例：

https://blog.csdn.net/Errrl/article/details/103935925

使用jQuery修改編輯表格案例：

<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>唐僧</td>
    </tr>
    <tr>
        <td>2</td>
        <td>悟空</td>
    </tr>
    <tr>
        <td>3</td>
        <td>八戒</td>
    </tr>
    <tr>
        <td>4</td>
        <td>沙僧</td>
    </tr>
    <tr>
        <td>5</td>
        <td>白龍馬</td>
    </tr>
    <tr>
        <td>6</td>
        <td>金箍棒</td>
    </tr>
    </tbody>
</table>

<style>
        *{
            margin:0;
            padding:0;
            border:0 none;
        }
        table,th,td{
            border:solid 1px #1b272e;
            border-collapse: collapse; /*合併邊框*/
        }
        table{
            width:400px;
            margin:10px auto; /*左右居中對齊*/
        }
        th,td{
            width:50%;
            padding:3px;
        }
</style>

$(function(){
    /* 獲取姓名td，綁定點擊事件 */
    //1. 選擇每一個tr下的最後一個td
    // $('tr td:last-child')
    //2.選擇奇數td，下標從0開始
    // $('td:odd')
    //3.選擇tr中的第二個td，下標從1開始
    // $('td:nth-child(2/2n)')
    $('td:odd').click(function(){
        //保存td
        var td = $(this);
        //判斷td中是否存在input，存在就不進行重建
        if(td.children().length>=1){
            return false;
        }
        //操作input
        //保存td中的文本信息
        var text = td.text();
        //清空td，創建input
        td.html('');
        var input = $('<input/>');//注意 ：一定要是閉合標籤
        //設置input,鏈式操作
        input
        .val(text)
        .css('width',td.css('width'))
        .css('height',td.css('height'))
        .css('font-size',td.css('font-size'))
        .css('outline','0')
        .appendTo(td)
        .focus();//鏈子結束可加;
        
        //綁定鍵盤事件
        input.keyup(function(evt){
            var keyCode = evt.which;//在jQuery中使用which來代替keyCode
            if(keyCode == 13){
                td.text($(this).val());
            }
            if(keyCode == 27){
                td.text(text);
            }
        });
    });
});

效果：

案例總結

1.選擇器

選擇器一定要寫到$()函數中，寫法基本上和css選擇器一樣。

除了常規的標籤選擇器（Element）、類選擇器（class）、ID選擇器（id）、子代選擇器外。增設表單選擇器、以及一些基本的篩選器。

表單選擇器

• :input
• :text
• :password
• :radio
• :checkbox
• :submit
• :image
• :reset
• :button
• :file

篩選器

• :first
• :not(selector)
• :even
• :odd
• :eq(index)
• :gt(index)
• :last
• :lt(index)
• :header
• :animated
• :root

2.事件綁定

$('選擇器').事件方法(function(evt){
	//這就是jQuery中事件的綁定方式
});

3.html代碼/文本/值/css

css()：一個參數，表示獲取元素的css；兩個參數表示設置元素的css。語法：css(name|pro|[,val|fn\])

html()：0個參數，表示獲取元素的html內容；1個參數表示設置元素的html內容。語法：$('選擇器').html()

text()：0個參數，表示獲取元素的文本內容；1個參數表示設置元素的文本內容。語法：$('選擇器').text()

val()：0個參數，表示獲取元素的value值；1個參數表示設置元素的value值，專門用於表單項。語法：$('選擇器').val()

4.which屬性

針對鍵盤和鼠標事件，這個屬性能確定你到底按的是哪個鍵或按鈕。

event.which 將 event.keyCode 和 event.charCode 標準化了。

詳情： eve.which

四、縱向導航菜單

點擊頁面中的頂級菜單，會下拉它的子菜單。

首先要找到頂級菜單，然後綁定單擊事件，點擊頂級菜單的時候，讓其對應的子菜單慢慢滑動下來；再次點擊頂級菜單，其對應的子菜單慢慢滑動隱藏。

<ul>
    <li>
        <a href="#">頂級菜單一</a>
        <ul>
            <li>子菜單11</li>
            <li>子菜單12</li>
            <li>子菜單13</li>
        </ul>
    </li>
    <li>
        <a href="#">頂級菜單二</a>
        <ul>
            <li>子菜單21</li>
            <li>子菜單22</li>
            <li>子菜單23</li>
        </ul>
    </li>
    <li>
        <a href="#">頂級菜單三</a>
        <ul>
            <li>子菜單31</li>
            <li>子菜單32</li>
            <li>子菜單33</li>
        </ul>
    </li>
</ul>

*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none;
}
/*頂級菜單*/
a{
    display: block;
    width:120px;
    height:30px;
    line-height: 30px;
    text-decoration: none;
    background-color: rgb(23, 199, 90);
    color:white;
}

/*子菜單*/
ul ul>li{
    width:120px;
    height:30px;
    line-height: 30px;
    background-color: rgb(35, 218, 218)
    color: rgb(255, 0, 157);
}
/*默認子菜單隱藏*/
ul ul{
    display: none;
}

版本一：

/* 使用動態效果show&&hide */
$(function(){
    $('a').click(function(){
    	//同一級別的 ul 添加動態效果
        //獲取 ul
        //$(this).next()
         if($(this).next().css('display')=='none'){
           $(this).next().show(1000); 
        }else{
            $(this).next().hide(800);
        }
    }
})

版本二：

/* 使用動態效果slideDown&&slideUp */
$(function(){
    $('a').click(function(){
        if($(this).next().css('display')=='none'){
         	$(this).next().slideDown(1000); 
        }else{
            $(this).next().slideUp(800);
        }
    }
})

版本三：

/* 使用動態效果toggle */
$(function(){
    $('a').click(function(){
        $(this).next().toggle(1000);
    }
})

版本四：

/* 使用動態效果slideToggle */
$(function(){
    //獲取所有一級菜單，綁定事件
    $('a').click(function(){
        $(this).next().slideToggle(1000);
    })
})

效果：

案例總結

1.篩選器

功能：過濾

• eq(index|-index)
• first()
• last()
• hasClass(class)
• filter(expr|obj|ele|fn)
• is(expr|obj|ele|fn)
• map(callback)
• has(expr|ele)
• not(expr|ele|fn)
• slice(start,end)

功能：查找

• children(expr)le
• find(expr|obj|ele)
• next(expr)
• nextAll(expr)
• nextUntil([expr|ele][,fn])
• offsetParent()
• parent(expr)
• parents(expr)
• parentsUntil([expr|ele][,fn])
• prev(expr)
• prevAll(expr)
• prevUntil([expr|ele][,fn])
• siblings(expr)

說明：

• expr：express（表達式）
• ele：element（元素DOM對象）
• fn：function（功能函數）
• callback：function（回調函數）
• index：index（元素下標）

2.動態效果

基本

• [show([s],e],[fn])
• [hide([s],e],[fn])
• [toggle(s],[e],[fn])

滑動

• [slideDown(s],[e],[fn])
• [slideUp([s],e],[fn])
• [slideToggle(s],[e],[fn])

淡入淡出

• [fadeIn(s],[e],[fn])
• [fadeOut(s],[e],[fn])
• [fadeTo([s],[o],[e],[fn])
• [fadeToggle([s],e],[fn])

自定義動畫

• [animate([p],s],[e],[fn])

說明：

• s：speed（速度）三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000) 。
• e：easing（ 切換效果 ） 用來指定切換效果，默認是"swing"，可用參數"linear" 。
• fn：function（功能函數） 在動畫完成時執行的函數，每個元素執行一次。
• o：opacity（透明度）用來指定透明度。

五、橫向導航菜單

鼠標放到頂級菜單上，其子菜單滑動顯示，鼠標移動到子菜單上，子菜單不能消失；

鼠標離開頂級菜的和子菜單之後，子菜單滑動隱藏；

鼠標必須放到頂級菜單上超過300毫秒，才顯示子菜單；

複製上述的 HTML 代碼，修改css

*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none;
}
/*頂級菜單*/
a{
    display: block;
    width:120px;
    height:30px;
    line-height: 30px;
    text-decoration: none;
    background-color: rgb(23, 199, 90);
    color:white;
}

/*子菜單*/
ul ul>li{
    width:120px;
    height:30px;
    line-height: 30px;
    background-color: rgb(35, 218, 218)
    color: rgb(255, 0, 157);
}
/*默認子菜單隱藏*/
ul ul{
    display: none;
}
/* 菜單橫向顯示 */
body>ul>li{
    float:left;
}

版本一：

/* 使用mouseover&&mouseout */
$(function(){
	//由於是鼠標移入移出事件，不能單單綁定在a上，如果只綁定在a上會發生子菜單單無法選中的情況。
	//所以綁定整個li。
	$('body>ul>li').mouseover(function(){
		$(this).children('ul').slideDown;
	})
	$('body>ul>li').mouseout(function(){
		$(this).children('ul').slideUp;
	})
})

//注意：此種效果會發現存在bug，原因就是mouseover的特性，上述有說明。

版本二：

/* 使用mouseenter&&mouseleave */
$(function(){
	$('body>ul>li').mouseenter(function(){
		$(this).children('ul').slideDown;
	})
	$('body>ul>li').mouseleave(function(){
		$(this).children('ul').slideUp;
	})
})

//注意：此種效果雖然解決了mouseover的特性特性問題，但是鼠標滑動過三個一級菜單時，都會顯示二級菜單，造成二級菜單顯示過快問題

版本三：

/* 使用hover&&定時器setTimeout */
$(function(){
	var timer = null;//定義一個定時器
	$('body>ul>li').hover(fumction(){
		var li = $(this);
    	//鼠標移入滿足500ms，其子元素中的ul顯示
   		timer = setTimeout(function(){
   			li.children('ul').slideDown(500);
   		}, 300);
	},function(){
		//鼠標離開，其子元素中的ul消失
    	clearTimeout(timer);
  		$(this).children('ul').slideUp(500);
	})
})

BUG 問題的存在與解釋

1. BUG1：mouseover && mouseenter

做一個觸發次數累加小實驗：

<div id="over" style="background-color: aqua; border: solid 1px red;">
    <h1 style="background-color: chocolate;">over</h1>
    <span>0</span>
</div>
<hr>
<div id="enter" style="background-color: #ccc; border: solid 1px green;">
    <h1 style="background-color: aquamarine">enter</h1>
    <span>0</span>
</div>

$(document).ready(function(){
            $('#over').mouseover(function(){
                var old = $(this).children('span').text();
                $(this).children('span').text(parseInt(old) + 1);
            });

            $('#enter').mouseenter(function(){
                var old = $(this).children('span').text();
                $(this).children('span').text(parseInt(old) + 1);
            });
        });

效果：

實驗說明：

mouseover 與mouseenter不同，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。但是只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。

2. BUG2：鼠標快速的劃來劃去，下拉菜單不斷顯示隱藏

目前的效果，鼠標快速的劃來劃去，下拉菜單不斷顯示隱藏。

解決辦法是加入定時器，如果真的要顯示下拉菜單，需要鼠標懸停300，如果真懸停了300毫秒則顯示下拉菜單，如果300毫秒以內，鼠標離開，那麼清除定時器，不讓顯示的代碼執行了。

六、標籤頁效果

點擊標籤之後，讓其對應的內容區顯示，同時標籤會有一個效果的變化；反之，另外的標籤顯示默認樣式，另外的內容區要隱藏。

<ul>
    <li class="tab">軍事</li>
    <li>娛樂</li>
    <li>體育</li>
</ul>
<div class="show">這是軍事版塊</div>
<div>這是娛樂版塊</div>
<div>這是體育版塊</div>

*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none;
}

li{
    float:left;
    width:50px;
    height:30px;
    background-color: #999;
    color:#fff;
    line-height: 30px;
    border:solid 1px #fff;
}
div{
    clear: both; /*清除浮動造成的影響*/
    width:200px;
    height:120px;
    background-color: #051c29;
    color:#fff;
    display: none;/*隱藏所有的div*/
}
/*下面單獨設置第一個div和第一個li的樣式*/
div.show{
    display: block;
}
li.tab{
    background-color: #051c29;
    border: solid 1px #051c29;
}

/* 對應的li對應的div */
/* 遍歷li */
$(function(){
    $('li').each(function(i,val){
    	$(val).click(function(){
            $('li').eq(i).addClass('tab').siblings().removeClass('tab');
          $('div').eq(i).addClass('show').siblings().removeClass('show');   
        })
	})
})

效果：

案例總結

1.jQuery屬性操作

屬性

• attr(name|pro|key,val|fn)
• removeAttr(name)
• prop(n|p|k,v|f)
• removeProp(name)

CSS 類

• addClass(class|fn)
• removeClass([class|fn])
• toggleClass(class|fn[,sw])

2.數組遍歷

• each(callback)

寫法一：

$('選擇器').each(function(i, val){
    //i 表示元素的下標
    //val 每次遍歷時的元素
    //其他操作...
});

寫法二：

 $.each($('選擇器'), function (i, val) {
    //i 表示元素的下標
    //val 每次遍歷時的元素
    //其他操作...
 })

jquery.cuishifeng.cn/attr.html)

• removeAttr(name)
• prop(n|p|k,v|f)
• removeProp(name)

CSS 類

• addClass(class|fn)
• removeClass([class|fn])
• toggleClass(class|fn[,sw])

2.數組遍歷

• each(callback)

寫法一：

$('選擇器').each(function(i, val){
    //i 表示元素的下標
    //val 每次遍歷時的元素
    //其他操作...
});

寫法二：

 $.each($('選擇器'), function (i, val) {
    //i 表示元素的下標
    //val 每次遍歷時的元素
    //其他操作...
 })