资源描述
Jquery学习（红色：注意；蓝色：解释或注意；橙色：前面已出现过）
第1天
学习jquery基础部分，可以放慢角度，主要要打好基础。主要看
第2天
完成基础部分的学习，此时应该不是很熟练，所以可以一边复习一边做例子。
把练习的例子大概以章节划分。
多练习几个事件处理中的一些例子。
<html>
<head>
<script type="text/javascript" src="
<script type="text/javascript">
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
});
</script>
<style type="text/css">
#menu{width:300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0;}
div a{
background-color:#888;
display:none;
float:left;
width:300px;
}
</style>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章-认识jquery</span>
<a>1.1-javascript和javascript库</a>
<a>1.2-加入jquery</a>
<a>1.3-编写简单的jquery代码</a>
<a>1.4-jquery对象和dom对象</a>
<a>1.5-解决jquery和其他库的冲突</a>
<a>1.6-jquery开发工具和插件</a>
</div>
<div class="has_children">
<span>第一章-认识jquery</span>
<a>1.1-javascript和javascript库</a>
<a>1.2-加入jquery</a>
<a>1.3-编写简单的jquery代码</a>
<a>1.4-jquery对象和dom对象</a>
<a>1.5-解决jquery和其他库的冲突</a>
<a>1.6-jquery开发工具和插件</a>
</div>
<div class="has_children">
<span>第一章-认识jquery</span>
<a>1.1-javascript和javascript库</a>
<a>1.2-加入jquery</a>
<a>1.3-编写简单的jquery代码</a>
<a>1.4-jquery对象和dom对象</a>
<a>1.5-解决jquery和其他库的冲突</a>
<a>1.6-jquery开发工具和插件</a>
</div>
</div>
</body>
</html>
修改后：鼠标悬浮时显示下拉菜单，离开后菜单自动缩回
<script type="text/javascript">
$(document).ready(function(){
$(".has_children").mouseover(function(){
$(this).addClass("highlight").children("a").toggle().end().siblings().removeClass("highlight").children("a").hide();
});
});
</script>
Toggle()：来切换html元素的可见性，通俗的说就是显示隐藏的，隐藏可见的
Siblings()：获取匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
如：查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：
$("p").siblings(".selected")
理解之后，重新改了：水平导航，鼠标悬浮在哪个标题，下面显示其菜单
<html>
<head>
<script type="text/javascript" src="
<script type="text/javascript">
$(document).ready(function(){
$(".title").mouseover(function(){
$(this).children(".chtitle").toggle().end().siblings().children(".chtitle").hide();
});
});
</script>
<style type="text/css">
*{margin:0;padding:0}
.title{list-style:none;float:left;margin:10px;}
ul.chtitle{list-style:none;margin:0;padding:0;display:none}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="title">
<a href="#">第一章</a>
<ul class="chtitle">
<li><a href="#">第一节</a></li>
<li><a href="#">第二节</a></li>
<li><a href="#">第三节</a></li>
</ul>
</li>
<li class="title">
<a href="#">第二章</a>
<ul class="chtitle">
<li><a href="#">第一节</a></li>
<li><a href="#">第二节</a></li>
<li><a href="#">第三节</a></li>
</ul>
</li>
<li class="title">
<a href="#">第三章</a>
<ul class="chtitle">
<li><a href="#">第一节</a></li>
<li><a href="#">第二节</a></li>
<li><a href="#">第三节</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
完善上面的例子。
在上面的例子有一些不足之处，1，悬浮在主标题上后不能点击其子菜单2，使用slidedown（）效果，如果鼠标移动快容易在同一时间使多个主标题的子菜单同时显示
针对这两个不足之处，主要做了一下修改。1，将mouseover（）鼠标悬浮事件修改成hover（a，b）光标离开前光标离开后事件2，将slidedown（）修改成show（）效果
<script type="text/javascript" src="
<script type="text/javascript">
$(document).ready(function(){
$("li.title:has(ul)").hover(function(){
$(this).children(".chtitle").show();
},
function(){
$(this).children(".chtitle").hide();
});
});
</script>
查找被点击的按钮
<html>
<head>
<script src=" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".bold").bind("click",function(){
alert("You have clicked the bold button");
});
$(".italic").bind("click",function(){
alert("You have clicked the italic button");
});
});
</script>
<style type="text/css">
.buttons{
width:100px;
float:left;
text-align:center;
margin:5px;
border:2px solid;
font-weight:bold;
}
</style>
</head>
<body>
<span class="bold buttons">bold</span>
<span class="italic buttons">italic</span>
</body>
</html>
bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind(event,data,function)
如：<script type="text/javascript">
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
</script>
在这里绑定了三个事件，分别是点击事件、鼠标悬浮对象、鼠标离开悬浮对象
对上面的例子进行修改：（1，bind（）事件换成click（）点击事件2，弹出对话框）
<script type="text/javascript">
$(document).ready(function(){
$(".buttons").click(function(){
alert("You have clicked the " +$(this).text()+" button");
});
});
</script>
Trigger（）触发事件
<script type="text/javascript">
$(document).ready(function(){
$(".buttons").bind("click",function(){
alert("You have clicked the " +$(this).text()+" button");
});
$('.italic').trigger("click");
});
</script>
点击之后禁用按钮
<script type="text/javascript">
$(document).ready(function(){
$(".buttons").bind("click",function(){
alert("You have clicked the " +$(this).text()+" button");
$(".buttons").unbind("click");
});
$('.italic').trigger("click");
});
</script>
Unbind（）用于从指定元素中删除某事件类型
查找鼠标按下使得屏幕坐标
<script type="text/javascript">
$(document).ready(function(){
$(".buttons").bind("mousedown",function(event){
$("p").text("x:"+event.screenX+" ,y:"+event.screenY);
});
});
</script>
Event.preventDefault（）；防止浏览器导航到超链接所指向的网站。也就是说，它使超链接忽略默认操作。
为响应事件而添加和删除文本
<script type="text/javascript">
$(document).ready(function(){
$(".add").click(
function(){$("div").prepend("<p>hello good morning good afternoon !</p>");});
$(".remove").click(function(){
$("p").remove();
});
});
</script>
第三天
练习视觉特效的例子
按页显示图片
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<link href="page.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
var $pic=$("#images a");
$pic.hide();
var imgs=$pic.length;
var next=$pic.eq(0);
next.css({"position":"absolute","left":10});
next.show();
var $pagenumbers=$("<div id='pages'></div>");
for(var i=0;i<imgs;i++){
$("<span class='page'>"+(i+1)+"</span>").appendTo($pagenumbers);
}
$pagenumbers.insertBefore(next);
$(".page").hover(
function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}
);
$("span").click(function(event){
$pic.hide();
next=$pic.eq($(this).text()-1);
next.show();
});
});
</script>
</head>
<body>
<div id="images">
<a href=""><img src="img/135476161856.jpg" alt="1" /></a>
<a href=""><img src="img/1354671733660.jpg" alt="2" /></a>
<a href=""><img src="img/1354761533620.jpg" alt="3" /></a>
<a href=""><img src="img/1354761549634.jpg" alt="4" /></a>
</div>
</body>
</html>
eq() 方法将匹配元素集缩减值指定 index 上的一个。
对于上例，进行了修改：让文字悬浮在图片上，然后鼠标悬浮在哪个数字上，就显示哪个图片
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
var $pic=$("#images a");
$pic.hide();
$pic.eq(0).show();
$("#pages a").mouseover(
function(){
$pic.hide();
$pic.eq($(this).text()-1).show();
}
);
});
</script>
<title>无标题文档</title>
</head>
<body>
<div id="pages"><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a> </div>
<div id="images">
<a href="#"><img src="img/135476161856.jpg" /></a>
<a href="#"><img src="img/1354671733660.jpg" /></a>
<a href="#"><img src="img/1354761533620.jpg" /></a>
<a href="#"><img src="img/1354761549634.jpg" /></a>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
var $wrapper=$("#scroller a img");
var left_rightanimator=function(){
$wrapper.animate({left:-790},5000,function(){
$wrapper.animate({left:465},5000);
left_rightanimator();
});
}
left_rightanimator();
});
</script>
</head>
<body>
<div id="scroller">
<div id="images">
<a href="#"><img src="img/135476161856.jpg" height="150px" width="150px"/></a>
<a href="#"><img src="img/1354671733660.jpg" height="150px" width="150px" /></a><a href="#"><img src="img/1354761533620.jpg" height="150px" width="150px" /></a><a href="#"><img src="img/1354761549634.jpg" height="150px" width="150px" /></a>
<a href="#"><img src="img/135476161856.jpg" height="150px" width="150px"/></a></div>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动公告栏</title>
<style type="text/css">
header, nav, aside, menu, figure, article, footer { display:block; }
body, div, form, textarea, label, input, ul, ol, li, dl, dt, dd, p, span, a, img, h1, h2, h3, h4, h5, h6, tbody, tfoot, tr, th, td, pre, code, form, fieldset, legend, font { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
caption, th { text-align:left; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
li { list-style:none; }
fieldset, img { border:none; }
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%;
color:inherit; _color:#333; *color:#333;
outline:none; }
/*BASE CLASS*/
.cfix { *display:inline-block;*zoom:1}
.cfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
/*公告栏滚动CSS*/
#callboard { width:600px; margin:100px auto 0; height:24px; line-height:24px; overflow:hidden; font-size:12px; background-color:#f5f5f5;}
#callboard ul { padding:0; }
#callboard li { padding:0; }
</style>
<script type="text/javascript" src="
</head>
<body>
<div id="callboard">
<ul>
<li>
<span style="color:red;">公告[2]：前端组上线一个月零八天，PR升为3，BD权重1</span>
</li>
<li>
<span style="color:red;">公告[3]：撤下了BloggerAds，原因为收入太少，打开速度慢！</span>
</li>
<li style="margin-top: 0px;">
<a href="">公告[1]：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！</a>
</li>
</ul>
</div>
<!--公告板滚动-->
<script type="text/javascript">
*(function (win){ //三个打红*的地方，最上面的win是个参数，第二个也是//这个参数，而第三个window是就是传给win参数的具体值。
var callboarTimer; //这边定义了callboarTimer，是全局变量，所以这里都能使用。
//本来设置了一个定时器的，当满足某个条件的时候计时器
//不需要在继续执行了，就是用clearTimerout清除定时器，
//设置定时器的时候，将定时器设置为全局变量。
var callboard = $('#callboard');
var callboardUl = callboard.find('ul'); //这里的find是找到那个div元素下面的所有ul元素，//得到的值是一个集合。
var callboardLi = callboard.find('li');
var liLen = callboard.find('li').length;
var initHeight = callboardLi.first().outerHeight(true);
*win.autoAnimation = function (){ //这里的win.autoAnimation就是给win定义了一个方法。
if (liLen <= 1) return; //这里的return就是函数返回了，不再往下执行了，具体
//值是多少，估计是undefined的吧
var self = arguments.callee;
var callboardLiFirst = callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer = setTimeout(self, 5000);
});
}
callboard.mouseenter( //本来计时器按照一定的时间进行变化图片，而当鼠标
//放到图片上时，计时器就要停止，当鼠标离开后，计时器重新启动。
function (){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
});
*}(window)); //(function(){…}(参数值))这种模式就是函数立即执行。
setTimeout(window.autoAnimation, 5000);
</script>
</body>
</html>
第四天
练习页面导航的例子
最好也能结合前面做的例子一起运用。
第五天
练习表单验证的例子
确认必须字段不留空
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="style.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".error").hide();
$(".submit").click(function(event){
var data=$(".infobox").val();
var len=data.length;
if(len<1){
$(".error").show();
event.preventDefault();
}else{
$(".error").hide();
}
});
});
</script>
</head>
<body>
<form id="signup" method="post" action="">
<div><span class="label">User Id *</span><input type="text" class="infobox" name="userid" /><span class="error">This field cannot be blank</span></div>
<input class="submit" type="submit" value="Submit" />
</form>
</body>
</html>
val() 方法返回或设置被选元素的值。
验证数字字段
<script type="text/javascript">
$(document).ready(function(){
$(".error").hide();
$(".submit").click(function(event){
var data=$(".infobox").val();
var len=data.length;
var c;
for(var i=0;i<len;i++){
c=data.charAt(i).charCodeAt(0);
if(c<48||c>57){
$(".error").show();
event.preventDefault();
break;
}else{
$(".error").hide();
}
}});
});
</script>
charAt(i);方法可返回指定位置的字符。JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。
方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。
c<48||c>57：如果字符的ASCII值小于数字0（ASCII值48）或大于数字9（ASCII码值57），就意味着不是数字。
如果要判断是否是负数：在前面加一个判断：if(c==45&&i==0) //这句话的意思是第一个符号是负号
限定值的范围
<script type="text/javascript">
$(document).ready(function(){
$(".error").hide();
$(".submit").click(function(event){
var data=$(".infobox").val();
var len=data.length;
var c;
var age=0;
var flag=0;
for(var i=0;i<len;i++){
c=data.charAt(i).charCodeAt(0);
if(c<48||c>57){
$(".error").show();
flag=1;
event.preventDefault();
break;
}
e
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
