| # 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> |
![](https://img2024.cnblogs.com/blog/35695/202407/35695-20240713070336838-1837943664.jpg)