首页 > 代码库 > jQuery(一)
jQuery(一)
今天学了jQ,再一次感觉到了其功能的强大,不过内容确实有点多,按照老师的说法,今天讲了一本书的一半,所以很多知识都是只有一点点印象,特别是选择器这一块,9类,很容易混淆,其实这里就体现出了JQ的方便与灵活,可以让代码更加简洁,体现了其"Write less, Do more"的特性,只是现在练习的太少,运用起来还不是很熟练,有时候都被自己搞晕了,就比方说今天写代码的时候就是一个单词写错了,结果自己查了半天也没搞出来,...哎...所以细节很重要,做任何事情都是这样,嗯,是的,要做好细节,稳中求快!
Xmind:
表格综合案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格综合案例</title> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $("tr:nth-child("+$(‘#row‘).val()+") :nth-child("+$(‘#col‘).val()+")").html($("#content").val()); }) $("button").click(function(){ $("tr:hidden").show(); }) $("tr:nth-child(odd)").css("backgroundColor","orange"); $("tr:nth-child(even)").css("backgroundColor","#ccc"); $("tr").mouseover(function(){ $(this).css("backgroundColor","#f00"); $(this).toggle("slow"); }) $("tr").mouseout(function(){ $(this).css("backgroundColor","#fff"); }) }) </script> </head> <body> <table width=‘600‘ border=‘1‘> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> 行:<input type="text" id="row" /><br> 列:<input type="text" id="col" /><br> 值:<input type="text" id="content" /><br> <input type="button" value="确定" id="btn"><br> <button>出现吧!神龙!</button> </body> </html>
全选/取消/反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>网页标题</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ //全选功能 $("#quanxuan").click(function(){ $(":checkbox").prop("checked",true); }) //取消功能 $("#quxiao").click(function(){ $(":checkbox").prop("checked",false); }) //反选功能 $("#fanxuan").click(function(){ var length = $(":checkbox").length; for(var i=0; i<length; i++){ /*$(":checkbox")[i].checked = !$(":checkbox")[i].checked;*/ $($(":checkbox")[i]).prop("checked",!$($(":checkbox")[i]).prop("checked")); } }) }) </script> </head> <body> <table border=‘1‘ width=‘400‘ align=‘center‘ style=‘border-collapse:collapse;‘> <tr> <th>序号</th> <th>标题</th> <th>发布时间</th> <th>删除</th> </tr> <tr> <td>1</td> <td>武汉传智PHP要开班了</td> <td>2016-3-20</td> <td><input type=‘checkbox‘ name=‘id‘/></td> </tr> <tr> <td>2</td> <td>佛山传智PHP要开班了</td> <td>2018-3-20</td> <td><input type=‘checkbox‘ name=‘id‘/></td> </tr> <tr> <td>3</td> <td>纽约传智PHP要开班了</td> <td>2018-3-20</td> <td><input type=‘checkbox‘ name=‘id‘/></td> </tr> <tr> <td>4</td> <td>伦敦传智PHP要开班了</td> <td>2018-3-20</td> <td><input type=‘checkbox‘ name=‘id‘/></td> </tr> <tr> <td colspan=‘4‘ align=‘right‘> <input type=‘button‘ value=‘全选‘ id=‘quanxuan‘ /> <input type=‘button‘ value=‘取消‘ id=‘quxiao‘ /> <input type=‘button‘ value=‘反选‘ id=‘fanxuan‘ /> </td> </tr> </table> </body> </html>
jQuery(一)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。