vara=["America","Greece","Britain","Canada","China","Egypt"];varcount=0;for(variina){document.write(a[i]+"
");if(a[i].toLowerCase().indexOf("a")>-1){count++;}}document.write("共有"+count+"个字符串中包含a或者A。");上机练习3需求说明:单击页面上的按钮时,调用函数,使用prompt()方法获取两个变量的值和一个运算符运算结果使用alert()方法显示出来使用Switch判断获取的运算符号
functionclec(){varnum1=prompt("请输入第一个数:")*1;varnum2=prompt("请输入第二个数:")*1;varv=prompt("请输入运算符:");switch(v){case"+":alert("两数结果为:"+num1+num2);break;case"-":alert("两数结果为:"+num1-num2);break;case"*":alert("两数结果为:"+num1*num2);break;case"/":if(num2==0){alert("输入有误!结果为"+num2)}else{alert(num1/num2);}}}上机练习4需求说明:单击按钮调用函数,统计考试成绩使用prompt()方法输入考试科目的数量,要求数量的数值类型必须非零,非负数,否则给出相应的提示并退出程序根据考试科目的数量,使用prompt()方法输入各科的考试成绩并累加,要求成绩必须非负数,否则给出相应的提示并退出程序如果各项输入正确,则弹出科目总成绩
functionf1(){varsubject=prompt("请输入考试科目数量:")*1;if(subject<=0){alert("输入的非零");return;}elseif(isNaN(subject)){alert("输入的不是数字!");return;}varn=0;for(vari=0;i简答题3使用document.write()输出水平线使用循环控制每个水平线的长度
for(vari=61,j=-1;i<71;){document.write("");if(i<11){j=1;}i+=10*j;}简答题4关键代码:
varday=prompt("请输入今天是星期几:");switch(day){case"星期一":alert("新的一周开始了。");break;case"星期二":case"星期三":case"星期四":alert("努力工作。");break;case"星期五":alert("明天就是周末了。");break;default:alert("放松休息。");break;}第二章-JavaScript操作BOM对象一些小案例,欢迎参考
varimg1=document.getElementById("close");window.onscroll=function(){vartop=parseInt(document.documentElement.scrollTop||document.body.scrollTop);float.style.top=(60+top)+"px";img1.style.top=(60+top)+"px";}functionadv_close(a){a.remove();float.remove();}简答题3关键代码:
functiontoto(a){vararr=["1.gif","2.gif","3.jpg","4.jpg","5.gif"];document.getElementById("photo").setAttribute("src","images/"+arr[a]);}简答题4关键代码:
up.onclick=function(){varcopy=document.getElementById("upload").cloneNode(true);copy.lastElementChild.firstElementChild.value="";main.insertBefore(copy,addBtn);}简答题5关键代码:
varli=document.getElementsByTagName("li");vard=document.getElementsByClassName("div_bg")[0];vardiv=d.getElementsByTagName("div");functionxx(n){for(vari=0;i第四章-JavaScript对象及初识面向对象待更…….
打开页面时。弹出窗口,提示信息为“我编写的第一个jQuery程序”
$("#a").hover(function(){$("#menu-ul").css("display","block").css("border","1pxsolid#ee7306");},function(){$("#menu-ul").css("display","none");})上机练习3需求说明:制作《你是人间四月天》内容简介页面单击“你是人间四月天”标题后,标题字体变小,颜色变为蓝色,正文的字体颜色变为绿色,单击“查看全部”链接,显示内容简介
$("#img").click(function(){$(this).css("border","3pxsolid#f00");})简答题5关键代码:
$(".intro").css("color","red");$("#jdPrice>span").css("font-size","24px").css("font-weight","bold").css("color","red");$("#jdPrice>span+").css("color","#cccccc").css("text-decoration","underline");$("dl").css("color","red");varflag=true;$(".textRightdldt").click(function(){if(flag){$(".textRightdldd").css("display","block");flag=false;}else{$(".textRightdldd").css("display","none");flag=true;}})$(".dd").css("color","white").css("background-color","red").css("padding","1px5px1px5px").css("margin-right","5px");$("#ticketspan").css("color","white").css("background-color","red").css("padding","1px5px1px5px").css("margin-right","5px");上机练习2需求说明:单击p元素后,设置class为txt_box的元素的内class为current的元素的背景颜色为#6ff,p的组他不是有span的背景颜色为#f9f,紧邻好h1后的p元素的背景颜色为#ff6,”即时对战“文本颜色为#fff,背景颜色为#f00
$("#tit").click(function(){$(".current").css("background-color","#6ff");})$("#content>span").css("background-color","#f9f");$("h1+").css("background-color","#ff6");$("#content>span>span").css("color","#fff");$("#content>span>span").css("background-color","#f00");上机练习3需求说明:单击标题“非缘勿扰”dd元素中有id属性的span元素的文本{主演,导演,标签,剧情}颜色值为#ff0099,字体加粗单击文本“导演”,文字“赖水清”为加粗单击文本“标签”他之后的“苏有朋”和“2013”的背景颜色为#e0f8ea,字体颜色为#10a14b,并且文本与背景颜色上下边缘间距3px,左右边缘边距为8px单击图片“收藏”弹出对话框,显示信息为“您已收藏成功!”
$(document).ready(function(){$("tr:not(.t-head):even").css("background-color","#eff7d1");$("tr:not(.t-head):odd").css("background-color","#f7e195");})上机练习4需求说明:使用选择器not()设置两个图片右侧内容边距为10px使用选择器.last设置右侧列表背景颜色为#f0f0f0使用层次选择器.frist.not()设置前三个视屏名称前的数字1.2.3背景颜色为#f0a30f,后面的背景颜色为#a4a3a33.5.6.7后的箭头向上,4.8.9.10的箭头向下当鼠标移动至右侧列表上时,显示对应隐藏的内容,加入清单,鼠标指针离开后隐藏
$("dl:odd").css("background-color","#ececec");简答题6关键代码:
关键代码
$("li").hover(function(){$(this).find("p:hidden").show();$(this).find("span").css("background-color","#c81623")},function(){$(this).find("p:visible").hide();$(this).find("span").css("background-color","#7a6e6e")})上机练习2需求说明:使用hover()实现鼠标指针移动至菜单上时,显示二级菜单,移出后隐藏使用toggleClass()实现鼠标指针移动至菜单上时,背景颜色变为橙色,移出后,背景颜色变为之前颜色
$("li").hover(function(){$(this).find("div:hidden").show();$(this).toggleClass("orange");},function(){$(this).find("div:visible").hide();$(this).toggleClass("orange");})上机练习3需求说明:使用复合事件hover()实现鼠标移动至“联系客服”,二级菜单以slow速度显示,离开时,以slow速度隐藏单击常见问题分类下的一级菜单时,使用slideDown()方法实现二级菜单以slow速度显示,当再次单击一级菜单时,使用slideUp()方法已slow速度隐藏
$("#lxkf").hover(function(){$(".top-mul.topDown").show("slow");},function(){$(".top-mul.topDown").hide("fast");})varflag=true;$(".navdt").click(function(){if(flag){$(this).siblings().slideDown("slow");flag=false;}else{$(this).siblings().slideUp("slow");flag=true;}})简答题5关键代码:
$(".firstNav").click(function(){$("#nav.navsBoxul").toggle();})$("#nav.navsBoxulli").hover(function(){$(this).toggleClass("onbg");})简答题6关键代码:
$(".lastone").click(function(){$(".navli:gt(6):not(.lastone)").toggle();$(".lastone").toggleClass("up");})第八章-使用jQuery操作DOM对象上机练习1需求说明:当鼠标指针移过商品信息时,使用addClass()方法添加样式,边框及背景颜色值为#d51938,说明文字变为白色当鼠标移出时,使用removeClass()方法恢复初始状态
$("#pruduce.box").hover(function(){$(this).addClass("hoverstyle");},function(){$(this).removeClass("hoverstyle");})上机练习2需求说明:在输入框中输入聊天内容,单击“发送”按钮,在页面上显示聊天内容,左侧显示聊天者头像,右侧显示聊天昵称和聊天信息,使用assClass()方法为聊天内容添加背景色,边框为圆角,聊天内容发送完毕后,内容显示在聊天区域,输入框内容清空如果聊天内容过多,则聊天内容显示区域在垂直方向显示滚动条如果输入框中没有输入内容,则单击发送按钮,不做任何操作
关键代码:
letflag=false;$("#Button").click(function(){//letreg=/^.*([@.]).*(!\1)[@.].*$/;letreg=/^(.*[@])(.*[.]).*$/;if($("#email").val()==""){alert("电子邮件不能为空");}elseif(!reg.test($("#email").val())){alert("电子邮件必须包含@和.");}else{flag=true;}})$("form").submit(function(){returnflag;})上机练习2需求说明:使用文本输入提示的方式验证贵美网站,要求如下名字和姓氏均不能为空,
html完整代码:
以下为关键代码,不包含样式。
用户名不能为空。用户名的长度只能是3~5位;
密码不能为空。密码由字母或数字组成,长度不能小于6位;
性别在页面加载时,默认选中”男”;
手机号不能为空。手机号码只能是135、138、139的格式,总长度11位;
年级有“一年级”、“二年级”、“三年级”,默认选中“一年级”。