Python【day 14】：Python学习(前端开发：jquery实例)
小例子：
1 tab标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .tab_box .box_menu{ background-color: #DDDDDD; border: 1px solid #DDDDDD; } .tab_box .box_body{ border: 1px solid #DDDDDD; } .hide{ display: none; } .current{ background-color: red; color: white; } </style> </head> <body> <div class="tab_box"> <div class="box_menu"> <a alex="c1" onclick="changetab(this);" class="current">菜单一</a> <a alex="c2" onclick="changetab(this);">菜单二</a> <a alex="c3" onclick="changetab(this);">菜单三</a> </div> <div class="box_body"> <div id="c1">内容一</div> <!--//默认显示第一个，其余2个都隐藏--> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> <script src="jquery-2.2.3.js"></script> <script> function changetab(ths){ $(ths).addClass("current").siblings().removeClass("current"); //当前点击的标签添加class，其余的兄弟标签去掉class （链式编程） var contentid = $(ths).attr("alex"); //$(ths) 当前点击的标签 //获取当前标签的自定义属性alex的值； 通过菜单的这个值关联菜单下面的内容 var temp="#"+contentid; //坑：必须通过+号拼接字符串 47行不行 $(temp).removeClass("hide").siblings().addClass("hide"); //找到id是"#"+contentid的标签，去掉隐藏；其余的兄弟标签，添加隐藏；--内容标签每次只显示一个 // $("#contentid").removeClass("hide").siblings().addClass("hide"); //获取当前点击的标签 整体思路 //获取当前标签的属性alex对应的值 //值 $("#xx")显示，其他兄弟隐藏 这里必须拼接字符串 } </script> </body> </html>
2全选反选取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .tab_box .box_menu{ background-color: #DDDDDD; border: 1px solid #DDDDDD; } .tab_box .box_body{ border: 1px solid #DDDDDD; } .hide{ display: none; } .current{ background-color: red; color: white; } </style> </head> <body> <div> <input type="button" value="全选" onclick="selectall();"/> <input type="button" value="取消" onclick="clearall();"/> <input type="button" value="反选" onclick="reverseall();"/> </div> <div> <table border="1px"> <tr> <td><input type="checkbox"/></td> <td>123</td> <td>123</td> </tr> <tr> <td><input type="checkbox"/></td> <td>123</td> <td>123</td> </tr> <tr> <td><input type="checkbox"/></td> <td>123</td> <td>123</td> </tr> </table> </div> <script src="jquery-2.2.3.js"></script> <script> function selectall(){ $("table :checkbox").prop("checked",true); //简写 //找到table标签下所有的复选框，jquery不需要循环遍历， // 直接将checked属性置为true 就是将所有满足条件的全部勾选 // $('table input[type="checkbox"]').prop("checked",true); } function clearall(){ $("table :checkbox").prop("checked",false); //找到table标签下所有的复选框，jquery不需要循环遍历， // 直接将checked属性置为false 就是将所有满足条件的取消勾选 } function reverseall(){ //遍历方式1 var userlist =[11,22,33,44]; //定义数组 $.each(userlist,function(i,item){ //遍历数组 console.log(i,item); //将索引和值都打印出来 }); //遍历方式2 $("table :checkbox").each(function(){ //找到table标签下所有的复选框,遍历这些复选框，判断复选框的状态 var ischecked = $(this).prop("checked"); //$(this)表示当前的复选框 获取当前复选框的勾选状态 if(ischecked){ //如果当前的复选框是已经勾选的 $(this).prop("checked",false); //将复选框取消勾选 }else{ //如果当前的复选框是没有勾选的，//将复选框勾选上 $(this).prop("checked",true); } }) } </script> </body> </html>
3 返回顶部-简易版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .go_top{ position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div style="height: 2000px;background-color: #DDDDDD;"> 顶部 <div id="id1" style="height: 100px;background-color: red;overflow: auto;"> <!--//overflow: auto 超过范围，出现滚动条--> <p>ddd</p> <p>ddd</p> <p>ddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> </div> </div> <div class="go_top"> <a onclick="gotop();">返回顶部</a> <!--//a标签上绑定一个事件 a标签的位置在右下--> </div> <script src="jquery-2.2.3.js"></script> <script> function gotop(){ $(window).scrollTop(0);//将滚动条放到离顶部距离为0的位置，将滚动条置顶 } </script> </body> </html>
4返回顶部_扩展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .go_top{ position: fixed; /*//固定返回顶部的位置*/ right: 0px; bottom: 0; width: 100px; height: 100px; } .hide{ display: none; } </style> </head> <body> <div style="height: 2000px;background-color: #DDDDDD;"> 顶部 </div> <div class="go_top hide"> <!--返回顶部默认隐藏--> <a onclick="gotop();">返回顶部</a> <!--返回顶部，绑定事件，点击后，回到顶部--> </div> <script src="jquery-2.2.3.js"></script> <script> window.onscroll = function(){ //监听整个浏览器的滑轮滚动 var currenttop = $(window).scrollTop(); //获取当前的滚动条离顶部的高度 if(currenttop>100){ //如果高度大于100像素，就显示返回顶部,去掉隐藏 $(".go_top").removeClass("hide");//通过class=go_top找到返回顶部标签 }else{ //如果高度小于100像素，就隐藏返回顶部 $(".go_top").addClass("hide"); } } function gotop(){ $(window).scrollTop(0);//让滚动条回到窗口顶部 } </script> </body> </html>
5菜单联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } </style> </head> <body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.png"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script src="jquery-2.2.3.js"></script> <script> window.onscroll =function(){//监听浏览器中滑轮滚动情况 var ws =$(window).scrollTop();//获取当前windows窗口滚动条离窗口顶部的距离像素 if(ws>50){ //如果像素大于50 $(".catalog").addClass("fixed");//给左下目录添加class=fixed }else{ //如果像素小于50 $(".catalog").removeClass("fixed"); //给左下目录删除class=fixed } $(".content").children().each(function(){ //找到右下内容标签的子标签，遍历 var offs = $(this).offset(); //$(this)代表当前内容的div标签 //获取当前标签的离窗口顶部和离左边的距离像素 var offtop =offs.top; ////获取当前标签的离窗口顶部的距离像素 //当前标签离窗口顶部高度<滚动条高度 且 //当前标签离窗口顶部高度+当前标签的高度>滚动条高度 var total =offtop+$(this).height(); if(ws>offtop && ws<total){ //如果滑轮滑到了底部，最后一个菜单增大； //滑轮滚动高度+window高度（窗口一屏的高度）=文档的高度 if($(window).scrollTop()+$(window).height()==$(document).height()){ //height() 少括号 坑 $(".catalog").children(":last").css("fontSize","48px").siblings().css("fontSize","12px"); //当前的目录标签字体变大，其余的兄弟标签字体变小 //siblings() 少括号 坑 }else{ var t = $(this).attr("menu"); //获取当前内容标签的自定义属性menu的值 var target ='div[auto-to="'+t+'"]';//拼接字符串，关联到左下角的目录标签，注意单双引号 坑 $(".catalog").children(target).css("fontSize","48px").siblings().css("fontSize","12px"); //找到目录标签的子标签的和内容标签的对应关系，添加样式字体变大，其余的兄弟标签，字体变小 return; //这里的return是为了避免鼠标拉到最下面后，左侧的菜单全部变大的情况 //应该是同一时刻，只能是一个菜单的字体变大 一旦return就跳出当前循环 （这里的return注释问题） } } }) } </script> </body> </html>
6 事件委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <input type="button" value="添加" onclick="addcontent();"/> <div onclick="func()"></div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> <script src="jquery-2.2.3.js"></script> <script> function addcontent(){ $("ul").append("<li>8</li>"); //向每个匹配的元素内部的最后面追加内容 } function func(){ } //当前文档准备就绪，文档的结构已经加载完了，但是可能还没有全部渲染出来（显示出来），这时候就可以加载js了 //方式1 $(document).ready(function(){ }); //方式2 $(function(){ //最基本的jquery事件绑定 //方式1 $("li").click(function(){ //绑定一个click事件 var temp = $(this).text(); //取出当前点击标签的文本内容 alert(temp); }) //方式2 $("li").bind("click",function(){ //绑定一个click事件 var temp = $(this).text(); //取出当前点击标签的文本内容 alert(temp); }) //方式3 委托 $("ul").delegate("li","click",function(){ // 给所有ul标签下的li委托一个特殊事件，此特殊事件是点击后，才绑定事件的，不点击不绑定事件 //适用场景，固定的使用普通绑定方法； // 需要扩展的（必然添加一行），需要用委托：委托的好处是：每次薪增加的行，都会自动绑定上事件 //但是如果用的普通方法绑定，薪增加的行就没有绑定事件，需要手动再次绑定 var temp = $(this).text();//取出当前点击标签的文本内容 alert(temp); }) }) </script> </body> </html>
7 窗口拖动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <!--position: absolute; 通过css添加left和top--> <div id="title" style="background-color: black;height: 40px;color: white;"> 标题 </div> <div style="height: 300px;"> 内容 </div> </div> <script src="jquery-2.2.3.js"></script> <script> $(function(){ //加载完文档结构，自动执行下述js $("#title").mouseover(function(){ //找到id=title标签 当鼠标指针位于元素上方时，会发生 mouseover 事件。 $(this).css("cursor","move"); // $(this)值的是id=title标签 给这个标签添加样式 鼠标形状变成移动形状 }).mousedown(function(e){ //链式编程 当鼠标指针移动到元素上方，并按下鼠标按左键时，会发生 mousedown 事件。 var _event = e||window.event;//这里e封装了鼠标点击动作，有浏览器支持e，不支持e的浏览器用window.event //原始鼠标横纵坐标位置 var ord_x = _event.clientX; //这里X必须是大写 鼠标移动前的横坐标 var ord_y = _event.clientY; //这里Y必须是大写 鼠标移动前的纵坐标 var parent_left =$(this).parent().offset().left; //$(this)指的是id=title标签 其父标签的offset，指的是获取匹配元素在当前视口的相对偏移（到窗口左边的距离像素） var parent_top =$(this).parent().offset().top; //$(this)指的是id=title标签 其父标签的offset，指的是获取匹配元素在当前视口的相对偏移（到窗口顶部的距离像素） $(this).bind("mousemove",function(e){ //绑定一个鼠标移动事件（bind这个绑定，方便解除绑定 55行） // 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。 //mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标 var _new_event = e||window.event;////这里e封装了鼠标点击动作，有浏览器支持e，不支持e的浏览器用window.event //移动后新的鼠标横纵坐标位置 var new_x = _new_event.clientX; //这里X必须是大写 鼠标移动后的横坐标 var new_y = _new_event.clientY; //这里Y必须是大写 鼠标移动后的纵坐标 var x =parent_left+(new_x-ord_x); //鼠标移动的距离加上原来标题框离窗口左边的距离就是标题框新的位置--x轴 var y =parent_top+(new_y-ord_y); //鼠标移动的距离加上原来标题框离窗口上边的距离就是标题框新的位置--y轴 $(this).parent().css("left",x+"px"); //对应样式 11行position: absolute //给标题框的父标签div的position: absolute;添加样式 x轴新的位置 $(this).parent().css("top",y+"px"); //对应样式 11行position: absolute // Y轴新的位置 }) }).mouseup(function(){ //链式编程 当在元素上放松鼠标按钮时，会发生 mouseup 事件。 $(this).unbind("mousemove"); //$(this)值的是id=title标签 取消鼠标移动绑定事件 36行 }); }) </script> </body> </html>
8 ajax跨域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <input type="button" value="获取节目" onclick="submitdata();" /> <div id="container"> <!--//通过点击按钮，将外部网站的内容都插入到这个div中--> </div> <script src="jquery-2.2.3.js"></script> <script> function submitdata(){ //获取值 $.ajax({ url:'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', data:{}, type:"get", //类型是get或者post dataType:"jsonp", //固定写法 jsonp:"callback", //固定写法 jsonpCallback:"list", //jsonp不能少了p 拼写 success:function(arg){ console.log(arg); //arg是服务器返回的数据 审查元素重要 必须打开 查看报错也是这里 var jsonarray =arg.data; //通过key data获取value 存到 jsonarray $.each(jsonarray,function(k,v){ //遍历数组jsonarray //k 下标 v：数组值 var week = v.week; //取出键week对应的值value 存到变量week中 var temp = "<h1>"+week+"</h1>"; //将week（周日）拼接到h1标签 $("#container").append(temp); //将h1标签放到id=container的标签的子标签最后面 var listarray = v.list; //v写成了y 拼写 //取出键llist对应的值value 存到变量listarray中 $.each(listarray,function(kk,yy){ //遍历数组listarray var link = yy.link; ////取出键link对应的值value 存到变量link中 var name = yy.name; //取出键name对应的值value 存到变量name中 var temp_new = "<a href=" +link+">" +name+ "</a><br/>"; //将链接地址拼接到link， 将节目名字拼接到a标签的文本处 <br/>换行 $("#container").append(temp_new); //将a标签放到id=container的标签的子标签最后面 }) }) } }) } </script> </body> </html>
浙公网安备 33010602011771号