Query是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
选择器与筛选器系列
模态框
a{ text-decoration: none; color: #428bca; } .modal-backdrop{ position: fixed; top:0; right:0; bottom:0; left:0; z-index: 1040; background-color: #000000; opacity:0.8 } .modal{ position: fixed; top:50%; left:50%; z-index: 1050; max-height: 500px; overflow: auto; 560px; margin: -250px 0 0 -280px; background-color: #ffffff; border: solid 1px #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; } .modal-header{ padding: 9px 15px; border-bottom: solid 1px #eeeeee; } .modal-header .close{ margin-top: 2px; } .modal-body{ padding: 10px; } .modal-footer{ padding: 14px 15px 15px; margin-top: 0; background-color: #f5f5f5; border-top: solid 1px #dddddd; -webkit-border-radius: 0 0 6px 6px -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 #ffffff; *zoom: 1; } .modal-footer .btn{ float: right; margin-left: 5px; margin-bottom: 0px; } .btn { display: inline-block; padding: 6px 12px; margin-top:0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; cursor: pointer; vertical-align: middle; border: solid 1px transparent; border-radius: 4px; } .btn-sucess{ color: #ffffff; background-color: #5cb85c; border:solid 1px #4cae4c; } .btn:hover,.bth:focus{ color: #333333; text-decoration: none; } .hide{ display: none; } /*modal.css*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态</title> <link rel="stylesheet" href="css/modal.css"> <style type="text/css"> </style> </head> <body> <div> <input type="button" onclick="fadeIn()" value="模态对话框"> </div> <div id="formTable" class="modal hide"> <form id="form0" method="post" action=""> <div class="modal-header" style="height: 40px;"> <div style="float: left">This is a Modal Heading</div> <div style="float: right"><a class="close" id="close" onclick="fadeOut()" style="cursor: pointer">x</a></div> </div> <div class="modal-body"> <h4>Text in a modal</h4> <p>You can add some text here.</p> </div> <div class="modal-footer"> <a class="btn btn-sucess" onclick="fadeOut()">提交</a> <a class="btn" data-dismiss="modal" onclick="fadeOut()">关闭</a> <a class="btn" data-dismiss="modal" onclick="fadeOut()">关闭</a> </div> </form> </div> <div id="shade" class="modal-backdrop hide"></div> <script src="jquery-3.1.0.js"></script> <script> function fadeIn(){ $("#formTable").removeClass('hide'); $("#shade").removeClass('hide') } function fadeOut(){ $("#formTable").addClass('hide'); $("#shade").addClass('hide') } </script> </body> </html>
加载
.modal-backdrop{ position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 1050; background-color: white; opacity: 0.8; } .modal{ position: fixed; top:30%; left:50%; z-index: 1030; } .hide{ display: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>load</title> <link rel="stylesheet" href="css/load.css"> </head> <body> <div> <input type="button" value="模态对话框" onclick="fadeIn();"> </div> <div id="shade" class="modal-backdrop hide"> <div class="modal"> <img src="images/loading_32.gif"> </div> </div> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> function fadeIn(){ $("#shade").removeClass('hide') } </script> </body> </html>
左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加载</title> <style type="text/css"> .left{ 20%; height: 500px; float: left; background-color: darkslategrey; } li{ list-style-type: none; color: white; font-size: 20px; } .hide{ display: none; } .title{ font-size: 25px; color:red; } </style> </head> <body> <div class="left"> <ul> <li class="title" onclick="Func_Menu(this);">家用电器 <ul class="hide"> <li>电视</li> <li>空调</li> <li>洗衣机</li> </ul> </li> <li class="title" onclick="Func_Menu(this);">电脑办公 <ul class="hide"> <li>电脑设备</li> <li>游戏设备</li> <li>网络设备</li> </ul> </li> <li class="title" onclick="Func_Menu(this);">医药保健 <ul class="hide"> <li>中西药品</li> <li>营养健康</li> <li>保健器械</li> </ul> </li> </ul> </div> <script src="jquery-3.1.0.js"></script> <script type="application/javascript"> function Func_Menu(ths){ $(ths).children().removeClass('hide'); $(ths).siblings().children().addClass('hide'); } </script> </body> </html>
Tab表横向表单
body{ margin: 0 auto; font-family: Arial; font-size: 12px; } body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div { margin: 0; padding: 0; } ol,ul,li{ list-style-type: none; } .container{ 1190px; margin-left: auto; margin-right: auto; } .tab-menu-box1{ border: solid 1px #dddddd; margin-top:20px; } .tab-menu-box1 .menu{ line-height: 33px; height: 33px; background-color: #f5f5f5; } .tab-menu-box1 .content{ min-height: 100px; border-top: solid 1px #dddddd; background-color: white; } .tab-menu-box1 .menu ul li{ position: relative; float: left; font-size: 14px; font-family: 'Microsoft Yahei','SimHei'; text-align: center; font-weight: bold; border-right: solid 1px #dddddd; padding: 0 18px; cursor: pointer; } .tab-menu-box1 .menu ul li:hover{ color: #c9033b; } .tab-menu-box1 .menu .current{ margin-top:-1px; color: #c9033b; background: #ffffff; height: 33px; border-top: solid 2px #c9033b; z-index: 10; } .hide{ display: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <link rel="stylesheet" href="css/tab.css"> </head> <body> <div class="container"> <div class="tab-menu-box1"> <div class="menu"> <ul id="tab-menu-title"> <li class="current" content-to="1">价格趋势</li> <li content-to="2">市场分布</li> <li content-to="3">其它</li> </ul> </div> <div id="tab-menu-body" class="content"> <div content="1">content1</div> <div content="2" class="hide">content2</div> <div content="3" class="hide">content3</div> </div> </div> </div> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> $(function(){ ChangeTab('#tab-menu-title','#tab-menu-body'); }) function ChangeTab(title,body){ $(title).children().bind('click',function(){ $menu = $(this); $content = $(body).find('div[content="'+ $(this).attr("content-to") + '"]'); $menu.addClass('current').siblings().removeClass('current'); $content.removeClass('hide').siblings().addClass('hide'); }); } </script> </body> </html>
拐角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拐角</title> <style type="text/css"> a{ background-color: #ffffff; border-top: solid 10px red; border-right: solid 0px; border-bottom: solid 0px gray; border-left: solid 20px transparent; } .container{ 800px; height: 900px; background-color: #999999; margin-left: auto; margin-right: auto; } .top{ height: 20px; } .middle{ height: 40px; background-color: #333333; margin-left: -18px; } h3{ line-height: 40px; margin-left: 25px; color: #ffffff; } .coner{ border- 8px 0px 0px 18px; border-style: solid; border-color: #666666 transparent transparent transparent; margin-left: -18px; 0px; } </style> </head> <body> <a></a> <div class="container"> <div class="top"></div> <div class="middle"> <h3>汔车之家</h3> </div> <div class="left coner"></div> </div> </body> </html>
弹出确定取消框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .h{ position: absolute; margin-top: -55px; display: none; } table td{ height: 25px; } .artItLaCorner{ border- 8px 8px 8px 8px; margin:0 0 0 0; border-style: solid; border-color: #3498db transparent transparent transparent; 0px; } .show{ display: table; } </style> </head> <body> <div id="main" style="height: 400px"> <table> <tr> <td>第一行</td> <td>第一行</td> <td> <div style="background-color: red"> <div onclick="show(this);">father</div> <div class="h"> <div style="background-color: #3498db; 100px;"> <button>确定</button> <button onclick="hide(this);">取消</button> </div> <div class="artItLaCorner" style="margin-left: 17px;"></div> </div> </div> </td> </tr> <tr> <td>第二行</td> <td>第二行</td> <td> <div style="background-color: red"> <div onclick="show(this);">father</div> <div class="h"> <div style="background-color: #3498db; 100px;"> <button>确定</button> <button onclick="hide(this);">取消</button> </div> <div class="artItLaCorner" style="margin-left: 17px;"></div> </div> </div> </td> </tr> <tr> <td>第三行</td> <td>第三行</td> <td> <div style="background-color: red"> <div onclick="show(this);">father</div> <div class="h"> <div style="background-color: #3498db; 100px;"> <button>确定</button> <button onclick="hide(this);">取消</button> </div> <div class="artItLaCorner" style="margin-left: 17px;"></div> </div> </div> </td> </tr> </table> </div> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> function show(arg){ $(arg).siblings().addClass('show') } function hide(arg){ $(arg).parent().parent().removeClass('show') } </script> </body> </html>
返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style> .container{ height: 2000px;; } .back{ position: fixed; right: 0px; bottom: 0px; } .hide{ display: none; } </style> </head> <body> <div class="container"></div> <div onclick="back_top(this);" class="back hide">返回顶部</div> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> function back_top(){ $(window).scrollTop(0) } // html加载完成,自动执行函数 $(function (){ // 监听鼠标滚轮 $(window).scroll(function(){ var top = $(window).scrollTop(); if(top < 100){ $('.back').addClass('hide') }else{ $('.back').removeClass('hide') } }) }) </script> </body> </html>
全选、取消、反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选全选反选</title> </head> <body> <div id = "checklist"> <input type="checkbox">足球 <input type="checkbox">蓝球 <input type="checkbox">羽毛球 </div> <input type="button" value="全选" id="selectAll"> <input type="button" value="取消" id="unselectA"> <input type="button" value="反选" id="reverseAll"> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> $(function(){ $("#selectAll").click(function () { $("#checklist :checkbox").prop("checked",true) }); $("#unselectA").click(function(){ $("#checklist :checkbox").prop("checked",false) }); $("#reverseAll").click(function(){ $("#checklist :checkbox").each(function () { $(this).prop("checked",!$(this).prop("checked")) }) }) }) </script> </body> </html>
移动面板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动面板</title> </head> <body>
//position很重要,没有它,移动会失败 <div style=" 600px;position: absolute"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="background-color: #00415e;border: solid 1px red;height: 300px;"></div> </div> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> $(function(){ $("#title").mouseover(function () { // 鼠标指针变为move $(this).css('cursor','move'); }).mousedown(function(e){ // 监听鼠标按下时的x,y坐标 var _event = e||window.event; var old_x = _event.clientX; var old_y = _event.clientY; // 其父标签的位置 var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; // 鼠标移动后的x,y坐标 $(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 - old_x); var y = parent_top + (new_y - old_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>Title</title> <style> .left{ 20%; height:2000px; float:left; position: fixed; top:10px; bottom: 0px; background-color: #fafafa; } .right{ 80%; float:right; position: relative; } .current{ background-color:gray; color:white; } .r_top{ height:100px; background-color:red; } .c1{ height:1000px; } .c2{ height:700px; } .c3{ height:300px; } </style> </head> <body> <div class="left"> <div class="go-f1">第一章</div> <div class="go-f2">第二章</div> <div class="go-f3">第三章</div> </div> <div class="right"> <div menu="f1" class="c1">第一章内容</div> <div menu="f2" class="c2">第二章内容</div> <div menu="f3" class="c3">第三章内容</div> </div> <script src="jquery-3.1.0.js"></script> <script> $(function(){ <!--监控滚轮事件--> $(window).scroll(function(){ <!--滚轮滚动的高度--> var h_scroll = $(window).scrollTop(); <!--窗口的高度--> var h_window = $(window).height(); <!--整个文档的高度--> var h_doc = $(document).height(); <!--已经到了文档的底部--> if (h_scroll + h_window == h_doc ){ $(".left div:last").addClass("current").siblings().removeClass("current") }else{ $(".right").children().each(function(){ <!--当前章节相对顶部的高度--> var off_ths = $(this).offset().top; <!--当前章节的高度--> var h_ths = $(this).height(); var total = off_ths + h_ths; <!--滚动的高度在此章节内--> if (h_scroll >off_ths && h_scroll < total){ var tmp = '.left .go-' + $(this).attr("menu"); $(tmp).addClass("current").siblings().removeClass("current") } }) } }) }) </script> </body> </html>
ajax跨域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax跨域请求</title> </head> <body> <input type="button" value="跨域" onclick="ajax_fun();"> <!--在此处添加Ajax请求返回的节目清单--> <div class="container"></div> <script src="jquery-1.8.2.js"></script> <script> function ajax_fun(){ $.ajax({ // 电视节目清单地址 url:'http://www.jxntv.cn/data/jmd-jxtv2.html', // 请求类型默认GET,可以不写 type:'GET', // 数据类型,jsonp,跨域数据类型,必填 dataType:'jsonp', // 此处可以不填 jsonp:'callback', // jsonp数据以列表形式返回 jsonpCallback:'list', // 传入返回后的数据,以及包含成功代码的字符串 success:function(data){ $.each(data.data,function(i){ var item = data.data[i]; // 添加p标签,内容为日期,如周日 $(".container").append("<p>"+ item.week +"</p>") var all_data = item.list $.each(all_data,function(i){ // 添加a标签及换行标签 $(".container").append("<a href="+ all_data[i].link + ">" + all_data[i].name + " </a>") $(".container").append("<br>") }) }) // 错误后的返回数据处理 },error:function(data){ console.log("error..") } }) } </script> </body> </html>