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 用 ...
随机推荐
- java基础-迭代器（Iterator）与增强for循环
java基础-迭代器(Iterator)与增强for循环 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Iterator迭代器概述 Java中提供了很多个集合,它们在存储元素时 ...
- ip地址、子网掩码、DNS的关系与区别
首先ip地址可能表示内网或者外网地址: 内网也就是局域网,最直观的就是像网吧,公司内部的电脑用交换机,HUB,路由连起来的.再通过光钎.猫接入INTERNET的. 外网就像你家里的一台电脑.用猫拨号上 ...
- SVN不能提交代码
Error: Some resources were not reverted. Attempted to lock an already-locked dir svn: Working copy ' ...
- Docker查看映射卷报错
问题描述: 当查看Docker容器的映射卷时出现报错信息,如下: [root@kazihuo ~]# docker inspect -f {{.Volumes}} volume #volume指容 ...
- hbase系列之：独立模式部署hbase
一.概述 在上一篇博文中,我简要介绍了hbase的部分基础概念,如果想初步了解hbase的理论,可以参看上一篇博文 hbase系列之:初识hbase .本博文主要介绍独立模式下部署hbase及hbas ...
- JavaScript 运行机制之执行顺序详解
JavaScript是一种描述型脚本语言,它不同于 Java 或 C# 等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解 JavaScript 语言的运行机制 ...
- vue-awesome-swiper
本文地址:https://www.cnblogs.com/veinyin/p/9370113.html 聊起轮播就会想到 swiper,作为一个强大的轮播插件,当然有人为 Vue 进行二次封装,那就 ...
- 在mac环境下用QT使用OpenGL，glut，glfw
只需要在新建工程中.pro文件中添加: #opengl glut LIBS+= -framework opengl -framework glut 就可以使用glut了. 继续添加: ##glfw L ...
- 【NOI题解】【bzoj题解】NOI2008 bzoj1063 道路设计
@ACMLCZH学长出的毒瘤题T3.再也不是“善良”的出题人了. 题意:bzoj. 题解: 经典的树形DP题目,屡见不鲜了,然而我还是没有写出来. 这一类的题目有很多,例如这里的C题. 主要套路是把对 ...
- 浅析Postgres中的并发控制(Concurrency Control)与事务特性(上)
转载:https://www.cnblogs.com/flying-tiger/p/9567213.html#4121483#undefined PostgreSQL为开发者提供了一组丰富的工具来管理 ...