python前端之JQuery

時間 2019-12-13

標籤 python 前端 jquery 欄目 Python 简体版

原文原文鏈接

目的：學習JQuery函數庫的基本使用方法和應用場景。javascript

jquery介紹

jQuery是目前使用最普遍的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其餘庫。微軟公司甚至把jQuery做爲他們的官方庫。css

jQuery的版本分爲1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器，2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。html

jquery是一個函數庫，一個js文件，頁面用script標籤引入這個js文件就可使用。java

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

jquery的口號和願望 Write Less, Do More（寫得少，作得多）jquery

一、http://jquery.com/ 官方網站
二、https://code.jquery.com/ 版本下載web

jquery加載

將獲取元素的語句寫到頁面頭部，會由於元素尚未加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。ajax

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

能夠簡寫爲：正則表達式

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery選擇器

jquery用法思想一
選擇某個網頁元素，而後對它進行某種操做json

jquery選擇器
jquery選擇器能夠快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。api

$(document) //選擇整個文檔對象
$('li') //選擇全部的li元素
$('#myId') //選擇id爲myId的網頁元素
$('.myClass') // 選擇class爲myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span') //選擇id爲爲ul1元素下的全部li下的span元素

對選擇集進行修飾過濾(相似CSS僞類)

$('#ul1 li:first') //選擇id爲ul1元素下的第一個li
$('#ul1 li:odd') //選擇id爲ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id爲ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id爲ul1元素下的前三個以後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素

對選擇集進行函數過濾

$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素

選擇集轉移

$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的全部子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素

jquery樣式操做

jquery用法思想二
同一個函數完成取值和賦值

操做行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");


//設置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特別注意
選擇器獲取的多個元素，獲取信息獲取的是第一個，好比：$("div").css("width")，獲取的是第一個div的width。

操做樣式類名

$("#div1").addClass("divClass2") //爲id爲div1的對象追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id爲div1的對象的class名爲divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

jquery屬性操做

一、html() 取出或設置html內容

// 取出html內容

var $htm = $('#div1').html();

// 設置html內容

$('#div1').html('<span>添加文字</span>');

二、text() 取出或設置text內容

// 取出文本內容

var $htm = $('#div1').text();

// 設置文本內容

$('#div1').text('<span>添加文字</span>');

三、attr() 取出或設置某個屬性的值

// 取出圖片的地址

var $src = $('#img1').attr('src');

// 設置圖片的地址和alt屬性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

綁定click事件

給元素綁定click事件，能夠用以下方法：

$('#btn1').click(function(){

    // 內部的this指的是原生對象

    // 使用jquery對象用 $(this)

})

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展現或隱藏某個元素
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素

jquery鏈式調用

jquery對象的方法會在執行完後返回這個jquery對象，全部jquery對象的方法能夠連起來寫：

$('#div1') // id爲div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent()  //跳到ul的父元素，也就是id爲div1的元素
.siblings()  //跳到div1元素平級的全部兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast');  //高度實際高度變換到零來隱藏ul元素

jquery動畫

經過animate方法能夠設置元素某屬性值上的動畫，能夠設置一個或多個屬性值，動畫執行完成後會執行一個函數。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

參數能夠寫成數字表達式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

尺寸相關、滾動事件

一、獲取和設置元素的尺寸

width()、height()    獲取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

二、獲取元素相對頁面的絕對位置

offse()

三、獲取可視區高度

$(window).height();

四、獲取頁面高度

$(document).height();

五、獲取頁面滾動距離

$(document).scrollTop();  
$(document).scrollLeft();

六、頁面滾動事件

$(window).scroll(function(){  
    ......  
})

實例

一、層級菜單

二、選項卡

三、置頂菜單

四、滾動到頂部

六、手風琴效果

五、無縫滾動

jquery事件

事件函數列表：

blur() 元素失去焦點
focus() 元素得到焦點
change() 表單元素的值發生變化
click() 鼠標單擊
dblclick() 鼠標雙擊
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
mouseenter() 鼠標進入（進入子元素不觸發）
mouseleave() 鼠標離開（離開子元素不觸發）
hover() 同時爲mouseenter和mouseleave事件指定處理函數
mouseup() 鬆開鼠標
mousedown() 按下鼠標
mousemove() 鼠標在元素內部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 鬆開鍵盤
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發生改變
scroll() 滾動條的位置發生變化
select() 用戶選中文本框中的內容
submit() 用戶遞交表單
toggle() 根據鼠標點擊的次數，依次運行多個函數
unload() 用戶離開頁面

