目录
一、HTML基础
简答题
1.标签一般是成对出现,叫做和.
<html> 起始标签 结束标签 </html>
2.标签<a name="xx"></a>中的name属性的作用是什么，怎么使用的？
属性，格式：属性='属性值'，（name='value'）并且多个属性之间要用空格隔开
3.HTML的结构标签有哪些？
根标签：<html><html/>
头部标签：<head><head/>：嵌入css、js文档
页面标题：<title><title/>
页面内容：<body><body/>
4.行级标签和块级标签的区别
行级标签：不换行的标签，比如<span><span/>
块级标签：换行的标签，比如<div><div/><P><P/><h1><h1/><ol><ol/><ul><ul/>
5.无序列表的type属性的三个值的单词分别是
square方形、disc默认实心圆、circle空心圆
6.cellspacing与cellpadding之间的区别
cellspacing单元格间距：单元格与单元格之间的距离
cellpadding单元格内边距：单元格与内容之间的距离
7.设置颜色属性的三种方式是什么？
#00f
#789
#778899
8.hr是什么标签，请写出它的至少3个属性用法
水平线；width宽度（高度），align对齐方式、color颜色
9.按钮有哪些？
button普通按钮、submit提交按钮、reset重置按钮
10.完成一个简单页面的制作
1.==和===的区别是什么.
==比较内容；===比较内容和类型
选择题
单选题
（1） 下列哪个标签是定义标题的（ A ）
A、h1 B、hr C、hw D、p
（2）html中的注释标签是（ C ）
A、 <-- -->
B、<--! -->
C、<!-- -->
D、<-- --!>
（3）…标签的作用是（ D ）
A、斜体 B、下划线 C、上划线 D、加粗
（4）网页中的空格在html代码里表示为（ B ）
A、&；B、 ； C、"；D、<；
（5）定义锚记主要用到<a>标签中的（ A ）属性。
A、name B、target // C、onclick D、onmouseover
（6）要在新窗口中打开所点击的链接，实现方法是将<a>标签的target属性设为（ A ）
A、blank B、self C、parent D、top
（7）下列代表无序清单的标签是（ A ）
A、 <ul>…<li>…</ul>
B、<ol>…<li>…</ol>-
C、<hl>…<li>…</hl>
D、< li >…< ol >…</ li >
（8）定义表单所用的标签是（ B ）
A、table B、form C、select D、input
（9）要实现表单元素中的复选框，input标签的type属性应设为（ B ）
A、radio B、checkbox C、select D、text
（10）要实现表单元素中的单选框，input标签的type属性应设为（ A ）
A、radio B、checkbox C、select D、text
（11）要使单选框或复选框默认为已选定，要在input标签中加（ A //D ）属性
A、selected B、disabled C、type D、checked
（12）要使表单元素（如文本框）在预览时处于不可编辑状态，显灰色，要在input中加（ B ）属性
A、selected B、disabled C、type D、checked
多选题
（1）定义表格常用的3个标签是（ ABC ）
A、table B、tr C、td D、tp
（2）哪两个属性可用于表格的合并单元格（ AD ）
A、colspan B、trspan C、tdspan D、rowspan
（3）实现下拉列表框，要用到一下哪几个标签（ BC ）
A、input B、select C、option D、radio
（4）定义框架要用到以下的哪个标签（ BC ）*
A、framework B、frameset C、frame D、framespace
（5）H5中常见语义化结构标签有（ ABCDEFG ）*
A、header B、main C、footer D、section E、nav F、article G、aside
填空题
3、填空题
（1）、可用 <p><p/> 标签定义段落。
（2）、定义换行所用的标签是 。
（3）、要生成水平线，可用 <hr/> 标签。
（4）、<img>中的 src 属性是用于指定图片源文件地址的。
（5）、要定义表单元素中的文本框，input标签中type属性应设为 text 。
（6）、要定义表单元素中的密码框，input标签中type属性应设为 password 。
（7）、要把多个单选框设为一组（一组的意思是：一组之中只有一个可被选定），应把每个单选框的 name 属性的值设为相同。*
（8）、parttern属性验证手机号码的正则表达式^1345678{9}$。
二、CSS
简答题
1.CSS、HTML与JS之间的关系
HTML类似于建造一个毛坯房、CSS内外墙的装修，JS是安装智能家电
2.CSS有哪些作用？
美化HTML网页、使得内容与样式分离、提高复用性
3.CSS的导入方式有哪些？
内联样式（行内样式）、内部样式、外部样式
引用外部样式表的标签:<link rel ="stylesheet" type="css.text" href="文件名"/>
4.CSS的基础语法是什么？
选择器{属性：值，属性：值}
5.CSS的选择器有哪些以及相应的格式和优先级？
标签选择器标签{属性：值}、类选择器.类名{属性：值}、id选择器#id名{属性：值}
id>类>标签
6.伪元素选择器有哪些以及他们的格式是什么？
:状态{属性：值}
:link{} :active{} :hover{} :visited{}
7.层次选择器有哪些以及相应含义？
后代选择器：父 后代{属性:值}对后代起作用
子代选择器：父>子代{属性:值}对子代起作用
相邻兄弟选择器：选择器+选择器{属性:值}
8.浮动的作用
可以将原本竖着排列的控件，横向进行排列
9.盒子模型中内边距、边框与外边距的含义
内边距：边框与内容之间的距离
边框：包裹内边距的外围线条
外边距：控件与控件之间的距离
选择题
单选题
（1）、下列哪种方式是用类选择器定义样式的（ B ）
A、p{color:red;}
B、.one{color:red;}
C、#two{color:red;}
D、p,h1{color:red;}
（2）、下列哪个正确的css集体声明方式（D ）
A、p；h1{color:red;}
B、.one{color:red;}
C、#two{color:red;}
D、p,h1{color:red;}
（3）、下列样式定义字体为宋体、字体颜色为红色、斜体、大小20px、粗细800号，
正确的定义是：（ A）
A、p {font-family：宋体；font-size：20px；font-weight：800；color:red;font-style：italic； }
B、p {font-family：20px；font-size：-宋体；font-weight：800；color:red;font-style：italic； } C、p {font-family：20px；font-size：800；font-weight：宋体；-color:red;font-style：italic； }
D、p{font-family：800；font-size：20px；font-weight：red；-color: italic;font-style：宋体； }
（4）、下列样式定义字体间距为0.5倍间距、水平左对齐、垂直顶端对齐、有下划线
正确的定义是：（ A ）
A、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：top；text-align：left； }
B、 p{text-decoration：0.5em；letter-spacing：underline；vertical-align：top；text-align：left； }
C、 p{text-decoration：left；letter-spacing：top；vertical-align：0.5em；text-align：underline； }-
D、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：left；text-align：top； } -
多选题
（1） 在html文件中应用abc.css文件中的样式的方法有（AB）
A、<link href="abc.css" type="text/css" rel="stylesheet">
B、<style type="text/css">@import url(abc.css);</style>
C、<style type="text/css">@import (abc.css);</style>
D、<style type="text/css">import url (abc.css);</style>
（2）下列哪些是设置有关边框的属性（ ABC ）
A、border-color
B、border-style
C、border-width
D、border-back
填空题
（1）要在html标签中应用css类选择器所定义的样式，要设置标签的 类名 属性。
（2）css中的background属性是用于设置 背景格式 的。
编程题
1.做一个简单的页面
说明：因为是小白从零开始学习因此有些命名方法不规范
<style type="text/css">
.one{
color: red;
overflow: hidden;
}
.jjj{
width: 800px;
height: 1200px;
}
.two{
color: red;
overflow: hidden;
}
.three{
position: absolute;
top: 7px;
right: 0px;
font-size: 40px;
}
.four{
position: relative;
top: 30px;
float: left;
}
.checkbox{
height: 300px;
width: 300px;
}
.aaa{
float: righ;
font-size: 50px;
}
.bbb{
float: left;
font-size: 50px;
}
#one{
margin-left: 400px;
}
#two{
background-color: gainsboro;
font-size: 40px;
}
#three{
margin-top: 10px;
}
#four{
background-color: darkgray;
}
#mm{
height: 50px;
margin-bottom: 50px;
line-height: 50px;
margin-top: 50px;
background-color: gainsboro;
}
#oo{
margin-top: 50px;
float: left;
}
#parent{
overflow: hidden;
}
.cc{
color: yellow;
font-size: 50px;
}
.dd{
color: silver;
font-size: 50px;
}
</style>
<body style="background-color: lightgreen">
<div id="parent">
<div id="two" >
<span class="one" >请登录</span>
<span> 免费注册 漫步漫威</span>
</div>
<div class="three" >
<span class="two">漫威首页</span>
<span > 我的账户 漫威周边 收藏夹 商品分类 卖家中心 联系客服 网站导航</span>
</div>
</div>
<div id="parent" >
<div id="one">
<div id="oo" ><img src="../img/img1/标题.jpg" /></div>
<div>
<form>
<input type="text" size="220px" align="center" style="height: 100px;"/>
<input type="submit" value="搜索" style="height: 70px; width: 150px; font-size: 50px;margin-top: 50px;"/><br />
</form>
</div>
<div style="font-size: 50px;">蜘蛛侠 钢铁侠 绿巨人 黑寡妇 雷神 X战警 美国队长 黑豹 毒液 死侍 鹰眼 万磁王</div>
</div>
<div id="mm" >
<div style="font-size: 50px;">
您是不是想找：复仇者联盟 | 钢铁侠 | 雷神 | 黑寡妇 | 毒液 | 死侍 | 鹰眼 | 万磁王 |
灭霸 | 金刚狼 | 银影侠 | 牌皇 | 红骷髅 | 黑豹|
</div>
</div>
<div id="parent" >
<form>
<div class="bbb">价格：<input type="text" size="30" style="height: 50px;font-size: 40px;"/>——<input type="text" size="30" style="height: 50px;font-size: ;"/></div>
</form>
<div class="aaa" align="right" id="three">
<form >
<input type="checkbox" name="choice" style="height: 50px;width: 50px;"/>价格
<input type="checkbox" name="choice" style="height: 50px;width: 50px;"/>正品保障
<input type="checkbox" name="choice" style="height: 50px;width: 50px;"/>7天退换
<input type="checkbox" name="choice" style="height: 50px;width: 50px;"/>消费者保障
</form>
</div>
</div>
<table width="100%" >
<tr>
<th><img src="../img/img1/001.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></th>
<th><img src="../img/img1/003.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></th>
<th><img src="../img/img1/004.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></th>
<th><img src="../img/img1/005.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></th>
<!--</th>-->
</tr>
<tr>
<td align="center"><img src="../img/img1/007.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></td>
<td align="center"><img src="../img/img1/008.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></td>
<td align="center"><img src="../img/img1/009.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></td>
<td align="center"><img src="../img/img1/010.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center" style="font-size: 50px;">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></td>
</tr>
<!--<tr>
<td align="center"><img src="../img/img1/002.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p></td>
<th><img src="../img/img1/006.jpg" class="jjj"/><br /><p class="cc" align="center">￥40.0包邮</p><br /><p align="center">世界上最好的商品</p><br /><p align="center" class="dd">漫威服饰专营店</p><br /><p align="right" class="dd">如实描述</p>
</tr>-->
</table>
</body>
三、JavaScript
简答题
1.JavaScript的作用
是一种解释性脚本语言直接执行，是一种弱语言，依附于游览器中，为HTML增加动态效果
2.JavaScript有哪几种数据类型
string、number、boolean、undifined、object
3.JS动态赋值的语句
var b=new Array();
b.push(值1，值2)
4.JS数组的引用类型
var c = [{name:"zs",age:20},{name:"ls",age:30}];
然后以键值对的形式进行赋值
document.write(c[i].name+c[i].age+" ");
5.id获取元素对象与类名和标签获取对象有何不同
1.ID名查找元素，ID名在页面和在元素哪里只能是一个，所有查找Id不需要[0] 2.标签和类名不同，DOM规定他们可以是多个，蓑衣标签名和类名获取要加下标[0]来获取他们
6.什么是BOM
BOM是指游览器对象模型，有了游览器对象就可以操作js代码，因为在js中一切属于window
7.定时器的含义以及有那几种
定时器：指到达指定事件后，即可执行某段操作
一次定时器以及循环定时器
语句结构
一次性定时器：var timeId=setTimeout(function(){
函数体})
循环定时器：var timeId=setInterval(function(){
函数体})
清除定时器：clearTimeout（timeId）
timeId是自定义的定时器名称
8.Cookie的含义以及优劣
Cookie是指将数据以键值对的形式存储到客户端中
优势：操作简单，减轻服务器压力
劣势：数据容易丢失
选择题
单选题
（1） alert（）；的作用是：（ A ）
A、 弹出对话框，该对话框的内容是该方法的参数内容。
B、弹出确认对话框，该对话框的要用户选择“确认”或“取消”。
C、弹出输入对话框，该对话框的可让用户输入内容。
D、弹出新窗口。
（2）看以下JavaScript程序
var num;
num=5+true;
问：执行以上程序后，num的值为（ C //D ）
A、true B、false C、5 D、6
（3）看以下JavaScript程序
var x=prompt(“请输入1-5的数字！”,“”);
switch (x)
case “1”:alert(“one”);
case “2”:alert(“two”);
case “3”:alert(“three”);
case “4”:alert(“four”);
case “5”:alert(“five”);
default:alert(“none”);
运行以上程序，在提示对话框中输入“4”，依次弹出的对话框将输出: （ B ）
A、four,none
B、four,five,none
C、five
D、five,none
（4）window对象的方法中，（ B //A ）方法是用于弹出确认对话框，可让选择“确定”或“取消”
A、confirm() B、alert() C、prompt() D、open()
（5）用JavaScript实现打开一个新窗口，地址为abc.html,正确的方法是（ C//A ）
A、window.open(“abc.html”，“”，“”)；
B、window.open(“”，“abc.html”，“”)；
C、window.open(“”，“”，“abc.html”)；
D、window.open(“”，“”，“”)；
（6）鼠标移过事件和鼠标移出事件分别是（ A ）//B
A、onmouseout，onmouseover
B、onmouseover，onmouseout
C、onmousedown，onmouseup
D、onmouseup, onmousedown
多选题
（1）在JavaScript程序中加入注释，方法有（ AB ）
A、//注释内容
B、/注释内容/
C、/注释内容
D、/*注释内容
（2）以下JavaScript变量名不合法的有（ ）ABC
A、4Myvariable
B、My@variable
C、function//因为是关键字
D、Myvariable4
（3）location对象中可实现重新链接到其他网址的属性或方法有（ AC ）
A、href属性 B、reload（刷新） C、replace（） D、host//获取与设置主机
（4）history对象中能实现网页后退效果的方法是（ AC ）
A、back（） B、forward（） C、go（-1） D、go（1）
填空题
（1）、JavaScript中声明一个变量所用的关键字是 var 。
（2）看以下JavaScript程序
var a,b,c;
a=“2”；
b=2；
c=a+b;
运行以上程序后，变量c的值为 22 。
（3）看以下JavaScript程序*
var x,y;
x=10；
y=x++；
运行以上程序后，变量y的值为 10 。
（4）看以下JavaScript程序**
var i,j;
i=0；
j=i&&(++i)；
运行以上程序后，变量j的值为 01 。//0
（5）看以下JavaScript程序
var i;
i=8；
do{
i++;
}while(i>100); //不会循环判断之后就出来
运行以上程序后，变量i的值为 101 。9
（6）看以下JavaScript程序*
for(var i=1;i<=10;i++){
if(i= =5) continue;
if(i= =8) break;
alert(i);
}
运行以上程序后，弹出的对话框依次输出的值为 123467 。
（7）看以下JavaScript程序
var str1,str2,str3,str4; str1="10.5"; str2="8"; str3=str1+str2; alert(str3); str4=Number(str1)+Number(str2); alert(str4);
运行以上程序后，弹出的对话框依次输出的值为 18.5 +10.58//这个是str的拼接 。
（8）定义JavaScript函数所用的关键字是 function 。
编程题
1.切换图片
设置一张来换切换的图片
<script type="text/javascript"></script>
<script>
var isok=true;//关键点1:isok要设置为一个全局变量，设置在函数里面就是一个局部变量
//设置成了局部变量，则每次取反不管用，因为再次点击触发之后它局部变量依然会重新赋值
function myclick(){
alert(isok);
var picture=document.getElementsByTagName("img")[0];
if (isok) {
picture.src="../img/002.jpg";
} else{
picture.src="../img/001.jpg";
}
isok=!isok;//关键点2：来回切换关键的一部来自于取反，isok取反了就是false，再次点击按钮click
//所得到的isok值不一样就会触发到else下的语句
}
</script><input type="button" value="改变图片" onclick="myclick()"/>
<img src="../img/001.jpg" />2.级联列表
选择不同的日期，显示不同的菜单
<script type="text/javascript"></script>
<script>
function mychange(){
var date=document.getElementsByTagName("select")[0];
if (date.value=="one") {
var menu=document.getElementById("menu");
menu.innerHTML="<option>鱼香肉丝</option><option>宫保鸡丁</option>";
//innerHTML=代表内容的赋值
}else if(date.value=="two"){
var menu=document.getElementById("menu");
menu.innerHTML="<option>锅包肉</option><option>回锅肉</option>";
/*以下省略*/
}
}
</script><!--分析：1.级联列表是指一对多的含义
2.因此日期是一个select表，菜单又是另一个表
3.选择不同的值呈现出所对应的另一个表，所以需要两个表
-->
<select onchange="mychange()">
<option value="one">周一</option>
<option value="two">周二</option>
<option value="three">周三</option>
<option value="four">周四</option>
<option value="five">周五</option>
<option value="six">周六</option>
<option value="seven">周天</option>
</select>
<select id="menu"></select>3.连续切换图片
有一个"改变"按钮, 和显示图片的标签, 点击"改变",每次切换一张图片(有多张图) 提示: 图片需要用数组进行存储
<script type="text/javascript"></script>
<script>
var i=1;//定义全局变量，适用于整个区域
var arr=["../img/001.jpg","../img/002.jpg","../img/003.jpg","../img/004.jpg"];
function myclick(){
var pc=document.getElementById("pc");
//alert(arr[i]);
pc.src=arr[i];
i++;//但这里的局部变量会覆盖全局变量，并且每次点击都会触发i++,即每次触发值都会给改变
if(i==arr.length) {
i=0;
}
}
</script>
<!--
循环切换图片
分析：1.循环切换图片，点击一次按钮就切换一次图片，说明每次点击都会触发不同的数组下标
2.在这时不适用与for循环，因为是点击之后才触发，如果使用for循环，则点击一次
就会不停的在for循环中，这是不合理的，会显示错误
3.在最后做出判断，如果到了数组的最后一位数，要重新赋值从头开始
-->
<img src="../img/001.jpg" id="pc"/>
<input type="button" value="改变图片" style="font-size: 100px;" onclick="myclick()"/>4.用户注册功能
表单中有用户名,密码,确认密码,及注册按钮; （1）如果直接点"注册",则提示"用户名或密码及确认密码不能为空"红字
（2）如果输入的密码和确认密码不正确, 点击"注册",则提示"密码和确认密码不正确" 注意：有错误，则不能提交
<script type="text/javascript"></script>
<script>
function myclick(){
var name=document.getElementsByTagName("input")[0];
var ps1=document.getElementsByTagName("input")[1];
var ps2=document.getElementsByTagName("input")[2];
if (name.value==""||ps1.value=="") {
var ok=document.getElementsByTagName("span")[0];
ok.innerHTML="用户名或密码不能为空";
ok.style.color="red";
}
if (ps2.value!=ps1.value) {
var ok=document.getElementsByTagName("span")[1];
ok.innerHTML="密码和确认密码不正确";
ok.style.color="red";
}
}
</script><form>
用户名<input type="text" /><span></span><br />
密码<input type="password" /><span></span><br />
确认密码<input type="password" /><br />
<input type="button" value="注册" onclick="myclick()"/>
</form>5.用户注册功能2
表单中有用户名,密码,确认密码,及注册按钮;
-
输入用户名, 失去焦点后, 如果用户名已存在则在右侧span标签提示红色的"用户名已存在"(假设用户名为"wyz"为已存在)
-
如果点击用户名后, 没有输入,继续输入密码,则在右侧提示红色的"用户名不0能为空"
-
如果输入非"wyz", js中校验正确,则失去焦点后,右侧提示绿色的"恭喜可用"
<script type="text/javascript"></script>
<script>
function myblur(){
var name=document.getElementsByTagName("input")[0];
var ps1=document.getElementsByTagName("input")[1];
var ps2=document.getElementsByTagName("input")[2];
if (name.value=="wyz") {
var ok=document.getElementsByTagName("span")[0];
ok.innerHTML="用户名已存在";
ok.style.color="red";
}else{
var ok=document.getElementsByTagName("span")[0];
ok.innerHTML="恭喜可用";
ok.style.color="green";
}
}
function myfocus(){
var name=document.getElementsByTagName("input")[0];
if (name.value=="") {
var ok=document.getElementsByTagName("span")[0];
ok.innerHTML="用户名不能为空";
ok.style.color="red";
}
}
</script><form>
用户名<input type="text" onblur="myblur()" /><span></span><br />
密码<input type="password" onfocus="myfocus()" /><span></span><br />
<input type="button" value="注册" />
</form>6.定时器
做一个登陆表单，如果登录成功（假如用户名为“zs”，密码为“123”是正确的账户和密码），则通过cookie记录存储的账户和密码；下次打开，直接即可显示出账户和密码 提示：cookie的存储: "userpass=zs-123", 获取cookie时，拆用户名和密码
<script>
function logg(){
var user=document.getElementsByTagName("input")[0];
var ps=document.getElementsByTagName("input")[1];
if (user.value==""||ps.value=="") {
alert("用户名或密码不能为空")
}
if (user.value=="wyz"&&ps.value==123) {
var date=new Date();
date.setTime(date.getTime()+1000*60*60*24);
document.cookie="userpass=wyz-123;expires="+date.toGMTString();
alert("登录成功");
}
}
onload =function(){
var cookie=document.cookie;
var a=cookie.split(";");
//alert(a[0]);//userpass=wyz-123
var b=a[0].split("=");
//alert(b[1]);//wyz-123
var c=b[1].split("-");
//alert(c[0]);//wyz
var user=c[0];
var ps=c[1];
document.getElementsByTagName("input")[0].value=user
document.getElementsByTagName("input")[1].value=ps;
}
</script><form>
用户名<input type="text" value="" /><br />
密码<input type="password" value="" /><br />
<input type="button" value="登录" onclick="logg()" />
</form>四、JQuery
简答题
1.JQuery的含义
JQuery是js的代码库，封装了js的所有常用功能
2.js的页面加载于JQuery的页面加载的区别
js的页面加载，后面的会覆盖前面的，并且只执行一个
JQuery的页面加载不会被覆盖，并且会被优先加载
3.JQuery有那几种选择器
id选择器、类选择器和标签选择器
4.说明内容于属性的赋值
在JQuery中html内容的赋值类似于JS中innerhtml的赋值
如果不带参数是取值，那么带一个参数是赋值
如果带一个参数是取值，那么带两个参数是赋值
html是对内容的取值与赋值，attr是对属性的赋值与取值，val是对值的取值与赋值
5.添加元素有哪些方法？并说明他们之间的区别
append在子容器后面增加元素，preappend在子容器的前面增加元素
after在子控件后面增加元素，before在子空间前面增加元素
编程题
1.自定义动画
持续两秒时间, 将指定字体慢慢变大及加粗; 完成后, 提示一句话"加粗完毕"
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#big").click(function(){
$("#big").animate({fontSize:"100px",fontWeight:900},2000);
window.setTimeout(function(){
alert("字体加粗已完成")
},3000);
})
})
</script><!--持续两秒时间, 将指定字体慢慢变大及加粗; 完成后, 提示一句话"加粗完毕"-->
<p id="big" >点击我，让我们一起变大吧！</p>2.级联列表的动画效果
使用jquery完成日期级联显示菜单的效果
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("#date").click(function(){
if ($(this).val()=="one") {
//错误写法：这里使用append会不断在后面追加新的内容而不会更新
//$("#three").append("<option>鱼香肉丝</option><option>宫保鸡丁</option><option>酸菜鱼</option>");
//JQuery正确写法：使用JQuery的方法来每次点击都在更新内容
//$("#three").html("<option>鱼香肉丝</option><option>宫保鸡丁</option><option>酸菜鱼</option>");
//错误写法：$("#three")是JQuery的方法应该使用html来获取内容对内容进行赋值，innerHTML是js的方法
//不可混用
//$("#three").innerHTML=("<option>鱼香肉丝</option><option>宫保鸡丁</option><option>酸菜鱼</option>")；
//为什么在JQuery中也能使用JS原生代码中的innerHTML？
three.innerHTML="<option>鱼香肉丝</option><option>宫保鸡丁</option><option>酸菜鱼</option>";
}else if ($(this).val()=="two") {
//$("#three").append("<option>清炒时蔬</option><option>水煮牛肉</option><option>辣子鸡</option>");
//$("#three").html("<option>清炒时蔬</option><option>水煮牛肉</option><option>辣子鸡</option>");
//$("#three").innerHTML=("<option>清炒时蔬</option><option>水煮牛肉</option><option>辣子鸡</option>");
three.innerHTML="<option>清炒时蔬</option><option>水煮牛肉</option><option>辣子鸡</option>";
}
})
})
</script><select id="date">
<option value="one">周一</option>
<option value="two">周二</option>
</select>
<select id="three"></select>3.JQuery中的注册表单
<script type="text/javascript" src="../js/jquery-1.11.min.js"></script>
<script>
$(function() {
$("#log").click(function() {
if($("#name").val() == "wyz") {
$("span").css({"color":"red"}).html("已注册");
//在JQuery中设置对象的CSS样式有固定的规则
} else {
$("span").css({"color":"green"}).html("恭喜可用");
}
})
})
</script>用户名<input type="text" id="name" /><span></span><br /> 密码
<input type="password" id="ps" /><br />
<input type="button" value="注册" id="log"/>4.选择图片的透明比例
完成下图的操作: 下拉列表中有0.2,0.4,0.6,0.8,1.0等选项; 选中后对应显示图片透明比例
<select style="height: 100px;width: 200px;font-size: 50px;">
<option value="two">0.2</option>
<option value="four">0.4</option>
<option value="six">0.6</option>
<option value="eight">0.8</option>
<option value="one">1.0</option>
</select>
<img src="../img/001.jpg" style="opacity: 0.2;" /><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("select").click(function(){
if ($(this).val()=="one") {
$()
$("img").fadeTo(1000,1.0);
}else if ($(this).val()=="two") {
$("img").fadeTo(1000,0.2);
}else if ($(this).val()=="four") {
$("img").fadeTo(1000,0.4);
}else if ($(this).val()=="six") {
$("img").fadeTo(1000,0.6);
}else if ($(this).val()=="eight") {
$("img").fadeTo(1000,0.8);
}
})
})
</script>5.定向搜索图片
页面上有多张图片, 一个文本框,一个搜索按钮; 输入搜索的图片名,点击"搜索", 显示出包含此字母的图片
<script type="text/javascript" src="../js/jquery-1.11.min.js"></script>
<script>
$(function(){
var arr=["../img/001.jpg","../img/002.jpg","../img/003.jpg"]
$("#send").click(function(){
if ($("#content").val()==1) {
$("#one").fadeIn(1000);
}else if ($("#content").val()==2) {
$("#two").fadeIn(1000);
}else if ($("#content").val()==3) {
$("#three").fadeIn(1000);
}
})
$("#content").focus(function(){
$("#one").fadeOut(1000);
$("#two").fadeOut(1000);
$("#three").fadeOut(1000);
})
})
</script>
<style type="text/css">
img{
height: 500px;
width: 250px;
}
</style><input type="text" id="content"/>
<input type="button" value="搜索" id="send" /><br />
<img src="../img/001.jpg" id="one"/>
<img src="../img/002.jpg" id="two"/>
<img src="../img/003.jpg" id="three"/>6.添加表格、删除指定
有一个表单,有用户名,密码,年龄及提交选项; 点击提交后, 在下面的表格中产生一条记录; 注意:
-
初始会有一条表格头信息,只是在后面追加记录
-
信息头为用户名,密码,年龄,操作
-
点击删除操作, 可以删除指定记录
<form> 用户名<input type="text" id="name"/><br /> 密码<input type="password" id="ps"/><br /> <input type="button" value="提交" id="send" /> <table id="add" border="2px"> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </table> </form><script type="text/javascript" src="../js/jquery-1.11.min.js" ></script> <script> $(function(){ $("#send").click(function(){ //var name=document.getElementById("name").value; //var ps=document.getElementById("ps").value; var name=$("#name").val(); var ps=$("#ps").val(); $("#add").append("<tr><td>"+name+"</td>+<td>"+ps+"</td>+<td><a href='#'>删除</a></td></tr>"); $("a").click(function(){//因为这个表格是由前面部分生成的，所有要有包含关系 $(this).parent().parent().remove(); }) }) //错误做法：不能放在send的外面 /*$("a").click(function(){//因为这个表格是由前面部分生成的，所有要有包含关系 $(this).parent().parent().remove(); })*/ }) </script> -
五、Ajax
简答题
1.Ajax的含义
AJAX是指异步的JavaScript和XML，更多的是指多线程的并发执行，可用用于局部刷新，且不需要刷新整个页面，例如：用户注册以及购物车
2.AJAX的使用方式有哪些？以及加载方式有哪些？
使用方式：一是从服务器获取数据，二是从前端传参数，再通过服务器判断回传数据到前端
加载方式：get、post、ajax
3.get和post加载方式的区别
get方式是将参数从url中带过去，post是以请求体的方式发路径
-
4.JSON解析成对象或解析成数组
JSON.parseObject
JSON.parseArray
JSON.toJSONString
已知对象，解析成json字符串
JSON.stringify
已知json字符串解析成对象
JSON.parse
编程题
1.get的异步请求
使用jquery的get异步请求，传入name和age，将jsp中定义的student对象返回并解析 在标签中显示对象的name和age值 提示： jsp返回字符串-->后端可以将对象转字符串； 到达前端：字符串接收，再转对象
<script type="text/javascript" src="js/jquery-1.11.min.js"> </script>
<script>
$(function(){
$("#zhuce").click(function(){
var value=$("#name").val();
var value1=$("#age").val();
$.get("Work1.jsp",{name:value,age:value1},function(data){
var st =JSON.parse(data);
$("#write").html(st.name+"-->"+st.age);
})
})
})
</script>姓名<input type="text" id="name"/><br/>
年龄<input type="number" id="age"/><br />
<input type="button" value="注册" id="zhuce"/><br />
<span id="write"></span><%@page import="java.util.Map"%>
<%@page import="com.alibaba.fastjson.JSON"%>
<%@page import="com.qf.b_entity.Student"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name=request.getParameter("name");
int age=Integer.parseInt(request.getParameter("age"));
Student st=new Student();
st.setName(name);
st.setAge(age);
String json1=JSON.toJSONString(st);
response.getWriter().write(json1);
%>2.ajax的异步请求
使用jquery的ajax异步请求，传入name和age，将jsp中定义的student对象返回并解析， 在标签中显示对象的name和age值
姓名<input type="text" id="name"/><br/>
年龄<input type="number" id="age"/><br />
<input type="button" value="注册" id="zhuce"/><br />
<span id="write"></span><script type="text/javascript" src="js/jquery-1.11.min.js"></script>
<script>
$(function(){
$("#zhuce").click(function(){
var value=$("#name").val();
var value1=$("#age").val();
$.ajax({
url:"Work2.jsp",
type:"get",
data:"name="+value+"&age="+value1+"",
success:function(data){
$("#write").html(data);
var st1=JSON.parse(data);
setTimeout( function(){
alert(st1.name+":"+st1.age);
},1000);
},
beforesend:function(){
$("#write").html("服务器正在加载");
}
})
})
})
</script><%@page import="com.qf.b_entity.Student"%>
<%@page import="java.util.Map"%>
<%@page import="com.alibaba.fastjson.JSON"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name=request.getParameter("name");
int age=Integer.parseInt(request.getParameter("age"));
Student st1=new Student();
st1.setName(name);
st1.setAge(age);
String json2=JSON.toJSONString(st1);
Thread.sleep(2000);
response.getWriter().write(json2);
%>五、JS原生的Ajax
1.原生ajax完成注册功能
用户名：<input type="text" id="name"/><span id="a"></span><br/>
密码：<input type="password" id="password"/><br />
<input type="button" value="注册" onclick="myclick()"/><script type="text/javascript" ></script>
<script>
function myclick(){
var value1=document.getElementById("name").value;
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","Work1.jsp?name="+value1);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var result=xmlhttp.responseText;
if(result.trim()=="1"){
document.getElementById("a").innerHTML="用户已经被注册！";
document.getElementById("a").style.color="red";
}else if(result.trim()=="0"){
document.getElementById("a").innerHTML="恭喜您!可以注册!!";
document.getElementById("a").style.color="green"
}
}
}
}
</script><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name=request.getParameter("name");
String password=request.getParameter("password");
System.out.print(name);
if("zs".equals(name)){
response.getWriter().write("1");
}else{
response.getWriter().write("0");
}
%>2.ajax与下拉列表
文本框中输入内容，点击按钮，任选一种ajax异步请求，发送数据，并从jsp中返回该数据到下拉列表中
<input type="text" id="name"/>
<input type="button" value="添加" id="myclick"/><br/>
<select id="jia" >
</select><script type="text/javascript" src="js/jquery-1.11.min.js"></script>
<script>
$(function(){
$("#myclick").click(function(){
var value=$("#name").val();
$.get("Work2.jsp",{name:value},function(data){
$("#jia").append("<option>"+data+"<option/>");
})
})
})
</script><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name=request.getParameter("name");
response.getWriter().write(name);
%>
5935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
