Python自动化运维之24、JQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
一、查找元素
1、常用选择器
1.1 基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")
1.2层级选择器
$(".outer div") // 所有的后代
$(".outer>div") // 所有的子代
$(".outer+div") // 匹配所有跟在.outer后面的div
$(".outer~div") // .outer后面的所有div
1.3 基本筛选器
$("li:first") // 所有li标签中第一个标签
$("li:last") // 所有li标签中最后一个标签
$("li:even") // 所有li标签中偶数标签
$("li:odd") // 所有li标签中奇数标签
$("li:eq(2)") // 所有li标签中，索引是2的那个标签
$("li:gt(1)") // 所有li标签中，索引大于1的标签
1.4 属性选择器
$('[id="div1"]')
$('[alex="sb"]')
$("input[type='text']") 可以缩写:text
2、常用筛选器
2.1 过滤筛选器
$("li").eq(2) // 和:eq是一样的
$("li").first() // 和:first是一样的
$("li").last() // 和:last是一样的
$("ul li").hasclass("test") // 检测li中的是否含有某个特定的类名，有的话返回true
2.2 查找筛选器
$("div").children() // div中的子标签,只找儿子辈 $("div").children(".div").css("color","red")
$("div").find() // div中的子标签,后代都找 $("form").find(:text,:password) // form标签中找到:text,:password标签
$("div").next() // div标签下一个标签
$("div").nextAll() // div标签下一个同级所有标签
$("div").nextUntil() // div标签下一个同级区间内所有标签
$("div").prev() // div标签上一个标签
$("div").prevAll() // div标签上一个同级所有标签
$("div").prevUntil() // div标签上一个同级区间内所有标签
$("div").parent() // div标签的父标签
$("div").parents() // div标签的爷爷标签集合
$("div").parentsUntil() // div标签的爷爷标签区间内
$("input").siblings() // input的同辈标签
二、操作元素
1、属性操作
$(":text").val() // text输入的内容
$(".test").attr("name") // test类中name属性对应的值
$(".test").attr("name","sb") // 设置test类中name属性对应的值
$(".test").attr("checked","checked") // 设置test类中checked属性对应的值为checked
$(":checkbox").removeAttr("checked") // 删除checkbox标签中的checked属性
$(".test").prop("checked",true) // 设置checked为true
$(".test").addClass("hide") // 增加样式
2、CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) innerHeight()不包含边框， outerHeight()包含边框， 两个都包含padding height()不包含边框
3、文档处理
内部插入 $("#c1").append("<b>hello</b>")
$("p").appendTo("div")
prepend()
prependTo()
外部插入 before()
insertBefore()
after()
insertAfter()
标签内容处理
remove()
empty()
clone()
4、事件
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){}) // 事件委托，延迟绑定事件的一种方式
三、jquery所有示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.hide{
display: none;
}
.menu{
width:200px;
height:600px;
border:1px solid #dddddd;
overflow: auto;
}
.menu .item .title {
height:40px;
line-height:40px;
background-color: #2459a2;
color:white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this)">菜单一</div>
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this)">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this)">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
function ShowMenu(ths) {
// console.log(ths); //Dom中的标签对象
//$(ths) // Dom标签对象转换成jQuery标签对象(便利)
//$(ths)[0] // jQuery标签对象转成Dom标签对象 $(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script> </body>
</html>
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox全选取消反选</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll()"/>
<input type="button" value="取消" onclick="CancleAll()"/>
<input type="button" value="反选" onclick="ReverseAll()"/> <table border="1">
<thead>
<tr>
<th>序号</th>
<th>IP</th>
<th>Port</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.3</td>
<td>22</td>
</tr>
</tbody>
</table> <script src="jquery-1.12.4.js"></script>
<script>
function CheckAll() {
$('#tb input[type="checkbox"]').prop('checked',true);
}
function CancleAll() {
$('#tb input[type="checkbox"]').prop('checked',false);
}
function ReverseAll() {
$('#tb input[type="checkbox"]').each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
</script> </body>
</html>
checkbox全选取消反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery clone</title>
</head>
<body>
<div>
<p>
<a onclick="Add(this)">+</a>
<input type="text"/>
</p>
</div> <script src="jquery-1.12.4.js"></script>
<script>
function Add(ths) {
var p = $(ths).parent().clone(); p.find('a').text('-');
p.find('a').attr('onclick','Remove(this)'); $(ths).parent().parent().append(p);
} function Remove(ths) {
$(ths).parent().remove();
}
</script>
</body>
</html>
jquery clone
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.hide{
display: none;
}
.menu{
width:200px;
height:600px;
border:1px solid #dddddd;
overflow: auto;
}
.menu .item .title {
height:40px;
line-height:40px;
background-color: #2459a2;
color:white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$('.item .title').click(function () {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
});
</script> </body>
</html>
左侧菜单(jquery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟绑定事件</title>
<style>
ul li{
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" value="点我" onclick="Add();"/>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>123</li>
</ul> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// $('li').click(function () {
// alert($(this).text());
// });
$('ul').delegate('li','click',function () {
alert($(this).text());
});
}) function Add() {
var tag = document.createElement('li');
tag.innerText = '666';
$('ul').append(tag);
}
</script> </body>
</html>
延迟绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单验证</title>
<style>
.item{
width:250px;
height:60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top:22px;
left:0;
font-size:10px;
background-color: indianred;
color: white;
display: inline-block;
width:200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
</div>
<!--<input type="submit" value="提交" onclick="return CheckValid();"/>-->
<input type="submit" value="提交"/>
</form>
</div> <script src="jquery-1.12.4.js"></script>
<script>
// 第一种方式：DOM方式绑定
// function CheckValid() {
// 找到form标签下的所有需要验证的标签
// $('form .c1')
// $('form input[type="text"],input[type="password"])
// 循环所有需要验证的标签，获取内容
// $('form .item span').remove();
// var flag = true;
//
// $('form .c1').each(function () {
// // 每一个元素执行匿名函数
// // this
// console.log(this,$(this)[0]);
// var val = $(this).val();
// if(val.length == 0){
// var laber = $(this).attr('label');
// var tag = document.createElement('span');
// tag.innerText = laber + "不能为空";
// $(this).after(tag);
// flag = false;
// }
// });
// return flag;
// } // 第二种：JQuery绑定(一般使用这种)
$(function () {
BindCheckValid();
}); function BindCheckValid() {
$('form :submit').click(function () {
var flag = true;
$('form .item span').remove();
$('form .c1').each(function () {
// 每一个元素执行匿名函数
// this
console.log(this,$(this));
var val = $(this).val();
if(val.length == 0){
var laber = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = laber + "不能为空";
$(this).after(tag);
flag = false;
return false;
}
});
return flag;
});
} </script>
</body>
</html>
form表单验证(dom|jquery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 循环</title>
</head>
<body> <script src="jquery-1.12.4.js"></script>
<script>
function BindCheckValid(){
$.each([11,22,33,44],function (k, v) {
if(y == 22){
// return; //相当于continue
// return false; //相当于break
return false;
}
console.log(v);
})
}
</script>
</body>
</html>
jquery 循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
background-color: cornflowerblue;
width: 100%;
}
.content{
background-color: aqua;
min-height: 1000px;
width: 800px;
margin: 0 auto;
}
.retTop{
width: 35px;
height: 35px;
position: fixed;
right: 0;
bottom: 0;
background-color: chartreuse;
}
.hide{
display: none;
}
</style>
<script src="jquery-1.12.4.js"></script> </head>
<body>
<div class="container">
<div class="content"></div>
<div class="retTop">
返回顶部
</div>
</div> <script> $(function () {
window.onscroll = function () {
var scrollHeight = $(window).scrollTop();
if(scrollHeight<100){
$(".retTop").addClass('hide');
}else {
$(".retTop").removeClass('hide')
}
}; $(".retTop").click(function () {
$(window).scrollTop(0);
})
})
</script>
</body>
</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
*{
margin: 0;
border: 0;
}
.header{
width: 100%;
height: 50px;
background-color: black;
}
.container{
width: 960px;
margin: 0 auto;
/*position: relative;*/
}
.leftmenu{
width: 250px;
min-height: 400px;
background-color: chartreuse;
position: absolute; // 想下为什么不能用relative
left: 200px;
top: 50px;
}
.content{
width: 600px;
min-height: 900px;
background-color: cornflowerblue;
position: absolute;
left: 382px;
top:50px;
}
ul{
list-style: none;
}
.content div{
height: 800px;
border: 1px solid black;
}
.fixed{
position: fixed;
top:0;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="leftmenu">
<ul>
<li id="item1">第一章</li>
<li id="item2">第二章</li>
<li id="item3">第三章</li>
</ul>
</div>
<div class="content">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3" style="height: 100px">333</div>
</div>
</div> <script>
$(function () {
window.onscroll = function () {
var scrollHeight = $(window).scrollTop(); if(scrollHeight>50){
$(".leftmenu").addClass('fixed');
}else {
$(".leftmenu").removeClass('fixed');
} $('.content').children().each(function () {
if(scrollHeight>$(this).offset().top){
var iditem = $(this).attr("class");
console.log($(this));
$("#"+iditem).css("fontSize","40px").siblings().css("fontSize","12px");
}
console.log(scrollHeight,$(this).offset().top,$(this).outerHeight(),$(window).height());
}); if(scrollHeight+$(window).height() ==$(".content div:last-child").offset().top +$(".content div:last-child").outerHeight()){
$("ul li:last-child").css("fontSize","40px").siblings().css("fontSize","12px");
}
}; })
</script>
</body>
</html>
滚动菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.outer{
position: relative;
width: 310px;
height: 310px;
margin: 20px auto;
}
.image{
position: relative;
}
.image img{
height: 310px;
width: 310px;
position: absolute;
border: dashed blue 1px;
top: 0;
left: 0;
}
.num{
position: absolute;
bottom:0;
left:100px;
}
.num li{
display: inline-block;
height: 20px;
width: 20px;
/*background-color: #3c763d;*/
border-radius: 50%;
text-align: center;
line-height: 20px;
cursor: pointer; } .position{
width: 310px;
position: absolute;
top:50%;
margin-top: -15px;
left: 0;
} .position button{
display: block;
width: 30px;
height: 30px;
background-color:burlywood ;
opacity: 0.6;
border: 0; display: none;
} .outer:hover .position button{
display: block;
}
.left{
float: left;
}
.right{
float: right;
}
.active{
background-color: black;
}
</style> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(".num li").first().addClass("active");
console.log( $(".num li"));
$(".num li").mouseover(function () {
console.log(this);
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i = index;
$(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
}); var i = 0;
function autoMove() {
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
i++;
if(i==5){
i = 0;
}
} var t1 = setInterval(autoMove,1000); $(".outer").hover(function () {
clearInterval(t1);
},function () {
t1 = setInterval(autoMove,1000);
}); $(".right").click(function () {
autoMove();
}); $(".left").click(function () {
i--;
if(i==-1){
i = 4;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
})
</script>
</head>
<body>
<div class="outer">
<div class="image">
<img src="pic/a.png">
<img src="pic/1.jpeg">
<img src="pic/2.jpeg">
<img src="pic/3.jpeg">
<img src="pic/4.jpeg">
</div>
<div class="num">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="position">
<button class="left"> < </button>
<button class="right"> > </button>
</div>
</div>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.outer{
position: relative;
width: 310px;
height: 310px;
margin: 20px auto;
}
.image{
position: relative;
}
.image img{
height: 310px;
width: 310px;
position: absolute;
border: dashed blue 1px;
top: 0;
left: 0;
}
.num{
position: absolute;
bottom:0;
left:100px;
}
.num li{
display: inline-block;
height: 20px;
width: 20px;
/*background-color: #3c763d;*/
border-radius: 50%;
text-align: center;
line-height: 20px;
cursor: pointer; } .position{
width: 310px;
position: absolute;
top:50%;
margin-top: -15px;
left: 0;
} .position button{
display: block;
width: 30px;
height: 30px;
background-color:burlywood ;
opacity: 0.6;
border: 0; display: none;
} .outer:hover .position button{
display: block;
}
.left{
float: left;
}
.right{
float: right;
}
.active{
background-color: black;
}
</style> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(".num li").first().addClass("active");
console.log( $(".num li"));
$(".num li").mouseover(function () {
console.log(this);
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i = index;
$(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
}); var i = 0;
function autoMove() {
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
i++;
if(i==5){
i = 0;
}
} var t1 = setInterval(autoMove,1000); $(".outer").hover(function () {
clearInterval(t1);
},function () {
t1 = setInterval(autoMove,1000);
}); $(".right").click(function () {
autoMove();
}); $(".left").click(function () {
i--;
if(i==-1){
i = 4;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
})
</script>
</head>
<body>
<div class="outer">
<div class="image">
<img src="pic/a.png">
<img src="pic/1.jpeg">
<img src="pic/2.jpeg">
<img src="pic/3.jpeg">
<img src="pic/4.jpeg">
</div>
<div class="num">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="position">
<button class="left"> < </button>
<button class="right"> > </button>
</div>
</div>
</body>
</html>
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
margin: 0;
padding: 0;
} .hide {
display: none;
} .header-nav {
height: 39px;
background: #c9033b;
} .header-nav .bg {
background: #c9033b;
} .header-nav .nav-allgoods .menuEvent {
display: block;
height: 39px;
line-height: 39px;
text-decoration: none;
color: #fff;
text-align: center;
font-weight: bold;
font-family: 微软雅黑;
color: #fff;
width: 100px;
} .header-nav .nav-allgoods .menuEvent .catName {
height: 39px;
line-height: 39px;
font-size: 15px;
} .header-nav .nav-allmenu a {
display: inline-block;
height: 39px;
vertical-align: top;
padding: 0 15px;
text-decoration: none;
color: #fff;
float: left;
} .header-menu a {
color: #656565;
} .header-menu .menu-catagory {
position: absolute;
background-color: #fff;
border-left: 1px solid #fff;
height: 316px;
width: 230px;
z-index: 4;
float: left;
} .header-menu .menu-catagory .catagory {
border-left: 4px solid #fff;
height: 104px;
border-bottom: solid 1px #eaeaea;
} .header-menu .menu-catagory .catagory:hover {
height: 102px;
border-left: 4px solid #c9033b;
border-bottom: solid 1px #bcbcbc;
border-top: solid 1px #bcbcbc;
} .header-menu .menu-content .item {
margin-left: 230px;
position: absolute;
background-color: white;
height: 314px;
width: 500px;
z-index: 4;
float: left;
border: solid 1px #bcbcbc;
border-left: 0;
box-shadow: 1px 1px 5px #999;
} </style> <body> <div class="pg-header">
<div class="header-nav">
<div class="container narrow bg">
<div class="nav-allgoods left">
<a id="all_menu_catagory" href="#" class="menuEvent">
<strong class="catName">全部商品分类<>
<span class="arrow" style="display: inline-block;vertical-align: top;"></span>
</a>
</div>
</div>
</div>
<div class="header-menu">
<div class="container narrow hide">
<div id="nav_all_menu" class="menu-catagory">
<div class="catagory" float-content="one">
<div class="title">家电</div>
<div class="body">
<a href="#">空调</a>
</div>
</div>
<div class="catagory" float-content="two">
<div class="title">床上用品</div>
<div class="body">
<a href="http://www.baidu.com">床单</a>
</div>
</div>
<div class="catagory" float-content="three">
<div class="title">水果</div>
<div class="body">
<a href="#">橘子</a>
</div>
</div>
</div> <div id="nav_all_content" class="menu-content">
<div class="item hide" float-id="one"> <dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
</dd>
<>
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span> </dd>
<>
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#">菜板</a> </span>
</dd>
<>
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="碗">碗</a> </span> </dd>
<> </div>
<div class="item hide" float-id="two">
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="">角阀</a> </span> </dd>
<>
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="角阀">角阀</a> </span> </dd>
<>
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="角阀">角阀</a> </span> </dd>
<> </div>
<div class="item hide" float-id="three">
<dl>
<dt><a href="#" class="red">厨房用品3</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span> </dd>
<>
<dl>
<dt><a href="#" class="red">厨房用品3</a></dt>
<dd>
<span>| <a href="http://www.meilele.com/category-jiaofa/ " target="_blank" title="角阀">角阀3</a> </span> </dd>
<>
</div>
</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
init("#all_menu_catagory","#nav_all_menu","#nav_all_content");
}); function init(mFirst,mSecond,mThird) {
$(mFirst).mouseover(function () {
$(mSecond).parent().removeClass('hide');
});
$(mFirst).mouseout(function () {
$(mSecond).parent().addClass('hide');
}); $(mSecond).children().mouseover(function () {
$(mSecond).parent().removeClass('hide');
var floatvar = $(this).attr("float-content");
var floatstr = "[float-id=" + floatvar + "]";
$(mThird).find(floatstr).removeClass('hide').siblings().addClass('hide')
}); $(mSecond).mouseout(function () {
$(this).parent().addClass('hide');
$(mThird).children().addClass('hide');
}); $(mThird).children().mouseover(function () {
// $(mSecond).parent().removeClass('hide');
$(this).removeClass('hide')
}); $(mThird).children().mouseout(function () {
// $(mSecond).parent().addClass('hide');
$(this).addClass('hide')
})
}
</script>
</body>
</html>
商城三层菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
table {
margin-top: 40px;
} table, td {
border: 1px solid black;
} a {
display: inline-block;
background-color: #bce8f1;
width: 100px;
height: 21px;
text-decoration: none;
cursor: pointer;
} .red {
background-color: red;
} </style>
</head>
<body>
<button id="checkAll">全选</button>
<button id="checkReverse">反选</button>
<button id="checkCancle">取消</button>
<a id="edit_mode">进入编辑模式</a> <table >
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td edit="true">v1</td> <td>88</td>
<td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td edit="true">v1</td> <td>88</td>
<td edit="true" edit_type="select" sel-val="2" global-key="STATUS">下线</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td edit="true">v1</td> <td>88</td>
<td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
</tr>
</tbody>
</table>
<script>
$(function () {
main('#edit_mode','#tb');
}); STATUS = [
{'id': 1, 'value': "在线"},
{'id': 2, 'value': "下线"}
]; window.globalCtrlKeyPress = false; function main(edit,tb) {
bindSingleCheck(edit,tb);
bindEditMode(edit,tb);
bindCheckAll(edit,tb);
bindCheckCancle(edit,tb);
bindCheckReverse(edit,tb);
} function bindSingleCheck(edit,tb) {
$(tb).find(":checkbox").click(function () {
var $tr = $(this).parent().parent();
if($(edit).hasClass('editing')){
if($(this).prop('checked')){
RowIntoEdit($tr);
}else {
RowOutEdit($tr);
}
}
})
} function bindEditMode(edit,tb) {
$(edit).click(function () {
if($(this).hasClass('editing')){
$(this).removeClass('editing red');
$(tb).children().each(function () {
var check_box = $(this).children().find(":checkbox");
if(check_box.prop('checked')){
RowOutEdit($(this));
}else { }
});
}else {
$(this).addClass('editing red');
$(tb).children().each(function () {
var check_box = $(this).children().find(":checkbox");
if(check_box.prop('checked')){
RowIntoEdit($(this));
}else { }
})
}
});
} function bindCheckAll(edit,tb) {
$("#checkAll").click(function () {
if($(edit).hasClass("editing")){
$(tb).children().each(function () {
var check_box = $(this).children().find(":checkbox");
if(check_box.prop('checked')){ }else {
check_box.prop('checked',true);
RowIntoEdit($(this));
}
})
}else {
$(tb).find(':checkbox').prop('checked', true);
}
});
} function bindCheckReverse(edit,tb) {
$("#checkReverse").click(function () {
if($(edit).hasClass("editing")){
$(tb).children().each(function () {
var check_box = $(this).children().find(":checkbox");
if(check_box.prop('checked')){
check_box.prop('checked',false);
RowOutEdit($(this));
}else {
check_box.prop('checked',true);
RowIntoEdit($(this));
}
})
}else {
$(tb).children().each(function(){
var check_box = $(this).children().find(':checkbox');
if(check_box.prop('checked')){
check_box.prop('checked',false);
}else{
check_box.prop('checked',true);
}
});
}
});
} function bindCheckCancle(edit,tb) {
$("#checkCancle").click(function () {
if($(edit).hasClass("editing")){
$(tb).children().each(function () {
var check_box = $(this).children().find(":checkbox");
if(check_box.prop('checked')){
check_box.prop('checked',false);
RowOutEdit($(this));
}else { }
})
}else {
$(tb).find(':checkbox').prop('checked',false);
}
});
} function RowIntoEdit($tr) {
$tr.children().each(function () {
if($(this).attr('edit') == 'true'){
if($(this).attr('edit_type') == "select"){
var select_val = $(this).attr('sel-val');
var global_key = $(this).attr('global-key');
var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
$(this).html(selelct_tag);
}else {
var orgin_value = $(this).text();
var temp = "<input value='"+ orgin_value+"' />";
$(this).html(temp);
}
}
})
} function RowOutEdit($tr) {
$tr.children().each(function () {
if($(this).attr('edit')=='true'){
if($(this).attr('edit_type') == "select"){
var new_val = $(this).children(':first').val();
var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
$(this).attr('sel-val', new_val).text(new_text);
}else {
var orgin_value = $(this).children().first().val();
$(this).text(orgin_value);
}
}
})
} function CreateSelect(attrs, csss, option_dict, item_key, item_value, current_val) {
var sel = document.createElement('select'); //设置属性
$.each(attrs,function (k,v) {
$(sel).attr(k,v);
}); //设置样式 这里为空，以后可以设置
$.each(csss,function (k,v) {
$(sel).css(k,v);
}); $.each(option_dict,function (k,v) {
var opt = document.createElement('option');
var sel_text = v[item_value];
var sel_value = v[item_key]; if(current_val == sel_value){
$(opt).text(sel_text).attr('value',sel_value).attr('selected','true').appendTo($(sel));
}else {
$(opt).text(sel_text).attr('value',sel_value).appendTo($(sel));
}
});
return sel;
} window.onkeydown = function (e) {
if(e && e.keyCode == 17){
window.globalCtrlKeyPress = true;
}
}; window.onkeyup = function (e) {
if(e && e.keyCode == 17){
window.globalCtrlKeyPress = false;
}
}; function MultiSelect(ths) {
if(window.globalCtrlKeyPress == true){
var index = $(ths).parent().index();
var value = $(ths).val();
console.log(value,index);
$(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
$(this).parent().parent().children().eq(index).children().val(value);
});
}
} </script>
</body>
</html>
编辑框(需要重点掌握)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
position: relative;
}
.small-box{
border: 5px solid red;
height: 350px;
width: 350px;
position: relative;
}
.big-box{
position: absolute;
width: 400px;
height: 400px;
left:360px;
top:0;
border: 5px solid black;
overflow: hidden;
}
.hide{
display: none;
}
.small-box .float{
width: 175px;
height: 175px;
background-color: grey;
position: absolute;
opacity: 0.8;
}
.big-box img{
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="small-box">
<div class="float hide"></div>
<img src="pic/small.jpg">
</div> <div class="big-box hide">
<img src="pic/big.jpg">
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(".small-box").mouseover(function () {
$(this).children('.float').removeClass('hide').parent().next().removeClass('hide');
}); $(".small-box").mouseout(function () {
$(this).children('.float').addClass('hide').parent().next().addClass('hide');
}); $(".float").mousemove( function (e) {
var _event = e || window.event; var small_box_width = $(".small-box").width();
var small_box_height = $(".small-box").height(); var float_height = $('.float').height();
var float_width = $(".float").width(); var float_height_half = float_height/2;
var float_width_half = float_width/2; var float_right = _event.clientX- float_width_half;
var float_top = _event.clientY - float_height_half; if(float_right<0){
float_right = 0;
}else if(float_right>small_box_width-float_width){
float_right=small_box_width-float_width
}
if(float_top<0){
float_top=0;
}else if(float_top>small_box_height-float_height){
float_top=small_box_height-float_height
} $(".float").css({"left":float_right+"px","top":float_top+"px"}); var percentX=($(".big-box img").width()-$(".big-box").width())/ (small_box_width-float_width);
var percentY=($(".big-box img").height()-$(".big-box").height())/(small_box_height-float_height); $(".big-box img").css({"left":-percentX*float_right+"px","top":-percentY*float_top+"px"});
}) })
</script>
</body>
</html>
放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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-1.12.4.js"></script>
<script>
$("#title").mouseover(function () {
$(this).css('cursor','move');
}).mousedown(function (e) {
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; $(this).mousemove(function (e) {
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = new_x - old_x + parent_left;
var y = new_y - old_y + parent_top; $(this).parent().css({"left":x+"px","top":y+"px"})
}).mouseup(function () {
$(this).unbind('mousemove');
})
})
</script>
</body>
</html>
拖动面板
四、jquery扩展
extend以及fn.extend
实例：
/**
* Created by alex on 2016/8/28.
*/
(function(jq){ function ErrorMessage(inp,message){
var tag = document.createElement('span');
tag.innerText = message;
inp.after(tag);
} jq.extend({
valid:function(form){
// #form1 $('#form1')
jq(form).find(':submit').click(function(){ jq(form).find('.item span').remove(); var flag = true;
jq(form).find(':text,:password').each(function(){ var require = $(this).attr('require');
if(require){
var val = $(this).val(); if(val.length<=0){
var label = $(this).attr('label');
ErrorMessage($(this),label + "不能为空");
flag = false;
return false;
} var minLen = $(this).attr('min-len');
if(minLen){
var minLenInt = parseInt(minLen);
if(val.length<minLenInt){
var label = $(this).attr('label');
ErrorMessage($(this),label + "长度最小为"+ minLen);
flag = false;
return false;
}
//json.stringify()
//JSON.parse()
} var phone = $(this).attr('phone');
if(phone){
// 用户输入内容是否是手机格式
var phoneReg = /^1[3|5|8]\d{9}$/;
if(!phoneReg.test(val)){
var label = $(this).attr('label');
ErrorMessage($(this),label + "格式错误");
flag = false;
return false;
}
} // 1、html自定义标签属性
// 增加验证规则+错误提示 }
// 每一个元素执行次匿名函数
// this
//console.log(this,$(this));
/*
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
return false;
}
*/
}); return flag;
});
}
});
})(jQuery);
将自己写的js封装到jquery中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery扩展 form验证</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body> <div>
<form id="form1">
<div class="item">
<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码" require="true"/>
</div>
<div class="item">
<input class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
</div>
<input type="submit" value="提交" />
</form> </div> <script src="jquery-1.12.4.js"></script>
<script src="commons.js"></script>
<script>
$(function(){
$.valid('#form1');
}); </script>
</body>
</html>
jquery扩展 form验证
五、jquery回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<script> $(document).ready(function () {
$("button").click(function () {
$("p").hide(1000,call_back()); })
});
function call_back() {
alert('sss')
}
</script>
</head>
<body>
<button>隐藏</button>
<p>hello</p> </body>
</html>
回调函数
图像插件：http://fontawesome.io/
jquery插件：http://www.jeasyui.net/
jquery插件：http://jqueryui.com/
bootstrap：http://www.bootcss.com/
轮播插件：http://bxslider.com/
延迟加载插件：http://www.w3cways.com/1765.html 实例
AngularJs：https://angular.cn/
Python自动化运维之24、JQuery的更多相关文章
- 【目录】Python自动化运维
目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...
- python自动化运维篇
1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...
- Day1 老男孩python自动化运维课程学习笔记
2017年1月7日老男孩python自动化运维课程正式开课 第一天学习内容: 上午 1.python语言的基本介绍 python语言是一门解释型的语言,与1989年的圣诞节期间,吉多·范罗苏姆为了在阿 ...
- python自动化运维学习第一天--day1
学习python自动化运维第一天自己总结的作业 所使用到知识:json模块,用于数据转化sys.exit 用于中断循环退出程序字符串格式化.format字典.文件打开读写with open(file, ...
- Python自动化运维的职业发展道路（暂定）
Python职业发展之路 Python自动化运维工程 Python基础 Linux Shell Fabric Ansible Playbook Zabbix Saltstack Puppet Dock ...
- Python自动化运维：技术与最佳实践 PDF高清完整版|网盘下载内附地址提取码|
内容简介: <Python自动化运维:技术与最佳实践>一书在中国运维领域将有“划时代”的重要意义:一方面,这是国内第一本从纵.深和实践角度探讨Python在运维领域应用的著作:一方面本书的 ...
- Python自动化运维 技术与最佳实践PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书
点击获取提取码:7bl4 一.内容简介 <python自动化运维:技术与最佳实践>一书在中国运维领域将有"划时代"的重要意义:一方面,这是国内第一本从纵.深和实践角度探 ...
- python自动化运维之CMDB篇-大米哥
python自动化运维之CMDB篇 视频地址:复制这段内容后打开百度网盘手机App,操作更方便哦 链接:https://pan.baidu.com/s/1Oj_sglTi2P1CMjfMkYKwCQ ...
- python自动化运维之路~DAY5
python自动化运维之路~DAY5 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...
随机推荐
- poj 3620 Avoid The Lakes【简单dfs】
Avoid The Lakes Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6795 Accepted: 3622 D ...
- (转)Linux中的文件描述符
本文转自:http://blog.csdn.net/cywosp/article/details/38965239 作者:cywosp 1. 概述 在Linux系统中一切皆可以看成是文件,文件又可分为 ...
- android 加载图片防止内存溢出
图片资源: private int fore[]; private int back[]; fore = new int[]{R.drawable.a0, R.drawable.a1, R.drawa ...
- gitlab一键安装
参考 https://about.gitlab.com/downloads/
- sqlserver 数据行统计，秒查语句
1.传统统计方式 ...
- 实现 Castor 数据绑定--转
第 1 部分: 安装和设置 Castor 数据绑定风靡一时 在 XML 新闻组.邮件列表和网站的讨论论坛中(在 参考资料 中可以找到这些内容的链接),最常见的一个主题就是数据绑定.Java 和 XML ...
- Java——（十）网络编程
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 一.Java的基本网络支持 Java为网络支持提供了java.net包,该包下的URL和URLC ...
- linux系统下安装wget。
我们先安装linux系统比如centos7.1里面有的就没有wget下载工具.wget这个命令就不可以使用. 我们使用 yum -y install wget yum install perl 会出现 ...
- Git CMD - pull: Fetch from and integrate with another repository or a local branch
命令格式 git pull [options] [<repository> [<refspec>…]] 命令参数 -q, --quiet 安静模式. -v, --verbos ...
- Mac下载并编译Google安卓AOSP项目代码
Mac下载并编译Google安卓AOSP项目代码 参考 https://source.android.com/source/index.html 这两天用Mac下载安卓AOSP源码,且把遇到的问题记下 ...