綁定事件的其餘方式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消綁定事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

主動觸發與自定義事件

主動觸發
可以使用jquery對象上的trigger方法來觸發對象上綁定的事件。

自定義事件
除了系統事件外，能夠經過bind方法自定義事件，而後用tiggle方法觸發這些事件。

//給element綁定hello事件
element.bind("hello",function(){
    alert("hello world!");
});

//觸發hello事件
element.trigger("hello");

事件冒泡

什麼是事件冒泡
在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

事件冒泡的做用
事件冒泡容許多個操做被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可讓你在對象層的不一樣級別捕獲事件。

阻止事件冒泡
事件冒泡機制有時候是不須要的，須要阻止掉，經過 event.stopPropagation() 來阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默認行爲
阻止右鍵菜單

$(document).contextmenu(function(event) {
    event.preventDefault();
});

合併阻止操做
實際開發中，通常把阻止冒泡和阻止默認行爲合併起來寫，合併寫法能夠用

// event.stopPropagation();
// event.preventDefault();

// 合併寫法：
return false;

頁面彈框實例

事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，經過判斷事件來源的子集，執行相應的操做，事件委託首先能夠極大減小事件綁定次數，提升性能；其次可讓新加入的子元素也能夠擁有相同的操做。

通常綁定事件的寫法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委託的寫法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

取消事件委託

// ev.delegateTarge 委託對象
$(ev.delegateTarge).undelegate();

// 上面的例子可以使用 $list.undelegate();

jquery元素節點操做

建立節點

var $div = $('<div>');
var $div2 = $('<div>這是一個div元素</div>');

插入節點
一、append()和appendTo()：在現存元素的內部，從後面插入元素

var $span = $('<span>這是一個span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

二、prepend()和prependTo()：在現存元素的內部，從前面插入元素

三、after()和insertAfter()：在現存元素的外部，從後面插入元素

四、before()和insertBefore()：在現存元素的外部，從前面插入元素

刪除節點

$('#div1').remove();

todolist(計劃列表)實例

滾輪事件與函數節流

jquery.mousewheel插件使用
jquery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可使用jquery的滾輪事件插件jquery.mousewheel.js。

函數節流
javascript中有些事件的觸發頻率很是高，好比onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短事件內多處觸發執行綁定的函數，能夠巧妙地使用定時器來減小觸發的次數，實現函數節流。

整屏滾動實例

實例

一、無縫滾動

二、幻燈片

三、彈框

四、todolist

五、整屏滾動

json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是相似於javascript對象的一種數據格式，目前這種數據格式比較流行，逐漸替換掉了傳統的xml數據格式。

javascript對象字面量：

var tom = {
    name:'tom',
    age:18
}

json格式的數據：

{
    "name":'tom',
    "age":18
}

與json對象不一樣的是，json數據格式的屬性名稱須要用雙引號引發來，用單引號或者不用引號會致使讀取數據錯誤。

json的另一個數據格式是數組，和javascript中的數組字面量相同。

['tom',18,'programmer']

ajax與jsonp

ajax技術的目的是讓javascript發送http請求，與後臺通訊，獲取數據和信息。ajax技術的原理是實例化xmlhttp對象，使用此對象與後臺通訊。ajax通訊的過程不會影響後續javascript的執行，從而實現異步。

同步和異步
現實生活中，同步指的是同時作幾件事情，異步指的是作完一件過後再作另一件事，程序中的同步和異步是把現實生活中的概念對調，也就是程序中的異步指的是現實生活中的同步，程序中的同步指的是現實生活中的異步。

局部刷新和無刷新
ajax能夠實現局部刷新，也叫作無刷新，無刷新指的是整個頁面不刷新，只是局部刷新，ajax能夠本身發送http請求，不用經過瀏覽器的地址欄，因此頁面總體不會刷新，ajax獲取到後臺數據，更新頁面顯示數據的部分，就作到了頁面局部刷新。

同源策略
ajax請求的頁面或資源只能是同一個域下面的資源，不能是其餘域的資源，這是在設計ajax時基於安全的考慮。特徵報錯提示：

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

$.ajax使用方法
經常使用參數：
一、url 請求地址
二、type 請求方式，默認是'GET'，經常使用的還有'POST'
三、dataType 設置返回的數據格式，經常使用的是'json'格式，也能夠設置爲'html'
四、data 設置發送給服務器的數據
五、success 設置請求成功後的回調函數
六、error 設置請求失敗後的回調函數
七、async 設置是否異步，默認值是'true'，表示異步

之前的寫法：

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        ......
    },
    error:function(){
        alert('服務器超時，請重試！');
    }
});

