第三章:JQuery函数

| # JQ遍历:                                           |
| ------------------------------------------------- |
| HTMl代码                                            |
|                                                   |
| <ul>                                              |
|                                                   |
|                                                   |
|                                                   |
| </ul>                                             |
|                                                   |
|                                                   |
| ## 普通遍历:                                          |
|                                                   |
| <script>                                          |
| $(function(){                                     |
| var citys = $("ul>li");                           |
| for(var i = 0 ; i < citys.length ; i++){          |
| alert(citys[i].innerHTML); //为js对象                |
| }                                                 |
| })                                                |
| </script>                                         |
|                                                   |
|                                                   |
| 小提示:                                              |
|                                                   |
| ​                                                 |
|                                                   |
| ​                                                 |
|                                                   |
| ## JQ遍历:                                          |
|                                                   |
| <script>                                          |
| $(function(){                                     |
| $("ul>li").each(function(index,element){          |
| //alert(index+"--"+$(element).html());            |
| if($(element).html() == "上海"){                    |
|                                                   |
| return false;                                     |
| }                                                 |
| })                                                |
| })                                                |
| </script>                                         |
|                                                   |
|                                                   |
| 小提示:index与element元素可加可不加                          |
|                                                   |
| ​                                                 |
|                                                   |
| ​                                                 |
|                                                   |
| ​                                                 |
|                                                   |
| ​                                                 |
|                                                   |
| ​                                                 |
|                                                   |
| 隔行变色:                                             |
|                                                   |
| HTML代码                                            |
|                                                   |
| <table border="1">                                |
| <tr>                                              |
| <td>姓名</td>                                       |
| <td>年龄</td>                                       |
| <td>身高</td>                                       |
| </tr>                                             |
| <tr>                                              |
| <td>文渊</td>                                       |
| <td>18</td>                                       |
| <td>1.88</td>                                     |
| </tr>                                             |
| </table>                                          |
|                                                   |
|                                                   |
| <script>                                          |
| $(function(){                                     |
| $("tr:gt(0):odd").css("background","red");        |
| $("tr:gt(0):even").css("background","blue");      |
| })                                                |
| </script>                                         |
|                                                   |
|                                                   |
| # 多选按钮的选中问题:                                      |
|                                                   |
| HTML代码                                            |
|                                                   |
| `<input type="checkbox" name="name"/>文渊<br>`      |
| `<input type="checkbox" name="name"/>文化<br>`      |
| `<input type="checkbox" name="name"/>文章<br>`      |
| `<input type="checkbox" name="name"/>文莽<br>`      |
| `<input type="checkbox" id="i1"/>全选<br>`          |
|                                                   |
| <script>                                          |
| $(function(){                                     |
| $("input[name='name']").click(function(){         |
| var index = 0;                                    |
| var $c = $("input[name='name']");                 |
| $c.each(function(){                               |
| if(this.checked){                                 |
| index ++;                                         |
| }                                                 |
| })                                                |
| if(index == 4){                                   |
| $("#i1").attr("checked",true);                    |
| }else{                                            |
| $("#i1").attr("checked",false);                   |
| }                                                 |
| })                                                |
| $("#i1").click(function(){                        |
| if(this.checked){                                 |
| $(":checkbox").attr("checked",true);              |
| }else{                                            |
| $(":checkbox").attr("checked",false);             |
| }                                                 |
| })                                                |
| })                                                |
| </script>                                         |
|                                                   |
| # 绑定事件                                            |
|                                                   |
| ## 绑定单个事件                                         |
|                                                   |
| ## 绑定多个事件                                         |
|                                                   |
| # 表单验证:                                           |
|                                                   |
| <script>                                          |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
| </script>                                         |
|                                                   |
|                                                   |
| <form id="myform" method="post" action="#">       |
| <label for="myname">账号:</label>                   |
| <input type="text" name="myname" id="myname"><br> |
| <input type="submit">                             |
| </form>                                           |
|                                                   |
|                                                   |
| <style>                                           |
| .error{                                           |
|                                                   |
|                                                   |
| </style>                                          |
|                                                   |
| 小提示:                                              |
|                                                   |
| ​                                                 |
|                                                   |
| # 省市级联动                                           |
|                                                   |
| <!DOCTYPE html>                                   |
| <html>                                            |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
|                                                   |
| </html>                                           |