JQuery惯用基础语法（描述篇幅短）（第1季）
JQuery常用基础语法（描述篇幅短）（第1季）
$(".list tr").slice(1).each 意思是不要对表列头添加事件
$(this).children()..slice(1)是核心 主要为了过滤掉复选框所在的td的点击,否则在点复选框时将会起冲
1、jQuery实现表格行点击选中复选框
$(".list tr").slice(1).each(function(){
var p = this;
$(this).children().slice(1).click(function(){
$($(p).children()[0]).children().each(function(){
if(this.type=="checkbox"){
if(!this.checked){
this.checked = true;
}else{
this.checked = false;
}
}
});
});
});
只要table 的 class="list" ,就能实现该功能 $(".list tr").slice(1).each 意思是不要对表列头添加事件
$(this).children()..slice(1)是核心 主要为了过滤掉复选框所在的td的点击,否则在点复选框时将会起冲
2、jQuery 隐藏/显示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 隐藏/显示</title>
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
3、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
4、002
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$("p").hide(1000);
});
$("#button2").click(function() {
$("p").toggle();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id="button">Click me</button>
<button type="button" id="button2">Click me2</button>
</body>
</html>
5、003
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br>
<br>
<div id="div1"
style="width: 80px; height: 80px; display: none; background-color: red;"></div>
<br>
<div id="div2"
style="width: 80px; height: 80px; display: none; background-color: green;"></div>
<br>
<div id="div3"
style="width: 80px; height: 80px; display: none; background-color: blue;"></div>
</body>
</html>
6、004
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br>
<br>
<div id="div1"
style="width: 80px; height: 80px; background-color: red;"></div>
<br>
<div id="div2"
style="width: 80px; height: 80px; background-color: green;"></div>
<br>
<div id="div3"
style="width: 80px; height: 80px; background-color: blue;"></div>
</body>
</html>
7、005
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_fadein</title>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br>
<br>
<div id="div1"
style="width: 80px; height: 80px; display: none; background-color: red;"></div>
<br>
<div id="div2"
style="width: 80px; height: 80px; display: none; background-color: green;"></div>
<br>
<div id="div3"
style="width: 80px; height: 80px; display: none; background-color: blue;"></div>
</body>
</html>
8、006
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideDown("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip {
margin: 0px;
padding: 5px;
text-align: center;
background: #e5eecc;
border: solid 1px #c3c3c3;
}
div.panel {
height: 120px;
display: none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
9、007
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function() {
$(".flip").click(function() {
//$(".panel").slideUp("slow");
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip {
margin: 0px;
padding: 5px;
text-align: center;
background: #e5eecc;
border: solid 1px #c3c3c3;
}
div.panel {
height: 120px;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
10、008
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_animation1</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
left : '250px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute。</p>
<div
style="background: #98bf21; height: 100px; width: 100px; position: absolute;">
</div>
</body>
</html>
11、009
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_animation1_multicss</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
left : '250px',
opacity : '0.5',
height : '150px',
width : '150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute。</p>
<div
style="background: #98bf21; height: 100px; width: 100px; position: absolute;">
</div>
</body>
</html>
12、010
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_animation1_relative</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
//left:'250px',
//height:'+=150px',
//width:'+=150px'
height : 'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute。</p>
<div
style="background: #98bf21; height: 100px; width: 100px; position: absolute;">
</div>
</body>
</html>
13、011
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_animation</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var div = $("div");
div.animate({
height : '300px',
opacity : '0.4'
}, "slow");
div.animate({
width : '300px',
opacity : '0.8'
}, "slow");
div.animate({
height : '100px',
opacity : '0.4'
}, "slow");
div.animate({
width : '100px',
opacity : '0.8'
}, "slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute。</p>
<div
style="background: #98bf21; height: 100px; width: 100px; position: absolute;">
</div>
</body>
</html>
14、012
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_animation</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var div = $("div");
div.animate({
left : '100px'
}, "slow");
div.animate({
fontSize : '3em'
}, "slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute。</p>
<div
style="background: #98bf21; height: 100px; width: 200px; position: absolute;">HELLO</div>
</body>
</html>
15、013
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_animation</title>
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideDown(5000);
});
$("#stop").click(function() {
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
16、014
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_animation</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").hide(1000, function() {
alert("The paragraph is now hidden");
});
//错误写法
//$("p").hide(2000);
//alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
17、015
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery_chaining</title>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>
</body>
</html>