JQuery基础三
1、checkbox操作：全选、全不选、反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//全选
$('#btnAll').click(function () {
$('div :checkbox').attr('checked', true);
});
//全不选
$('#btnNoAll').click(function () {
$('div :checkbox').attr('checked', false);
});
//反选
$('#btnFX').click(function () {
$('div :checkbox').each(function (index, ele) {
$(ele).attr('checked', !$(ele).attr('checked'));
});
});
});
</script>
</head>
<body>
<input type="button" name="name" value="全选" id="btnAll" />
<input type="button" name="name" value="全不选" id="btnNoAll" />
<input type="button" name="name" value="反选" id="btnFX" />
<div style="border: 1px solid red; height: 200px;">
<input type="checkbox" name="name" value="1" />忐忑
<input type="checkbox" name="name" value="2" />法海不懂爱
<input type="checkbox" name="name" value="3" />金箍棒
<input type="checkbox" name="name" value="4" />爱情买卖
<input type="checkbox" name="name" value="5" />最炫民族风
</div>
</body>
</html>
2、绑定事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//bind可以注册事件
// $('#btn').bind('click', function () {
// alert('点我了');
// }).bind('mouseover', function () {
// $(this).css('color', 'yellow');
// });
// $('#btn').click(function () {
// });
// $('#btn').toggle(function () {
// alert('1');
// }).toggle(function () {
// alert('2');
// }).toggle(function () {
// alert('3');
// });
//鼠标进入和鼠标离开
$('input').hover(function () {
$(this).css('backgroundColor','red');
}, function () {
$(this).css('backgroundColor', '');
});
});
</script>
</head>
<body>
<!-- <input type="button" name="name" value="绑定" id="btn" />-->
<input type="text" name="name" value="" />
</body>
</html>
3、事件冒泡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//事件冒泡
$('div').click(function () {
alert($(this).attr('id'));
});
$('p').click(function () {
alert($(this).attr('id'));
});
$('strong').click(function () {
alert($(this).attr('id'));
return false;
});
});
</script>
</head>
<body>
<div id="dv" style=" width:300px; height:200px; background-color:Yellow;">
<p id="p1" style=" width:100px; height:100px; background-color:Blue;">
<strong id="st">加粗</strong>
</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click({ "name": "小马" }, function (eee) {
alert(eee.data.name);
});
});
</script>
</head>
<body>
<input type="button" name="name" value="按钮" id="btn" />
</body>
</html>
4、让图片飞
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {
$('#im').css('position', 'absolute').css({ "left": e.pageX, "top": e.pageY });
});
});
</script>
</head>
<body>
<img src="2.png" id="im" />
</body>
</html>
5、光标改变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('div').click(function (e) {
// alert(e.target.id);
});
$('div').mousedown(function (e) {
alert(e.which);
});
});
</script>
<style type="text/css">
div
{
width:300px;
height:200px;
background-color:Blue;
cursor:url(cur/dinosau2.ani);
}
</style>
</head>
<body>
<div id="dv">
</div>
</body>
</html>
6、折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#u1 li
{
margin-bottom:10px;
background-color:Orange;
font-size:20px;
font-weight:bolder;
cursor:pointer;
}
#u1 li ul
{
list-style-type:none;
margin:0;
padding:0;
}
#u1 li ul li
{
background-color:pink;
}
</style>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#u1 li ul li').hide();
$('#u1 li').click(function () {
$('ul li', $(this)).show(500);
$('ul li', $(this).siblings('li')).hide(500);
$('#san').attr('src','音乐的路径');
});
});
</script>
</head>
<body>
<bgsound id="san" loop="0" src="">
<div style=" width:200px; height:500px; border:1px solid red;">
<ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>种哥</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
7、层的显示和隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//显示层
$('#btnShow').click(function () {
$('div').show(500);
});
$('#btnHide').click(function () {
$('div').hide(500);
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示层" id="btnShow" />
<input type="button" name="name" value="隐藏层" id="btnHide" />
<div style=" width:300px; height:200px; background-color:Blue;">
</div>
</body>
</html>
漂亮效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btnslideDown').click(function () {
$('div').slideDown(500);
});
$('#btnslideUp').click(function () {
$('div').slideUp(500);
});
$('#btnslideToggle').click(function () {
$('div').slideToggle(500);
});
//=======================
$('#btnfadeIn').click(function () {
$('div').fadeIn(1000);
});
$('#btnfadeOut').click(function () {
$('div').fadeOut(1000);
});
$('#btnfadeToggle').click(function () {
$('div').fadeToggle(500);
});
});
</script>
</head>
<body>
<input type="button" name="name" value="slideDown" id="btnslideDown" />
<input type="button" name="name" value="slideUp" id="btnslideUp" />
<input type="button" name="name" value="slideToggle" id="btnslideToggle" />
<input type="button" name="name" value="fadeIn" id="btnfadeIn" />
<input type="button" name="name" value="fadeOut" id="btnfadeOut" />
<input type="button" name="name" value="fadeToggle" id="btnfadeToggle" />
<div style=" width:300px; height:200px; background-color:Green;">
</div>
</body>
</html>
8、TAB显示
div:gt(0)选择器用于匹配所有大于指定索引的元素，将其封装为jQuery对象并返回。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#dvTab
{
width: 500px; /* border: 1px solid blue;*/
height: 200px;
}
#dvTab ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#dvTab ul li
{
text-align: center;
background-color: Yellow;
color: Red;
width: 100px;
font-weight: bolder;
font-size: 14px;
float: left;
border-right: 1px solid blue;
cursor: pointer;
}
#dvTab div
{
width: 400px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#dvTab div:gt(0)').hide();
$('#uu1 li').mouseover(function () {
var tt = $(this).text();
switch (tt) {
case '新闻': $('#dvNews').show().siblings('div').hide(); break;
case '图片': $('#dvPic').show().siblings('div').hide(); break;
case '深度': $('#dvDeep').show().siblings('div').hide(); break;
case '军事': $('#dvMl').show().siblings('div').hide(); break;
}
});
});
</script>
</head>
<body>
<div id="dvTab">
<ul id="uu1">
<li>新闻</li>
<li>图片</li>
<li>深度</li>
<li>军事</li>
</ul>
<div id="dvNews">
新闻新闻新闻
</div>
<div id="dvPic">
图片，图片图片图图片图片图图图片贴图
</div>
<div id="dvDeep">
深度深度深度深度十多年对于
</div>
<div id="dvMl">
军事军事军事军事
</div>
</div>
</body>
</html>
9、图片动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('img').animate({ "left": "55px", "top": "500px", "width": "50px", "height": "50px" }, 3000).animate({ "left": "+=800px", "top": "-=500px" }, 2000);
});
});
</script>
</head>
<body>
<input type="button" name="name" value="飞起来" id="btn" />
<img src="2.png" style=" position:absolute;" />
</body>
</html>
10、cookie保存用户
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($.cookie('userName')==null ) {
$('span').text('欢迎菜鸟登录');
} else {
$('span').text('欢迎'+$.cookie('userName')+'登录');
}
$('#btn').click(function () {
$.cookie('userName', $('#txt').val());
});
});
</script>
</head>
<body>
<span>欢迎菜鸟登录</span>
<input type="text" name="name" value="" id="txt" />
<input type="button" name="name" value="记住密码" id="btn" />
</body>
</html>
11、显示高清图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>
<link href="../Scripts/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('.MYCLASS').jqzoom();
});
</script>
</head>
<body>
<a class="MYCLASS" title="MYTITLE" href="triumph_big1.jpg" target="_blank">
<img title="IMAGE TITLE" src="triumph_thumb1.jpg">
</a>
</body>
</html>
12、通过改变图片位置显示需要显示的资源
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
background-image:url(1.jpg);
width:60px;
height:500px;
border:1px solid red;
background-repeat:no-repeat;/*:repeat-y; /*:repeat-x;/*横向平铺*/
background-position:-215px -170px;
/*此时的层显示图片是平铺*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
1、选择器+遍历
$('div').each(function (i){
i就是索引值
this 表示获取遍历每一个dom对象
});
2、选择器+遍历
$('div').each(function (index,domEle){
index就是索引值
domEle 表示获取遍历每一个dom对象
});
3、更适用的遍历方法
1）先获取某个集合对象
2）遍历集合对象的每一个元素
var d=$("div");
$.each(d,function (index,domEle){
d是要遍历的集合
index就是索引值
domEle 表示获取遍历每一个dom对
});
