jQuery（二）
table 全选、反选、清除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select</title> </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="1"> <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> <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(){ // checked 设置默认是否选中 // 先找到所有table下的chekcbox,然后使用prop给checked设置ture 或者false $('table :checkbox').prop('checked',true); } function ClearAll(){ $('table :checkbox').prop('checked',false); } function ReverseAll(){ // $table :checkbox 找到所有的checkbox,注意加空格.each循环后面的所有函数 $('table :checkbox').each(function(){ var isChecked = $(this).prop('checked'); if (isChecked){ $(this).prop('checked',false); }else { $(this).prop('checked',true); } }) } </script> </body> </html>
选择li
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="添加" onclick="AddContent();"/> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> <script src="jquery-2.2.3.js"></script> <script> function AddContent(){ $('ul').append('<li>9</li>') } //$(document).ready(function)(){代码区} 在DOM加载完成时运行的代码 //或者$(function($) {////}); // 你可以在这里继续使用$作为别名... $(function(){ $('ul').delegate('li','click',function(){ var temp = $(this).text(); alert(temp); }) }) </script> </body> </html>
修改css
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } 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 0; } .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: 0; } .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.pn"> </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.conscroll = function(){ var ws = $(window).scrollTop(); if (ws > 50){ $('.catalog').addClass('fixed'); }else { $('.catalog').removeClass('fixed'); } $('.content').children().each(function(){ var offs = $(this).offset(); var offTop = offs.top; var total = offTop + $(this).height(); if (ws>offTop && total > ws){ if ($(window).scrollTop()+$(window).height()==$(document).height()){ $('.catalog').children(':last').css('fontSize','48px').siblings().css('fontSize','12px'); }else { var t = $(this).attr('menu'); var target = 'div[auto-to="' + t + '"]'; $('.catalog').children(target).css('fontSize','48px').siblings().css('fontSize','12px'); return; } } }); } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <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(){ $('#title').mouseover(function(){ $(this).css('cursor' , 'move'); }).mousedown(function(e){ var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove' ,function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left' , x+'px'); $(this).parent().css('top' , y+'px'); }) }).mouseup(function(){ $(this).unbind('mousemove'); }); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <style> .tab-box .box-menu{ background-color: #9a9a9a; border: 1px solid #5cb85c; height: 30px; } .tab-box .box-body{ border: 1px solid #5cb85c; height: 300px; } .hide{ display: none; } .current{ background-color: #18a689; color: white; } </style> </head> <body> <div class="tab-box"> <div class="box-menu"> <!--all menu--> <a tx="c1" onclick="ChangeTab(this);">菜单一</a> <a tx="c2" onclick="ChangeTab(this);">菜单二</a> <a tx="c3" onclick="ChangeTab(this);">菜单三</a> </div> <div class="box-body"> <!--all content--> <div id="c1">内容一</div> <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){ // 当前标签增加current,其他移除 $(ths).addClass('current').siblings().removeClass('current'); // 获取当前标签的属性'tx',根据'tx'获取关联的id var contentId = $(ths).attr('tx'); // 拼接获取的id var temp = '#' + contentId; // 给获取的id设置移除隐藏,其他增加隐藏 $(temp).removeClass('hide').siblings().addClass('hide'); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>top</title> <style> .go-top{ position: fixed; width: 200px; height: 200px; right: 10px; bottom: 10px; } .hide{ display: none; } </style> </head> <body> <div style="height: 2048px"> <div style="background-color: #7cbe56;height: 500px">这里是顶部</div> <div class="go-top hide"> <img src="top.jpg" alt="返回顶部" onclick="GoTop();"/> </div> </div> <script src="jquery-2.2.3.js"></script> <script> window.onscroll = function(){ var currentTop = $(window).scrollTop(); if (currentTop>100){ $('.go-top').removeClass('hide'); }else { $('.go-top').addClass('hide'); } }; function GoTop(){ $(window).scrollTop(0); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="获取节目" onclick="SubmitData();"/> <div id="container"></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', dataType:'jsonp', jsonp:'callback', jsonpCallback:'list', success:function(arg){ console.log(arg); var jsonArry = arg.data; $.each(jsonArry,function(k,v){ var week = v.week; var temp = '<h1>' + week + '</h1>'; $('#container').append(temp); var listArray = v.list; $.each(listArray,function(kk,vv){ var link = vv.link; var name = vv.name; var tempNew = "<a href='" + link + "'>" + name + "</a><br/>"; $('#container').append(tempNew); }) }) }, error:function(){} }) } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <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.pn"> </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 type="text/javascript" src="jquery-2.2.3.js"></script> <script type="text/javascript"> window.onscroll = function(){ var ws = $(window).scrollTop(); if(ws > 50){ $('.catalog').addClass('fixed'); }else{ $('.catalog').removeClass('fixed'); } $('.content').children().each(function(){ var offs = $(this).offset(); var offTop = offs.top; var total = offTop + $(this).height(); if(ws>offTop && total>ws){ if($(window).scrollTop()+$(window).height == $(document).height()){ $(".catalog").children(':last').css("fontSize",'48px').sibling().css("fontSize",'12px'); }else{ var t = $(this).attr('menu'); var target = 'div[auto-to="' + t +'"]'; $('.catalog').children(target).css("fontSize",'48px').siblings().css('fontSize','12px'); return; } } }); }; </script> </body> </html>
