jquery之实例应用
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;
width: 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{
width: 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{
width: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{
width: 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-width: 8px 0px 0px 18px;
border-style: solid;
border-color: #666666 transparent transparent transparent;
margin-left: -18px;
width: 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-width: 8px 8px 8px 8px;
margin:0 0 0 0;
border-style: solid;
border-color: #3498db transparent transparent transparent;
width: 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;width: 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;width: 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;width: 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="width: 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{
width:20%;
height:2000px;
float:left;
position: fixed;
top:10px;
bottom: 0px;
background-color: #fafafa;
}
.right{
width: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>
