Python自動化開發學習17

阿新 • • 發佈：2018-03-07

python jQuery

jQuery學習之前

jQuery 是 JavaScript 的一個類庫，類似 python 中的模塊。
jQuery在線手冊：http://jquery.cuishifeng.cn/
官網：http://jquery.com/

版本選擇

目前jQuery有三個大版本：1.x、 2.x、 3.x。教學推薦使用1.x的最新版本，這個版本兼容IE低版本。
去官方頁面：http://code.jquery.com/ ，可以獲取到最新的版本，我這會用的是 jquery-1.12.4 。

添加jQuery

前面說到，jQuery是一個類庫，那麽在使用之前，就需要將庫添加到網頁中。用下面的語句把你的jQuery文件添加到網頁中：

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

這裏也可以不使用本地的文件，把src的值替換成互聯網上的地址，就是各大網站提供的CDN庫，比如下面這個是新浪的：

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>

使用CDN就不會從你的網站下載這個庫文件了，另外，許多用戶在訪問其他站點時，已經訪問過這些大網站，加載過 jQuery。結果就是，當他們訪問您的站點時，會從緩存中加載 jQuery，這樣可以減少加載時間。同時，大多數 CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也可以提高加載速度。

如果覺得用別人的不放心，擔心CDN失效，可以用下面的代碼，先嘗試加載CDN，如果失敗再加載本站的庫文件：

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>window.jQuery || document.write("<script src=‘jquery-1.12.4.min.js‘><\/script>")</script>

調用jQuery

通過 ‘$‘ 提示符，或者關鍵字 jQuery 都可以調用 jQuery。一般都用的是 $ 吧。

驗證，下面的代碼用到了jQuery語句，只有成功添加了jQuery才有顯示：

<body>
<p>驗證 jQuery ...</p>
<!--確保在這之前，頁面中有添加jQuery的語句-->
<script>
    $("body").append("jQuery添加成功")
    // jQuery("body").append("jQuery添加成功")
</script>
</body>

jQuery和DOM的關系及互相轉換

在進行操作之前，都是要先獲取到對象，然後操作這個對象。這裏先來看一下使用jQuery獲取到的對象和通過DOM獲取到的對象有什麽關系。先打開一個如下的頁面，加載了jQuery，並且有一個 id=‘i1‘ 的標簽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
</head>
<body>
<p id="i1">獲取對象</p>
</body>
</html>

打開頁面後，進入控制臺進行操作，獲取並查看標簽的對象：

