Python全栈开发之16、jquery
一、查找元素
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:eq(2)") $("li:even")(偶数) $("li:gt(1)")
1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
1.5 表单选择器 $("[type='text']") 简写成 $(":text") 注意只适用于input标签
2 筛选器
2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test") (检测li中的是否含有某个特定的类,有的话返回true)
2.2 查找筛选器
$("div").children(".test")(只考虑子元素,而不考虑所有的后代) $("div").find(".test") (考虑所有的后代)
$(".test").next() $(".test").nextAll() $(".test").nextUntil() (开区间)
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents()(祖先元素集合) $(".test").parentUntil()
$("div").siblings() (同辈元素不包括自己)
二、操作元素
1 属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("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()
replaceWith() remove() empty() clone()
4 事件
4.1
$(document).ready(function(){}) -----------> $(function(){}) 最好都加上这一句(所有文档执行完,但是图片没加载)
4.2
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){}) // 事件委托,这里需要重点注意下
三、jquery所有示例
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>leftMenu</title>
- <script src="../jquery-1.12.4.js"></script>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .outer {
- }
- .menu {
- width: 20%;
- background-color: blueviolet;
- float: left;
- }
- .content {
- width: 80%;
- height: 500px;
- background-color: blue;
- float: left;
- }
- .active {
- background-color: chartreuse;
- color: white;
- }
- .hide {
- display: none;
- }
- </style>
- </head>
- <body>
- <div class="outer">
- <div class="menu">
- <div class="item">
- <div itemcon="1" class="title active" >菜单一</div>
- <div class="con">
- <div>111</div>
- <div>111</div>
- <div>111</div>
- </div>
- </div>
- <div class="item">
- <div itemcon="2" class="title" >菜单二</div>
- <div class="con hide">
- <div>222</div>
- <div>222</div>
- <div>222</div>
- </div>
- </div>
- <div class="item">
- <div itemcon="3" class="title" >菜单三</div>
- <div class="con hide">
- <div>333</div>
- <div>333</div>
- <div>333</div>
- </div>
- </div>
- </div>
- <div class="content">
- <div id="1">content1</div>
- <div id="2" class="hide">content2</div>
- <div id="3" class="hide">content3</div>
- </div>
- </div>
- <script>
- $(function () {
- $(".item .title").click(function () { //绑定事件
- $(this).addClass('active').siblings().removeClass('hide');
- $(this).parent().siblings().find('.con').addClass('hide');
- $(this).parent().siblings().find('.title').removeClass('active');
- //下面操作对应点击哪项菜单显示相应内容
- var con = $(this).attr('itemcon');
- $("#" + con).removeClass('hide').siblings().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>
- </head>
- <body>
- <button id="selectAll">全选</button>
- <button id="reverseAll">反选</button>
- <button id="cancleAll">取消</button>
- <table>
- <tr>
- <td><input type="checkbox"></td>
- <td>1111</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1111</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1111</td>
- </tr>
- </table>
- <script>
- $(function () {
- $("#selectAll").click(function () {
- $("table :checkbox").prop('checked',true)
- });
- $("#cancleAll").click(function () {
- $("table :checkbox").prop('checked',false)
- });
- $("#reverseAll").click(function () {
- $("table :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>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>
- .inline {
- display: inline-block;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="section">
- <div class="button inline">
- <a id="origin">
- <button>+</button>
- </a>
- <div class="input inline">
- <input type="checkbox">
- <input type="text" value="IP">
- </div>
- </div>
- </div>
- </div>
- <script src="jquery-1.12.4.js"></script>
- <script>
- $(function () {
- $("#origin").click(function () {
- var origin = $(this).parent().parent().clone();
- origin.find('a').removeAttr('id').attr("onclick", "myremove(this);").children().text('-');
- $(".container").append(origin);
- });
- })
- function myremove(self) {
- console.log(11);
- $(self).parent().parent().remove();
- }
- </script>
- </body>
- </html>
- 内容clone添加删除
- <!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>
- 拖动面板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="jquery-1.12.4.js"></script>
- <script>
- $(function () {
- jQuery.fn.extend({
- show1:function () {
- var ret = this.text();
- return ret+ "sb";
- },
- });
- jQuery.extend({
- show2:function (arg) {
- return $(arg).text()+"sb"
- }
- });
- ret = $(".title").show1();
- console.log(ret);
- // alert(ret);
- ret2 = $.show2(".title");
- console.log(ret2);
- });
- </script>
- </head>
- <body>
- <div class="title">
- 111
- </div>
- <div class="title">
- 2222
- </div>
- </body>
- </html>
- extend以及fn.extend
- <!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>
- 回掉函数
Python全栈开发之16、jquery的更多相关文章
- 战争热诚的python全栈开发之路
从学习python开始,一直是自己摸索,但是时间不等人啊,所以自己为了节省时间,决定报个班系统学习,下面整理的文章都是自己学习后,认为重要的需要弄懂的知识点,做出链接,一方面是为了自己找的话方便,一方 ...
- python全栈开发之OS模块的总结
OS模块 1. os.name() 获取当前的系统 2.os.getcwd #获取当前的工作目录 import os cwd=os.getcwd() # dir=os.listdi ...
- Python全栈开发之MySQL(二)------navicate和python操作MySQL
一:Navicate的安装 1.什么是navicate? Navicat是一套快速.可靠并价格相宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小 ...
- Python全栈开发之14、Javascript
一.简介 前面我们学习了html和css,但是我们写的网页不能动起来,如果我们需要网页出现各种效果,那么我们就要学习一门新的语言了,那就是JavaScript,JavaScript是世界上最流行的脚本 ...
- Python全栈开发之1、输入输出与流程控制
Python简介 python是吉多·范罗苏姆发明的一种面向对象的脚本语言,可能有些人不知道面向对象和脚本具体是什么意思,但是对于一个初学者来说,现在并不需要明白.大家都知道,当下全栈工程师的概念很火 ...
- Python全栈开发之21、django
http://www.cnblogs.com/wupeiqi/articles/5237704.html http://www.cnblogs.com/wupeiqi/articles/5246483 ...
- Python全栈开发之MySQL(三)视图,存储过程触发器,函数,事务,索引
一:视图 1:什么是视图? 视图是指存储在数据库中的查询的SQL语句,具有简单.安全.逻辑数据独立性的作用及视点集中简化操作定制数据安全性的优点.视图包含一系列带有名称的列和行数据.但是,视图并不在数 ...
- python全栈开发之路
一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...
- Python全栈开发之5、模块
一.模块 1.import导入模块 #1.定义 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑),本质就是.py结尾的python文件,实现一个功能 包:python package 用 ...
随机推荐
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- Chrome浏览器F12讲解
Chrome浏览器相对于其他的浏览器而言,DevTools(开发者工具)非常强大.这节课将为大家介绍怎么利用Chrome浏览器的开发者工具进行HTTP请求分析 Chrome浏览器讲解 Chrome 开 ...
- COGS 1516. 棋盘上的车
COGS 1516. 棋盘上的车 http://www.cogs.pro/cogs/problem/problem.php?pid=1516 ☆ 输入文件:rook.in 输出文件:rook. ...
- 戴尔PowerEdge R430 机架式服务器 安装ubuntu server 14.04.1 LTS 64 位
硬件配置: 服务编号:5Z04X72 软件配置 1.Ubuntu 系统下载地址: https://certification.ubuntu.com/certification/hardware/201 ...
- Understanding the Bias-Variance Tradeoff
Understanding the Bias-Variance Tradeoff When we discuss prediction models, prediction errors can be ...
- 20155330 2016-2017-2 《Java程序设计》第七周学习总结
20155330 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 学习目标 了解Lambda语法 了解方法引用 了解Fucntional与Stream API ...
- Visual Studio 2010 SP1 在线安装后,找到缓存在本地的临时文件以便下次离线安装
由于在下载Visual Studio 2010安装程序(大约3G左右)的时候速度飞快,大约几分钟下载完毕(多线程下载工具下载),所以笔者在继续安装Visual Studio 2010 SP1的时候也选 ...
- 小白欢乐多——记ssctf的几道题目
小白欢乐多--记ssctf的几道题目 二哥说过来自乌云,回归乌云.Web400来源于此,应当回归于此,有不足的地方欢迎指出. 0x00 Web200 先不急着提web400,让我们先来看看web200 ...
- 【比赛游记】THUWC2019酱油记
往期回顾:THUSC2018酱油记 day 0 早上 7 点的动车,不知道是从哪儿到哪儿的(雾),只知道从福建到广东 233333 一个值得思考的问题:福建人会不会被广东人吃啊? 动车上玩空洞骑士,可 ...
- Linux下如何在进程中获取虚拟地址对应的物理地址【转】
转自:http://blog.csdn.net/kongkongkkk/article/details/74366200 如果让你编写一个程序,来获取虚拟地址对应的物理地址..你会试着操作MMU吗.. ...