前端基础之JQuery
写在前面
张国臂掖，以通西域；
http://jquery.cuishifeng.cn/index.html
JQuery对象： Jquery.方法 $.方法
# Jquery和$是完全一样的
JQuery的方法只能JQuery对象调用
JS的方法只能JS使用
变量命名：
JS var $variable = jQuery 对象
JQuery var variable = DOM 对象
JQuery语法：$(selector).action()
selector 选择器
action 对标签的操作
JQuery的选择器(selector)
基本选择器
层级选择器
...
$(".p1").css("color","red");
JQuery 选择器选到的是一个集合对象(一组标签)，后面的操作会循环加载；
但是JS不支持，JS必须自己写循环处理；
JQuery支持链式操作
JQuery固有属性 --> prop
input type="checked"
selected=selected
自定义的属性 --> attr
clone
参考：http://www.cnblogs.com/yuanchenqi/articles/6936986.html
一、JQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象; jQuery 对象是 jQuery 独有的.; 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action() 参考：http://jquery.cuishifeng.cn/
二、JQuery查找元素
1.选择器
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
表单选择器
$("[type='text']") ---可简写成-->$(":text")
// 注意只适用于input标签 : $("input:checked")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--首先引入Jquery库-->
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<!--<span>span</span>-->
<!--<p>ppp</p>-->
<!--<p class="p1">ppp</p>-->
<!--<p class="p1">ppp</p>-->
<!--<div id="d1">DIV</div>-->
<!--++++++++++-->
<div class="outer">
<p>p1</p>
<div class="inner">
<p>p2</p>
</div>
</div>
<p>p3</p>
<a href="">click</a>
<p>p4</p>
<div egon="xialv">11</div>
<div egon="xialv2">22</div>
<input type="checkbox">
<input type="text">
<script>
//基本选择器
// $("span")
// $("*")
// $(".p1").css("color","red");
// $("#d1").css("color","blue");
// $(".class,p,div") // 多元素选择器
//层级选择器
// 后代选择器
// $(".outer p").css("color","red");
// 子代选择器
// $(".outer>p").css("color","red");
// 毗邻选择器 (紧挨着的兄弟标签)
// $(".outer+p").css("color","red");
// 兄弟选择器 (所有的兄弟标签)
// $(".outer~p").css("color","red");
//属性选择器
// 自定义属性
$("[egon]").css("color","green");
$("[egon='xialv2']").css("color","green");
//表单选择器
$("[type='text']").css("border","1px solid red");
// 可以简写成如下形式，仅适用于input标签
$(":text").css("border","1px solid red");
</script>
</body>
</html>
2.表单属性选择器
:enabled
:disabled
:checked
:selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--<input type="checkbox" value="123">-->
<!--<input type="checkbox" value="456" checked>-->
<select id="sel">
<option value="1" selected="selected">Flowers</option>
<option value="2">Gardens</option>
<option value="3">Trees</option>
<option value="4">Fruits</option>
</select>
</form>
<script src="jquery-3.1.1.js"></script>
<script>
// $("input:checked").each(function(){
// console.log($(this).val())
// })
// console.log($("input:checked").length); // 1
console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$("option:selected").each(function () {
console.log("--> " + $(this).val());
})
$("#sel").change(function () {
console.log($(this).val());
})
</script>
</body>
</html>
3.筛选器
# 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul class="outer">
<li class="item">11</li>
<li class="item">22</li>
<li class="item">33</li>
<li class="item">44</li>
<li class="item">55</li>
<li class="item">66</li>
<li class="item">77</li>
<li class="item">88</li>
<li class="item">99</li>
<li class="item">1010</li>
</ul>
<script>
// eq 索引
// $("ul li").eq(4).css("color","red"); // 推荐
// $("ul li:eq(4)").css("color","red"); // 需要自己拼接字符串，比较麻烦
$("ul li").first().css("color","red");
$("ul li:lt(5)").css("color","red");
$("ul li:gt(5)").css("color","red");
$("ul li:even").css("color","red"); // 奇数
$("ul li:odd").css("color","red"); // 偶数
</script>
</body>
</html>
# 导航查找(查找筛选器)
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="item1">11</div>
<div class="item2">22</div>
<div class="item3">33</div>
<div class="item4">44</div>
<div class="item5">55</div>
<div class="outer">
<div class="inner">
<p id="p1">p1</p>
</div>
<p>p2</p>
</div>
<p>p3</p>
<script>
// 向下查找兄弟标签
// $(".item1").next().css("color","red");
// $(".item1").nextAll().css("color","red");
// $(".item1").nextUntil(".item5").css("color","red");
// 查找所有兄弟标签
$(".item3").siblings().css("color","red");
// 查找子代标签
// $(".outer").children().css("color","red");
$(".outer").children("p").css("color","red");
// 查找后代标签
$(".outer").find("p").css("color","red");
// 查找父标签
$("#p1").parent().css("color","red");
$("#p1").parents().css("color","red");
$("#p1").parentsUntil(".outer").css("color","red");
</script>
</body>
</html>
三、JQuery操作元素
1.JQuery事件
# 页面载入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<script>
// 对应 JS 的onload事件
// $(document).ready(function () {
// $(".p1").css({"color":"red","font-size":"50px"});
// });
// 可以简写成如下形式：
$(function () {
$(".p1").css("color","blue");
})
</script>
</head>
<body>
<p class="p1">PPP</p>
</body>
</html>
# 事件绑定
//JS事件绑定： js的标签对象.on事件=函数
//JQuery事件绑定： $().事件(函数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<button>ADD</button>
<script>
$("button").click(function () {
$("ul").append("<li>666</li>");
});
//JS事件绑定： js的标签对象.on事件=函数
//JQuery事件绑定： $().事件(函数)
// 给 li 绑定点击事件(第一种绑定方式)，点击一次就执行相关操作
// 但是 button 增加的li点击不生效
$("ul li").click(function () {
console.log($(this).text());
alert(123);
});
// 第二种绑定方式
// on方法实现事件绑定 (JQuery 3 里统一用on)
$("ul li").on("click",function () {
alert(456);
});
// 事件委派 -> ul 把事件下发到子标签li
// 这样写会避免新添加的子标签无法响应事件的bug
$("ul").on("click","li",function () {
console.log($(this).text()); // 获取li标签里写好的值
alert(789);
})
// 要注意 on 前面是什么，以及on的参数
</script>
</body>
</html>
# 关于事件委派：
$("").on(eve,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
# 事件切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.test{
width: 200px;
height: 200px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
// 第一种方式
function enter(){
console.log("enter")
}
function out(){
console.log("out")
}
$(".test").hover(enter,out)
// 第二种方式
$(".test").mouseenter(function(){
console.log("enter")
});
$(".test").mouseleave(function(){
console.log("leave")
});
</script>
</html>
2.JQuery属性操作
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
# attr 和 prop
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<script>
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// false
// ---------手动选中的时候attr()获得到没有意义的undefined-----------
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// true
console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
</script>
# 文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="c1">
<p>DIV-PPP</p>
</div>
<input type="text" id="inp" value="123">
<p class="p1" value="standby">PPP</p>
<script>
console.log($(".c1").html()); // <p>DIV-PPP</p>
console.log($(".c1").text()); // DIV-PPP
$(".c1").html("<b>LIU</b>"); // LIU
console.log($("#inp").val()); // 123
$("#inp").val(999);
console.log($("#inp").val()); // 999
// p标签没有value属性，是自己加的属性，用val()是获取不到的；可以用attr
console.log($(".p1").val());
// 设置CSS样式
$(".p1").css({"color":"red","fontSize":"35px"})
</script>
</body>
</html>
# JQuery重写 左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.item {
margin: 20px;/*上 下 左 右*/
}
.left_menu {
width: 20%;
height: 500px;
background-color: wheat;
float: left;
}
.title {
text-align: center;
background-color: #53e3a6;
line-height: 30px;
color: red;
}
.hidden {
display: none;
}
.content_menu {
width: 80%;
height: 500px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="left_menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<p>111</p>
<p>112</p>
<p>113</p>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hidden">
<p>211</p>
<p>212</p>
<p>213</p>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hidden">
<p>311</p>
<p>312</p>
<p>313</p>
</div>
</div>
</div>
<div class="content_menu"></div>
</div>
<script>
$(".title").click(function () {
// $(this).next().removeClass("hidden");
// $(this).parent().siblings().children(".con").addClass("hidden");
// JQuery 支持链式操作，所以上面两句可以简写为下面一句：
$(this).next().removeClass("hidden").parent().siblings().children(".con").addClass("hidden");
})
</script>
</body>
</html>
# JQuery 重写 表格全选、反选、取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<button>全选</button>
<button>反选</button>
<button>取消</button>
<table border="1">
<tr>
<th> </th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
$("button").click(function () {
if ("全选" == $(this).text())
{
$("input").prop("checked",true);
}
else if ("取消" == $(this).text())
{
$("input").prop("checked",false);
}
else
{
$("input").each(function () {
$(this).prop("checked",!$(this).prop("checked"));
})
}
})
</script>
</body>
</html>
# Jquery实现 tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer {
width: 60%;
height: 300px;
background-color: wheat;
margin: 100px auto;
}
.outer ul.title {
background: darkgrey;
padding: 10px;
}
.outer ul.title li {
display: inline-block;
list-style: none;
padding: 5px;
}
.hide {
display: none;
}
.outer .content {
padding: 20px;
}
.active {
background-color: red;
color: white;
border-top: 3px solid blue;
}
</style>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="title">
<li class="active" relation="c1">商品介绍</li>
<li relation="c2">商品规格</li>
<li relation="c3">售后保障</li>
</ul>
<div class="content">
<div class="item" id="c1">这里是商品介绍</div>
<div class="item hide" id="c2">这里是商品规格</div>
<div class="item hide" id="c3">售后服务在这里</div>
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(".title li").click(function () {
// 更改 title 的背景色
$(this).addClass("active");
$(this).siblings().removeClass("active");
// 更改title对应的content显示
// 通过在 li 标签里埋了一个自定义属性，对应到content里面id值
var $id_val = $(this).attr("relation");
var $sel = "#" + $id_val; // 拼接字符串
$($sel).removeClass('hide');
$($sel).siblings().addClass('hide');
})
</script>
</body>
</html>
3.JQuery each循环
<!--循环方式1: $.each(obj,func(){})-->
<script>
// JQuery遍历数组
var arr = [11,22,33,44];
$.each(arr,function (i,j) {
console.log(i); // 索引
console.log(j); // 值
// console.log(arr[i]); // 值
});
// JQuery遍历object
// 支持类似字典的数据类型，实际是object对象
var info = {"name":"egon","age":18,"gender":"male"};
$.each(info,function (i,j) {
console.log(i);
console.log(j);
})
</script>
<!--循环方式2: $("").each(func(){})-->
<body>
<p class="item">P1</p>
<p class="item">P2</p>
<p class="item">P3</p>
<p class="item">P4</p>
<script>
// JQuery遍历标签
$(".item").each(function () {
if ($(this).text()=="P3")
{
console.log($(this).text());
console.log($(this).html());
$(this).css({"color":"red","font-size":"20px"})
}
})
</script>
</body>
# each循环扩展
# 示例1
<script>
function f(){
for(var i=0;i<4;i++){
if (i==2){
return
}
console.log(i)
}
}
f(); // 输出 0 和 1
</script>
# 示例2
<script src="jquery-3.1.1.js"></script>
<script>
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
// return ; // 输出 11 22 44
// return true; // 输出 11 22 44
return false // 输出 11 22
}
console.log(v)
});
</script>
function里的return只是结束了当前的函数,并不会影响后面函数的执行；
如果你想return后下面循环函数继续执行,那么就直接写return或return true
如果你不想return后下面循环函数继续执行,那么就直接写return false
4.文档节点处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
# 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
width: 500px;
height: 300px;
background-color: wheat;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="outer">
<h4>hello node</h4>
</div>
<button class="add-node">ADD</button>
<button class="del-node">DEL</button>
<div class="box">
<p class="p1">PPP</p>
</div>
<div class="outerBox">
<div></div>
</div>
<script src="../jquery-3.1.1.js"></script>
<script>
$(".add-node").click(function () {
var $ele_p = $("<p>");
$ele_p.text("--->ppp");
// 添加子标签
$(".outer").append($ele_p);
// 等价于下面这种写法:
// $ele_p.appendTo(".outer");
// // 添加兄弟标签
// $(".outer").after($ele_p);
// 等价于下面这种写法:
// $ele_p.insertAfter(".outer");// 类似于appendTo()
//
// // 清空标签
// $(".box").empty();
//
// // 删除标签
// $(".box").remove();
//
// // 复制标签
// var $p1_clone = $(".p1").clone();
// $(".box").append($p1_clone);
})
</script>
</body>
</html>
# 节点clone示例
<body>
<div class="outer">
<div class="box">
<button class="add">+</button>
<input type="text" placeholder="请输入..." id="line">
</div>
</div>
<script>
$(".add").click(function () {
// var $new_box = $(".box").clone(); // 错误
var $new_box = $(this).parent().clone();
// $new_box.children("button").attr("class","to_remove");
// $new_box.children("button").html("-");
// 可以简写成下面这一句：
$new_box.children("button").html("-").attr("class","to_remove");
$(".outer").append($new_box);
});
// 这样写是不生效的，需要改成事件委派的形式
// $(".to_remove").click(function () {
// var $ele_del = $(this).parent();
// console.log($ele_del);
//// $ele_del.remove();
// })
// 事件委派 -> 解决新添加的标签事件绑定失败的问题
$(".outer").on("click",".to_remove",function () {
var $ele_del = $(this).parent();
console.log($ele_del);
$ele_del.remove();
})
</script>
</body>
5.动画效果
# 显示和隐藏
<body>
<p>hello egon</p>
<button id="hide_btn">隐藏</button>
<button id="show_btn">显示</button>
<button id="toggle_btn">Toggle</button>
<script src="jquery-3.1.1.js"></script>
<script>
$("#hide_btn").click(function () {
// $("p").hide();
// $("p").hide(1000);
// 添加回调函数
$("p").hide(1000,function () {
alert(123);
});
});
$("#show_btn").click(function () {
// $("p").show();
$("p").show(1000);
});
$("#toggle_btn").click(function () {
// $("p").toggle();
$("p").toggle(1000);
});
</script>
</body>
# 滑动滑出
<body>
<img src="tsl.jpg" alt="" class="tsl">
<button class="slide_out">滑出</button>
<button class="slide_in">滑出</button>
<button class="switch">切换</button>
<script src="jquery-3.1.1.js"></script>
<script>
$(".slide_out").click(function () {
$(".tsl").slideDown(1000); // 1000 ms 完成
})
$(".slide_in").click(function () {
$(".tsl").slideUp(1000);
})
$(".switch").click(function () {
$(".tsl").slideToggle(1000);
})
</script>
</body>
# 淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.item {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="item"></div>
<button class="fade_in">淡入</button>
<button class="fade_out">淡出</button>
<button class="fade_switch">切换</button>
<script>
$(".fade_in").click(function () {
$(".item").fadeIn(3000);
});
$(".fade_out").click(function () {
$(".item").fadeOut(3000);
});
$(".fade_switch").click(function () {
$(".item").fadeToggle(3000);
});
</script>
</body>
</html>
# CSS位置操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
# CSS尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
四、实用例子
http://www.cnblogs.com/yuanchenqi/articles/6936986.html
五、练习
要求
用JQuery重写table表格增肌、修改、删除操作 并适当添加左侧菜单和tab切换等样式
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.title {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
.header {
background-color: black;
height: 60px;
line-height: 60px;
overflow: hidden;
clear: both;
}
.nav-title {
border: 1px solid red;
}
.nav-title li{
display: inline-block;
}
.nav-title li a {
color: darkgray;
text-decoration: none;
display: block;
padding: 0 1.5em;
height: 60px;
font-family: '微软雅黑';
float: left;
font-size: 1.1em;
text-align: center;
transition-duration: 0.3s;
margin-left: 0;
}
.nav-title li a:hover {
color: white;
background-color: dimgrey;
}
.nav-title .active {
background-color: blue;
/*color: black;*/
border-top: 3px solid greenyellow;
}
.left-menu {
width: 12%;
height: 500px;
background-color: wheat;
float: left;
}
.left-menu .item .zone-name {
text-align: center;
background-color: #53e3a6;
line-height: 40px;
color: red;
}
.left-menu .item a {
text-decoration: none;
}
.left-menu .item a:hover {
text-decoration: underline;
font-size: 1.1em;
}
.left-menu .item .con {
text-align: center;
}
.left-menu .item .con p {
padding-top: 10px;
}
.detail {
width: 88%;
height: 500px;
background-color: white;
float: left;
}
.hidden {
display: none;
}
#table {
margin-top: 10px;
border: 1px solid blue;
margin-left: 300px;
}
.fade {
position: fixed;
top: 0; /*遮罩层占满屏*/
bottom: 0;
left: 0;
right: 0;
background-color: darkgrey;
opacity: 0.5;
}
.model {
width: 400px;
height: 200px;
background-color: white;
border-radius: 4%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px; /* 让跳出框水平+垂直居中 */
margin-top: -100px;
}
.item-info {
margin-top: 20px;
}
.item-info label {
float: left;
width: 30%;
margin-left: 50px;
}
#add {
width: 100px;
height: 50px;
background-color: green;
border-radius: 10px;
font-size: 20px;
color: white;
margin-left: 500px;
margin-top: 30px;
}
.item-btn {
margin-top: 10px;
margin-left: 100px;
}
.item-btn #confirm,#cancel,#add_item{
background-color: darkblue;
border: none;
color: white;
text-align: center;
font-size: 20px;
border-radius: 4px;
margin-left: 30px;
}
</style>
<body>
<div class="title">
<h1>ApacheTrafficServer</h1>
</div>
<div class="header">
<ul class="nav-title">
<li relation="index" class="active"><a href="#">LiveStat</a></li>
<li relation="bandwidth"><a href="#" >带宽统计</a></li>
<li relation="hit_ratio"><a href="#" >命中率统计</a></li>
<li relation="ret_code"><a href="#">响应码统计</a></li>
<li relation="connection"><a href="#">连接数统计</a></li>
<li relation="connection"><a href="#">回源链路检测</a></li>
<li relation="version"><a href="#">版本分布</a></li>
<li relation="server_status"><a href="#">服务器状态</a></li>
</ul>
</div>
<div class="content">
<div class="item" id="index">
<div class="left-menu">
<div class="item">
<div class="zone-name"><a href="#">北京电信</a></div>
<div class="con">
<a href="#"><p>beijing_ct</p></a>
<a href="#"><p>beijing2_ct</p></a>
</div>
</div>
<div class="item">
<div class="zone-name"><a href="#">北京联通</a></div>
<div class="con hidden">
<a href="#"><p>beijing_cnc</p></a>
<a href="#"><p>beijing2_cnc</p></a>
<a href="#"><p>beijing3_cnc</p></a>
</div>
</div>
<div class="item">
<div class="zone-name"><a href="#">上海电信</a></div>
<div class="con hidden">
<a href="#"><p>shanghai_ct</p></a>
<a href="#"><p>shanghai2_ct</p></a>
<a href="#"><p>shanghai3_ct</p></a>
<a href="#"><p>shanghai4_ct</p></a>
</div>
</div>
<div class="item">
<div class="zone-name"><a href="#">广州电信</a></div>
<div class="con hidden">
<a href="#"><p>guangzhou_ct</p></a>
<a href="#"><p>guangzhou2_ct</p></a>
</div>
</div>
<div class="item">
<div class="zone-name"><a href="#">武汉联通</a></div>
<div class="con hidden">
<a href="#"><p>wuhan_cnc</p></a>
<a href="#"><p>wuhan2_cnc</p></a>
<a href="#"><p>wuhan3_cnc</p></a>
</div>
</div>
</div>
<div class="detail"></div>
</div>
<div class="item hidden" id="bandwidth">
<div class="left-menu">
<div class="item">
<div class="zone-name"><a href="#">北京大区</a></div>
<div class="con">
<a href="#"><p>联通</p></a>
<a href="#"><p>电信</p></a>
<a href="#"><p>移动</p></a>
<a href="#"><p>长宽</p></a>
<a href="#"><p>铁通</p></a>
<a href="#"><p>广电</p></a>
<a href="#"><p>其他</p></a>
</div>
</div>
<div class="item">
<div class="zone-name"><a href="#">上海大区</a></div>
<div class="con hidden">
<a href="#"><p>联通</p></a>
<a href="#"><p>电信</p></a>
<a href="#"><p>移动</p></a>
<a href="#"><p>长宽</p></a>
<a href="#"><p>铁通</p></a>
<a href="#"><p>广电</p></a>
<a href="#"><p>其他</p></a>
</div>
</div>
<div class="item">
<div class="zone-name"><a href="#">广州大区</a></div>
<div class="con hidden">
<a href="#"><p>联通</p></a>
<a href="#"><p>电信</p></a>
<a href="#"><p>移动</p></a>
<a href="#"><p>长宽</p></a>
<a href="#"><p>铁通</p></a>
<a href="#"><p>广电</p></a>
<a href="#"><p>其他</p></a>
</div>
</div>
</div>
<div class="detail">
<div class="info">
<button id="add">添加</button>
<table border="1" id="table">
<tr class="tr-header">
<!--<th> </th>-->
<th>IP</th>
<th>端口</th>
<th>所属部门</th>
<th>所属IDC</th>
<th>在线状态</th>
<th>服务</th>
<th>操作</th>
</tr>
<tr class="tr-data">
<!--<td><input type="checkbox"></td>-->
<td class="ip">10.0.0.1</td>
<td class="port">22</td>
<td class="department">VCDN</td>
<td class="vidc">beijing_cnc</td>
<td class="status">在线</td>
<td class="service">视频播放</td>
<td>
<button class="update">修改</button>
<span>|</span>
<button class="delete">删除</button>
</td>
</tr>
<tr class="tr-data">
<!--<td><input type="checkbox"></td>-->
<td class="ip">10.0.0.2</td>
<td class="port">33</td>
<td class="department">Cloud-calculator</td>
<td class="vidc">beijing_ct</td>
<td class="status">在线</td>
<td class="service">云计算</td>
<td>
<button class="update">修改</button>
<span>|</span>
<button class="delete">删除</button>
</td>
</tr>
<tr class="tr-data">
<!--<td><input type="checkbox"></td>-->
<td class="ip">10.0.0.3</td>
<td class="port">44</td>
<td class="department">HCDN</td>
<td class="vidc">shanghai_ct</td>
<td class="status">在线</td>
<td class="service">CDN+P2P</td>
<td>
<button class="update">修改</button>
<span>|</span>
<button class="delete">删除</button>
</td>
</tr>
</table>
<div class="fade hidden">
</div>
<div class="model hidden">
<div class="item-info">
<label for="">IP:</label><input class="model_item item_ip" type="text"><br>
<label for="">端口:</label><input class="model_item item_port" type="text"><br>
<label for="">所属部门:</label><input class="model_item item_depart" type="text"><br>
<label for="">所属IDC:</label><input class="model_item item_idc" type="text"><br>
<label for="">在线状态:</label><input class="model_item item_online" type="text"><br>
<label for="">服务:</label><input class="model_item item_service" type="text"><br>
</div>
<div class="item-btn">
<input type="button" value="更新" id="confirm">
<input type="button" value="取消" id="cancel">
</div>
</div>
</div>
</div>
</div>
<div class="item hidden" id="hit_ratio">
<div class="left-menu">
<h1>hit_ratio</h1>
</div>
<div class="detail">
<h1>hit_ratio</h1>
</div>
</div>
<div class="item hidden" id="ret_code">
<div class="left-menu">
<h1>ret_code</h1>
</div>
<div class="detail">
<h1>ret_code</h1>
</div>
</div>
<div class="item hidden" id="connection">
<div class="left-menu">
<h1>connection</h1>
</div>
<div class="detail">
<h1>connection</h1>
</div>
</div>
<div class="item hidden" id="version">
<div class="left-menu">
<h1>version</h1>
</div>
<div class="detail">
<h1>version</h1>
</div>
</div>
<div class="item hidden" id="server_status">
<div class="left-menu">
<h1>server_status</h1>
</div>
<div class="detail">
<h1>server_status</h1>
</div>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'echarts-2.2.7/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用地图就加载map模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('index').lastElementChild);
var option = {
title : {
text: '全网卡顿情况',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['Great','Middle','Serious']
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name: 'Great',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'Middle',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'Serious',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
}
]
};
myChart.setOption(option);
}
);
</script>
<script>
// 左侧菜单栏点击事件
$(".zone-name").click(function () {
$(this).next().removeClass("hidden");
$(this).parent().siblings().children(".con").addClass("hidden");
});
// 点击左侧菜单的子标签事件
$(".con a p").click(function () {
alert($(this).text());
});
// tab切换
$(".nav-title li").click(function () {
// 更改 title 的背景色
$(this).addClass("active");
$(this).siblings().removeClass("active");
// 更改title对应的content显示
// 通过在 li 标签里埋了一个自定义属性，对应到content里面id值
var $id_val = $(this).attr("relation");
var $sel = "#" + $id_val; // 拼接字符串
$($sel).removeClass('hidden');
$($sel).siblings().addClass('hidden');
});
// 删除数据
$(".delete").click(function () {
$(this).parent().parent().remove();
});
// 取消
$("#cancel").click(function () {
$(this).parent().parent().addClass("hidden");
$(this).parent().parent().prev().addClass("hidden");
});
function empty_run() {
// 清空model里面的数据
$(".model_item").each(function(i,ele){
$(this).val("")
})
}
// 判断是否有空值
function is_Empty() {
var flag = 0;
$(".model_item").each(function (i) {
if($(this).val()){
flag++;
}
});
if (6 == flag){
return true;
}
else {
return false;
}
}
// 修改数据
$(".update").click(function () {
var confirm_option = $(this).parent().parent();
remove_hidden();
confirm_run(confirm_option);
});
// 添加一条数据
$("#add").click(function () {
empty_run();
$("#confirm").prop("value","添加");
$("#confirm").val("添加");
remove_hidden();
confirm_run();
$("#confirm").prop("value","更新");
$("#confirm").val("更新");
});
function confirm_run(option_obj) {
if($("#confirm").val() == "更新"){
// 获取当前数据并显示到修改框里
$(".model_item").each(function (k) {
$(this).val(option_obj.children().eq(k).text());
});
console.log(123);
// 这一步解绑定非常重要，不然会导致连续操作时候发生点击一次，执行多次的bug
$("#confirm").off("click");
$("#confirm").click(function () {
// alert(999);
if(option_obj){
// alert("ERR");
$(".model_item").each(function (k) {
option_obj.children().eq(k).text($(this).val());
});
add_hidden();
}
});
}
else if ($("#confirm").val() == "添加"){
console.log('11111');
// clone
var $new_item = $(".tr-data:first").clone();
// 这一步解绑定非常重要，不然会导致连续操作时候发生点击一次，执行多次的bug
$("#confirm").off("click");
$("#confirm").click(function () {
if (is_Empty()){
if ($new_item){
// alert('添加');
//获取填写标签对应的四个value
$(".model_item").each(function(i){
$new_item.find("td").eq(i).text($(this).val())
});
// 追加
$("#table").append($new_item);
add_hidden();
// 事件委派 -> 解决新添加的标签事件绑定失败的问题
$("#table").on("click", ".delete", function () {
$(this).parent().parent().remove();
});
// 事件委派 -> 解决新添加的标签事件绑定失败的问题
$("#table").on("click", ".update", function () {
$(".update").click(function () {
var confirm_option = $(this).parent().parent();
remove_hidden();
confirm_run(confirm_option);
});
})
}
}
else {
alert("不能存在空值！！！");
add_hidden();
}
});
}
else {
alert($("#confirm").val())
}
}
function remove_hidden() {
// 显示遮罩层
$(".fade").removeClass("hidden");
// 显示修改框
$(".model").removeClass("hidden");
}
function add_hidden() {
// 显示遮罩层
$(".fade").addClass("hidden");
// 显示修改框
$(".model").addClass("hidden");
}
</script>
</body>
</html>
作者：Standby — 一生热爱名山大川、草原沙漠，还有我们小郭老师！
出处：http://www.cnblogs.com/standby/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
出处：http://www.cnblogs.com/standby/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
