前端之JavaScript
Posted mcc61
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端之JavaScript相关的知识，希望对你有一定的参考价值。
css的一些内容复习
ps 有一些标签自带下面的一个或多个属性值
p标签自带margin上下16px
ul标签自带margin上下16px padding-left：40px
marging:用于调整标签与标签之间的距离（外边距）
border：用于调整边框的粗细
padding：用于调整标签内部文本与边框之间的距离（内边距）
content：标签内部文本
margin:10px,20px,30px,40px 上右下左（**）
margin：10px,20px,30px 上 左右
margin：10px,20px 上下 左右（**）
margin：10px 上下左右
ps:padding的规则亦是如此
border： solid 3px red;
border-left
border-right
border-top
border-bottom 调标签某一个样式
网页布局都涉及到了浮动，但是浮动会造成父标签塌陷，如何解决浮动带来的影响呢？
浮动 （先搭架子） 用来做网页的布局 （先搭建网页骨架，再去调样式，最后调js代码） 缺点：浮动的元素会脱离文档流，造成父标签塌陷（基于这个标签被谁套住了） 如何解决浮动带来的负面影响： 1.先手动再写一个div强行撑起来 2.clear属性 限制 3.clearfix .clearfix:after content:‘‘; clear:bothl display:block /*让这个内容独占一行*/ ps:应用场景 左右页面布局
剩下的css内容的补充
溢出
overflow：hidden/auto/scoll
ps:应用场景 圆形头像（width=100% 是让头像全部显示，所以是100%）
定位
标签默认是static（静态），不能调整top，left,right,bottom
如果想要调整：
相对定位：相对于标签自身的位置
绝对定位：相对于已经定位过的父标签再做定位 购物车下面的大框
固定定位：相对于浏览器固定在窗口的某个位置，不随文档的上下滑动而变动
研究是否脱离文档流：
脱离文档流：浮动，绝对定位，固定定位
不脱离文档流的：相对定位
z-index
调整页面与用户的距离
示例： 模态框
透明度 opacity 调节的是所有标签的透明度
rgba() 自能调节颜色的透明度
javascript的语法学习
1.JavaScript和Java的关系
js:Javascript 和Java一点关系都没有，当初Java很火，这门是为了蹭Java的热度
所以不要错认为JavaScript和Java有某种关系
2.JavaScript的注释 注释是代码之母
//单行注释
/*
多行注释
*/
3.JavaScript中的结束符
结束符是;注意是英文状态下的分号
4.声明变量的关键字 var
变量声明的关键字：var 变量名=“值” js属于动态类型(同一个变量可以存不同数据类型的值) var x="egon"; var x="18";
4.变量
变量命名规则 js中$也可以用来作变量名 var $=‘女‘；console.log(‘$‘,$) 一般是以驼峰体命名，首字母小写 var userName="张全蛋";
声明变量：
var name=‘hello‘
let name=‘egon‘ let就用在局部环境,局部中使用var会影响全局
5.引入方式 2种
方式1：直接在script内部写js代码
方式2：在js内部书写js代码，然后在script中src属于引入外部js代码文件
6.变量的命名规范
数字，字母，下划线，$
不能以数字开头，并且不能与存在的关键字冲突
python中建议：user_nmae
javascript建议使用（驼峰体）：userName
7.数据类型
1.数值类型 2.字符串类型 3.布尔类型 4.underfined 5.对象 null 数组 [1，2，3，4] 自定义对象 ‘name‘:‘jason‘ 6.数值类型 NaN 表示当前转换的对象不是一个数值类型，但是NaN是一个数值类型 7.symbol 新增的
8.数据类型详细解析
1.1数字类型 var n1=18;var n2=18.1；var n3=1.81e5; var n4=NaN //Not a Number表示这个值不是一个数字 2.1字符串类型 var s1="小强"; var s2="egon"; var s=s1+s2; //字符串拼接用+号 常用方法.length/.trim()/.trimleft()/.trimright()/.charAt(n)/.concat(valule)字符串的拼接/.indexOf("xiao")子序列位置 /.slice(start,end) 切片/.substring(start,stop) 切片 .toLowerCase()小写 /.toUpperCase() 大写 /.split(delimiter,limit)分割 limit限制返回的列表的元素的个数 substring 和slice的区别 相同点： 如果start=stop ,返回空字符串 后面的参数是索引，特点是顾头不顾尾 如果stop省略，那么会取到字符串的末尾，就是只有start的时候，默认全部取出 如果某个参数超过string的长度，这个参数会被替换成string的长度 就是不会报错喽？是的，不报错 区别：substring（对应的索引）的特点 还是不会报错！！！ 如果start>stop,start和stop会交换， 如果是负数或者不是数字，就会被0替换 var s="hello world " s.substring(-8,9); 是负数会默认将负数换成0 "hello wor" s.substring(‘a‘,9); 不是数字也会默认将第一个换成0 "hello wor" s.substring(9,0); 如果第一个参数大于第二个参数，默认会将两者交换位置 "hello wor" slice（对应的索引）的特点 如果start>stop 不会交换两者 s.slice(9,0); "" s.slice(1,0); 只会返回‘‘空字符串 "" s.slice(3,1); "" 如果stop 小于0，会从字符串末尾处开始往前数stop个字符结束，不包括stop s.slice(0,-7); 可以理解为先倒着找到了7个元素，然后将这7个元素去掉，从0开始 "hello wo" s.slice(0,-9); 先倒着找9个元素，然后将这9个元素去除，从0开始显示出来 "hello " s.slice(0,-4); 先倒着找4个元素，然后将这4个元素去除，从0开始显示剩下的 "hello world" 如果start小于0，会从字符串末尾处开始往前数start个字符结束，包括start s.slice(-7,1); 这个没有什么实际意义，倒着找到了元素，但是又让在1这里结束，臣妾做不到啊！ "" s.slice(-7); 如果不写后面的stop，默认是找到全部，倒着找到了7个元素，直接将后面所有的东西返回 "rld " 2.indexOf(substring,start) 用于查找元素的位置，但是只会找到第一个元素就结束查找，后面相同的元素就不会接着查找，除非指定后面的start s.indexOf("o",0); 未指定start的时候，默认只找到第一个元素就不往后找了 4 s.indexOf("o",5); 指定start的时候，超过了第一个元素的位置就会往后查找下一个元素 7 s.indexOf("w",0); 未指定start的时候，只找到第一个就不找了 6 3.charAt(n) 返回第n个元素 s.charAt(3); 后面的这个参数是个数，不是索引！ "l" 4.concat(value,...) 类似与python中的append 用于多个数组的合并，将数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变 新数组的成员添加到原数组的尾部！！！ 在字符串中是拼接，类似数据库中的concat var l=[] l.concat(1,2,3); 将新元素添加到数组中 (3) [1, 2, 3] l.concat(1,[2,3]); 将新元素添加到数组尾部，然后数组的合并 (3) [1, 2, 3] l.concat([1],[2],[3]); 将新元素依次添加到数组的尾部，然后数组合并 (3) [1, 2, 3] 3.1 bool值 全部小写，也是true/false（空格，0，null，underfined，NaN） 4.1 null是原先有值，将他重新定义，underfined是一开始就没有定义 5.1数组[] 常用方法 length/push--append/pop--pop/unshift--insert/shift--头部移除元素/slice--split reservse--reservse/join--join/concat(连接数组)--extend/sort--sort/forEach/splice(删除并添加)/map(映射)--switch forEach查看容器中的每一个元素 容器.forEach(元素，元素对应的索引，元素所在的容器) 逻辑体代码
9.相关运算
数学运算符 + - * / % // 比较运算符 == 弱等于 ===强等于 不仅比较值的大小还比较typeof ！=弱不等于 ！==强不等于
10.流程控制和循环
if -else 固定格式 if (条件1) 逻辑体代码 else （条件2） 逻辑体代码 ; **注意这里是英文状态下的分号; for 循环--类似与python中的while循环 固定格式 for (起始条件；结束条件；条件成立因素) 逻辑体代码 ;
11.函数
关键字function 函数名+（） 函数体 函数返回值return 函数的调用 统一格式 function 函数名()函数体代码 函数返回值； function func() //无参函数，没有返回值 console.log(‘hello‘) ; function bar(x,y) //有参函数，没有返回值 console.log(‘hello world‘) ; function func() //无参函数，有返回值 return 555 ; function bar(x,y) //有参函数，有返回值 return x+y ; **注意在python中如果返回多个是以元组的形式返回，但是在JavaScript中，默认只返回最后一个，所以如果想要多个元素，就用数组将这个元素括起来 **注意在python中传参的时候根据位置参数传参是必须保证实参和形参个数一致才可以，但是在JavaScript中，传多传少都不会报错，传多了只会取取能接受的前两个，传少了默认是0
12.JSON方法
json对象
stringify loads
parse dumps
13.正则
正则的两种定义方式 1.new reg1=new RegExp() 2. reg2=/^[A-Za-z][A-Za-z0-9]5,9$/ 坑点集锦： 1.正则表达式中千万不要写空格 2.全局匹配模式配置last index 3.匹配的时候不传任何参数默认匹配underfined
14.BOM
BOM location window.location.href //获取URL window.location.href="URL" //跳转到指定页面 window.location.reload() //重新加载页面 alert警告框/confirm确认框/prompt输入框 可以拿到具体的输入内容
15.DOM
Document Object Model 直接查找（*****） id var pEle=document.getElementById(‘id‘) pEle; pEle.parentElement //查看当前id的父亲 pEle.parentElement.parentElement //查看当前id的父亲的父亲 class（类） var pEle=document.getElementByClassName(‘class‘) tag(标签) var pEle=document.getElementsByTagName(‘p‘) 间接查找
以上是关于前端之JavaScript的主要内容，如果未能解决你的问题，请参考以下文章