jquery的主要学习计划.doc

Jquery学习（红色：注意；蓝色：解释或注意；橙色：前面已出现过）

第1天
学习jquery基础部分，可以放慢角度，主要要打好基础。主要看

第2天
完成基础部分的学习，此时应该不是很熟练，所以可以一边复习一边做例子。
把练习的例子大概以章节划分。
多练习几个事件处理中的一些例子。

$(document).ready(function(){
$(".has_childr</p><p style='padding:5px 0px;'>2、en").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
});

#menu{width:300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.highlight{color:#fff;background:g</p><p style='padding:5px 0px;'>3、reen;}
div{padding:0;margin:10px 0;}
div a{
background-color:#888;
display:none;
float:left;
width:300px;
}

y代码
1.4-jquery对象和dom对象
1.5-解决jquery和其他库的冲突
1.6-jquery开发工具和插件
库的冲突
1.6-jquery开发工具和插件
body>

修改后：鼠标悬浮时显示下拉菜单，离开后菜单自动缩回

$(document).ready(function(){
$(".has_children").mouseover(function(){
$(this).addClass("highlight").children("a").toggle().end().siblings().removeClass("highlight").children("a").hide();
});
});

Toggle()：来切换html元素的可见性，通俗的说就是显示隐藏的，隐藏可见的
Siblings()：获取匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
如：查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：
$("p").siblings(".selected")

理解之后，重新改了：水平导航，鼠标悬浮在哪个标题，下面显示其菜单

$(document).ready(fu</p><p style='padding:5px 0px;'>8、nction(){
$(".title").mouseover(function(){
$(this).children(".chtitle").toggle().end().siblings().children(".chtitle").hide();
});
});

*{margin:0;padding:0}
.title{list-style:none;float:left;margin:10px;}
ul.chtitle{list-style:none;margin:0;padding:0;displ</p><p style='padding:5px 0px;'>9、ay:none}

href="#">第一节

完善上面的例子。
在上面的例子有一些不足之处，1，悬浮在主标题上后不能点击其子菜单2，使用slidedown（）效果，如果鼠标移动快容易在同一时间使多个主标题的子菜单同时显示
针对这两个不足之处，主要做了一下修改。1，将mouseover（）鼠标悬浮事件修改成hover（a，b）光标离开前光标离开后事件2，将slidedown（）修改成show（）效果

$(document).ready(function(){
$("li.tit</p><p style='padding:5px 0px;'>12、le:has(ul)").hover(function(){
$(this).children(".chtitle").show();
},
function(){
$(this).children(".chtitle").hide();
});
});

查找被点击的按钮

$(document).ready(function(){
$(".bo</p><p style='padding:5px 0px;'>13、ld").bind("click",function(){
alert("You have clicked the bold button");
});

$(".italic").bind("click",function(){
alert("You have clicked the italic button");
});

});

.buttons{
width:100px;
float:left;
text-align:center;
margin:</p><p style='padding:5px 0px;'>14、5px;
border:2px solid;
font-weight:bold;
}

bold
italic

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind(event,data,function)
如：
</p><p style='padding:5px 0px;'>15、document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});

在这里绑定了三个事件，分别是点击事件鼠标悬浮对象、鼠标离开悬浮对象

对上面的例子进行修改：（1，bind（）事件换成click（）点击事件2，弹出对话框）

$(document).ready(function(){
$(".buttons").click(function(){
alert("You have clicked the " +$(this).text()+" button");
});
});

Trigger（）触发事件

$(document).ready(function(){
$(".buttons").bind("click",function(){
alert("You have clicked the " +$(this).text()+" button");
});
$('.italic').trigger("click");
});

点击之后禁用按钮

$(document).ready(function(){
$(".buttons")</p><p style='padding:5px 0px;'>18、bind("click",function(){
alert("You have clicked the " +$(this).text()+" button");
$(".buttons").unbind("click");
});
$('.italic').trigger("click");
});

Unbind（）用于从指定元素中删除某事件类型

查找鼠标按下使得屏幕坐标

