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>
<!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>
<!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>
<!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>
<!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>
<!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);
<!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回调函数
<!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/
