JS初识

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:空白字符(空格&nbsp;,换行\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;

posted @ 2022-04-28 17:18 爱吃水果的姐姐阅读(135) 评论(0) 编辑收藏举报

刷新页面返回顶部

JS初识

公告