$(document).ready(function(){
$(".</p><p style='padding:5px 0px;'>19、buttons").bind("mousedown",function(event){
$("p").text("x:"+event.screenX+" ,y:"+event.screenY);
});

});

Event.preventDefault（）；防止浏览器导航到超链接所指向的网站。也就是说，它使超链接忽略默认操作。

为响应事件而添加和删除文本

$(document).ready(function(){
$(".add").click(
</p><p style='padding:5px 0px;'>20、 function(){$("div").prepend("<p>hello good morning good afternoon !</p>");});
$(".remove").click(function(){
$("p").remove();
});
});

第三天
练习视觉特效的例子

按页显示图片
html1-transitional.dtd">

无标题文档

<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=$("ript>

eq() 方法将匹配元素集缩减值指定 index 上的一个。

对于上例，进行了修改：让文字悬浮在图片上，然后鼠标悬浮在哪个数字上，就显示哪个图片

$(document).ready(function(){
var $pic=$("#images a");
$pic.hide();
$pic.eq(0).show();

$("#p</p><p style='height:0px;padding:0;overflow:hidden'>27、ages a").mouseover(
function(){
$pic.hide();
$pic.eq($(this).text()-1).show();
}
);
});

无标题文档

/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

$(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();
});
</scrip</p><p style='height:0px;padding:0;overflow:hidden'>31、t>
</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" </p><p style='height:0px;padding:0;overflow:hidden'>32、/></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" "ht</p><p style='height:0px;padding:0;overflow:hidden'>33、tp://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; }
bo</p><p style='height:0px;padding:0;overflow:hidden'>34、dy, 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-</p><p style='height:0px;padding:0;overflow:hidden'>35、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 {</p><p style='height:0px;padding:0;overflow:hidden'>36、 *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; }</p><p style='height:0px;padding:0;overflow:hidden'>37、
#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-</p><p style='height:0px;padding:0;overflow:hidden'>38、top: 0px;">
<a href="">公告[1]：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！</a>
</li>
</ul>
</div>
<!--公告板滚动-->
<script type="text/javascript">
*(function (win){ //三个打红*的地方，最上面的win是个参数，第二个也是//这个参数，而第三个window是就是传给win参数的具体值。
var callboarTimer; //这边定义了callboarTimer，是全局变量，所以这里都能使用。
//本来设置了一个定时器的，</p><p style='height:0px;padding:0;overflow:hidden'>39、当满足某个条件的时候计时器
//不需要在继续执行了，就是用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 = call</p><p style='height:0px;padding:0;overflow:hidden'>40、boardLi.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.</p><p style='height:0px;padding:0;overflow:hidden'>41、animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer = setTimeout(self, 5000);
});
}
callboard.mouseenter( //本来计时器按照一定的时间进行变化图片，而当鼠标
//放到图片上时，计时器就要停止，当鼠标离开后，计时器重新启动。
function </p><p style='height:0px;padding:0;overflow:hidden'>42、){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
});
*}(window)); //(function(){…}(参数值))这种模式就是函数立即执行。
setTimeout(window.autoAnimation, 5000);

第四天
练习页面导航的例子
最好也能结合前面做的例子一起运用。

第五天
练习表单验证的例子

确认必须字段不留空

无标题文档

</scr</p><p style='height:0px;padding:0;overflow:hidden'>44、ipt>
<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();
}
});
});

返回或设置被选元素的值。

验证数字字段

$(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){
</p><p style='height:0px;padding:0;overflow:hidden'>47、".error").show();
event.preventDefault();
break;
}else{
$(".error").hide();
}
}});
});

charAt(i);方法可返回指定位置的字符。JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。
方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。
c<48||c>57：如果字符的ASCII值小于数字0（ASCII值48）或大于数字9（ASCII码值57），就意味着不是数字。

如果要判断是否是负数：在前面加一个判断：if(c==45&&i==0) //这句话的意思是第一个符号是负号

限定值的范围

$(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</p>
</div>
</div>

<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js">

关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2025 宁波自信网络信息技术有限公司  版权所有客服电话：4009-655-100  投诉/维权电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：