jQuery的DOM操作与练习

来源：互联网发布：linux端口占用查看命令编辑：程序博客网时间：2024/05/19 15:39

*0 jQuery常用操作DOM的API

1)jQuery对象.addClass().addClass();
2)removeClass()
3)toggleClass()
4)hasClass()
5)val()，如果将val()设置给一个select/raido/checkbox元素，内容取决于option元素的value或显示的内容值，value优先
6)text()和html():text()取得是标签之间的内容，html()不仅含有内容，还可能含有标签
7)prev()
8)siblings()：要能产生一个数组
9)show()和hide()
10)fadeIn()和fadeOut()

实现功能：

（1）用按钮选择复选框：全选，全取消，全反选

（2）用户名输入文本框，点击文本框出现光标开始输入

（3）点击按钮选择对应的下拉列表框值

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.6.js"></script><style type="text/css">.divClass{font-size: 30px;}.myClass{color: aquamarine;}</style></head><body>/* <div align="center"> <table border="1" align="center" height="300px" width="250px" bgcolor="darkseagreen"> <tr> <th>状态</th> <th>用户名</th> </tr> <tr> <td><input type="checkbox"/></td> <td>bob</td> </tr> <tr> <td><input type="checkbox"/></td> <td>may</td> </tr> <tr> <td><input type="checkbox"/></td> <td>job</td> </tr> <tr> <td><input type="checkbox"/></td> <td>jack</td> </tr> <tr bgcolor="coral"> <td> <input type="button" value="全选中" /> </td> <td> <input type="button" value="全取消" /> </td> <td> <input type="button" value="全反选" /> </td> </tr> </table> </div> <hr /> <div> 无样式 </div> <div class="divClass"> 有样式 </div> <hr /> <table border="1" align="center"> <tr> <th>用户名</th> <td><input id="in" type="text" value="输入用户名" /></td> </tr> </table>  <hr /> <div align="center"> <input class="in" type="button" value="选中一号" /> <input class="in" type="button" value="选中二号" /> <select> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select>  <input type="button" value="选中北京和广州" /> <select multiple size="4"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> </div> <script type="text/javascript"> //alert("ss"); //全取消失效 $("input[value='全取消']").attr("disabled","disabled");  //选中 $("input[value='全选中']").click(function() { //找到所有checkbox $(":checkbox").attr("checked","checked"); //全选中失效 $(this).attr("disabled","disabled"); //全取消生效 $("input[value='全取消']").removeAttr("disabled");  }); //取消 $("input[value='全取消']").click(function() {  $(":checkbox").removeAttr("checked");  //全取消失效 $(this).attr("disabled","disabled"); $("input[value='全选中']").removeAttr("disabled"); }); // $("input[value='全反选']").click(function() { //禁用选中的复选框 $(":checkbox:checked").attr("disabled","disabled")   //将未选中的复选框选中  $(":checkbox:not(:checked)").attr("checked","checked"); }); // $("div").first().addClass("divClass"); $("div").last().removeClass("divClass"); $("div").first().toggleClass("divClass"); $("div").last().toggleClass("divClass"); // //为input元素添加样式 $("input").first().addClass("myClass"); //为input元素添加事件 //alert(""); $("#in").first().focus(function() { //alert(""); $(this).val(""); $(this).removeClass("myClass"); }) $(".in").first().click(function() { $("select").val("1"); }) $(".in").first().next().click(function() { $("select").val("2"); }) $("input").last().click(function() { $("select").val(['北京','广州']); }) </script></body></html>

阅读全文

0 0