> $(‘#i1‘)  // jQuery通過id獲取對象
< [object Object]: {0: Object, context: Object, length: 1, selector: "#i1"}
> document.getElementById(‘i1‘)
< <p id="i1">獲取對象</p>
> $(‘#i1‘)[0]  // jQuery對象下標0的內容和DOM對象的一樣
< <p id="i1">獲取對象</p>
> $(document.getElementById(‘i1‘))  // DOM對象也可以轉換成jQuery對象
< [object Object]: {0: Object, context: Object, length: 1}

總結，jQuery的下標0 和 DOM 獲取到的對象是一樣的。jQuery對象包含完整的DOM對象。於是我們也知道的兩種對象間互相轉換的方式：

jQuery對象[0] ：轉換成DOM對象
$(DOM對象) ：轉換成jQuery對象

這樣，如果已經有了一個DOM對象，可以轉換成jQuery對象後，繼續使用jQuery。反之，已經有了一個jQuery對象後，如果只想用原生的語句，也可以轉換成DOM對象後，繼續使用原生語句。

jQuery-選擇器

選擇器的作用就是通過它可以找到某個或者某些標簽。

基本選擇器

基本的選擇器的語法和css裏的一樣，只要加上引號變成字符串後，放到 $() 的括號中就行了。
#id ：通過id匹配
element ：通過標簽名匹配
.class ：通過類名匹配
* ：匹配所有元素
selector1,selector2,selectorN ：使用多個選擇器進行匹配，用逗號隔開，合並匹配到的結果，或的關系。

層級選擇器

ancestor descendant ：選擇器之間用空格分隔，找到前一個選擇器下的所有的符合後一個選擇器的元素。包括子元素和下面更深層的元素
parent > child ：匹配到父元素後，再匹配它下一級的子元素。這裏只匹配一層，這是和上面的區別，上面會匹配所有層級。
prev + next ：匹配到前一個選擇器之後，在同層以及更深層匹配後一個選擇器。
prev ~ siblings ：匹配到前一個選擇器之後，在他的同層級匹配後一個選擇器。匹配兄弟標簽。

基本篩選器

通過基本選擇器和層級選擇器，我們就獲得了一個也可能是多個符合條件的標簽。接下來還可以繼續進行篩選：
:first ：獲取第一個元素
:last ：獲取最後一個元素
:eq(index) ：匹配一個給定索引值的元素
上面的是常用的，下面的幾個是用的不多的，還是知道一下：
:even 和 :odd ：匹配所有索引值為偶數/奇數的元素，從 0 開始計數
:gt(index) 和 :lt(index) ：匹配所有大於/小於給定索引值的元素
:header ：匹配所有標題元素，就是 h1 到 h6 標簽
另外還有更多篩選器，是的不多，就不一一列出了。

內容和可見性（略）

屬性選擇器

這裏提供的方法就是通過屬性來查找元素：
[attribute] ：匹配含有這個屬性的元素，只要屬性存在，具體值是多少不關註。
更多匹配屬性和值的查找方法：
[attribute=value] ：匹配給定的屬性是某個特定值的元素
[attribute!=value] ：匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。等價於 :not([attribute=value]) ，要匹配含有元素但是值不等的情況，使用 [attribute]:not([attribute=value]) 。
[attribute^=value] ：匹配給定的屬性是以某些值開始的元素
[attribute$=value] ：匹配給定的屬性是以某些值結尾的元素
[attribute*=value] ：匹配給定的屬性是以包含某些值的元素
[selector1][selector2][selectorN] ：復合屬性選擇器，需要同時滿足多個條件時使用。與的關系

子元素（略）

表單和表單對象（可忽略）

通過基本的選擇器也可以查找到對象了，不過jQuery針對表單有一些更簡化的語法可以使用。如果遇到表單操作比較多的話，到時候再看看就會了。
表單對象裏有兩個屬性需要了解一下：
:enabled ：匹配所有可用元素，就是可編輯的元素，比如 <input type="text">
:disabled ：匹配所有不可用元素，和上面相反
這裏只是和表單相關，並不是只在表單中查找。另外，input標簽中，加上disabled之後，也會變成不可編輯：

<body>
<input type="text" value="我可以編輯">
<input type="text" value="我不可以編輯" disabled>
</body>

示例：全選、取消、反選

之前學習js的時候，通過js方法實現了過相同的功能。這次用jQuery再來做一遍：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="全選" id="btn_chooseAll">
    <input type="button" value="取消" id="btn_cancelAll">
    <input type="button" value="反選" id="btn_reverse">
</div>
<div>
    <table border="1">
        <thead>
        <tr>
            <th>choice</th>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Adam</td>
            <td>23</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Bob</td>
            <td>24</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Clark</td>
            <td>25</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(‘#btn_chooseAll‘)[0].onclick = function () {
        // :checkbox 是匹配所有復選框
        // 並且這裏jQuery也不用我們循環了
        // prop()方法，可以獲取元素的屬性，第二個參數是給屬性賦值
        $(‘#tb :checkbox‘).prop(‘checked‘, true)
    };
    $(‘#btn_cancelAll‘)[0].onclick = function () {
        $(‘#tb :checkbox‘).prop(‘checked‘, false)
    };
    $(‘#btn_reverse‘)[0].onclick = function () {
        // each()是jQuery遍歷的方法
        $(‘#tb :checkbox‘).each(function () {
            // 這裏把this轉換成jQuery對象
            $(this).prop(‘checked‘, !this.checked)
        })
    };
</script>
</body>
</html>

先提前學習了解一個jQuery屬性的知識：
prop()屬性，這個是專門用來對 checked 和 seleced 做操作的（相對於另一個attr()屬性）。基本的用法是，獲取值（沒設置第二個參數），或者設置值（給第二個參數傳值）。
$(‘#tb :checkbox‘).prop(‘checked‘, true) 這句，因為jQuery的方法內置了循環，所以我們直接進行操作，其實是一個批量操作。
$(this).prop(‘checked‘, !this.checked) 這句，前一個this用到了jQuery的prop，所以把它轉成了jQuery對象。後一個this，直接用DOM的方法取值，所以直接用this，即DOM對象。

jQuery-篩選

也叫遍歷方法或遍歷函數。
這裏的篩選和上面的選擇器中的基本篩選器是不同的。所有的選擇器的代碼都是以字符串的形式寫在同一個引號裏的，通過選擇器，我們可以獲取到一個（或一組）jQuery對象。這裏是對已有的jQuery對象執行的方法。
在jQuery對象的基礎上再對元素進行篩選（查找、串聯），就需要這裏的篩選方法。篩選方法也有參數（可選），這裏的參數還是上面學習的選擇器。
常用的方法如下：

.next() ：獲得匹配元素集合中每個元素緊鄰的同輩元素。上一個
- .nextAll() ：獲得匹配元素集合中每個元素之後的所有同輩元素
- .nextUntil() ：獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素為止。
.prev() ：獲得匹配元素集合中每個元素緊鄰的前一個同輩元素。下一個
- .prevAll() ：獲得匹配元素集合中每個元素之前的所有同輩元素
- .prevUntil() ：獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。
.parent() ：獲得當前匹配元素集合中每個元素的父元素。父親
- .parents() ：獲得當前匹配元素集合中每個元素的祖先元素
- .parentsUntil() ：獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。
.children() ：獲得匹配元素集合中每個元素的所有子元素。孩子
.siblings() ：獲得匹配元素集合中所有元素的同輩元素。兄弟
.find() ：獲得當前匹配元素集合中每個元素的後代。子子孫孫

其他比較有用的方法：

.eq() ：將匹配元素集合縮減為位於指定索引的新元素。通過索引選擇，可以是負數倒著找。
.first() ：將匹配元素集合縮減為集合中的第一個元素。第一個
.last() ：將匹配元素集合縮減為集合中的最後一個元素。最後一個
hasClass(class) ：檢查當前的元素是否含有某個特定的類。返回布爾值

示例：左側管理菜單

依然是之前的js，現在通過jQuery重做：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: blue;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
    <div class="item">
        <div class="header">菜單1</div>
        <div class="content hide">
            <div>內容1-1</div>
            <div>內容1-2</div>
            <div>內容1-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header">菜單2</div>
        <div class="content hide">
            <div>內容2-1</div>
            <div>內容2-2</div>
            <div>內容2-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header">菜單3</div>
        <div class="content hide">
            <div>內容3-1</div>
            <div>內容3-2</div>
            <div>內容3-3</div>
        </div>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    // 綁定事件，函數作為事件方法的參數，這裏用一個匿名函數
    $(‘.header‘).mouseover(function () {
        // 當前標簽父標簽的所有兄弟標簽的子標簽中查找‘.content‘的標簽
        $(this).parent().siblings().children(‘.content‘).addClass(‘hide‘);
        // 當前標簽的下一個標簽，移除‘hide‘
        $(this).next().removeClass(‘hide‘)
        // 上面兩行可以合並為下面的一行代碼，這叫鏈式編程
        // $(this).next().removeClass(‘hide‘).parent().siblings().children(‘.content‘).addClass(‘hide‘);
    })
</script>
</body>

鏈式編程：上面的兩行代碼可以合並為下面的一行代碼 $(this).next().removeClass(‘hide‘).parent().siblings().children(‘.content‘).addClass(‘hide‘) 。原理是 $(this).next().removeClass(‘hide‘) 不只是操作了class屬性，它也是也返回值的（可以修改代碼把它賦值給一個變量查看變量的值）。這個返回值就是操作的jQuery對象。所以後面是在這個對象的基礎上繼續進行操作。這個叫做鏈式編程，jQuery支持鏈式編程。

示例：模態對話框

是否要加入編輯的部分，編輯要用到下一節的內容操作

jQuery-屬性

內容操作

下面的三個方法用來操作HTML代碼、文本或值。沒有參數是獲取值，傳入參數則是設置值：

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值

樣式操作

其實是操作class，一般是通過修改class來改變樣式的，有下面3個方法：

addClass() ：向匹配的元素添加指定的類名。
hasClass() ：檢查匹配的元素是否擁有指定的類。
toggleClass() ：從匹配的元素中添加或刪除一個類。沒有就加上，有則刪除

下面是一個簡單的開燈/關燈效果的例子，演示一下 toggleClass() 方法：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: gray;
        }
        .c1{
            height: 48px;
            width: 120px;
            line-height: 48px;
            text-align: center;
            background-color: white;
        }
        .dark{
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
<div class="c1">開燈/關燈</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(‘.c1‘).click(function () {
        $(this).toggleClass(‘dark‘)
    })
</script>
</body>

屬性操作

傳一個參數是獲取屬性值，傳兩個參數是設置屬性值：

attr() ：設置或返回匹配元素的屬性和值。自定義的屬性用這個方法
removeAttr() ：從所有匹配的元素中移除指定的屬性。
prop() ：設置或返回被選元素的屬性和值。單選框和復選框用這個方法，
removeProp() ：移除由 prop() 方法設置的屬性。

prop() 和 attr() 之間的不同：以復選框為例，attr()返回值是 ‘checked’ （而且1.x和2.x版本都有問題，例子中的值不會改變），而prop()返回值是 true 或 false。測試如下：

<body>
<p>
    <input id="btn1" type="button" value="查看attr()和prop()的值">
</p>
<p>
    <input id="check1" type="checkbox" checked="checked">
    <label for="check1">勾選這個復選框</label>
</body>
</p>
<p>
    attr(‘checked‘)：<span id="attr1"></span>
    <br>
    prop(‘checked‘):<span id="prop1"></span>
</p>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(‘#btn1‘).click(function () {
        $(‘#attr1‘).text($(‘#check1‘).attr(‘checked‘));
        $(‘#prop1‘).text($(‘#check1‘).prop(‘checked‘));
    })
</script>

示例：TAB分頁菜單

直接上代碼：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .w{
            width: 700px;
            margin: 0 auto;
        }
        .menu{
            height: 38px;
            background-color: gray;
        }
        .menu .menu-item{
            float: left;
            line-height: 38px;
            background-color: blue;
            color: white;
            padding: 0 10px;
            cursor: pointer;
        }
        .menu .menu-item:hover{
            background-color: orange;
            color: black;
        }
        .active{
            text-decoration: underline;
        }
        .content{
            min-height: 100px;
            background-color: darkseagreen;
            color: black;
        }
    </style>
</head>
<body>
<div class="w">
    <div class="menu">
        <div class="menu-item active" target="menu1">菜單一</div>
        <div class="menu-item" target="menu2">菜單二</div>
        <div class="menu-item" target="menu3">菜單三</div>
    </div>
    <div class="content">
        <div target="menu1">內容一</div>
        <div class="hide" target="menu2">內容二</div>
        <div class="hide" target="menu3">內容三</div>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(‘.menu-item‘).click(function () {
        // 處理菜單
        $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
        // 處理內容，這裏的參數需要字符串，得拼接一下
        $(‘.content‘).children("[target=‘" + $(this).attr(‘target‘) + "‘]").removeClass(‘hide‘)
            .siblings().addClass(‘hide‘);
    })
</script>
</body>

獲取索引-index()

.index() ：獲得第一個匹配元素相對於其同胞元素的索引位置。
寫完整是這樣的 $(selector).index(element) 。前面的jQuery對象如果是多個元素，則默認獲取第一個匹配元素（即第一個元素）的索引。還可以通過為index傳入選擇器作為參數匹配到符合條件的第一個元素。
上面的例子也可以通過用index方法更簡單的來實現。不需要設置自定義屬性（例子中是target）。首先獲取到點擊的菜單（即this）的index屬性，這也是要顯示的內容在content中的索引位置。只需要替換掉上面例子中的最後一句代碼，完成的jQuery代碼如下：

<script>
    $(‘.menu-item‘).click(function () {
        // 處理菜單
        $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
        // 處理內容
        $(‘.content‘).children().eq($(this).index()).removeClass(‘hide‘).siblings().addClass(‘hide‘);
    })
</script>

jQuery-文檔處理

插入的方法：

append() ：在內部的末尾追加內容
prepend() ：在內部的開頭插入內容
before() ：在元素的後面插入內容，外部
after() ：在元素的前面插入內部，外部

刪除的方法：

remove() ：包括標簽一起刪除
‘empty()‘ ：只清空內容（中間的標簽會刪除），保留最外層的標簽

復制的方法：

clone() ：克隆一個副本

jQuery-CSS

這裏是通過直接修改元素的style屬性，來實現樣式的修改：
css("propertyname"); ：只傳入屬性，返回css屬性的值
css("propertyname","value"); ：依次傳入樣式的屬性和值，設置css屬性。
css({"propertyname":"value","propertyname":"value",...}); ：傳入一個字典作為參數，一次設置多個css屬性。

示例：點贊效果

點贊之後，會在邊上出現 ‘+1’ 的提示。並且提示的文字會逐漸變大、變淡、然後移動。變大通過修改字體（font-size）屬性。變淡通過修改透明度（opacity）。移動是在父標簽設置 position: relative; ，然後自己設置 position: absolute; ，然後修改 top 和 left 屬性實現上面的效果。這裏要有一個定時器，定時修改上面的屬性。最後記得要清除定時器和整個新加的標簽。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            border: 1px solid black;
            line-height: 200px;
        }
        .item{
            position: relative;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">
        <span>贊</span>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(‘.item‘).click(function () {
        // 新建標簽，設置提示的內容
        var tag = document.createElement(‘span‘);
        $(tag).text(‘+1‘);  // .appendTo(this) 最後加上這些代碼，效果和下一行一樣
        $(tag).css(‘color‘, ‘green‘);
        // 需要變化的屬性值，這裏定義到變量裏，方便後面修改
        var fontSize=15, top=0, left=20, opacity=1;
        // 給標簽設置初始的css屬性
        $(tag).css(‘position‘, ‘absolute‘).css(‘top‘, top+‘px‘).css(‘left‘, left+‘px‘);
        $(tag).css(‘fontSize‘, fontSize+‘px‘).css(‘opacity‘, opacity);
        // 將標簽添加到頁面中
        $(this).append(tag);
        // 定時器，定時修改css屬性。這裏要賦值保存，方便之後清除這個定時器
        var obj = setInterval(function () {
            fontSize = fontSize + 5;
            top = top - 5;
            left = left +5;
            opacity = opacity - 0.1;
            $(tag).css(‘top‘, top+‘px‘).css(‘left‘, left+‘px‘);
            $(tag).css(‘fontSize‘, fontSize+‘px‘).css(‘opacity‘, opacity);
            // 判斷條件理論上可以設置為等於0，但是浮點運算後的結果可能會有一點點的偏差，不是正好等於0
            // 用小於0 或者 小於等於0 的邏輯比較保險
            if (opacity < 0){
                // 清除掉定時器
                clearInterval(obj);
                // 標簽也要清除掉
                $(tab).remove();
            }
        }, 100);
    })
</script>
</body>
</html>

位置和尺寸

滾輪的操作：

$(selector).scrollTop(offset) ：返回或設置匹配元素的滾動條的垂直位置。
$(selector).scrollLeft(offset) ：返回或設置匹配元素的滾動條的水平位置。

$(window) 這個對象就是操作瀏覽器窗口的滾輪。
offset 缺省時是獲取位置，傳入參數時是設置位置，要返回頂部，就設為0。

定位的操作：

offset() ：返回第一個匹配元素相對於文檔的位置。
position() ：返回第一個匹配元素相對於父元素的位置。

返回 top 和 left 兩個值。可以再用 .top .left 獲取到某個具體的值。

尺寸的操作：

height() ：純高度，就是css的height屬性，可以傳入參數設置高度。
width() ：寬度，具體同上
innerHeight() ：算上內邊距的高度
innerWidth() ：寬度，具體同上
outerHeight() ：算上內邊距和邊框的高度
outerWidth() ：寬度，具體同上
outerHeight(true) ：算上內邊距、邊框和外邊距的高度
outerWidth(true) ：寬度，具體同上

jQuery-事件綁定

常用的幾種事件綁定的方式，還可以解除綁定：

$().click() ：觸發事件
$().click(function) ：綁定事件
$().bind(‘click‘, function) ：另外一種綁定事件的方式。和上面是一類
$().unbind(‘click’) ：解除事件的綁定
$().delegate(childSelector, ‘click‘, function) ：為前面父元素下的子元素綁定事件。這種綁定方式對綁定後才創建的新的子元素一樣有效。這個叫委托，事件是委托在父元素上的。
$().undelegate(‘click‘) ：解除事件的綁定
$().on(‘click‘, function) ：這個是最原生的綁定方式，上面的綁定方式在內部調用的都是這個on。所以這個方法其實還有更多參數選擇。
on(events,[selector],[data],fn) ：上面的兩種綁定方法（bind 和 delegate）在高版本中都被取締了，用on都可以替代。
$().off(‘click‘) ：解除綁定

阻止事件的發生

先來看一下 <a> 標簽，點擊後頁面會跳轉。這裏可以認為該標簽默認就綁定了一個事件。如果給a標簽再綁定上一個事件是什麽情況呢？實測一下：

<body>
<a onclick="jump(this)" href="http://blog.51cto.com/steed">走你</a>
<script>
    function jump(obj) {
        alert(obj.href);
    }
</script>
</body>

點擊後，會先觸發我們的事件，然後再執行頁面跳轉。這裏如果給事件一個返回值，就會有不同的效果。如果返回 false 時，將中斷操作。要接收到函數的返回值，標簽中得寫成這樣 onclick="return jump(this)" 。代碼如下：

<body>
<a onclick="return jump(this)" href="http://blog.51cto.com/steed">走你1</a>
<a id="i2" href="http://blog.51cto.com/steed">走你2</a>
<script>
    function jump(obj) {
        alert(obj.href);
        return false
    }
    document.getElementById(‘i2‘).onclick = function () {
        alert(this.href);
        return false
    }
</script>
</body>

上面的事件都會返回一個 false ，會中斷操作，不會進行之後的頁面跳轉。如果返回 true ，或者不設置返回值，則會繼續操作。上面第二個標簽中的事件綁定是在js出完成的，不用做別的額外操作，只要在綁定的函數的結尾多寫一句 return 就好了。
阻止事件發生的意義：做表單驗證的時候，如果驗證通過，則返回true，頁面跳轉。如果驗證失敗，則返回false，阻止頁面繼續跳轉：

<body>
<form action="https://www.baidu.com/s">
    <input type="text" name="wd" placeholder="請輸入要搜索的內容" />
    <input type="submit" value="搜索" />
</form>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(‘:submit‘).click(function () {
        if ($(this).prev().val().length > 0){
            return true
        } else {
            alert("請輸入內容");
            return false
        }
    })
</script>
</body>

示例：表單驗證

示例來做一個更加復雜的表單驗證。這次有3個input框同時需要驗證，這就需要再寫個循環。如此我們的事件裏就嵌套了兩層函數，通過return false阻止事件會有問題。這裏只有3個輸入框全部填入內容才能提交表單，否則會顯示錯誤信息：

<body>
<form id="f1" action="http://blog.51cto.com/steed">
    <p>
        <label for="username">用戶名：</label>
        <input id="username" name="username" type="text">
    </p>
    <p>
        <label for="password">?密碼：</label>
        <input id="password" name="password" type="password">
    </p>
    <p>
        <label for="verify">驗證碼：</label>
        <input id="verify" name="verify" type="text">
    </p>
    <p><input type="submit" value="提交"></p>
</form>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(‘:submit‘).click(function () {
        var flag = true;  // 這個變量用於存儲下面的函數執行的錯誤結果
        $(‘.error‘).remove();  // 先刪除之前一次操作添加的標簽
        $(‘#f1‘).find("input[type=‘text‘], input[type=‘password‘]").each(function () {
            if($(this).val().length <= 0){
                flag = false;  // 如果驗證出錯，就設置為false
                var tag = document.createElement(‘span‘);
                tag.innerText = ‘必填‘;
                tag.classList.add(‘error‘);  // 統一加個class，方便批量刪除標簽
                $(tag).css({‘color‘: ‘red‘, ‘fontSize‘: 12});  // 順便用jQuery的方法設置一下css
                $(this).after(tag);
                // 這裏return false會阻止each繼續遍歷，相當於break。
                // return false;  // 去掉這句的註釋是另外一個效果，只提示第一個錯誤
            }
        });
        // 這裏return false才是驗證失敗。
        // 但是驗證是在內層的函數裏完成的，所以需要一個變量把結果傳遞出來
        return flag;
    })
</script>
</body>

這裏click事件函數內部，還要遍歷一遍所有的輸入框。內部的遍歷函數可以返回false，上面註釋掉了。
如果是內部的遍歷函數返回了false，則中斷內層的遍歷，阻止遍歷之後的輸入框。如果去掉註釋，效果是只會提示第一個錯誤信息。
要想阻止提交表單，需要在外層的click事件的函數最後返回一個false。但是這裏的結果需要內層的函數來驗證。基於作用域的原理，先在外層聲明一個變量（flag），然後內層的驗證結果驗證到錯誤就把變量置為false。這樣最後就可以通過把flag作為返回值，返回整個驗證過程是否有錯誤。

jQuery-頁面載入事件（ready）

就叫ready()方法，或ready()事件，一般用下面的簡寫。
$(function) ：寫在這個方法裏的函數，當頁面框架加載完成後就立即執行。在DOM的結構加載完後就觸發，而不是還要等css，js，圖片等都加載完成後再觸發。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程序的響應速度。

<script>
    $(function(){
        // 你的代碼
        })
</script?

理解：
一、如果把事件綁定寫在ready方法裏，那麽一定是等待框架加載完畢才執行的綁定。沒有ready方法的情況，代碼是從上到下順序執行的。如果你的綁定方法寫在標簽生成之前，此時是獲取不到綁定方法後面的DOM中的標簽的。不過一般都建議把js寫在最後，也不會有這個問題。
二、等待被調用的方法，可以不用寫在ready事件裏。把所有其他的 jQuery 事件和函數置於ready事件中是非常好的做法。是否寫在ready()事件裏，影響的只是執行的時機。
三、不必所有的代碼都寫在一個ready事件中。可以在同一個頁面中無限次地使用ready事件。

jQuery-擴展

擴展，就是定義自己的jQuery方法。這裏有兩種擴展的方法：
$.extend({key: function}) ：調用方法，$.key()。
$.fn.extend({key: function}) ：調用方法：$().key()。前面的括號裏可以寫上選擇器。

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $.extend({
        ‘sayHi‘: function () {
            return ‘Hi jQuery‘
        }
    });
    $.fn.extend({
        "hello": function () {
            return ‘Hello World!‘
        }
    });
    alert($.sayHi());
    alert($(‘body‘).hello());
</script>

擴展方法的命名空間

一般的做法是把擴展的方法寫在一個js文件中，然後在使用前引入。就像我們引入jQuery庫一樣，擴展的方法就是我們自己的庫。
所有引入的方法和我們自己在頁面用定義的方法是共享命名空間的。函數名（或者叫方法名）肯定是不能重復的。但是變量名可以通過自執行函數（閉包），每個擴展方法都是自己獨立的命名空間。
先寫一個自己的擴展庫，保存為js文件：

// 文件名：myJQ.js
(function () {
    // 閉包解決的是變量命名空間的問題，name變量只在這個閉包中有效
    var name = ‘jQuery‘;

    $.extend({
        ‘sayHi‘: function () {
            return ‘Hi ‘ + name
        }
    });

    $.fn.extend({
        "hello": function () {
            return ‘Hello ‘ + name
        }
    });
})();

上面的自執行函數，也是可以傳參數的。這裏沒什麽參數要傳，不過一般會把jQuery傳進去：

(function ($) {
    // 這裏面是你的擴展方法，在這裏面，可以放心的使用$符號
})(jQuery);

這樣即使外面$符號用作別的定義了，在擴展內部，$就是jQuery。
然後在頁面中就像調用其它jQuery方法一樣調用自定義的擴展函數：

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script src="myJQ.js"></script>
<script>
    alert($.sayHi());
    alert($().hello());
</script>

js的擴展

順便記一下js的擴展。簡單的把函數寫到一個單獨的js文件中也是可以的。如果考慮到變量命名空間的問題，還是加個閉包：

(function () {
    var name = ‘Adam‘;
    sayHi = function () {
        return ‘Hi ‘ + name
    };
})();

因為函數名我們需要在全局可以調用的，所以上例中的函數名是全局變量。但是如果有太多的方法，免不了和全局的名稱會有沖突。這就需要把多個方法寫到一個類中去，做成一個類庫：

// 先定義好全局的類名
if (typeof myFunc !== "object"){
    myFunc = {};
}

(function () {
    var name = ‘Bob‘;
    // 往類裏添加方法
    myFunc.hello = function () {
        return ‘Hello ‘ + name;
    };
    myFunc.welcom = function () {
        return name + ‘ welcom !‘
    }
})();

作業

後臺管理平臺，編輯表格：

非編輯模式：可對每行進行選擇；反選；取消選擇
編輯模式：進入編輯模式時如果行被選中，則被選中的那行變為可編輯狀態，未選中的不改變
- 退出編輯模式時，所有的行進入非編輯狀態
- 處於編輯模式時，行被選中則進入編輯狀態，取消選擇則進入非編輯狀態

老師演示的簡單表格，狀態用的是下拉框：
技術分享圖片

Python自動化開發學習17

python jQuery jQuery學習之前 jQuery 是 JavaScript 的一個類庫，類似 python 中的模塊。jQuery在線手冊：http://jquery.cuishifeng.cn/官網：http://jquery.com/ 版本選擇目前jQuery有三個大版本：1.x、

Python自動化開發學習17

版本選擇

添加jQuery

調用jQuery

jQuery和DOM的關系及互相轉換

jQuery-選擇器

基本選擇器

層級選擇器

基本篩選器

內容和可見性（略）

屬性選擇器

子元素（略）

表單和表單對象（可忽略）

示例：全選、取消、反選

jQuery-篩選

示例：左側管理菜單

示例：模態對話框

jQuery-屬性

內容操作

樣式操作

屬性操作

示例：TAB分頁菜單

獲取索引-index()

jQuery-文檔處理

jQuery-CSS

示例：點贊效果

位置和尺寸

jQuery-事件綁定

阻止事件的發生

示例：表單驗證

jQuery-頁面載入事件（ready）

jQuery-擴展

擴展方法的命名空間

js的擴展

作業

相關推薦