- A+
-
567网页的组成:
-
html:超文本标记语言,网页结构层.
-
CSS:层叠样式表,网页的样式.
-
Javascript:脚本语言,规定了网页交互行为.
-
-
什么是JS?
-
JS是基于对象和事件驱动的解释型脚本语言.
-
JS特点:
-
基于对象
:JS中万物皆对象.JS中的任何内容都由一个对象来描述.任何操作
都是由对象的方法(函数)来进行描述. -
事件
驱动:JS可以直接通过用户的操作做出响应,而无需通过服务器响应. -
解释型脚本语言
-
-
-
JS的作用
-
页面的交互
-
前端和后端的交互.–三节点–四阶段
-
-
JS的历史:
-
1995年,网景公司开发了第一款商用浏览器。
-
需要在浏览器设计一个专门用来做表单验证的语言。
布兰登.爱奇
花了10天写了第一个js版本。 -
之所以JS命名为javascript主要的原因:网景和sun公司合作关系,有因为java非常火,搭了顺风车,其名为javascript。
-
同年微软开发了IE3.0,嵌入了克隆版的JS–
JSript
.后期由于IE是windows内置浏览器,后来网景就慢慢没落最后到倒闭。 -
原来网景公司Mozilla团队后来将浏览器内核开源,开源之后他们成立了Mozilla组织,后期开发了火狐浏览器。
-
后来因为浏览器之争,ECMA组织(欧洲计算机协会)组织各个计算厂商制定了JS的语法标准:
ECMAScript
.
-
-
JS的组成:
-
ECMAScript:规定了JS语法标准和常用对象。
-
DOM:(document object model)文档对象模型
-
BOM:(browser object model)浏览器对象模型
1.什么是js,js的特点是什么?
基于对象和事件驱动的解释型脚本语言. 特点: 基于对象 事件驱动 解释型脚本语言.
2.js的组成有哪些?
ECMAScript:规定了JS的语法规范. DOM:document object model 文档对象模型 BOM:browser object model 浏览器对象模型.
3.请说出js的三种引入方式,请分别举例阐述?
行内引入:通过标签的事件属性引入 <div onclick="aleart(1)"></div> 内部引入:在script标签的内部引入js代码 <script> ` alert(2); </script> 外部引入: <script src="./外部的js文件.js"></script>
4.谈谈你对程序调试的理解,可以使用那些方法调试程序?
程序调试:当程序运行时,用于检测程序运行过程的一种方式. 1.alert():警告框 2.console.log():控制台输出数据 3.document.write():在文档窗口中输出(写入数据) 注意:正常文档流中输出可以正常显示,文档加载完输出会替换原文档内容.
5.变量的声明方式有哪些?并举例说明?
1.先声明后赋值 var a; a =10; 2.声明的同时赋值 var a = 10; 3.同时声明多个变量 var a = 10,b=11,c = 12; var a = 10, b=11, c = 12; 4.连等声明: var a = b = 10;
6.js数据类型是如何划分的?
JS数据类型可以分为: 1.基本数据类型 number 整数 小数 负数 NaN:not a number (计算结果不是数值.) infinity:无穷大 string 单引号或者双引号包裹的内容. boolean ture false null:空对象 undefined:声明未赋值 2.复杂数据类型(引用数据类型) Array:数组 object:对象 function:函数
7.如何查看字符串的长度,如何获取字符串的对应下标的字符。
str.length:查看长度 str.charAt(下标)
8.变量的作用和命名规则是什么?
1.只能是数字,字母,下划线,$组成. 2.不能以数字开头 3.不能是关键字和保留字. 4.建议使用小驼峰命名法. 5.区分大小写. 6.不能重复声明.重复声明后面的会覆盖前面的.
9.typeof的返回值有哪些?
typeof的作用是查看变量的数据类型. 格式: typeof(变量) typeof 变量 typeof返回值: number-->number 字符串--->string 布尔类型--->boolean null--->object undefined-->undefined
1.算术运算的隐式转换规则有哪些?
1.除+号外,其他算数运算符在运算时默认将操作数转为number,不能转,结果为NaN. 2.+两边只要出现了字符串,就是字符串的拼接操作. 如果字符串+基本数据类型:字符串拼接. 字符串+复杂类型:调用复杂类型的toString()获取字符串格式,在和字符串拼接.
2.比较运算的隐式转换规则有哪些?
1.默认转为number进行比较. 2.字符串和字符串比较:按位比较ascii码. 3.NaN和任何内容比较的结果均为false.
3.==
和===
的区别?
==:比较的是值是否相等,会进行隐式转换. ===:比较值和类型时候都相等,不会进行隐式转换.
4.如何获取dom元素,请写出语法结构。
1.通过dom对象获取: document.getElementById('id'); document.getElementsByClassName("class") document.getElementsByTagName('tag') 2.通过父元素获取: parent.getElementsByClassName('class') parent.getElementsByTagName('tag')
5.常见的鼠标事件有哪些,请分别写出事件名称及其含义。
1.onclick:鼠标的点击事件 2.onmouseover:鼠标悬浮(移入) 3.onmouseout:鼠标移出 4.onmousemove:鼠标移动 5.onmousedown:鼠标按下 6.onmouseup:鼠标抬起 7.ondblclick:双击 8.oncontextmenu:右击
6.如何强制转数值类型,其规则有哪些?
转换方法: 1.Number() 2.parseInt(字符串)/parseFloat(字符串) 规则: 1.字符串字面量为数值的正常转为number,空串为0,其他为NaN. 2.布尔类型:true为1,false为0; 3.null和undefined转number:null为0,undefined为NaN 4.复杂类型转number,先调用复杂类型的toString(),再将字符串转为number. []-->toString-->''--->0 {}--->[object Object]-->NaN
7.如何强制转字符串,其规则有哪些?
转换方法: 1.String() 2.对象.toString() 规则: 1.基本数据类型转string,将数据两边用双引号或单引号包裹即可. 2.复杂类型: 数组: []--->'' [1]--->'1' [1,2]-->'1,2' 对象:[object Object]
8.如何强制转布尔类型,其规则有哪些?
1.数值转布尔:0和NaN为false,其他均为true; 2.字符串转布尔:空串为false,其他均为true; 3.null和undefined转布尔均为false. 4.复杂类型转布尔均为true.
1.页面有100个li标签,如何给这些标签绑定循环事件,请写出具体的思路和步骤。(也可以用代码表示)
var oLis = document.getElementsByTagName("li"); for(var i = 0;i<oLis.length;i++){ oLis[i].onclick = function(){ } }
2.请写出for循环的语法格式,并说出其执行流程。
循环的特征: 1.循环变量 2.循环的条件 3.循环体 4.更新循环变量的值. for(初始化循环变量;循环的条件;更新循环变量的值.){ 循环体 } 执行流程: 1.初始化循环变量 2.判断循环条件时候满足, 满足执行循环体 不满足结束循环 3.更新循环变量的值,继续从第2步执行.
3.分别写出单分支,双分支,多分支的语法结构.
1.单分支: if(条件){ 条件满足执行的代码 } 2.双分支 if(条件){ 条件满足执行的代码 }else{ 条件不满足执行的代码 } 3.多分支: if(条件1){ 条件1满足执行的代码 }else if(条件2){ 条件2满足执行的代码 }...{ ... }else{ 上述条件都不满足执行的代码. } switch(匹配项){ case value1:匹配项=value1时执行的代码;break; case value2:匹配项=value2时执行的代码;break; case value3:匹配项=value3时执行的代码;break; case value4:匹配项=value4时执行的代码;break; ... default:上述情况都不匹配执行的代码; }
4.如何操作DOM元素的内容?
1.操作表单元素的内容: 设置:元素.value = 新值 获取:元素.value 2.操作闭合标签的内容: 设置:元素.innerHTML/innerText = "新值" 获取:元素.innerHTML/innerText 注意: (1)元素设置内容会将原内容替换掉. (2)innerHTML获取或者设置内容是可以识别html标签的. (3)innerText只能获取文本内容,不能识别标签.
5.如何操作DOM元素的属性?
获取:元素.属性名 设置:元素.属性名= 属性值 注意: (1)元素.属性名只能获取或者设置默认属性,不能操作自定义属性. (2)操作class属性要通过:元素.className
6.如何操作DOM元素的样式?
设置样式:元素.style.样式名 = 样式值 注意: (1)样式名如果是中划线命名的,要改成小驼峰命名. (2)设置的样式作用在行内.
1.break和continue的作用?
break:结束循环。 continue:结束本次循环,继续下一次循环。
2.什么是对象,对象如何获取对象的属性值,如何遍历对象。
JS中的对象主要用来描述一个事物。一个事物可以有多个属性和方法。 var obj = { //对象的属性 name:'zs', age:10, //对象的方法 study:function(){ } } 获取对象的属性方法: 1.对象.属性名:obj.name 2.对象['属性名']:obj["name"] 遍历对象: for(var key in obj ){ //key:对象的属性名 obj[key]:key所对应的属性值value。 }
3.什么是函数,函数的作用是什么?
函数的定义:函数就是将`具有独立功能的代码块`整合到一起并`命名`,需要的时候`调用`即可。 函数的作用: (1)提高开发效率 (2)提高代码的重用率。
4.函数声明方式有几种,分别写出其语法结构。
1.关键字声明 function 函数名(){ } 2.表达式声明: var 函数名= function(){ }
5.函数的使用场景有哪些?
1.代码复用 2.事件处理函数。 //事件一旦触发,就执行函数中的代码。(自动调用函数。) //事件处理函数,事件不触发就不执行。 oBtn.onclick = function(){ } oBtn.onclick = show function show(){ } 3.对象的方法。 var obj = { //对象的属性 name:'zs', age:10, //对象的方法 study:function(){ } }
6.什么是形参,什么是实参。
形参:形式参数,函数声明时,写在小括号中的参数。 function fun(a,b){ } 实参:实际参数,函数调用时,实际传递的具体参数。 fun(10,15)
7.js中函数的参数在声明函数和调用函数时都有哪些需要注意内容?
1.函数参数的个数问题: (1)一个参数:声明和调用时直接写一个参数即可。 (2)多个确定的参数: 声明时,形参按照顺序用逗号隔开依次写到小括号中即可。 调用时,实参按照形参的顺序依次的传递即可。 函数调用时:实参给形参一一赋值。 (3)参数个数不确定: 声明时,形参可以不写。在函数内部使用arguments来接收所有的实参,并操作实参。 调用时,实参用逗号分隔传递即可。 function sumTotal(){ var s = 0; for(var i = 0;i<arguments.length;i++){ s+=arguments[i]; } } sumTotal(1,2) sumTotal(1,2,3) sumTotal(1,2,3,4) 2.参数赋值的问题: (1)实参和形参个数相等:实参给形参11赋值。 (2)实参比形参多:多余的实参忽略。 (3)形参比实参多:多余的形参的值为undefined。 3.参数的类型问题:JS所有的属性类型都可以作为函数的参数,不用显示声明函数的形参的数据类型,实参时什么类型,形参就是什么类型。
1.关于函数的返回值,你的理解是什么?且函数的返回值都有哪些注意的内容。
1.函数的返回值:函数执行所得的结果. 2.注意实现: (1)函数中需要使用return关键字返回返回值,函数外调用时可以使用变量接收该返回值. function fn(){ return 1 } var res = fn() (2)函数执行到return就直接结束函数执行. (3)函数没有return任何内容,默认返回undefined. (4)函数一次只能return一个内容.如果返回多个数据,需要使用数组.
2.什么是函数封装,函数封装的步骤是什么?
1.函数封装就是把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口,通过调用这个函数就能复用封装的功能. 2.封装的步骤: (1)确定函数名称,见名知意 (2)确定函数的参数,函数中不确定的内容,或者需要传入的内容使用参数来表示. (3)按照逻辑或者功能按步骤写函数体. (4)将需求结果使用return返回即可. 数据类型转换: Number()-->数组类型的对象. String()
3.请写出获取非行间样式的函数
function getStyle(elem,attr){ if(elem.currentStyle){ //IE return elem.currentStyle[attr]; }else{ //标准 return getComputedStyle(elem)[attr]; } }
4.this的作用有哪些?
this是函数中的一个特殊对象,在不同的函数中其指向不同. 1.普通函数中,指向window. function fn(){} 2.事件处理函数中,指向触发事件的元素. oDiv.onclick = function(){} 3.对象的方法中,指向当前对象. {name:zs,study:function(){}} 4.全局作用域下,指向window.
5.排他思想的实现思路是什么?
1.先清空所有相同元素的目标样式. 2.谁触发事件,就给谁添加目标样式.
6.什么是开关效果,开关效果实现思路是什么?
开关效果的思路: 1.设置一个变量(状态标识)记录每种状态。 2.判断当前处于什么状态,就设置成对应的状态,并修改状态标识。
7.什么是作用域,什么是作用域链。js的作用域可以分为哪些?
1.作用域:变量或者是函数的作用范围. 2.作用域可以分为: 全局作用域:整个script标签或者最外层 的js代码的位置. 局部作用域:函数内部. 3.全局变量和局部变量: 全局变量:在全局作用域下定义的变量. 局部变量:在函数内部定义变量. 关系:局部变量只能在函数内部使用,全局变量可以在任意位置都可以使用. 4.作用域链:JS查找变量的规则 规则:先从当前作用域查找,如果不存在继续向父级作用域查找,如果找到就直接用,找不到继续向父级查找,直到找到全局作用域为止,如果还未找到就报错:xx is not defined
8.什么是js的预解析(变量提升),及js的预解析过程是什么?
1.预解析是JS解释器执行JS代码的一个步骤. JS解释器执行JS代码的步骤可以分为2步: (1)预解析 (2)代码从上往下解释执行. 2.预解析过程: (1)在任何作用于下都有各自的预解析. (2)预解析解析的目标对象:var出来的变量,和function关键声明的函数. (3)预解析具体的处理方式:var出来的变量赋值为undefined,function声明的函数赋值函数体,如果函数同名,保存最后的一个.
1.什么是选项卡效果,选项卡效果如何实现?
选项卡效果:一组选项和一组页面相对应,点击一个选项显示相应页面. 1.分别获取选项和对应的页面. 2.对选项进行循环事件绑定 3.给循环添加自定义属性index,来标识每个选项下标. 4.在事件循环函数中通过this.index来确定操作的页面的位置.
2.定时器有哪几种,请分别写出其语法,并说出他们之间的区别?
1.延时定时器: 语法:id = setTimeOut(函数,延时时间) 作用:延时时间后调用一次函数,只调用一次. 2.间歇定时器: 语法:id = setInterval(函数,间歇时间) 作用:每隔间歇时间,调用一次函数.可以无限调用. 3.停止定时器: 语法:clearInterval(id);
3.请写出运动函数?
function move(elem,attr,step,target){ //1.清空定时器,避免定时器叠加. clearInterval(elem.timer); //2.判断速度正负. step = parseInt(getStyle(elem,attr))<target?step:-step; //设置定时器运动 elem.timer = setInterval(function(){ //(1)获取当前attr+step var cur = parseInt(getStyle(elem,attr))+step; //(2)判断终点 if((cur>=target && step>0)||(cur<=target && step<0)){ cur = target; clearInterval(elem.timer); } //(3)设置attr到elem elem.style[attr] = cur+'px'; },30) }
1.JS的对象可以分为哪些类,并列举出常见的对象。
1.内部对象 Number String Boolean Object Array Function Math Global Date RegExp Error 2.宿主对象 Dom Bom 3.自定义对象
2.Math对象的方法都有哪些并说明其作用?
1.取整方法 Math.floor():下取整 Math.ceil():上取整 Math.round():四舍五入 2.随机数 [0,1)随机数:Math.random() [0,n]随机数:Math.floor(Math.random()*(n+1)) [m,n]随机数:Math.floor(Math.random()*(n-m+1)+m) 3.数学公式 Math.max(1,2,3,4,..) Math.min(1,2,3,4,...) Math.abs() Math.sqrt():平方根 Math.pow(x,y):x^y
3.创建时间对象的方法有哪些?
1.系统时间:new Date() 2.自定义时间: a.多个参数:new Date(年,月-1,日,时,分,秒) b.一个参数: new Date(‘年,月,日,时,分,秒’) new Date(‘年-月-日,时,分,秒’) new Date(‘年/月/日,时,分,秒’)
4.Date对象的方法有哪些?
oDate.getFullYear() oDate.getMonth() oDate.getDate()-获取天 oDate.getDay()--获取星期下标 oDate.getHours()--小时 oDate.getMinutes()--分钟 oDate.getSeconds()--获取秒 oDate.getTime()--时间戳
5.字符串对象的方法有哪些(11)?
1.字符串属性 str.length 2.查找方法 str[下标] str.charAt(下标) str.charCodeAt(下标) str.indexOf('字符串'):查看字符串在str中首次出现的下标,如果未找到返回-1 3.变形方法 str.toUpperCase() str.toLowerCase() 4.截取方法 str.substring(start,end) str.slice(start,end) str.substr(start,length) 5.修改方法 str.replace(替换什么,用什么替换) str.split('切分符号') str.trim():去除两边空格
1.数组的创建方法有哪些?
1.字面量创建 var arr = [1,2,3] 2.关键字new创建 var arr = new Array();//创建空数组 var arr = new Array(3);//长度为3的空数组. var arr = new Array(1,2,3)//[1,2,3]
2.数据的添加元素的方法有哪些?
1.使用下标添加: arr[i] = value;//给数组下标i的位置添加一个value.也有修改数组元素内容的作用; 2.尾部添加和删除: arr.push(items); arr.pop():尾部删除一个元素,返回删除的元素 3.头部添加和删除: arr.unshift(items):头部添加 arr.shift():头部删除一个元素返回
3.如何给数组去重?
1.比较删除法: var arr = [11,22,22,33,11]; for(var i =0;i<arr.length-1;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ arr.splice(j,1); j--; } } } 2.比较存储法 var newArr = []; for(var i =0;i<arr.length;i++){ if(newArr.indexOf(arr[i])==-1){ newArr.push(arr[i]); } }
4.请写出给一个数组使用选择排序算法排序的代码?
for(var i=0;i<arr.length-1;i++){ var minIndex = i; for(var j=i+1;j<arr.length;j++){ if(arr[minIndex]>arr[j]){ minIndex = j; } } //minIndex和i交换 var temp = arr[i]; arr[i] = arr[minIndex]; arr[minIndex] = temp; }
5.请写出给一个数组使用冒泡排序算法排序的代码?
for(var i = 0;i<arr.length-1;i++){ for(var j=0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } }
6.已知数组var arr = [1,2,-4,6,0,9];如何对该数组元素进行随机排序?
var arr = [1,2,-4,6,0,9]; arr.sort(function(a,b){ return Math.random()-0.5; })
7.如何对数组中的对象排序,请用代码举例说明?
var arr = [ {name:'zs',age:18}, {name:'xx',age:20}, {name:'zz',age:19}, ] arr.sort(function(a,b){ returen a.age-b.age;//按照年龄从小到大. })
8.统计一个字符串中某个字符出现的次数?并找出出现次数最多的字符?
var str = 'aafwafawf23j2i32inkl32jio23'; var obj = {} for(var i = 0;i<str.length;i++){ var count = str.split(str[i]).length-1; var char = str[i]; obj[char] = count; } //找到value最大的key var maxCount = 0; var manChar; for(var key in obj){ if(obj[key]>maxCount){ maxCount = obj[key]; maxChar = key; } } maxChar:次数最多的字符 maxCount;最大重复次数
1.数组的常用方法有哪些(10)?
1.添加和删除 arr.push(items):尾部添加 arr.pop():尾部删除 arr.unshift(items):头部添加 arr.shift():头部删除 2.splice方法: arr.splice(start,deleteCount,items):从start开始删除deletecount个元素,并用items替换. deleteCount:如果不指定,默认删除到结尾. 3.数组的其他方法: arr.join("连接符"):将数组元素通过连接符拼接成一个字符串. arr.reverse():反转数组. arr.concat(arr2,arr3):将数组拼接成一个新数组[arr,arr2,arr3] arr.indexOf('元素'):判断元素在数组中的下标,如果不存在返回-1 arr.slice(start,end):从start开始截取到end-1为止(包头不包尾) 4.排序方法: arr.sort(function(a,b){ return a-b//升序 return b-a//降序 })
2.正则对象的创建方法?正则修饰符有哪些?
字面量: /正则表达式/修饰符 关键字:new RegExp('正则表达式','修饰符') 修饰符: 1.g:全局匹配. 2.i:忽略大小写
3.正则的匹配方法有哪些?
1.字符串的方法: str,replace(regObj,用什么替换) str.split(regObj) str.search(regObj):查询regObj匹配的内容的下标,如果没有找到返回-1 str.match(regObj):将正则匹配到的内容提取出来.配合g修饰符可以全局查找提取. 2.正则对象方法: regObj.test(str):查看正则对象时候匹配字符串,true为匹配,false为不匹配. regObj.exec(str):检索正则匹配到的内容,返回一个数组.
4.请列举出常见的元字符并说出他们的含义?
单个字符: .:除换行符意外的任意字符. [abc]:匹配a或b或c [a-z]:匹配小写字母 [^a-z]:匹配非小写字母. d:数值0-9 w:数字字母,下划线 s:空白字符(空格 ,换行n,t) b:单词边界 表示重复次数: ?:重复0或1次 *:>=0 +:>=1 {n};重复n次 {n,m}:[n,m] {n,}:>=n
5.DOM如何获取子节点,并说出他们的区别?
parent.children :返回htmlcollection,获取标签子节点. parent.childNodes:返回NodeList,可以获取所有类型的子元素(文本节点,注释节点,标签节点)
6.DOM如何获取父节点。
1.获取直接父元素:子元素.parentNode 2.获取定位父元素:子元素.offsetParent
7.DOM如何获取兄弟节点?
1.首节点:parent.firstElementChild || parent.firstChild 2.尾节点:parent.lastElementChild || parent.lastChild 3.下一个兄弟: 参考节点.nextElementSibling || nextSilbing 4.上一个兄弟:参考节点.previousElementSibling || previousSilbing
8.如何通过css选择器获取元素?
document/parent.querySelector();获取选择器选中的第一个元素. document/parent.querySelectorAll():获取选择器选中的所有元素.
9.如何创建一个标签节点。
document.createElement("标签名")
1.DOM的属性操作有哪些方法,并说明其作用?
1.元素.属性名操作属性: 获取:元素.属性名 设置:元素.属性名 = 属性值 注意:只能操作默认属性,操作自定义属性怎么设置怎么获取. 2.元素.getAttribute(属性名):获取属性 注意:可以获取任意属性. 3.元素.setAttribute(属性名,属性值) 可以设置任意属性. 4.元素.removeAttribute(属性名)
2.DOM如何快速的获取表格内容,都有哪些方法。
第一步:获取table标签 第二步:通过table标签属性快速获取其他表格元素. oTab.tHead-表头 oTab.tBodies:获取所有的tbody oTab.tFoot:获取表的底部 oTab.tBodies[0].rows:获取tbody的所有的行 oTab.tBodies[0].rows[0].cells:获取tbody的第一行的所有单元格.
3.如何快速的获取表单的input,form表单的事件分别有哪些,其作用是什么?
1. 第一步:获取form标签 第二步:通过form标签.表单元素name属性可以快速获取所有的表单控件. 2.form的事件: (1)onreset:重置事件,事件函数中返回true:允许重置,false:阻止重置. (2)onsubmit:表单提交事件,事件函数中返回true:允许提交,false:阻止提交.
4.input表单控件的事件(5个)有哪些,请分别说明起作用。
onfocus:表单获取光标触发. onblur:表单失去光标 oninput:获取焦点后,,当表单内容发生变化时触发(实时触发) IE低版本不报错,无效. onpropertychange:获取焦点后,当表单内容发生变化时触发(实时触发) IE低版本有效. onchange:失去焦点的时候输入框内容发生变化时触发(当前内容和上一次内容比较)
5.什么是BOM,BOM的核心是什么,window和document的区别是什么?
BOM:broswer object model(浏览器对象模型) BOM的核心是window,window是JS中最大的对象,所有全局变量和函数都属于window,可以通过window.来调用,也可以省略window window和document的区别: 1.window表示浏览器窗口对象,是JS最大的对象.是BOM的核心. 2.document表示文档对象.是DOM的核心.
6.BOM的client系列有哪些属性,并说明其作用。
元素.clientWidth:获取可视宽 (content+padding) 元素.clientHeight:获取可视高(content+padding) 获取窗口的可视区宽高: document.documentElement.clientWidth/clientHeight
7.BOM的offset系列有哪些属性,并说明起作用?
1.获取元素的占位宽高: 元素.offsetWidth/offsetHeight(content+padding+border) 2.获取元素的位置:(获取距离定位父元素的距离) 元素.offsetTop/offsetLeft
8.BOM的scroll系列有哪些属性,并说明其作用?
1.获取元素实际宽高: 元素.scrollWidth/scrollHeight 2.获取被卷曲的高度:元素.scrollTop 3.获取元素被卷曲的宽度:元素.scrollLeft 4.获取页面被卷曲的高度: document.body.scrollTop || document.documentElement.scrollTop
9.DOM创建节点,删除节点,添加节点,替换和复制节点的方法分别是什么?(DOM操作节点的方法)(7)
1.获取节点:通过id获取------document.getElementById() 通过class获取---document/parent.getElementByClassName() 通过标签名获取---document/parent.getElementByTagName() 通过CSS选择器获取---document/parent.querySelector() documnet/parentquerySelectorAll() 获取子节点:---parent.children---获取标签子元素 ---返回HtmlCollection parent.childNodes---获取所有类型的子元素 ---返回NodeList 获取父元素 直接父元素---child.parentNode 定位父元素---child.offsetParent 获取兄弟节点 第一个兄弟节点---parent.firstElementChild||parent.firstChild 最后一个兄弟节点--parent.lastElementChild||parent.lastChild 下一个兄弟----refChild.nextElementSibling||refChild.nextSibling 上一个兄弟----refChild.previousElementSibling||refChild.previousSibling 2.操作节点 创建节点---document.createElement("tagName") 添加节点: 追加末尾----parent.appendChild(子元素) 前面插入元素---parent.insertBefore(newChild,refChild) 删除节点: 删除自身---元素.removed() 删除子元素---父元素.removeChild(子元素) 替换节点: parent.repaceChild(newChild,refChild) 复制节点: 被复制的节点:cloneNode(boolean) boolean=true---复制标签和内容 boolean=false---复制标签---默认 3.操作节点属性 标签.属性名 getAttribute setAttribute removeAttribute 4.操作节点内容 innnerHTML innerText 5.操作节点的样式 设置样式---标签.style.样式名=样式值 获取样式:function getStyle(elem,attr){ if(elem.currenStyle){ return elem.currenStyle[arrt] }else{ getComputedStyle(elem)[arrt] } }
1.什么是事件对象,如何获取事件对象?
事件对象是事件函数中的特殊对象,浏览器会将和事件相关的信息放到事件对象中. 获取事件对象: 1.事件处理函数的第一个参数就是事件对象. 2.window.event(window可以省略) var e = window.event || e;
2.如何绑定事件,兼容写法是什么?如何封装一个绑定事件的函数。
1.标准: 元素.addEventListener(事件类型,事件处理函数) 2.IE: 元素.attachEvent(on事件类型,事件处理函数.) 兼容: if(元素.attachEvent){ 元素.attachEvent(on事件类型,事件处理函数.) }else{ 元素.addEventListener(事件类型,事件处理函数) } 函数封装: function bindEventListener(elem,etype,fn){ if(elem.attachEvent){ elem.attachEvent('on'+etype,fn.) }else{ elem.addEventListener(etype,fn) } }
3.如何解绑事件,兼容写法是什么?如何封装一个取消绑定事件的函数。
1.标准: 元素.removeEventListener(事件类型,事件处理函数) 2.IE: 元素.detachEvent(on事件类型,事件处理函数.) 兼容: if(元素.detachEvent){ 元素.detachEvent(on事件类型,事件处理函数.) }else{ 元素.removeEventListener(事件类型,事件处理函数) } 函数封装: function unbindEventListener(elem,etype,fn){ if(elem.detachEvent){ elem.detachEvent('on'+etype,fn.) }else{ elem.removeEventListener(etype,fn) } }
4.什么是事件流,事件流分为哪些阶段,并说明这些阶段的过程。
事件流:浏览器解析执行事件的过程.事件流可以分为捕获和冒泡阶段. 事件的执行: (1)确定事件目标 (2)事件传递 捕获阶段:当事件发生时,从window依次先事件目标(e.target)传递,如果某个元素由相同类型的事件,就触发,直到传递到事件目标为止. 冒泡阶段:当事件发生时,从事件目标开始依次先父元素传递的过程,如果某个元素由相同类型的事件,就触发,直到传递到window为止.
5.如何阻止事件冒泡?
1.获取事件对象 var e = window.event||e; 2.阻止冒泡: (1)标准:e.stopPropagation() (2)IE:e.cancelBubble = true;
6.如何阻止默认行为?
默认行为: a标签默认跳转 img拖拽默认保存 button在form默认提交 右键默认菜单. 1.元素.on事件类型绑定事件,通过事件函数中return false; a.onclick = function(){ return false;//阻止默认行为 } 2.通过事件对象阻止默认行为: 标准:e.preventDefault(); IE:e.returnValue = false;