jQuery對錶單、表格的操做及更多的應用

jQuery對錶單、表格的操做及更多的應用

1 表單應用

一個表單有3個基本組成部分。

(1) 表單標籤：包含處理表單數據所用的服務器端應用程序URL以及數據提交到服務器的方法

(2) 表單域：包含文本框、密碼框、隱藏框、多行文本框、複選框、單選框、下拉選擇框和

文件上傳框等

(3) 表單按鈕：包括提交按鈕、復位按鈕和通常按鈕，用於將數據傳送到服務器上或者取消

傳送，還能夠用來控制其餘定義處理腳本的處理工做。

1 單行文本框應用

jQuery代碼以下：6.1.1.html

2 多行文本框應用

1. 高度變化

  jQuery代碼以下：6.1.2.1.html

2. 滾動條高度變化

  在多行文本中，還有另一個應用，就是經過控制多行文本框的滾動條的變化，使

  文本框裏的內容滾動。

  jQuery代碼以下：6.1.2.2.html

3 複選框應用

對複選框最基本的應用，就是對複選框進行全選、反選和全不選等操做。

jQuery代碼以下：6.1.3.html

4 下拉框的應用

jQuery代碼以下：6.1.4.html

5 表單驗證

jQuery代碼以下：6.1.5.html

2 表格應用

1 表格變色

1. 普通的各行變色

  jQuery代碼以下：6.2.1.1.html

2. 單選框控制表格行高亮

  jQuery代碼以下：6.2.1.2.html

  代碼中的$('table :radio:checked').parent().parent().addClass('selected');

  是經過parent()方法逐步向父節點獲取相應的元素的，也能夠使用parents()方法

  直接獲取。

  $('table :radio:checked').parents('tr').addClass('selected');

  此外，若是經過has選擇器也能夠進一步簡化，表示含有選中的單選框的<tr>行將

  被高亮顯示：$('tbody>tr:has(:checked)').addClass('selected');

3. 複選框控制表格行高亮

  jQuery代碼以下：6.2.1.3.html

  在代碼$(this)[hasSelected ? "removeClass" : "addClass"]('selected')中：

  [hasSelected ? "removeClass" : "addClass"]這是一個三元運算符，結果爲：

  "removeClass"或者是"addClass"。所以

  $(this)[hasSelected ? "removeClass" : "addClass"]('selected')其實表明這

  兩種狀況

  $(this)["removeClass"]('selected');

  或者是$(this)["addClass"]('selected');

  它等價於：

  $(this).removeClass('selected');

  或者是$(this).addClass('selected');

2 表格展開關閉

jQuery代碼以下：6.2.2.html

3 表格內容篩選

jQuery代碼以下：6.2.3.html

3 其餘應用

1 網頁字體大小

jQuery代碼以下：6.3.1.html

2 網頁選項卡

jQuery代碼以下：6.3.2.html

3 網頁換膚

jQuery代碼以下：6.3.2.html