jQuery基础--案例练习

2024-11-06 技术教程

1.端口案例改进，操作更灵活

<head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .model{ position: fixed; top: 50%; left: 50%; width: 500px; height: 350px; margin-top: -200px; margin-left: -250px; background-color: aliceblue; z-index: 10; } .model p,h3{ text-align: center; } .model p input[type="text"]{ width: 300px; height: 28px; } .model p input[type="button"]{ width: 150px; height: 35px; } .shadow{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: black; opacity: 0.6; z-index: 9; } </style></head><body> <a onclick="addModel();">添加</a> <table border="1"> <thead> <tr> <th>地址</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td name="host">1.1.1.11</td> <td name="port">80</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> <tr> <td name="host">1.1.1.12</td> <td name="port">80</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> <tr> <td name="host">1.1.1.13</td> <td name="port">80</td> <td><a class="edit">编辑</a>|<a>删除</a></td> </tr> </tbody> </table> <div class="model hide"> <p><h3>操作</h3></p> <p>地址：<input type="text" name="host"/></p> <p>端口：<input type="text" name="port"/></p> <p><input type="button" value="取消" onclick="removeModel();"/></p> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> //打开添加框 function addModel() { $('.model,.shadow').removeClass('hide'); $('.model p input[type="text"]').val(''); } //关闭添加框 function removeModel() { $('.model,.shadow').addClass('hide'); } //点击编辑时执行函数 $('.edit').click(function () { $('.model,.shadow').removeClass('hide'); //获取当前点击元素的父级标签的所有兄弟标签 var tds=$(this).parent().prevAll(); tds.each(function () { // $('.model input[name="?"]')获取name=？的输入框 //$(this).attr('name')获取被点击td标签的name值并带入？ //val(）赋值 //$(this).text()h获取被点击td标签的html文本 $('.model input[name='+$(this).attr('name')+']').val($(this).text()); }) }) </script></body>

2.菜单切换内容

<head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ margin: 0 auto; height: 35px; line-height: 35px; width: 400px; background-color:#999999; } .menu .menu-item{ float: left; width: 65px; border-right: 1px solid #fdfdfd; text-align: center; color: #ffffff; cursor: pointer; } .content{ margin: 0 auto; height: 200px; width: 398px; border: 1px dashed #999999; border-top: 0px; } .hide{ display: none; } .active{ background-color: #ff6600; } </style></head><body><div class="menu"> <div class="menu-item active">菜单一</div> <div class="menu-item">菜单二</div> <div class="menu-item">菜单三</div></div><div class="content"> <div>内容一</div> <div class="hide">内容二</div> <div class="hide">内容三</div></div><script src="jquery-1.12.4.js"></script><script> $('.menu-item').click(function () { //被点击div的样式添加active，其他兄弟div样式去掉div $(this).addClass('active').siblings().removeClass('active'); //获取被点击div的index索引 var index=$(this).index('.menu-item'); //根据索引找到content内容孩子中的对应div并移除样式hide，其他兄弟div添加h样式ide $('.content').children().eq(index).removeClass('hide').siblings().addClass('hide'); })</script></body>

3.点赞按钮

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ padding: 45px; border-bottom:1px dashed #ff6600; } .item{ width: 35px; position: relative; } </style></head><body> <div class="content"> <div class="item"> <span>赞</span> </div> </div> <div class="content"> <div class="item"> <span>赞</span> </div> </div> <div class="content"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> //当点击.item时执行 $('.item').click(function () { AddFavor(this); }) //点赞函数 function AddFavor(self) { var fontSize=15; var top=0; var right=0; var opacity=1; //创建+1标签 var tag=document.createElement('span'); $(tag).text('+1'); $(tag).css('color','#ff6600'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize+'px'); $(tag).css('top',top+'px'); $(tag).css('right',right+'px'); $(tag).css('opacity',opacity); $(self).append(tag); //计时器每35mm执行一次 var obj=setInterval(function () { fontSize+=5; top-=5; right-=5; opacity-=0.1; $(tag).css('fontSize',fontSize); $(tag).css('top',top); $(tag).css('right',right); $(tag).css('opacity',opacity); //当tag透明度小于零时，移除计数器并移除tag if(opacity<0){ clearInterval(obj); $(tag).remove(); } },35) } </script></body></html>

4.登陆验证

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .error{ color:red; }</style><body><form id="f1" action="https://www.baidu.com/" method="post"> <p>用户:<input type="text" name="user" msg="用户名" /></p> <p>密码:<input type="password" name="password" msg="密码" /></p> <P>邮箱:<input type="text" name="email" msg="邮箱" /></P> <p>电话:<input type="text" name="tel" msg="电话" /></p> <input type="submit" value="提交"></form><script src="jquery-1.12.4.js"></script><script> //当页面框架加载完成后执行 $(function () { $(':submit').click(function () { $('.error').remove() var flag=true; //遍历input $('#f1').find('input[type="text"],input[type="password"]').each(function () { var v=$(this).val(); var n=$(this).attr('msg'); //如果为空 if(v.length<=0){ flag=false; var tag=document.createElement('span') tag.className="error"; tag.innerHTML=n+"为必填"; $(this).after(tag); //return false; } }) return flag; }) })</script></body></html>