Python开发15——jQuery
jQuery是什么？
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
什么是jQuery对象？
1、说明：jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。乱使用会报错。
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$。
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象
$("#msg").html(); $("#msg")[0].innerHTML
2、 jquery的基础语法：$(selector).action()
参考：http://jquery.cuishifeng.cn/
寻找元素(选择器和筛选器)
一、选择器
1、基本选择器
$("*") //通用选择器
$("#id") //id选择器
$(".class") //类选择器
$("element") //标签选择器
$(".class,p,div") //多元素选择器
2、层级选择器
$(".outer div") //后代元素选择器
$(".outer>div") //子代元素选择器
$(".outer+div") //毗邻元素选择器：匹配所有跟在.outer后的div元素
$(".outer~div") //普通兄弟选择器：匹配所有与.outer同辈的div元素
3、属性选择器
$('[id="div1"]') $('["alex="ss"][id]')
4、表单选择器
$("[type='text']")----->$(":text")
注意：
只适用于input标签 : $("input:checked")
5、表单属性选择器
:enabled :disabled :checked :selected
示例：
<body>
<form>
<input type="checkbox" value="123" checked>
<input type="checkbox" value="456" checked>
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3" selected="selected">Trees</option>
<option value="3" selected="selected">Trees</option>
</select>
</form>
<script src="jquery.min.js"></script>
<script>
// console.log($("input:checked").length); // 2
// console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$("input:checked").each(function(){
console.log($(this).val())
})
</script>
</body>
二、筛选器
1、基本筛选器
①
:first //获取匹配的第一个元素
示例：$("li:first")
:last //获取匹配的最后一个元素
示例：$('li:last')
:not(selector) // 去除所有与给定选择器匹配的元素
示例：$("input:not(:checked)") //查找所有未选中的 input 元素
:even //匹配所有索引值为偶数的元素，从 0 开始计数
示例：$("tr:even") //查找表格的1、3、5...行（即索引值0、2、4...）
:odd //匹配所有索引值为奇数的元素，从 0 开始计数
示例：$("tr:odd") //查找表格的2、4、6行（即索引值1、3、5...）
:eq(index) //匹配一个给定索引值的元素，index从 0 开始计数
示例：$("tr:eq(1)") //查找第二行
:gt(index) //匹配所有大于给定索引值的元素，index从 0 开始计数
示例：$("tr:gt(0)") //查找第二第三行，即索引值是1和2，也就是比0大
:lt(index) //匹配所有小于给定索引值的元素
示例：$("tr:lt(2)") //查找第一第二行，即索引值是0和1，也就是比2小
:header //匹配如 h1, h2, h3之类的标题元素
示例：$(":header").css("background", "#EEE");
:lang(language) //选择指定语言的所有元素
示例：选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>）
:root //选择该文档的根元素
说明：在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素
示例：$(":root").css("background-color","yellow"); //设置<html>背景颜色为黄色
②:animated //匹配所有正在执行动画效果的元素
<body>
<button id="run">Run</button><div></div>
</body>
<script>
//jQuery 代码：对不在执行动画效果的元素执行一个动画特效
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
</script>
③:focus //匹配当前获取焦点的元素
<body>
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
</body>
<script>
//jQuery 代码：对不在执行动画效果的元素执行一个动画特效
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});
</script>
2、过滤筛选器
eq(index) //获取匹配的第index个jQuery对象，返回jQuery对象，当index>=0时为正向选取，如0代表第一个，1代表第二个。当index<0时为反向选取，比如-1为倒数第一个
示例：$("p").eq(1) //获取匹配的第二个元素
$("p").eq(-2) //获取匹配的倒数第二个元素
first() //获取匹配的第一个元素
示例：$('li').first()
last() //获取匹配的最后一个元素
示例：$('li').last()
hasClass(class) //同 is("." + class)。检查当前的元素是否含有某个特定的类，如果有，则返回true。
示例：$("div").hasClass("protected") //判断div标签是否有类
is(expr|obj|ele|fn) //根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
示例：$("input[type='checkbox']").parent().is("form") //检测是否有匹配元素
filter(expr|obj|ele|fn) //筛选出与指定表达式匹配的元素集合
示例：$("p").filter(".selected") //保留带有select类的元素
$("p").filter(".selected, :first") //保留第一个和带有select类的元素
3、查找筛选器
查找子标签：$("div").children(".test") $("div").find(".test")
向下查找兄弟标签：$(".test").next() $(".test").nextAll() $(".test").nextUntil()
向上查找兄弟标签：$("div").prev() $("div").prevAll() $("div").prevUntil()
查找所有兄弟标签：$("div").siblings()
查找父标签：$(".test").parent() $(".test").parents() $(".test").parentUntil()
操作元素(属性，css，文档处理)
一、事件
1、页面载入
ready(fn) // 当DOM载入就绪可以查询及操做时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
2、事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
3、事件委派
$("").on(event,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button>
<script src="jquery.min.js"></script>
<script>
$("ul li").click(function(){
alert(123)
});
$("#add_li").click(function(){
var $ele=$("<li>");
$ele.text(Math.round(Math.random()*10));
$("ul").append($ele)
});
// $("ul").on("click","li",function(){
// alert(456)
// })
$("#off").click(function(){
$("ul li").off()
})
</script>
4、事件切换
hover([over,]out)事件：
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over：鼠标移到元素上要触发的函数
out：鼠标移出元素要触发的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.test{
width: 200px;
height: 200px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
<script src="jquery.min.js"></script>
<script>
function enter(){
console.log("enter")
}
function out(){
console.log("out")
}
$(".test").hover(enter,out)
</script>
</html>
二、属性操作
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
$("").toggleClass(class|fn[,sw]) //如果存在就删除（不存在就添加）一个类
示例1：为匹配的元素切换 'selected' 类（$("p").toggleClass("selected");）
示例2：每点击三下加上一次 'highlight' 类
var count = 0;
$("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);});
--------------------------属性（对于HTML元素本身就带有的固有属性，在处理时，使用prop方法；对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法）
$("").attr() //设置或返回被选元素的属性值
示例：$("img").attr("src"); //获取img的src属性值
$("img").attr({ src: "test.jpg", alt: "Test Image" }); //为img设置src和alt属性
$("").removeAttr(name); //删除属性
$("").prop(name|properties|key,value|fn); //获取匹配的元素集中的第一个元素的属性值，也可以给属性赋值
示例：$("input[type='checkbox']").prop("checked"); //取值
$("input[type='checkbox']").prop("disabled", false); //赋值
$("input[type='checkbox']").prop("checked", true); //赋值
$("").removeProp(name); //删除由.prop()方法设置的属性集
--------------------------HTML代码/文本/值（取值或赋值）
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
三、字符串操作
方式一：
$.trim(str) //去掉字符串起始和结尾的空格
示例：$.trim(" hello, how are you? ");
方式二：
$("").val().trim() //去掉字符串起始和结尾的空格
示例：$("#username").val().trim()
$("p").text().trim()
each循环
方式一
格式：$.each(obj,fn)
<script>
//打印数组的索引和值
li=[10,20,30,40];
$.each(li,function(i,x){
console.log(i,x)
});
//打印对象的键和值
dic={name:"yuan",sex:"male"};
$.each(dic,function(i,x){
console.log("Name: " + i + ", Sex: " + x)
});
</script>
方式二
格式：$("").each(fn)
//反选：遍历复选框，将选中的复选框设为未选中，未选中的设为选中
$(":checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked"));
})
//遍历tr标签，并打印其内部HTML
$("tr").each(function(){
console.log($(this).html())
})
each扩展
<script>
function f(){
for(var i=0;i<4;i++){
if (i==2){
return;
}
console.log(i)
}
}
f(); // 结果：0,1
//-----------------------------------------------------------------------
li=[11,22,33,44];
$.each(li,function(i,v){
if (v == 33){
return ;
}
console.log(v)
});
//结果：11,22,44
//----------------------------------------------------------------------
li=[11,22,33,44];
$.each(li,function(i,v){
if (v == 33){
return false;
}
console.log(v)
});
//结果：11,22
//----------------------------------------------------------------------
// <1>如果return后想让下面循环函数继续执行,那么就直接写return或return true
// <2>如果return后不想下面循环函数继续执行,那么就直接写return false </script>
文档节点处理
//创建一个标签对象
$("<p>")
//内部插入
//在内部追加内容
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
//在内部开始处插入内容
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
//插入到某标签之后 //示例：将"p"插入到$("#foo")后
$("").after(content|fn) ----->$("#foo").after("p");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
//插入到某标签之前 //示例：将"p"插入到$("#foo")前
$("").before(content|fn) ----->$("#foo").before("p");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
$("").replaceAll(selector) ----->$("<b>Paragraph. </b>").replaceAll("p");
//删除
$("").empty() //清空匹配元素中所有内容和子节点
$("").remove([expr]) //从DOM中删除所有匹配的元素及其内容
//复制
$("").clone([Even[,deepEven]]) //克隆匹配的DOM元素并且选中这些克隆的副本
示例：
<body>
<b>Hello</b><p>, how are you?</p>
</body>
<script>
$("b").clone().prependTo("p");
//结果：<b>Hello</b><p><b>Hello</b>, how are you?</p>
</script>
动画效果
一、显示隐藏
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
speed：隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast 或 表示动画时长的毫秒数值(如：1000)
easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn：在动画完成时执行的函数，每个元素执行一次。
<script>
$(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000); //隐藏
});
$("#show").click(function () {
$("p").show(1000); //显示
});
//用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function () {
$("p").toggle(); //切换
});
})
</script>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
</body>
二、滑动（滑上滑下）
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
</body>
三、淡入淡出
1、通过不透明度的变化来实现所有匹配元素的淡入淡出效果，并在动画完成后可选地触发一个回调函数
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
2、把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
fadeTo([[speed],opacity,[easing],[fn]])
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);
});
});
</script>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
</body>
四、回调函数
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
</body>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
css操作
一、CSS
css(name|pro|[,val|fn])：访问或设置匹配元素的样式属性
$("p").css("color"); //获取p的color属性
$("p").css({ "color": "#ff0011", "background": "blue" }); //设置属性
$("p").css("color","red"); //设置属性
//逐渐增加div的大小
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
二、css位置操作
$("").offset([coordinates]) //获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
$("").position() //获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果。此方法只对可见元素有效。
$("").scrollTop([val]) //获取或设置匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效
示例：$("p:last").text( "scrollTop:" + p.scrollTop() ); //获取
$("div.demo").scrollTop(300); //设置
$("").scrollLeft([val]) //获取或设置匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效
示例：$("p:last").text( "scrollLeft:" + p.scrollLeft() ); //获取
$("div.demo").scrollLeft(300); //设置
示例1：$("").offset([coordinates])
<body>
<h1>this is offset</h1>
<div class="test1"></div>
<p></p>
<button>change</button>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
var $offset=$(".test1").offset();
var lefts=$offset.left;
var tops=$offset.top;
$("p").text("Top:"+tops+" Left:"+lefts);
$("button").click(function(){
$(".test1").offset({left:200,top:400})
})
</script>
示例2：$("").position()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
.box2{
width: 200px;
height: 200px;
background-color: darkcyan;
}
.parent_box{
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="parent_box">
<div class="box2"></div>
</div>
<p></p>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
var $position=$(".box2").position();
var $left=$position.left;
var $top=$position.top;
$("p").text("TOP:"+$top+"LEFT"+$left)
</script>
</html>
示例3：$("").scrollTop([val])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.returnTop{
height: 60px;
width: 100px;
background-color: peru;
position: fixed;
right: 0;
bottom: 0;
color: white;
line-height: 60px;
text-align: center;
}
.div1{
background-color: wheat;
font-size: 5px;
overflow: auto;
width: 500px;
height: 200px;
}
.div2{
background-color: darkgrey;
height: 2400px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1 div">
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</div>
<div class="div2 div"></div>
<div class="returnTop hide">返回顶部</div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
$(window).scroll(function(){
var current=$(window).scrollTop();
console.log(current);
if (current>100){
$(".returnTop").removeClass("hide")
}
else {
$(".returnTop").addClass("hide")
}
});
$(".returnTop").click(function(){
$(window).scrollTop(0)
});
</script>
</html>
三、尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin: 0;}
.box1{
width: 200px;
height: 200px;
background-color: wheat;
padding: 50px;
border: 50px solid rebeccapurple;
margin: 50px;
}
</style>
</head>
<body>
<div class="box1">DIVDIDVIDIV</div>
<p></p>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
var $height=$(".box1").height();
var $innerHeight=$(".box1").innerHeight();
var $outerHeight=$(".box1").outerHeight();
var $margin=$(".box1").outerHeight(true);
$("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
</script>
</html>
扩展方法 (插件机制)
实例练习
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<style>
.menu{
height: 500px;
width: 20%;
background-color: gainsboro;
text-align: center;
float: left;
}
.content{
height: 500px;
width: 80%;
background-color: darkgray;
float: left;
}
.title{
line-height: 50px;
background-color: wheat;
color: rebeccapurple;}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery.min.js"></script>
<script>
$(".item .title").mouseover(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
// $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
Tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab_outer{
margin: 20px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
text-align: center;
}
.menu li{
display: inline-block;
margin-left: 14px;
padding:5px 20px;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: #2868c8;
color: white;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li relation="c1" class="current">菜单一</li>
<li relation="c2" >菜单二</li>
<li relation="c3">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
$(".menu li").click(function(){
var index=$(this).attr("relation");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(this).addClass("current").siblings().removeClass("current");
});
</script>
</html>
table正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>全选</button>
<button>取消</button>
<button>反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
</table>
<script src="jquery.min.js"></script>
<script>
$("button").click(function(){
if($(this).text()=="全选"){ // $(this)代指当前点击标签
$("table :checkbox").prop("checked",true)
}
else if($(this).text()=="取消"){
$("table :checkbox").prop("checked",false)
}
else {
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}
});
</script>
</body>
</html>
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.back{
background-color: wheat;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: darkgray;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: white;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>
<script src="jquery.min.js"></script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide")
}
</script>
</body>
</html>
复制样式条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+">
<input type="text">
</div>
</div>
<script src=jquery.min.js></script>
<script>
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
/*
$("[value='+']").click(function(){
var $clone_obj=$(this).parent().clone();
$clone_obj.children(":button").val("-").attr("class","mark");
$(this).parent().parent().append($clone_obj);
});
$(".outer").on("click",".item .mark",function(){
console.log($(this)); // $(this): .item .mark标签
$(this).parent().remove()
})
*/
</script>
</body>
</html>
注册验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form class="Form" id="form">
<p><input class="v1" type="text" name="username" mark="用户名"></p>
<p><input class="v1" type="text" name="email" mark="邮箱"></p>
<p><input type="submit" value="submit"></p>
</form>
<script src="jquery.min.js"></script>
<script>
$("#form :submit").click(function(){
flag=true;
$("#form .v1").each(function(){
$(this).next("span").remove();// 防止对此点击按钮产生多个span标签
var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var ele=document.createElement("span");
ele.innerHTML=mark+"不能为空!";
$(this).after(ele);
$(ele).prop("class","error");// DOM对象转换为jquery对象
flag=false;
return false ; //-------->引出$.each的return false注意点
}
});
return flag
});
</script>
</body>
</html>
拖动面板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<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 type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).off('mousemove');
});
})
</script>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title>
<style>
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top: 0;
left: 0;
display: none;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left: 0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
var i=0;
// 通过jquery自动创建按钮标签
var img_num=$(".img li").length;
for(var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
$(".num li").eq(0).addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
});
// 自动轮播
var c=setInterval(GO_R,1500);
function GO_R() {
if(i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
}
function GO_L() {
if(i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); // fadeIn,fadeOut单独另开启的线程
}
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,1500)
});
// button 加定播
$(".right").click(GO_R);
$(".left").click(GO_L)
</script>
</body>
</html>
浙公网安备 33010602011771号