分類  >  Web前端 >

jquery範例教學一

tags:    時間:2013-12-10 08:27:51
jquery實例教學一

jquery實例教學一

今天我們繼續探討jquery的相關內容。

首先,我們看看基本過濾選擇器

                       

一、選中單行或雙行

能不能選中指定的某一個呢?

 

二、篩選大於,小於的

 

三、注意選擇的順序呦

:not(選擇器) 選取不滿足「選擇器」條件的元素,$("input:not(.myClass)")選取樣式名不是myClass的<input>

插入代碼位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>  6     <script type="text/javascript">  7         $(function () {  8             $('#btn').click(function () {  9                 //設置除了應用了test類樣式以外的其他的div都設置為背景色黃色 10                $('div:not(.test)').css('backgroundColor','yellow'); 11             }); 12         }); 13     </script> 14        <style type="text/css"> 15         div 16         { 17             border: 1px solid blue; 18             width: 300px; 19             height: 50px; 20             margin-bottom: 5px; 21         } 22         .test 23         { 24             color:red; 25             font-size:40px; 26             font-family:華文行楷; 27         } 28     </style> 29 </head> 30 <body> 31 <input type="button" name="name" value="button" id="btn" /> 32     <div>a 33     </div> 34     <div>a 35     </div> 36     <div class="test">a 37     </div> 38     <div>a 39     </div> 40     <div class="test">a 41     </div> 42     <div>a 43     </div> 44     <div>a 45     </div> 46     <div>a 47     </div> 48     <div class="test">a 49     </div> 50     <div>a 51     </div> 52 </body> 53 </html>

 

四、header

有了這些知識以後,下面我們做幾個練習。

題目:第一行是表頭,所以顯示大字體(fontSize=30px),最後一行是匯總,所以顯示紅色字體。正文的前三行是前三名,所以顯示傻大的字體(28)表格的偶數行是紅色色背景。

用Dom實現;用jQuery實現。對比差異!

注意:gt(0):lt(3),表示先篩選出所有大於0的,然後在此基礎上再篩選出所有小於3的,即:在所有大於0的基礎上再選擇0,1,2。

習題代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>  6     <script type="text/javascript">  7         $(function () {  8             $('#btn').click(function () {  9                 //設置表格的第一行為表頭,即顯示字體變為30px 10                 $('#table1 tr:first').css('font-size', '30px'); 11                 $('#table1 tr:last').css('color', 'red'); 12                 //注意在寫代碼的時候,寫點調點。 13                 $('#table1 tr:gt(0):lt(3)').css('font-size', '28px'); 14                 $('#table1 tr:odd').css('backgroundColor','red'); 15             }); 16         }); 17     </script> 18 </head> 19 <body> 20     <input type="button" name="name" value="設置表格樣式" id="btn"/> 21   <table id="table1" border="1" > 22         <tr> 23             <td> 24                 姓名 25             </td> 26             <td> 27                 成績 28             </td> 29         </tr> 30         <tr> 31             <td> 32                 tom 33             </td> 34             <td> 35                 100 36             </td> 37         </tr> 38         <tr> 39             <td> 40                 jim 41             </td> 42             <td> 43                 99 44             </td> 45         </tr> 46         <tr> 47             <td> 48                 john 49             </td> 50             <td> 51                 98 52             </td> 53         </tr> 54         <tr> 55             <td> 56                 jason 57             </td> 58             <td> 59                 97 60             </td> 61         </tr> 62         <tr> 63             <td> 64                 aaa 65             </td> 66             <td> 67                 97 68             </td> 69         </tr> 70         <tr> 71             <td> 72                 平均分 73             </td> 74             <td> 75                 98 76             </td> 77         </tr> 78     </table> 79 </body> 80 </html>

 

習題演示

案例2:點擊按鈕,表格隔行變色。奇紅,偶黃。

案例2代碼插入位置:

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   2 <html xmlns="http://www.w3.org/1999/xhtml">   3 <head>   4     <title></title>   5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>   6     <script type="text/javascript">   7         $(function () {   8             $('#btn').click(function () {   9                 $('#t1 tr:even').css('backgroundColor', 'red');  10                 $('#t1 tr:odd').css('backgroundColor','yellow');  11             });  12         });  13     </script>  14 </head>  15 <body>  16     <input type="button" name="name" value="點我表格隔行變色" id="btn"/>  17     <table id="t1" border="1" cellpadding="1" cellspacing="1">  18         <tr>  19             <td>川川是狗狗  20             </td>  21             <td>川川不是狗  22             </td>  23             <td>那是啥啊?  24             </td>  25              <td>川川是狗狗  26             </td>  27             <td>川川不是狗  28             </td>  29             <td>那是啥啊?  30             </td>  31         </tr>  32            <tr>  33             <td>川川是狗狗  34             </td>  35             <td>川川不是狗  36             </td>  37             <td>那是啥啊?  38             </td>  39              <td>川川是狗狗  40             </td>  41             <td>川川不是狗  42             </td>  43             <td>那是啥啊?  44             </td>  45         </tr>  46            <tr>  47             <td>川川是狗狗  48             </td>  49             <td>川川不是狗  50             </td>  51             <td>那是啥啊?  52             </td>  53              <td>川川是狗狗  54             </td>  55             <td>川川不是狗  56             </td>  57             <td>那是啥啊?  58             </td>  59         </tr>  60            <tr>  61             <td>川川是狗狗  62             </td>  63             <td>川川不是狗  64             </td>  65             <td>那是啥啊?  66             </td>  67              <td>川川是狗狗  68             </td>  69             <td>川川不是狗  70             </td>  71             <td>那是啥啊?  72             </td>  73         </tr>  74            <tr>  75             <td>川川是狗狗  76             </td>  77             <td>川川不是狗  78             </td>  79             <td>那是啥啊?  80             </td>  81              <td>川川是狗狗  82             </td>  83             <td>川川不是狗  84             </td>  85             <td>那是啥啊?  86             </td>  87         </tr>  88            <tr>  89             <td>川川是狗狗  90             </td>  91             <td>川川不是狗  92             </td>  93             <td>那是啥啊?  94             </td>  95              <td>川川是狗狗  96             </td>  97             <td>川川不是狗  98             </td>  99             <td>那是啥啊? 100             </td> 101         </tr> 102            <tr> 103             <td>川川是狗狗 104             </td> 105             <td>川川不是狗 106             </td> 107             <td>那是啥啊? 108             </td> 109              <td>川川是狗狗 110             </td> 111             <td>川川不是狗 112             </td> 113             <td>那是啥啊? 114             </td> 115         </tr> 116            <tr> 117             <td>川川是狗狗 118             </td> 119             <td>川川不是狗 120             </td> 121             <td>那是啥啊? 122             </td> 123              <td>川川是狗狗 124             </td> 125             <td>川川不是狗 126             </td> 127             <td>那是啥啊? 128             </td> 129         </tr> 130     </table> 131 </body> 132 </html>

案例2演示

案例3:列表中的前三名粗體顯示。(前三個li)font-weight:bolder

案例3代碼插入位置:

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   2 <html xmlns="http://www.w3.org/1999/xhtml">   3 <head>   4     <title></title>   5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>   6     <script type="text/javascript">   7         $(function () {   8             $('#btn').click(function () {   9                 $('#t1 tr:even').css('backgroundColor', 'red');  10                 $('#t1 tr:odd').css('backgroundColor', 'yellow');  11                 //讓滑鼠進入之後,還是箭頭。  12                 $('tr').css('cursor', 'default');  13             });  14                 $('#btn1').click(function () {  15                     $('ul:first li:lt(3)').css('font-weight','bolder');  16                 });  17         });  18     </script>  19 </head>  20 <body>  21     <input type="button" name="name" value="點我表格隔行變色" id="btn"/>  22     <table id="t1" border="1" cellpadding="1" cellspacing="1">  23   24         <tr>  25             <td>川川是狗狗  26             </td>  27             <td>川川不是狗  28             </td>  29             <td>那是啥啊?  30             </td>  31              <td>川川是狗狗  32             </td>  33             <td>川川不是狗  34             </td>  35             <td>那是啥啊?  36             </td>  37         </tr>  38            <tr>  39             <td>川川是狗狗  40             </td>  41             <td>川川不是狗  42             </td>  43             <td>那是啥啊?  44             </td>  45              <td>川川是狗狗  46             </td>  47             <td>川川不是狗  48             </td>  49             <td>那是啥啊?  50             </td>  51         </tr>  52            <tr>  53             <td>川川是狗狗  54             </td>  55             <td>川川不是狗  56             </td>  57             <td>那是啥啊?  58             </td>  59              <td>川川是狗狗  60             </td>  61             <td>川川不是狗  62             </td>  63             <td>那是啥啊?  64             </td>  65         </tr>  66            <tr>  67             <td>川川是狗狗  68             </td>  69             <td>川川不是狗  70             </td>  71             <td>那是啥啊?  72             </td>  73              <td>川川是狗狗  74             </td>  75             <td>川川不是狗  76             </td>  77             <td>那是啥啊?  78             </td>  79         </tr>  80            <tr>  81             <td>川川是狗狗  82             </td>  83             <td>川川不是狗  84             </td>  85             <td>那是啥啊?  86             </td>  87              <td>川川是狗狗  88             </td>  89             <td>川川不是狗  90             </td>  91             <td>那是啥啊?  92             </td>  93         </tr>  94            <tr>  95             <td>川川是狗狗  96             </td>  97             <td>川川不是狗  98             </td>  99             <td>那是啥啊? 100             </td> 101              <td>川川是狗狗 102             </td> 103             <td>川川不是狗 104             </td> 105             <td>那是啥啊? 106             </td> 107         </tr> 108            <tr> 109             <td>川川是狗狗 110             </td> 111             <td>川川不是狗 112             </td> 113             <td>那是啥啊? 114             </td> 115              <td>川川是狗狗 116             </td> 117             <td>川川不是狗 118             </td> 119             <td>那是啥啊? 120             </td> 121         </tr> 122            <tr> 123             <td>川川是狗狗 124             </td> 125             <td>川川不是狗 126             </td> 127             <td>那是啥啊? 128             </td> 129              <td>川川是狗狗 130             </td> 131             <td>川川不是狗 132             </td> 133             <td>那是啥啊? 134             </td> 135         </tr> 136     </table> 137     <input type="button" name="name" value="設置列表的前三名為粗體" id="btn1"/> 138     <ul> 139         <li>公牛</li> 140         <li>公牛</li> 141         <li>公牛</li> 142         <li>公牛</li> 143         <li>公牛</li> 144         <li>公牛</li> 145         <li>公牛</li> 146         <li>公牛</li> 147         <li>公牛</li> 148         <li>公牛</li> 149     </ul> 150 </body> 151 </html>

案例3演示

案例4:表格點擊行背景色變黃,其他行背景色變白。

案例4代碼插入位置:

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   2 <html xmlns="http://www.w3.org/1999/xhtml">   3 <head>   4     <title></title>   5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>   6     <script type="text/javascript">   7         $(function () {   8             //換成mouseover就是隨滑鼠移動,到哪行,哪行就變色。   9         //click是點擊哪行,哪行變色。  10         $('#t2 tr').mouseover(function () {  11     $(this).css('backgroundColor','yellow').siblings('tr').css('background','');  12 });  13         });  14     </script>  15 </head>  16 <body>  17  <table id="t2" border="1" cellpadding="1" cellspacing="1">  18   19         <tr>  20             <td>川川是狗狗  21             </td>  22             <td>川川不是狗  23             </td>  24             <td>那是啥啊?  25             </td>  26              <td>川川是狗狗  27             </td>  28             <td>川川不是狗  29             </td>  30             <td>那是啥啊?  31             </td>  32         </tr>  33            <tr>  34             <td>川川是狗狗  35             </td>  36             <td>川川不是狗  37             </td>  38             <td>那是啥啊?  39             </td>  40              <td>川川是狗狗  41             </td>  42             <td>川川不是狗  43             </td>  44             <td>那是啥啊?  45             </td>  46         </tr>  47            <tr>  48             <td>川川是狗狗  49             </td>  50             <td>川川不是狗  51             </td>  52             <td>那是啥啊?  53             </td>  54              <td>川川是狗狗  55             </td>  56             <td>川川不是狗  57             </td>  58             <td>那是啥啊?  59             </td>  60         </tr>  61            <tr>  62             <td>川川是狗狗  63             </td>  64             <td>川川不是狗  65             </td>  66             <td>那是啥啊?  67             </td>  68              <td>川川是狗狗  69             </td>  70             <td>川川不是狗  71             </td>  72             <td>那是啥啊?  73             </td>  74         </tr>  75            <tr>  76             <td>川川是狗狗  77             </td>  78             <td>川川不是狗  79             </td>  80             <td>那是啥啊?  81             </td>  82              <td>川川是狗狗  83             </td>  84             <td>川川不是狗  85             </td>  86             <td>那是啥啊?  87             </td>  88         </tr>  89            <tr>  90             <td>川川是狗狗  91             </td>  92             <td>川川不是狗  93             </td>  94             <td>那是啥啊?  95             </td>  96              <td>川川是狗狗  97             </td>  98             <td>川川不是狗  99             </td> 100             <td>那是啥啊? 101             </td> 102         </tr> 103            <tr> 104             <td>川川是狗狗 105             </td> 106             <td>川川不是狗 107             </td> 108             <td>那是啥啊? 109             </td> 110              <td>川川是狗狗 111             </td> 112             <td>川川不是狗 113             </td> 114             <td>那是啥啊? 115             </td> 116         </tr> 117            <tr> 118             <td>川川是狗狗 119             </td> 120             <td>川川不是狗 121             </td> 122             <td>那是啥啊? 123             </td> 124              <td>川川是狗狗 125             </td> 126             <td>川川不是狗 127             </td> 128             <td>那是啥啊? 129             </td> 130         </tr> 131     </table> 132 </body> 133 </html>

案例4演示

 

五、幾個小問題

 

六、學會使用幫助

這裡出兩道題,測試一下:

$(    「ul」, $(this)    ).css(「background」, 「red」);

$(選擇器,context);例如:$(『td』,$(『div table tr』));

context參數可以是用dom對象集合或jQuery對象

默認如果不傳遞context則,會在整個文檔中搜索。

案例:修改點擊行的所有td的背景色,將當前點擊行的td設置為奇數td背景色紅色,偶數td背景色藍色。通過$(『td』,context)

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   2    3 <html xmlns="http://www.w3.org/1999/xhtml">   4 <head>   5     <title></title>   6     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>   7     <script type="text/javascript">   8     //記得把註冊的點擊事件寫在ready裡面,否則的話不報錯。   9         $(function () {  10             $('#t1 tr').click(function () {  11                 //限定範圍,在當前點的那行裡面找td  12                 //寫完后,再把其它行清一下。  13                 $('#t1 tr td').css('backgroundColor', '')  14                 $('td:odd', $(this)).css('backgroundColor', 'red');  15                 $('td:even', this).css('backgroundColor', 'blue');      16             });  17         });  18     </script>  19 </head>  20 <body>  21    <table id="t1" border="1">   22         <tr>  23             <td>川川是狗狗  24             </td>  25             <td>川川是狗狗  26             </td>  27             <td>川川是狗狗  28             </td>  29             <td>川川是狗狗  30             </td>  31             <td>川川是狗狗  32             </td>  33             <td>川川是狗狗  34             </td>  35         </tr>  36          <tr>  37             <td>川川是狗狗  38             </td>  39             <td>川川是狗狗  40             </td>  41             <td>川川是狗狗  42             </td>  43             <td>川川是狗狗  44             </td>  45             <td>川川是狗狗  46             </td>  47             <td>川川是狗狗  48             </td>  49         </tr>  50          <tr>  51             <td>川川是狗狗  52             </td>  53             <td>川川是狗狗  54             </td>  55             <td>川川是狗狗  56             </td>  57             <td>川川是狗狗  58             </td>  59             <td>川川是狗狗  60             </td>  61             <td>川川是狗狗  62             </td>  63         </tr>  64          <tr>  65             <td>川川是狗狗  66             </td>  67             <td>川川是狗狗  68             </td>  69             <td>川川是狗狗  70             </td>  71             <td>川川是狗狗  72             </td>  73             <td>川川是狗狗  74             </td>  75             <td>川川是狗狗  76             </td>  77         </tr>  78          <tr>  79             <td>川川是狗狗  80             </td>  81             <td>川川是狗狗  82             </td>  83             <td>川川是狗狗  84             </td>  85             <td>川川是狗狗  86             </td>  87             <td>川川是狗狗  88             </td>  89             <td>川川是狗狗  90             </td>  91         </tr>  92          <tr>  93             <td>川川是狗狗  94             </td>  95             <td>川川是狗狗  96             </td>  97             <td>川川是狗狗  98             </td>  99             <td>川川是狗狗 100             </td> 101             <td>川川是狗狗 102             </td> 103             <td>川川是狗狗 104             </td> 105         </tr> 106     </table> 107 </body> 108 </html>

練習:圖片版評分控制項

 

下面我們看下屬性、表單過濾器

我們可以看著文檔,邊看邊練。

甚至講完之後,我們發現看著文檔我們都能搞定.

                   

七、查幫助看到七個屬性過濾選擇器

jQueryAPI_1.7.1_CN下載地址:

什麼是屬性過濾選擇器呢?

 

八、屬性過濾選擇器

如果我們上面的代碼中的dv中出現d[v,將來我們選擇的時候也需要我們//給它轉譯一下。上面的寫法沒有具體的限定姓名的值到底等於什麼?

現在我們只要姓名等於aa的。

 

九、姓名等於aa

要是不等於aa的在等號前面加個非就行了。 !=

還有幾個寫法是以aa開頭的,或者是以aa結尾的。

 

十、選擇不同位置的屬性中的a

 

十一、選擇多個屬性

關於這個東西大家沒有必要死記,每個版本不一樣可能不一樣,大家學JQuery還是要記住這個思路。就是寫法,不要死記硬背。

在這裡我們再把上迴文章中提到的《鋒利的JQuery》分享一下。

鋒利的JQuery下載地址:

鋒利的jQuery實例源碼下載地址:

接下來還有個表單對象屬性選擇器,選擇的是表單對象.

$("#form1 :enabled")選取id為form1的表單內所有啟用的元素

$("#form1 :disabled")選取id為form1的表單內所有禁用的元素

$(「input:checked」)選取所有選中的元素(Radio、CheckBox),這個中間不能加空格.

$("select :selected")選取所有選中的選項元素(下拉列表)

                       

十二、選取所有被禁用的元素

 

十三、選中下拉菜單

上面這四種寫法當中在$("#form1 :enabled")有個空格,如果我把空格去掉,意義就不一樣了。看看下面代碼中的區別。

 

十四、不加空格和加空格的區別

接下來我們給大家看這麼個需求,大家做一下。

練習題題目代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <style type="text/css">  7     p  8     {  9         width:200px; 10         height:100px; 11         border: 1px solid blue; 12     } 13     </style> 14 </head> 15 <body> 16     <input type="button" name="name" value="顯示選中的checkbox的個數,以及選中項的value" /> 17     <input type="checkbox" name="names" value="tom" />tom 18     <input type="checkbox" name="names" value="jim" />jim 19     <input type="checkbox" name="names" value="lily" />lily 20     <p id="msgNames"> 21     </p> 22 </body> 23 </html>

十五、題目及提示

 

十六、練習代碼

 

十七、練習題演示

接下來我們再看下錶單選擇器:

 

十八、表單選擇器的幾種寫法

$(「:input")選取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一樣, $("input")只獲得<input>

$(":text")選取所有單行文本框,等價於$("input[type=text]"),$(『input[type=text]』),$(『:text』);

$(「:password」)選取所有密碼框。

同理還有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

代替了$(『input[type=***]』);

再說下其他過濾器

可見性過濾器:

:hidden

選取所有不可見元素包括:(如果直接寫:hidden則會包含head\title\script\style….)

1.表單元素type=「hidden」

2.設置css的display:none

3.高度和寬度明確設置為0的元素。

4.父元素是隱藏的,所以子元素也是隱藏的

visibility: hidden 與opacity為0不算,因為還佔位所以不認為是hidden.(與之前版本jQuery不太一樣,1.3.2之前)

                     

十九、display:none和visibility:hidden區別

當然這些東西不是死的,最有效的知道改沒改的方式就是查文檔。

:visible

選取所有可見元素

注意:$(『.cls :hidden』);與$(『.cls:hidden』);是不一樣的。

內容過濾器:

:contains(text),過濾出包含給定文本的元素。(innerText中包含。)

 

二十、包含選擇器

 

二十一、包含選擇器演示

:empty,過濾出所有不包含子元素或者文本的空元素。

 

二十二、empty選擇器

:has(selector),過濾出元素中包含(即子元素中)selector選擇器能選擇到的元素。

 

二十三、包含a標籤的選擇器

中間的參數是個選擇器,//所有div中包含a標籤的div.has(選擇器)

 

二十四、包含a標籤的選擇器演示

:parent,過濾出可以當做父元素的元素(即該元素有子元素或者元素中包含文本。)

 下面我們再說說子元素過濾器(*),這個理解起來還是有些小難度的。

:first-child,與:fisrt的區別,:first只能選取第一個,而:first-child,則能選取每個子元素的第一個元素。

                       

二十五、:first-child,與:fisrt的區別

$(『ul li:first』);只返回一個li元素。

$(『ul li:first-child』);//為每個父元素(ul)都返回一個li。

:last-child

:only-child,匹配當前父元素中只有一個子元素的元素。

:nth-child,對比eq()來理解,eq()值匹配一個,nth-child()為每個父元素都要匹配一個子元素。

:nth-child(index),index從1開始。

:nth-child(even)

:nth-child(odd)

:nth-child(3n),選取3的倍數的元素

:nth-child(3n+1),滿足3的倍數+1的元素。

.children()方法,只考慮子元素,不考慮後代元素。

 

下面我們再說下jQuery的Dom操作

1、使用html()方法讀取或者設置元素的innerHTML:

alert($("a:first").html());//innerHTML 

有參數表示設置值,沒有參數表示獲取值。本身JQuery可以鏈式編程,可以點第一個方法完后可以點第二個方法。這樣寫$(『div』).html(『dd』).css();沒有問題,但是如果是取值$(『div』).html().css();就不能點css了。返回的是字元串,字元串不是JQuery對象,就不能點css了。獲取的時候百分之八九十就不能鏈式編程了。

$("a:first").html("hello");

2、使用text()方法讀取或者設置元素的innerText:

alert($("a:first").text());

$("a:first").text("hello");

3、使用attr()方法讀取或者設置元素的屬性,對於jQuery沒有封裝的屬性(所有瀏覽器沒有差異的屬性)用attr進行操作。

        alert($("a:first").attr("href"));

        $("a:first").attr("href", "http://www.rupeng.com");  

怎麼讓一個checkbox被選中。

document.getElementById(『chk』).checked=true;

$(『#chk』).arr(『checked』,true);

attr({『key』:』value』,』k』:』v』});    

4、使用removeAttr刪除屬性。刪除的屬性在源代碼中看不到,這是和清空屬性的區別。attr(『name』,』』)

//增加一個類

$(『#chk』).attr(『checked』,true);

$().attr(『class』,』cls』);

//移除這個類

$().attr(『class』,』』)

//徹底刪除,連同元素的屬性

$().removeAttr(『class』);

 

接下來我們說下:動態創建Dom節點

dom裡面動態創建元素:

var dvObj=document.createElement('<div></div>');×

var dvObj=document.createElement('div');√

//創建表格,創建行對象,解決兼容性問題

var trObj=tblObj.insertRow(-1);√

//創建單元格對象

var tdObj=trObj.insertCell(-1);√

 

在JQuery裡面創建對象:加什麼樣的屬性,直接在裡面寫。

var dvObj=$('<div style="border:1px solid red"></div>');

創建個文本框。

var txtObj=$('<input type="text" value="dddd"/>');

 

使用$(html字元串)來創建Dom節點,並且返回一個jQuery對象,然後調用append等方法將新創建的節點添加到Dom中:

//創建超鏈接:

        var link = $("<a href='http://www.baidu.com'>百度</a>");

        $("div:first").append(link);

$()創建的就是一個jQuery對象,可以完全進行操作

var link = $("<a href='http://www.baidu.com'>百度</a>");

link.text("百毒");

$(「div:first」).append(link);。

創建radio,使用$(『<input name=「」/>』);,而不要在創建好后通過attr(『name』,』gender』).//通過attr()設置name,在IE6下有問題。

append方法用來在元素的末尾追加元素(最後一個子節點)。

prepend,在元素的開始添加元素(第一個子節點)。

after,在元素之後添加元素(添加兄弟)

before:在元素之前添加元素(添加兄弟)

案例:jQuery動態創建表格。(動態載入網站列表,從json中取數據)

動態創建表格代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  6     <script type="text/javascript">  7   8         //2.在ready裡面註冊個點擊事件  9         $(function () { 10             $('#btn').click(function () { 11                 //3.動態創建表格 12                 var tblObj = $('<table border="1"></table>'); 13                 //1.網站列表,希望把它創建在body裡面。 14                 //1.1根據data中的數據創建表格中的行與列。 15                 var data = { "百度": "http://www.baidu.com", "新浪": "http://sina.com", "CSDN": "http://www.csdn.com" }; 16                 for (var key in data) { 17                     //                    //值data[key] 18                     //                    //創建一行 19                     //                    var trObj = $('<tr><td>' + key + '</td><td><a href="' + data[key] + '">' + key + '</a></td></tr>'); 20                     //                    //加到表格裡面 21                     //                    //tblObj.append(trObj); 22                     //                    //或者 23                     //                    trObj.appendTo(tblObj); 24                     //簡化代碼 25                     $('<tr><td>' + key + '</td><td><a href="' + data[key] + '">' + key + '</a></td></tr>').appendTo(tblObj); 26                 } 27                 //4.把動態創建的表格加到body中。獲取body。 28                 $('body').append(tblObj); 29             }); 30         }); 31     </script> 32 </head> 33 <body> 34     <input type="button" name="name" value="動態創建網站列表" id="btn" /> 35 </body> 36 </html>

二十六、動態創建表格演示

其他追加方法(將自己追加到某元素)

子元素.appendTo(父元素);//主動巴結!到最後一個

子元素.prependTo(父元素);//主動巴結到第一個。

(*)A.insertBefore(B);將A插入到B的前面,等同於B.before(A);

(*)X.insertAfter(Y);將X插入到Y的後面,等同於Y.after(X);

練習:無刷新評論。

 

二十七、練習界面

做這道題得從給按鈕註冊單擊事件開始。

無刷新評論代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         $(function () {  9             //1.給按鈕註冊單擊事件 10             $('#btn').click(function () { 11                 //2.獲取用戶輸入的內容 12                 var nkName = $('#txtNickName').val(); 13                 var content = $('#txtContent').val(); 14                 var tblObj = $('#tblComment'); 15                 //3.動態創建一行,把行加到這個表格裡面。 16                 $('<tr><td>' + nkName + '</td><td>' + content + '</td></tr>').appendTo(tblObj); 17             }); 18         }); 19     </script> 20 </head> 21 <body> 22         <table id="tblComment" border="1"> 23         <tr> 24             <td> 25                 毛毛: 26             </td> 27             <td> 28                 沙發哦。。。。。 29             </td> 30         </tr> 31     </table> 32     昵稱:<input id="txtNickName" /> 33     <br /> 34     評論內容: 35     <textarea cols="10" rows="5" id="txtContent"></textarea> 36     <br /> 37     <input type="button" name="name" value="評論" id="btn" /> 38 </body> 39 </html>

二十八、無刷新評論演示

刪除節點

emptys();

清空某元素下的所有子節點

內部實現:while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一樣。

remove(selector)

刪除當前元素,返回值為被刪除的元素。還可以繼續使用被刪除的節點。比如重新添加到其他節點下:

var lis = $("#ulSite li").remove();

$("#ulSite2").append(lis);

參數expr,是一個選擇器,如果沒有選擇器,表示把選中的元素刪掉,如果有選擇器則表示在選中的元素中,再過濾出expr匹配的元素刪除掉。

案例:清空ul中的項,代碼見備註。$("ul li.testitem").remove(); 刪除ul下li中有testitem樣式的元素。               

許可權選擇:var items = $(「#select1 option:selected」).remove(); $(「#select2」).append(items); 更狠的:$(「#select1 option:selected」).appendTo($(「#select2」));//在jQuery1.4.1下不太一樣。

(*)clone()克隆節點,只複製節點,沒事件。clone(true)克隆節點帶事件。添加到購物車案例,元素內容不變只是樣式布局變了,簡單。.clone().appendTo();

 

二十九、用DebugBar調試找出empty和remove的區別

IE-Debugbar下載地址:

remove裡面可以傳個參數,是個選擇器

$(『div』).remove(『[class=c1]』);//刪除應用了c1這個樣式的div。

$(『div』).remove(『.c1』);

下面我們說下許可權選擇:

                       

三十、許可權選擇示例

先給按鈕註冊事件。

 

三十一、許可權選擇演示

許可權選擇代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         //1.給四個按鈕註冊事件  9         $(function () { 10             //2.把左邊選中的option移動到右邊 11             $('#btnr').click(function () { 12                 //3.拿到option,表示選擇s1下所有被選中的option,不需要把s1裡面的元素刪掉 13                 //dom裡面從一個節點到另外一個節點,自動脫離關係。 14                 $('#s1 option:selected').appendTo('#s2'); 15             }); 16             //4.把右邊選中的option移動到左邊 17             $('#btnl').click(function () { 18                 $('#s2 :selected').appendTo('#s1'); 19             }); 20  21             //5.把左邊全部的option移動到右邊 22             $('#btnrl').click(function () { 23                 $('#s1 option').appendTo('#s2'); 24             }); 25  26             //6.把右邊的option全部移動到左邊 27             $('#btnll').click(function () { 28                 $('#s2 option').appendTo('#s1'); 29             }); 30         }); 31     </script> 32 </head> 33 <body> 34     <select id="s1" multiple="multiple" style="float: left; height: 95px; width: 35px;"> 35         <option>添加</option> 36         <option>刪除</option> 37         <option>修改</option> 38         <option>查詢</option> 39         <option>列印</option> 40     </select> 41     <div style="float: left; width: 5%"> 42         <input id="btnr" type="button" value=">" style="float: left; width: 100%" /> 43         <input id="btnl" type="button" value="<" style="float: left; width: 100%" /> 44         <input id="btnrl" type="button" value=">>" style="float: left; width: 100%" /> 45         <input id="btnll" type="button" value="<<" style="float: left; width: 100%" /> 46     </div> 47     <select id="s2" multiple="multiple" style="float: left; height: 95px; width: 35px;"> 48     </select> 49 </body> 50 </html>

三十二、練習題目

下面我們看下加法計算器怎麼做:

 

三十三、加法計算器演示

加法計算器代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         //1.給按鈕註冊個單擊事件  9         $(function () { 10             $('#btn1').click(function () { 11                 //2.獲取前兩個文本框的值,相加之後賦值給第三個文本框 12                 var v1 = $('#txt1').val(); 13                 var v2 = $('#txt2').val(); 14                 //這樣相加不行,這是字元串相加var sum = v1 + v2; 15                 var sum = parseInt(v1) + parseInt(v2); 16                 //3.賦值給第三個文本框,直接用上面的封裝好的就行了。 17                 $('#txt3').val(sum); 18                 //$('#txt3').attr('value', sum); 19             }); 20         }); 21     </script> 22 </head> 23 <body> 24     <input id="txt1"/>+<input id="txt2"/><input type="button" name="name" id="btn1" value="=" /><input id="txt3"/> 25 </body> 26 </html>

下面我們說下計時器的製作:

 

三十四、註冊協議按鈕演示

註冊協議按鈕代碼:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         var sec = 5;  9         //1.讀秒 10         $(function () { 11             //2.聲明個變數接收setInterval,啟動計時器,每隔一秒鐘執行代碼。 12             var intervalId = setInterval(function () { 13                 sec--; 14                 if (sec > 0) { 15                     $('#btn').val('請仔細閱讀協議(' + sec + ''); 16                 } else { 17                     //3.表示讀秒已經到0,沒必要再繼續讀秒了,設置按鈕為可用裝填 18                     //不能'false'這麼寫。非空字元串都是認為是true。 19                     $('#btn').val('同意').attr('disabled', false); 20                     //停止計時器 21                     clearInterval(intervalId); 22                 } 23             }, 1000); 24         }); 25     </script> 26 </head> 27 <body> 28     <input type="button" name="name" value="請仔細閱讀協議(5)" id="btn" disabled="disabled"/> 29 </body> 30 </html>

接下來我們寫下案例1

這題跟focus沒什麼關係。

 

三十五、失去焦點驗證文本框是否為空演示

失去焦點驗證文本框是否為空代碼

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         //1.給文本框註冊一個失去焦點事件  9         $(function () { 10             //2.獲取頁面上所有的文本框 11             //$('input[type=text]'); 12             $(':text').blur(function () { 13             //3.如果文本框為空 14                 if ($(this).val().length == 0) { 15                     $(this).css('backgroundColor', 'red'); 16                 } else { 17                     $(this).css('backgroundColor','white'); 18                 } 19             }); 20         }); 21     </script> 22 </head> 23 <body> 24     <input type="text" name="name" value="" /> 25     <input /> 26     <input /><input /><input /><input /><input /><input /> 27     <input /> 28 </body> 29 </html>

接下來我們再說球隊列表選擇:

 

三十六、球隊列表演示

球隊列表代碼:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         //1.給 li註冊 mouseover事件  9         $(function () { 10             $('#u1 li').mouseover(function () { 11                 //2.讓自己的背景色變紅,讓其它變白 12                 $(this).css('backgroundColor', 'red').siblings().css('backgroundColor',''); 13                 //3.再為每個li,註冊一個點擊事件 14             }).click(function () { 15                 //4.在移動之前,去掉樣式和事件 16                 $(this).removeAttr('style').unbind().appendTo('#u2'); 17             }); 18         }); 19     </script> 20 </head> 21 <body> 22     <ul id="u1"> 23         <li>公牛</li> 24         <li>小牛</li> 25         <li>快船</li> 26         <li>森林狼</li> 27     </ul> 28     <ul id="u2"> 29     </ul> 30 </body> 31 </html>

留個練習題,剛才是點誰把它移動下來,現在是點誰再給移回去。移回去之後,樣式依然在。

下面我們介紹下節點替換:

替換節點:

$("br").replaceWith("<hr/>");

用<hr/>替換br

$(『<br/>』).replaceAll(『hr』); //調用者也得是選擇器選擇到的元素。

用<br/>元素替換所有的hr

紅色為選擇器;藍色為要替換的內容(動態創建的元素)。

節點替換代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         $(function () {  9             //1.給按鈕註冊個單擊事件 10             $('#btn').click(function () { 11                 //2.找到頁面上所有的br用hr來替換。寫法1 12                 //$('br').replaceWith('<hr/>'); 13                 //寫法2,用<hr/>標籤,替換頁面上的所有的$('br')選擇器,選到的元素。 14                 $('<hr/>').replaceAll('br'); 15             }); 16         }); 17     </script> 18 </head> 19 <body> 20     <input type="button" name="name" value="把br替換為水平線" id="btn"/> 21     <br /> 22     AAAAAAAAAAAAAAAA<br/> 23     AAAAAAAAAAAAAAAA<br/> 24     AAAAAAAAAAAAAAAA<br/> 25     AAAAAAAAAAAAAAAA<br/> 26     AAAAAAAAAAAAAAAA<br/> 27     AAAAAAAAAAAAAAAA<br/> 28     AAAAAAAAAAAAAAAA<br/> 29 </body> 30 </html>

                      

三十七、節點替換演示

我們再說下:包裹節點

wrap()方法用來將所有元素逐個用指定標籤包裹:【wrapAll()】

$(「b」).wrap(「<font color=『red』></font>」) 將所有粗體字紅色顯示

結果:<font color=『red』><b></b></font>

wrapInner()//在內部圍繞

包裹節點代碼插入位置

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         $(function () {  9             //1.給按鈕註冊單擊事件 10             $('#btn').click(function () { 11                 //2.選取頁面上所有的p,給它包裹一下子。 12                 //$('p').wrap('<font color="red" size="7"></font>'); 13                 //頁面上有幾十個p就有幾十個font標籤,我們用另外一種辦法 14                 //把所有的p都給包起來了。在p裡面有div或是input的時候,是把非p元素踢出來進行包裹。 15                 //$('p').wrapAll('<font color="red"></font>'); 16                 //包在p的裡面 17                 $('p').wrapInner('<font color="red" size="7"></font>'); 18             }); 19         }); 20     </script> 21 </head> 22 <body> 23     <input type="button" name="name" value="點擊讓p變紅" id="btn"/> 24     <p> 25     舉頭望明月 26     </p> 27     <p> 28     低頭思故鄉 29     </p> 30 </body> 31 </html>

接下來咱們再說下:樣式操作

獲取樣式 attr("class"),設置樣式attr("class","myclass"),追加樣式addClass("myclass")(不影響其他樣式),移除樣式removeClass("myclass"),切換樣式(如果存在樣式則去掉樣式,如果沒有樣式則添加樣式)toggleClass("myclass"),判斷是否存在樣式:hasClass("myclass")

上面這些我們之前說過。attr("class")和addClass的區別是:addClass,div已經用了class1了,再class2,這個時候這兩個類樣式,同時會被應用。attr是替換。

案例:網頁開關燈的效果

練習:給body設置body{ filter:Gray; } 這個style就可以讓網頁變為黑白顯示,做切換黑白效果的按鈕。汶川地震的時候,各大網站就是用的這個。但是是在IE下面,換個火狐的話,照樣。

 

點擊表格行,被點擊的行高亮顯示(背景是黃色),其他行白色背景。監聽每個tr的click事件,將點擊的背景設置為黃色,其他的設置為白色背景。顏色定義為class樣式。(使用類樣式來做)

練習:聚焦控制項的高亮顯示。顏色定義為class樣式。 $(「body *」),選擇器*表示所有類型的控制項。獲得焦點的元素背景色為黃色。

給所有的標籤都要註冊事件,

聚焦控制項的高亮顯示代碼:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         $(function () {  9             //1.給按鈕註冊單擊事件 10             $('#btn').click(function () { 11                 //2.選取頁面上所有的p,給它包裹一下子。 12                 //$('p').wrap('<font color="red" size="7"></font>'); 13                 //頁面上有幾十個p就有幾十個font標籤,我們用另外一種辦法 14                 //把所有的p都給包起來了。在p裡面有div或是input的時候,是把非p元素踢出來進行包裹。 15                 //$('p').wrapAll('<font color="red"></font>'); 16                 //包在p的裡面 17                 $('p').wrapInner('<font color="red" size="7"></font>'); 18             }); 19  20             //選取body下的所有的元素,獲得焦點變黃 21             $('body *').focus(function () { 22                 $(this).css('backgroundColor', 'yellow'); 23                 //失去焦點背景色再變回來 24             }).blur(function () { 25                 $(this).css('backgroundColor', ''); 26             }); 27         }); 28     </script> 29 </head> 30 <body> 31     <input type="text" name="name" value=" " /> 32     <input type="button" name="name" value=" " /> 33     <input type="checkbox" name="name" value=" " /> 34     <input type="radio" name="name" value=" " /> 35     <input type="password" name="name" value=" " /> 36     <input type="file" name="name" value=" " /> 37     <textarea>content</textarea> 38     <input type="button" name="name" value="點擊讓p變紅" id="btn"/> 39     <p> 40     舉頭望明月 41     </p> 42     <p> 43     低頭思故鄉 44     </p> 45 </body> 46 </html>

三十八、聚焦控制項的高亮顯示演示

JQuery也做了一部分的css兼容。

比如設置層的透明度,IE跟火狐不一樣。

 

三十九、JQuery幫我們解決css兼容性問題

設置層的透明度代碼:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         $(function () {  9             //1.給按鈕註冊單擊事件 10             $('#btn').click(function () { 11                 //2.選取頁面上所有的p,給它包裹一下子。 12                 //$('p').wrap('<font color="red" size="7"></font>'); 13                 //頁面上有幾十個p就有幾十個font標籤,我們用另外一種辦法 14                 //把所有的p都給包起來了。在p裡面有div或是input的時候,是把非p元素踢出來進行包裹。 15                 //$('p').wrapAll('<font color="red"></font>'); 16                 //包在p的裡面 17                 $('p').wrapInner('<font color="red" size="7"></font>'); 18             }); 19  20             //選取body下的所有的元素,獲得焦點變黃 21             $('body *').focus(function () { 22                 $(this).css('backgroundColor', 'yellow'); 23                 //失去焦點背景色再變回來 24             }).blur(function () { 25                 $(this).css('backgroundColor', ''); 26             }); 27             //給按鈕2註冊個單擊事件 28             $('#btn2').click(function () { 29             //設置透明度 30                 $('#dv1').css('opacity','0.3'); 31             }); 32         }); 33     </script> 34 </head> 35 <body> 36     <input type="button" name="name" value="設置透明度" id="btn2" /> 37     <div id="dv1" style="background:red; width:200px; height:200px"> 38     </div> 39     <input type="text" name="name" value=" " /> 40     <input type="button" name="name" value=" " /> 41     <input type="checkbox" name="name" value=" " /> 42     <input type="radio" name="name" value=" " /> 43     <input type="password" name="name" value=" " /> 44     <input type="file" name="name" value=" " /> 45     <textarea>content</textarea> 46     <input type="button" name="name" value="點擊讓p變紅" id="btn"/> 47     <p> 48     舉頭望明月 49     </p> 50     <p> 51     低頭思故鄉 52     </p> 53 </body> 54 </html>

四十、設置層的透明度演示

練習:搜索框效果。焦點放入控制項,如果文本框中的值是「請輸入關鍵詞」,那麼將文本清空,並且顏色設置為黑色。如果焦點離開控制項,如果文本框中是空值,那麼將文本框填充為「請輸入關鍵詞」,顏色設置為灰色(Gray)。顏色定義為class樣式。

 

四十一、搜索框效果演示

搜索框效果代碼

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         //1.給文本框註冊一個獲取焦點事件  9         $(function () { 10             $('#txtSearch').focus(function () { 11                 //2.判斷文本框中的內容 12                 if ($.trim($(this).val()) == '請輸入關鍵詞') { 13                     $(this).val('').removeClass('df'); 14                 } 15                 //3.再註冊個失去焦點事件 16             }).blur(function () { 17                 if ($.trim($(this).val()).length == 0) { 18                     $(this).val('請輸入關鍵詞').addClass('df'); 19                 } 20             }); 21         }); 22     </script> 23     <style type="text/css"> 24         .df 25         { 26             color:Gray; 27         } 28     </style> 29 </head> 30 <body> 31     請輸入搜索關鍵詞:<input id="txtSearch" value="請輸入關鍵詞"  class="df" /> 32 </body> 33 </html>

接下來我們說下RadioButton的選中問題:

我們怎麼獲取checkbox的每一個選中項,val能不能獲取每個checkbox每一個選中項。得遍歷放在數組裡面做的,通過val只能獲取第一個選中的值。RadioButton也是這樣的。

radio-checkb-elect設置選中項代碼:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         $(function () {  9             //1.給按鈕註冊個單擊事件 10             $('#btn').click(function () { 11                 //2.獲取頁面上所有的被選中的radio 12                 //var vv = $(':radio:checked').val(); 13                 //alert(vv); 14                 //想循環獲取每一個得循環 15                 $(':radio:checked').each(function () { 16                     alert($(this).val()); 17                 }); 18             }); 19             $('#btn2').click(function () { 20                 //讓女被選中 21                 //$(':radio[value=f]').attr('checked',true); 22                 //或者我們可以這麼做,特別注意:無論設定幾個按鈕被選中,都要用數組來寫。 23                 //同時讓f和o被選中 24                 $(':radio').val(['f','o']); 25             }); 26         }); 27     </script> 28 </head> 29 <body> 30     <input type="button" name="name" value="設置某項radio被選中" id="btn2" /> 31     <input type="button" name="name" value="點擊獲取選中radio的值" id="btn"/> 32     <fieldset> 33         <legend>選擇性別</legend> 34             <input type="radio" name="gender" value="f" />female 35             <input type="radio" name="gender" value="m" />male   36             <input type="radio" name="gender" value="s" />secret  37     </fieldset> 38     <fieldset> 39         <legend>選擇血型</legend> 40         <input type="radio" name="blood" value="a" />a 41         <input type="radio" name="blood" value="b" />b 42         <input type="radio" name="blood" value="ab" />ab 43         <input type="radio" name="blood" value="o" />o 44     </fieldset> 45 </body> 46 </html>

radio-checkb-elect設置選中項演示

練習:CheckBox的全選、全不選、反選

CheckBox的全選、全不選、反選代碼插入位置:

View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2   3 <html xmlns="http://www.w3.org/1999/xhtml">  4 <head>  5     <title></title>  6     <script src="jSquery/jquery-1.7.1.js" type="text/javascript"></script>  7     <script type="text/javascript">  8         $(function () {  9             $('#chkAll').click(function () { 10                 //1.找div下的所有的checkbox需要加個空格 11                 //$('div :checkbox').val(['a','b','c','d','e']); 12                 //換種方法寫 13                 $('div :checkbox').attr('checked', true); 14             }); 15             //2.全不選 16             $('#chkNon').click(function () { 17                 $('div :checkbox').attr('checked', false); 18             }); 19             //3.反選 20             $('#chkReverse').click(function () { 21                 //需要遍歷一下 22                 $('div :checkbox').each(function () { 23                     $(this).attr('checked',!$(this).attr('checked')); 24                 }); 25             }); 26         }); 27     </script> 28 </head> 29 <body> 30     <div> 31         <input type="checkbox" name="name" value="a" />a 32         <input type="checkbox" name="name" value="b" />b 33         <input type="checkbox" name="name" value="c" />c 34         <input type="checkbox" name="name" value="d" />d 35         <input type="checkbox" name="name" value="e" />e 36     </div> 37     <input type="button" name="name" value="全選" id="chkAll" /> 38     <input type="button" name="name" value="全不選" id="chkNon"/> 39     <input type="button" name="name" value="反選" id="chkReverse" /> 40 </body> 41 </html>

四十二、CheckBox的全選、全不選、反選代碼演示

下一篇文章當中,我們將給大家講解怎麼做個微博,敬請關注!

 

回到起始位置

作者近期文章列表:

C#中級進階教程(完全免費,獻給代碼愛好者的最好礼物。註:本作者分享自己精心整理的C#中級進階教程,無任何商業目的。希望與更多的代碼愛好者交流心得,也請高手多多指點!!!)
ASP.net項目 圖書商城項目總論
三層及其它內容 遞歸
三層(一)
三層相關案例(及常見的錯誤)
三層實例(內涵Sql CRUD)
手寫代碼生成器
SQL資料庫 ADO.net 資料庫的應用圖解一
資料庫的應用詳解二
ADO.NET(內涵效率問題)
ADO.NET實例教學一
ADO.NET實例教學二
資料庫的應用詳解三
ADO.NET(內含存儲過程講解)
面向過程,面向對象中高級 面向過程,面向對象的深入理解一
面向過程,面向對象的深入理解二
面向對象的深入理解三
無處不在的XML
winform基礎 Winform基礎
winform中常用的控制項
面向過程 三種循環的比較
C#中的方法(上)
我們常見的數組
面向對象 思想的轉變
C#中超級好用的類
C#中析構函數和命名空間的妙用
C#中超級好用的字元串
C#中如何快速處理字元串
值類型和引用類型及其它
ArrayList和HashTable妙用一
ArrayList和HashTable妙用二
文件管理File類
多態
C#中其它一些問題的小節
GDI+ 這些年我收集的GDI+代碼
這些年我收集的GDI+代碼2
HTML概述以及CSS 你不能忽視的HTML語言
你不能忽視的HTML語言2精編篇
你不能忽視的HTML語言3
html-綜合篇
CSS基本相關內容--中秋特別奉獻
CSS基本相關內容2
JavaScript基礎 JavaScript基礎一
javascript基礎二JavaScript DOM編程
jQuery jQuery(內涵: jquery選擇器)

推薦閱讀文章

Bookmark the permalink ,來源:互聯網