第四周知识回顾

第四周知识回顾

前段部分

浮动：

float 让竖着的页面，横着显示

左浮动：float: left; 右浮动：float:right；

浮动之后，设置边距用magin进行修改

定位:

position属性：专门用于选定参考对象的属性

absolute：绝对定位—盒子中存在元素，此元素不占据任何空间

relative：相对定位–盒子中存在元素，此元素可以任意移动位置，但原位置不能被占用

fixed:固定定位，固定一个元素，不受盒子大小影响

js分支结构：

语法1：

if(条件语句){

代码块}else{

代码块}

语法2：

if(条件){

代码块

}else if(条件){

代码块}else{

}

三目运算符：

条件?结果1：结果2

循环：

1.for -in循环：

for(变量 in 序列){

代码块}

2.while循环

while(条件语句){

代码块}

3.传统for循环

for(表达式1;表达式2；表达式3){

代码块}

4.传统for循环改while循环

表达式1

while（表达式2）{

代码块

表达式3

}

数组

数组的增删改查

增加：push --向数组末尾添加新元素 list.push()

删除：pop-- 删除数组中的最后一个元素 list.pop()

指定下标删除指定个数：splice(a,b)

修改：直接下标修改内容 list[0]=

DOM操作

DOM操作具体内容-操作节点（节点就是标签）

a.直接获取节点 -document.getElenmentByID(id属性值)-通过id属性值获取标签

b.获取父节点：节点.parentElement -获取指定节点的父节点
c.获取子节点：节点.children-获取指定节点的所有子节点
节点.firstElementChild -获取指定节点的第一个子节点
节点.lastElementChild-获取指定节点的最后一个子节点

创建新的标签

document.createElement(标签名)

添加节点

节点1.appendChild(节点2)-在节点1的最后添加节点2

节点1.insertBefore(节点2，节点3)-在节点1中的节点3前面添加节点2

删除节点

remove()-删除节点

节点.remove()

节点文字

节点.innerText

节点.innerHTMl

定时器

Interval定时器，Timeout定时器

setInterval(函数，时间)–创建定时器，时间为毫秒。函数为function

clearInterval-清空定时器

T1 = setInterval (function(){

},时间)

事件绑定

事件三要素：事件源，事件，事件驱动程序

绑定事件的方法

1.在标签内部给事件源的事件属性赋值：<标签名 事件='事件驱动程序'></标签名>

2.在Js总给标签对应的节点的事件属性值赋值：事件源节点.事件=事件驱动程序对应的函数

事件驱动程序对应的函数必须是普通函数的函数名或者匿名函数

函数的this是事件源

3.在Js中通过节点对象的addEventListener绑定事件: 事件源节点.addEventLisetener(事件,事件驱动对应函数)
注意：这里的事件名称要去掉on this是事件源

事件类型

1.鼠标相关事件

onclick-鼠标点击事件

onmouseover-鼠标悬停

onmouseout-鼠标离开标签

2.按键相关事件

onkeypress-按键按下事件

onkeydown-按键按下事件

onkeyup-按键弹起事件

按键相关事件必须通过绑定2，3方式绑定，需要返回值的时候，必须用evt function(evt){}

3.值改变事件

onchange-用于检查下拉列表发生改变的时候使用，一般使用较少

弹框

alert():只有提示信息和确定按钮

confirm():有提示信息（一般是疑问问题），确定按钮和取消按钮

prompt():有弹框信息，输入框，确定和取消按钮

jQuery的用法

获取节点：$(css选择器)

创建节点：$('<p></p>')直接在括号创建标签

添加节点：

p1=$('<p></p>')

节点1.append(节点2) - 在节点1的最后添加节点2 $('body').append(p1)
节点1.prepend(节点2)-将节点2插入到节点1中的最前面 $('body').prepend(p1)
节点1.before(节点2)-将节点2放到节点1前面
节点1.after(节点2)-将节点2放到节点1后面

删除节点：节点.remove() $('p1').remove()

获取，修改节点内容

获取标签：标签.text()、标签.html()
修改：标签.text(新内容)、标签.html(新内容)

普通的属性修改和获取

标签.attr(属性名)

标签.attr(属性名，新的属性值)

Vue的基本用法

控制标签内容 ：{{vue中的data的属性名}}

控制标签属性：v-bind:标签属性名="vue中data的属性名"

for循环：v-for="变量 in vue中的data属性名"

双向绑定：v-mode:vue中的data的属性名

创建vue对象：

app1=new Vue({

el:“绑定对象”

data:{

属性名1：属性值1，

属性名2：属性值2，

}})