1、个人介绍(1分钟)
2、(Q1)在input标签中,设置出入20个字符。
设置maxlength=”***”即可
(Q2)textarea.限制输入20个字符
1)maxlength:最大长度
onchange:在域的内容改变时发生触动。
onkeydown:在用户按下一个键盘按键时发生
onkeyup:键盘按键被松开时发生。如果省略了,原想预计20的情况下,会变成21,并且最后一个字符是最后敲进去的。
substring() 方法:用于提取字符串中介于两个指定下标之间的字符。
<textarea rows="3" cols="50" maxlength="20" οnchange="this.value = this.value.substring(0,20)" οnkeydοwn="this.value = this.value.substring(0,20)" οnkeyup="this.value = this.value.substring(0,20)" ></textarea>
2)onpropertychange(只在ie有效)
<textarea rows="3" onpropertychange = "if(this.value.length>20) value = value.substring(0,20)"></textarea>
3)调用js函数onkeyup/onkeydown/onPast
<textarea id="text2" type="text" name="text" maxlength="5" οnkeydοwn="changLenth()" οnkeyup="changLenth()" onpast = "changLenth()"></textarea>
<script type="text/javascript">
function changLenth(){
var value = document.getElementById("text2").value;
if(value.length>5){
value = value.substring(0,5);
}
}
3、css3的新特性
// CSS3有哪些新特性:
// 新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
// 圆角 (border-radius:8px)
// 多列布局 (multi-column layout)
// 阴影和反射 (Shadow\Reflect)
// 文字特效 (text-shadow、)
// 文字渲染 (Text-decoration)
// 线性渐变 (gradient)
// 旋转 (transform)
// 增加了旋转,缩放,定位,倾斜,动画,多背景
// transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation
1).CSS3的选择器
1)E:last-child 匹配父元素的最后一个子元素E。
2)E:nth-child(n)匹配父元素的第n个子元素E。
3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
4)tbody: nth-child(even), nth-child(odd):此处他们分别代表了表格(tbody)下面的偶数行和奇数行
2). @Font-face 特性
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
3).边框: 圆角、阴影、图片
<div class="div">
<p><font>你好,我是字母</font></p>
</div>
<style type="text/css">
.div{
border:200px solid black;//边框
border-radius: 25px;//圆角
box-shadow: 10px 10px 5px #888888;//阴影和其颜色
border-image: url(C:/Users/xyt/Pictures/图片/coulde.jpg) 300 300 round ;//设置边框的图片(不能与border-radius同时出现)
}
</style>
4)CSS3 的渐变效果
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-linear-gradient(left,#ace,#f96);
5)多列布局 (multi-column layout)
<style type="text/css">
.newspaper{
/*column-count规定元素应该被分隔3列*/
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
/*column-gap 属性规定列之间的间隔*/
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
/*column-rule 属性设置列之间的宽度、样式和颜色规则。*/
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
6)、CSS3制作特效
(1) Transition 对象变换时的过渡效果
- transition-property 对象参与过渡的属性
- transition-duration 过渡的持续时间
- transition-timing-function 过渡的类型
- transition-delay 延迟过渡的时间
(2) Transforms 2D转换效果
主要包括 translate(水平移动)、rotate(旋转)、scale(伸缩)、skew(倾斜)
(3) Animation动画特效4、js里面的类型
数字、字符串、布尔、Null、Undefined & 对象(Object 、Array 、Function 、Data等)。
基本数据类型:是简单的存值。
引用数据类型:的值保存在内存中的对象,js不允许直接访问内存的位置,实际上是操作对象的引用。
5、基本类型和复杂类型(对象)有什么区别
a 声明变量时不同的内存分配:
1)原始值:存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
2)引用值:存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存地址。
b 不同的内存分配机制也带来了不同的访问机制6、什么是闭包,什么时候用到?
闭包就是能够读取其他函数内部变量的函数。函数a的内部函数b,被函数a外部的一个变量引用的时候,就创建了一个闭包。(闭包只有在被调用时才执行操作)
闭包的特性:
①.封闭性:外界无法访问闭包内部的数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动向外界提供访问接口;
②.持久性:一般的函数,调用完毕之后,系统自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包结构依然保存在系统中,闭包中的数据依然存在,从而实现对数据的持久使用。
闭包的实际例子(回答输出什么):
<script type="text/javascript">
var a =1;
console.log("1:"+a);
function A(){
a=2;
console.log("2:"+a);
var a = 3;
return function(){
alert(a);
console.log("3:"+a);
}
console.log("3:"+a);
}
A()();//调用A函数中的return函数
</script>
回答最后输出什么?
输出3
7、什么是事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
8、什么是事件代理
当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。
<script type="text/javascript">
// window.οnlοad=function(){
// var ull = document.getElementById("ull");
// console.log(ull);
// var li = ull.getElementsByTagName('li');
// console.log(li);
// for(var i =0;i<li.length;i++){
// li[i].onclick = function(){
// alert(123);
// }
// }
// }
//运用了事件代理
window.οnlοad=function(){
var ull = document.getElementById("ull");
ull.οnclick= function(){
alert("yes");
}
}
</script>
<ul id="ull">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
9、http协议有哪些
请求报文:
响应报文
10、header头常用的字段
四种不同类型的头标:
1.通用头标:即可用于请求,也可用于响应,是作为一个整体而不是特定资源与事务相关联。
2.请求头标:允许客户端传递关于自身的信息和希望的响应形式。
3.响应头标:服务器和于传递自身信息的响应。
4.实体头标:定义被传送资源的信息。即可用于请求,也可用于响应。
头标格式:<name>:<value><CRLF>
Cache-Control头域 :Cache -Control指定请求和响应遵循的缓存机制。
Date头域 :Date头域表示消息发送的时间,
11、跨域问题,通讯跨域,怎么解决?
http://www.cnblogs.com/JChen666/p/3399951.html
a.com 和b.com
document.domain+iframe的设置,应用于主域相同而子域不同;
利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限
Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要在同一客户端就行,跨应用程序, 可以跨域。
window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。
12、js事件有哪些
onmouseover:鼠标放上去时触发事件
onmouseout:鼠标从上面移开时触发事件
onclick:鼠标单击事件
onfocus:获得焦点
onblur:失去焦点
onchange:下拉菜单值改变事件,只用于下拉菜单select元素
oninput、onpropertyChange:判断用户输入事件,可以检测用户输入是否符合规范,检测的时候不用失去焦点,所以说是动态检测。