JavaScipt基础知识二

创建顶部菜单时 没有紧贴头顶,可以设置body{margin:0;}这样就紧贴着了
min-width是设置最小宽度

1.后台管理布局:
position:
fiexd:页面永远固定窗口的某个位置,只显示固定的页面,想看下面的得加overflow:auto 才有滚动条滚下去
relative:单独使用无意义配合absolute
absolute:指定位置 滚动滑轮时就不见了 添加overflow:auto 即添加滚动条 并左侧菜单不会跟随滚动
a.左侧菜单跟随内容滚动
b.左侧不跟着内容滚
border-radius 边框变圆

条件语句 switch(条件){
case ‘条件’:
xxxx
case ‘条件’:
xxxx
都不成立 执行 default:
xxxx
}

2.序列化
数组转字符串:JSON.stringify(数组名)
字符串转数组:JSON.parse(字符串名)
在这里插入图片描述
3.转义
encodeURI()将除了英文转成编码
deodeURI()将编码转回原先定义的符号
将数据转义后保存在cookie
在这里插入图片描述
4.时间
new Date获取当前日期时间
getMinutes()获取当前分钟
setMinutes(变量名)设置分钟
下面举例 获取分钟数并设置+4分钟
在这里插入图片描述5.作用域
其他语言里作用域以块为单位{},python以函数为作用域

1.JavaScript以函数为作用域
2.作用域在还未被调用之前,已经创建
3.函数的作用域存在作用域链,并且也是在被调用之前创建
4.函数内局部变量 声明提前,例如console.log(xxoo) 会提前整个里执行 var xxoo值为undefind 真正的写在他后面就没用了 必须再次console

6.javascript面向对象
在这里插入图片描述
上图为定义字段,foo函数相当于一个类
this代指对象相当于python的self
创建对象时,new 函数()
在这里插入图片描述上图为定义方法,例如我定义了字段o2 name为dadad我再调用定义的方法
o2.sayname()则会触发上方定义的this name也就是dadad,但是方法会在javascript里每个对象都保存一份,所以要用到原型

7.原型
图为原型的定义方法,当对象调用他时,类会从他的原型里去找有没有这个方法,就不会造成资源浪费
在这里插入图片描述
对面向对象的自我见解:有this就是一个类,并且是类的构造方法,代指python里的self 创建对象使用new关键字创建,基本实现面向对象,但是造成了资源浪费,再应用原型,类可以指向原型,帮我们找

8.基本文本内容操作
innerText仅获取文本 innerHTML获取全内容
也可以赋值text赋值的是字符串,html可以赋值标签

9.value获取值修改值
适用于input及select标签textarea标签
select特有的属性 selectedIndex获取下标

10.样式操作:
className 返回是以字符串形式
classList 返回以列表形式
classLIst.add添加 remove删除
命名.样式例(style).所选样式(例color)=‘red’

11.创建标签的方法:
1.通过字符串的形式
2.通过对象的方式例如 命名.style.fontSize=‘16px’
对象的方式创建标签
document.createElement(‘div’) 创造标签
命名.appendchild(被包含的对象) 嵌套
属性操作:
setAttribute设置属性(属性名,值value)
removeAttribute(属性名)删除属性
attributes打印全部属性

12.创建标签并添加到HTML中
这是一个点击按钮即生成一个框的函数代码 末行里的beforeBegin代表是在开始前显示 一共有四个
beforeBegin开始前 aterBegin开始后
beforeEnd结束前 afterEnd结束后在这里插入图片描述
这是第二种方法利用对象的方式创建在这里插入图片描述
13.提交表单:
任何标签都可以提交表单,但要用到JS,先使用document找到form标签 加上.submit()即可在这里插入图片描述14.其他:
console.log()显示 alert弹窗
var v=confirm(提示信息)例如问用户是否真的删除 弹出确定取消 V确定控制台返回TRUE 取消FALSE

在这里插入图片描述在这里插入图片描述
15.URL和刷新
location.href获取当前网页
location.href=“” 重新定
location.reload()页面刷新

16.定时器
setInterval 多次定时器
格式setInterval(funciton(){},时间)
clearInterval清除多次定时器
setTimeout(function(){},时间)单次定时器
clearTimeout清除单次定时器

17.事件:
onclick点击会调用所设置的事件
ondbclick双击
onfocus和onblur一起用,例如搜索框会有默认字则onfocus定义当点击后为空白,即onbulur定义了value值为空
onmouseover鼠标悬停
onmouseout鼠标移出
addEventListener(‘click’,function(){console.log(‘a’)},false) false表示冒泡 true表示捕捉
冒泡从后到前 捕捉从前往后

18.绑定事件两种方式:
a.直接标签绑定,就是标签里写
οnclick=‘xxx()’
b.先获取Dom对象,然后绑定
document.getElementById(‘xxx’).onclick

19.this,当前触发事件的标签
1.在标签中οnclick=‘xxx(this)’
然后在script中function xxx(形参,自由定义)
var a=括号里的形参 即可获得其当前触发事件的标签
2.先找到标签然后.οnclick=function(){
可以直接写this代指当前标签}

3.先找到标签.addEventListener(“事件类型如click”,操作,false(后往前,true前往后))
这个add可以同时console出两个东西,并且绑定同一个事件

dom1操作先找到想设置标签的位置,然后借助document找到标签或id后.onclick点击才生效还有.onmouseover鼠标悬停=匿名函数(){xx}
a.onmouserover=function(){}
就可以实现 行为js 样式css 结构html 相分离的页面

20.AO词法分析
先从形参里找,再到局部变量,声明表达式,没有声明表达式则取局部表量 词法分析完执行
在这里插入图片描述JS中的正则表达式
\d是数字 \b是空格 \w匹配一组字符串字母
在JavaScript中正则只有两种方法,一个是test一个是exec 获取匹配数据
1.test-判断字符串是否符合规定正则
rep=/\d+/里test中只要有数字都返回true
rep=/^\d+$/全部是数字才返回true
^代表开头 $尾部 d+

在这里插入图片描述
2.exec获取匹配的数据
首先定义匹配的格式 /\d+/为格式
如图获取到123,以数组的方式返回
exec只匹配第一个
在这里插入图片描述
分组
如果想拿匹配成功的某一个东西可以通过分组,如图我rep定义的格式为/wang(\w)/即获取str字符串中有wang的字符串因为我加了(),获取了wang的字符串后,会再获取其后面的值,也就是7,如图所示,分别以字数组方式返回在这里插入图片描述全局匹配
/…/g代表全局匹配,普通的exec只会匹配一个,而加了g则一个一个的去匹配

多行匹配
/…/m为多行匹配 默认也为多行匹配
那么m的作用是什么呢,如图,我Java前加了^匹配以Java开头的,不加m就只能匹配到第一行的开头
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值