Jq例子
-----------JQ的引入+就绪事件函数---------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery(就是引入一个js文件) --> <script src="js/jquery-1.8.3.js"></script> <script> /* //JS提供的文档就绪事件函数 window.onload = function(){ alert("当前html中的所有元素都已加载完成!"); } */ //jQueyr提供的文档就绪事件函数 jQuery 等价于 $ $(function(){ //在浏览器加载完所有的元素后立即执行! alert("当前html中的所有元素都已加载完成!"); }); /* window.onload = function(){ //获取div元素内部的所有内容(innerHTML) var div = document.getElementById("demo"); console.log( div.innerHTML ); } */ $(function(){ //获取div元素内部的所有内容(innerHTML) var div = document.getElementById("demo"); console.log( div.innerHTML ); }); </script> </head> <body> <div id="demo">这是一个测试的div元素</div> </body> </html>
-----------JQ的选择器---------
<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <title>选择器练习</title> <style> body{ font-family:"微软雅黑"; font-size:18px;padding-bottom:300px;} input{font-size:18px;margin-top:10px;} div,span{width:250px;border:1px solid #000;padding-left:10px;background:#bed4ef;} span{display:block;} body>div,body>span{height:100px;margin: 10px 0px 0px 10px;display:inline-block;vertical-align:middle;} #one{width:250px;height:185px;} div>span,div>div{width:230px;height:35px;margin:5px;} </style> <!-- 引入jquery函数库文件 --> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /* 文档就绪事件函数(即在浏览器加载完最后一个html元素后立即执行) */ $(function() { /* -------一、基本选择器练习------- */ /* 1、选中id为b1的按钮并为其绑定点击事件，点击b1按钮： 改变所有 div 元素的背景色为 #FD5551 */ /* 获取id为b1的元素，为元素绑定点击事件，当元素被点击 时，会执行其中的function */ $("#b1").click(function(){ /* //js方式 var divArr = document.getElementsByTagName("div"); for(var i=0;i<divArr.length;i++){ divArr[i].style.backgroundColor = "#FD5551"; } */ //jquery方式 $("div").css("background-color", "#FD5551"); $("div").css("font-size", "22px"); $("div").css("color", "#fff"); }); /* 2、选中id为b2的按钮并为其绑定点击事件，点击b2按钮：改变 id 为 one 的元素的背景色为 #7fa728 */ $("#b2").click(function(){ $("#one").css("background-color", "#7fa728"); }); /* 3、选中id为b3的按钮并为其绑定点击事件，点击b3按钮： 改变 class 为 mini 的所有元素的背景色为 #EE82EE */ $("#b3").click(function(){ $(".mini").css("background", "#EE82EE"); //获取所有div,以及id为one的,以及class为mini的元素 $("div,#one,.mini").css("background", "yellow"); }); /* ---------二、层级选择器------- */ /* 4、选中id为b4的按钮并为其绑定点击事件，点击b4按钮：改变 div 内所有 span 的背景色为 #DC21D2 */ $("#b4").click(function(){ //$("div span").css("background", "#DC21D2"); //使用find函数找指定元素内的指定元素 $("div").find("span").css("background", "#DC21D2"); }); /* 5、选中id为b5的按钮并为其绑定点击事件，点击b5按钮：改变 id为two 元素的下一个相邻的 div元素 的背景色为 #29a29e */ $("#b5").click(function(){ //获取id为two的元素后面紧邻的div元素 //$("#two+div").css("background", "#940aaf"); $("#two").next("div").css("background", "#940aaf"); //获取id为two的元素前面紧邻的div元素 $("#two").prev("div").css("background", "#940aaf"); }); /* 6、选中id为b6的按钮并为其绑定点击事件，点击b6按钮：改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822 */ $("#b6").click(function(){ //获取id为two的元素后面所有的div兄弟元素 //$("#two").nextAll("div").css("background", "#ECD822"); //获取id为two的元素前面所有的div兄弟元素 //$("#two").prevAll("div").css("background", "#ECD822"); //获取id为two的元素前面以及后面所有的div兄弟元素 $("#two").siblings("div").css("background", "#ECD822"); }); /* ---------三、基本过滤选择器------- */ /* 7、选中id为b7的按钮并为其绑定点击事件，点击b7按钮：改变第一个以及最后一个 div 元素的背景色为 #5500ff */ $("#b7").click(function(){ //获取第一个div元素 //$("div").eq(0).css("background", "#5500ff"); $("div:first").css("background", "#5500ff"); //获取第一个div元素 //$("div").eq( $("div").length-1 ).css("background", "#5500ff"); //$("div").eq(-1).css("background", "#5500ff"); $("div:last").css("background", "#5500ff"); }); /* 8、选中id为b8的按钮并为其绑定点击事件，点击b8按钮：改变第4个 div 元素的背景色为 #D917C6 */ $("#b8").click(function(){ $("div").eq(3).css("background", "#D917C6"); }); /* ---------四、表单选择器------- */ /* 9、选中id为b9的按钮并为其绑定点击事件，点击b9按钮：测试表单选择器的使用 */ $("#b9").click(function(){ //1.获取所有的表单项元素(input/select/textarea/button) console.log( $(":input") ); //2.获取所有的文本输入框 //$("input[type='text']").css("background", "pink"); $(":text").css("background", "pink"); //3.获取所有的密码输入框 //$("input[type='password']").css("background", "grey"); $(":password").css("background", "pink"); //4.获取所有的单选框 console.log( $("input[type='radio']").length ); console.log( $(":radio").length ); //5.获取所有的复选框 console.log( $("input[type='checkbox']").length ); console.log( $(":checkbox").length ); //6.匹配所有被选中的单选框、复选框、option选项 console.log( $(":checked").length ); }); }); </script> </head> <body> 基本选择器→： <!-- 按钮,id为b1 --> <input type="button" id="b1" value="b1,改变所有 div 元素的背景色为 #FD5551"/> <!-- 按钮,id为b2 --> <input type="button" id="b2" value="b2,改变 id 为 one 的元素的背景色为 #7fa728"/> <!-- 按钮,id为b3 --> <input type="button" id="b3" value="b3,改变 class 为 mini 的所有元素的背景色为 #EE82EE"/> <hr/> 层级选择器→： <!-- 按钮,id为b4 --> <input type="button" id="b4" value="b4,改变 div 内所有 span 的背景色为 #DC21D2"/> <!-- 按钮,id为b5 --> <input type="button" id="b5" value="b5,改变 id为two 元素的下一个相邻的 div元素 的背景色为 #29a29e"/> <!-- 按钮,id为b6 --> <input type="button" id="b6" value="b6,改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822"/> <hr/> 基本过滤选择器→： <!-- 按钮,id为b7 --> <input type="button" id="b7" value="b7,改变第一个/最后一个 div 元素的背景色为 #5500ff"/> <!-- 按钮,id为b8 --> <input type="button" id="b8" value="b8,改变第4个 div 元素的背景色为 #EA3AD8"/> <hr/> 表单选择器→： <!-- 按钮,id为b9 --> <input type="button" id="b9" value="b9,测试表单选择器的使用"/> <h3>点击按钮查看效果...</h3> <div id="one"> 这是一个div1,id是one <div>这是一个div11</div> <span class="mini">这是一个span,class为mini</span> <span class="mini">这是一个span,class为mini</span> </div> <div>这是一个div2 <input type="button" value="按钮1"/> <input type="button" value="按钮2"/> </div> <div id="two">这是一个div3,id是two <span>这是一个span</span> </div> <div>这是一个div4</div> <div>这是一个div5</div> <span class="mini">这是一个span,class为mini</span> <div>这是一个div6</div> <span class="mini01">这是一个span,class为mini01</span> <span class="mini">这是一个span,class为mini</span> <hr/> <input type="radio" value="male" />男 <input type="radio" value="female" />女 <input type="checkbox" value="basketball" />篮球 <input type="checkbox" value="football" />足球 <select> <option>北京</option> <option>上海</option> <option>广州</option> </select> <br/> <!-- $("input[type='text']") --> <input type="text" name="user"/> <input type="text" name="email"/> <hr/> <input type="password" name="psw"/> <input type="password" name="repsw"/> <hr/> </body> </html>
-----------JQ创建表格元素--------
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>创建表格</title> <style type="text/css"> /* 为表格定义CSS样式 */ body{padding-left:15px;font-size:20px;} table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; } table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; } input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;} input[type='button']{font-size:20px;} </style> <!-- 引入jquery函数库文件 --> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /** 练习1：创建单行单列的表格 */ function createTable1(){ //创建table元素 var $table = $("<table></table>"); //创建tr元素 var $tr = $("<tr></tr>"); //创建td元素并为td添加内容 var $td = $("<td>Hello,我是td</td>"); //将td添加到tr上 $tr.append($td); //将tr添加到table上 $table.append($tr); //将创建的整个table添加到body内部 $("body").append($table); $("body").append("<hr/>"); } /** 练习2：创建5行6列的表格 */ function createTable2(){ //创建table元素 var $table = $("<table></table>"); for(var r=0;r<5;r++){//循环5次,table中添加5个tr //创建tr元素 var $tr = $("<tr></tr>"); for(var c=0;c<6;c++){//循环6次,tr中添加6个td //创建td元素并为td添加内容 var $td = $("<td>Hello,我是td</td>"); //将td添加到tr上 $tr.append($td); } //将tr添加到table上 $table.append($tr); } //将创建的整个table添加到body内部 $("body").append($table); $("body").append("<hr/>"); } /** 练习3：创建指定行和列的表格 */ function createTable3(){ var rows = $("#rows").val();//获取指定的行数 var cols = $("#cols").val();//获取指定的列数 //创建table元素 var $table = $("<table></table>"); for(var r=0;r<rows;r++){//循环5次,table中添加5个tr //创建tr元素 var $tr = $("<tr></tr>"); for(var c=0;c<cols;c++){//循环6次,tr中添加6个td //创建td元素并为td添加内容 var $td = $("<td>Hello,我是td</td>"); //将td添加到tr上 $tr.append($td); } //将tr添加到table上 $table.append($tr); } //将创建的整个table添加到body内部 $("body").append($table); $("body").append("<hr/>"); } </script> </head> <body> <!-- 练习1：点击下列按钮创建单行单列表格 --> <input type="button" value="创建单行单列表格" onclick="createTable1()" /><br/><br/> <!-- 练习2：点击下列按钮创建5行6列表格 --> <input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br/><br/> <!-- 练习3：点击下列按钮创建指定行、指定列的表格 --> <input type="button" value="创建表格（输入行数和列数）" onclick="createTable3()" /><br/> 行数：<input type="text" id="rows"/><br/> 列数：<input type="text" id="cols"/><br/><br/> <!-- 将创建的表格添加到body内部(追加到最后) --><hr/> </body> </html>
--------------仿QQ好呀分组--------------------
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>仿QQ好友分组</title> <style type="text/css"> table{border:#09f 1px solid;width:100px;border-collapse:collapse;margin:15px 10px;margin:20px 20px;} table td{border:#06f 1px solid;background-color:#6f5f3e;text-align:center;padding:5px 0;} table td div{background-color:#ff9;text-align:left;line-height:28px;padding-left:14px;text-indent:padding-left:20px;} table td span{color:#fff;font-size:19px;width:100%;border:none;display:block;cursor:pointer;} table td a:hover{color:#0c0} </style> <!--引入jquery的js库--> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /** 通过jQuery实现仿QQ列表好友列表 */ function openDiv(thisobj){ //在展开当前分组之前, 先关闭其他三个分组 //>>选中其他三个分组并关闭. $(thisobj).parents("tr").siblings().find("div").hide(); //点击当前分组, 切换分组的状态(如果展开则关闭, 如果关闭则展开) $(thisobj).next().toggle(); } // 通过javascipt实现仿QQ列表好友列表 function openDiv(thisobj){ //1.获取当前分组内好友列表div var oDiv = thisobj.parentNode.getElementsByTagName("div")[0]; //2.判断当前分组div是展开还是关闭 if(oDiv.style.display == "block"){ //3.如果当前div是打开的, 只需关闭该div即可 oDiv.style.display = "none"; }else{ //4.如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的 //获取所有分组内的div,遍历依次关闭所有分组 var aDiv = document.getElementsByTagName("div"); for(var i=0;i<aDiv.length; i++){ aDiv[i].style.display = "none"; } //再打开当前分组 oDiv.style.display = "block"; } } </script> </head> <body> <table> <tr> <td> <span onclick="openDiv(this)">君王好友</span> <div style="display:none"> 秦始皇<br /> 刘邦<br /> 李世民<br /> 康熙<br /> </div> </td> </tr> <tr> <td> <span onclick="openDiv(this)">三国好友</span> <div style="display:none"> 刘备<br /> 关羽<br /> 张飞<br /> 赵云<br /> </div> </td> </tr> <tr> <td> <span onclick="openDiv(this)">美女好友</span> <div style="display:none"> 西施<br /> 貂蝉<br /> 杨贵妃<br /> 王昭君<br /> </div> </td> </tr> <tr> <td> <span onclick="openDiv(this)">IT好友</span> <div style="display:none"> 王海涛<br /> 马云<br /> 李开复<br /> 俞敏洪<br /> </div> </td> </tr> </table> </body> </html>
-------------模拟员工管理系统---------------------
<!DOCTYPE HTML> <html> <head> <title>模拟员工信息管理系统</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body{font-family: "微软雅黑"} h2, h4{ text-align: center; } div#box1, div#box2 {text-align:center;} hr{margin: 20px 0;} table{margin: 0 auto;width:70%;text-align: center;border-collapse:collapse;} td, th{padding: 7px; width:20%;} th{background-color: #DCDCDC;} input[type='text']{width:130px;} </style> <!--引入jquery的js库--> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> /* --- 添加一个新员工 --- */ function addEmp(){ //1.获取新员工的信息 var id = $("#box1").find("input[name='id']").val().trim(); var name = $("#box1").find("input[name='name']").val().trim(); var email = $("#box1").find("input[name='email']").val().trim(); var salary = $("#box1").find("input[name='salary']").val().trim(); //2.检查员工信息是否符合格式(信息不能为空) if( id == "" || name == "" || email == "" || salary == ""){ alert("员工信息不能为空!!!"); return; } //3.检查ID是否已存在 /* 获取当前所有员工的id, 循环遍历, 比较id是否存在 */ var flag = true; $("table tr").each(function(){ if(id == $(this).find("td:eq(1)").text()){ alert("id已存在!!!"); flag = false; } }); if(!flag){ return; } //4.将新员工信息添加到员工信息列表中(table) var $td1 = $("<td><input type='checkbox'/></td>"); var $td2 = $("<td>"+id+"</td>"); var $td3 = $("<td>"+name+"</td>"); var $td4 = $("<td>"+email+"</td>"); var $td5 = $("<td>"+salary+"</td>"); var $tr = $("<tr></tr>"); $tr.append($td1).append($td2).append($td3).append($td4).append($td5); //5.将tr挂载到table上 $("table").append($tr); } /* --- 删除选中的员工 --- */ function delEmp(){ //1.获取被选中的员工 $(":checked").parents("tr").each(function(){ //如果当前行是表头, 不要删除 if($(this).find("th").length == 0){ $(this).remove(); } }); } /* --- 修改指定id的员工 --- */ function updEmp(){ //1.获取要修改的员工信息 var id = $("#box2").find("input[name='id']").val().trim(); var name = $("#box2").find("input[name='name']").val().trim(); var email = $("#box2").find("input[name='email']").val().trim(); var salary = $("#box2").find("input[name='salary']").val().trim(); //2.检查员工信息是否符合格式(不能为空) if(id == "" || name == "" || email == "" || salary == ""){ alert("修改员工信息不能为空!!!"); } //3.检查ID是否存在(必须要存在) var flag = true; $("table tr").each(function(){ if(id == $(this).find("td:eq(1)").text()){ //4.进行修改 //>>修改姓名 $(this).find("td:eq(2)").text(name); //>>修改邮箱 $(this).find("td:eq(3)").text(email); //>>修改工资 $(this).find("td:eq(4)").text(salary); flag = false; debugger; } }) if(flag){ alert("您修改的员工id不存在!!!"); } } /* 点击全选设置 员工所在的行全选或者全不选 */ function checkAll(){ //获取全选复选框的选中状态（true表示选中，false表示取消选中） var isCheck = $("#all").prop("checked"); //将全选复选框的选中状态设置给所有员工所在行的复选框 $("input[type='checkbox']").prop("checked", isCheck); } </script> </head> <h2>添加新员工</h2> <div id="box1"> ID：<input type="text" name="id"/> 姓名：<input type="text" name="name"/> 邮箱：<input type="text" name="email"/> 工资：<input type="text" name="salary"/> <input type="button" onclick="addEmp()" id="add" value="添加新员工"/> </div> <hr/> <table border="1"> <tr> <th> <!-- 全选复选框 --> <input type="checkbox" onclick="checkAll()" id="all"/> </th> <th>ID</th> <th>姓名</th> <th>邮箱</th> <th>工资</th> </tr> <tr> <td> <input type="checkbox"/> </td> <td>1</td> <td>宋江</td> <td>sj@163.com</td> <td>12000</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>2</td> <td>武松</td> <td>ws@163.com</td> <td>10500</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>3</td> <td>孙二娘</td> <td>sen@163.com</td> <td>11000</td> </tr> </table> <h4><a href="javascript:void(0)" onclick="delEmp()" id="del">删除选中员工</a></h2> <hr/> <div id="box2"> ID：<input type="text" name="id"/> 姓名：<input type="text" name="name"/> 邮箱：<input type="text" name="email"/> 工资：<input type="text" name="salary"/> <input type="button" onclick="updEmp()" id="upd" value="根据ID修改员工信息"/> </div> </body> </html>
浙公网安备 33010602011771号