新的寫法(推薦)：

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    ......
})
.fail(function() {
    alert('服務器超時，請重試！');
});

jsonp
ajax只能請求同一個域下的數據或資源，有時候須要跨域請求數據，就須要用到jsonp技術，jsonp能夠跨域請求數據，它的原理主要是利用了script標籤能夠跨域連接資源的特性。

jsonp的原理以下：

<script type="text/javascript">
    function aa(dat){
        alert(dat.name);
    }
</script>
<script type="text/javascript" src="....../js/data.js"></script>

頁面上定義一個函數，引用一個外部js文件，外部js文件的地址能夠是不一樣域的地址，外部js文件的內容以下：

aa({"name":"tom","age":18});

外部js文件調用頁面上定義的函數，經過參數把數據傳進去。

正則表達式

一、什麼是正則表達式：
能讓計算機讀懂的字符串匹配規則。

二、正則表達式的寫法：
var re=new RegExp('規則', '可選參數');
var re=/規則/參數;

三、規則中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）轉義字符匹配：
\d 匹配一個數字，即0-9
\D 匹配一個非數字，即除了0-9
\w 匹配一個單詞字符（字母、數字、下劃線）
\W 匹配任何非單詞字符。等價於[^A-Za-z0-9_]
\s 匹配一個空白符
\S 匹配一個非空白符
\b 匹配單詞邊界
\B 匹配非單詞邊界
. 匹配一個任意字符，除了換行符‘\n’和回車符‘\r’
\1 重複子項

四、量詞：對左邊的匹配字符定義個數
? 出現零次或一次（最多出現一次）
+ 出現一次或屢次（至少出現一次）
* 出現零次或屢次（任意次）
{n} 出現n次
{n,m} 出現n到m次
{n,} 至少出現n次

五、任意一個或者範圍
[abc123] : 匹配‘abc123’中的任意一個字符
[a-z0-9] : 匹配a到z或者0到9中的任意一個字符

六、限制開頭結尾
^ 以緊挨的元素開頭
$ 以緊挨的元素結尾

七、修飾參數：
g： global，全文搜索，默認搜索到第一個結果接中止
i： ingore case，忽略大小寫，默認大小寫敏感
m： multiple lines，多行搜索（更改^ 和$的含義，使它們分別在任意一行對待行首和行尾匹配，而不只僅在整個字符串的開頭和結尾匹配）

八、經常使用函數
一、test
用法：正則.test(字符串) 匹配成功，就返回真，不然就返回假

二、search
用法：字符串.search(正則) 匹配成功，返回位置，不然返回-1

三、match
用法：字符串.match(正則)；匹配成功，就返回匹配成功的數組，不然就返回null

四、replace
用法：字符串.replace(正則，新的字符串) 匹配成功的字符去替換新的字符

正則默認規則
匹配成功就結束，不會繼續匹配，區分大小寫

本地存儲

本地存儲分爲cookie，以及新增的localStorage和sessionStorage

一、cookie 存儲在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗帶寬，可設置訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，在設置的過時時間以前有效。

jquery 設置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 獲取cookie
$.cookie('mycookie');

二、localStorage 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞，在全部同源窗口中共享，數據一直有效，除非人爲刪除，可做爲長期數據。

//設置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//獲取：
localStorage.getItem("dat");
localStorage.dat

//刪除
localStorage.removeItem("dat");

三、sessionStorage 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞，在同源的當前窗口關閉前有效。

localStorage 和 sessionStorage 合稱爲Web Storage , Web Storage支持事件通知機制，能夠將數據更新的通知監聽者，Web Storage的api接口使用更方便。

iPhone的無痕瀏覽不支持Web Storage，只能用cookie。