前端第一周重点内容整理

HTML+CSS

常用样式总结

1. 文本居中：text-align：center
2. 去掉链接下划线：text-decoration: none;
3. 添加下划线：text-decoration:underline
4. 文本倾斜：font-style: italic;
5. 撑满父容器：flex：1
6. li去掉左边的符号：list-style-type: none;
7. 设置阴影：text-shadow: 3px 3px 5px black;
8. 相对/绝对定位：position：relative/absolut
9. 获取存在属性名完全匹配属性值的元素：[属性名=属性值]{}
10. 属性值以某个字符串开头：[属性名^=属性值开头]{}
11. 属性值包含某个字符串：[属性名*=包含属性值]{}
12. 属性值以某个字符串结尾：[属性名$=属性值结尾]{}

CSS基本选择器

1.标记选择器
	tarName{}
2.类别选择器
	.class{}
3.id选择器
	#id{}

css复合选择器

1.交集选择器
    tagName.class{}
    tagName#id{}
2.并集选择器
	sel1,sel2,sel3,selN{}
3.后代选择器
	sel1 sel2 sel3 selN{}
4.子辈选择器
	 sel1 > sel2{}
5.紧邻兄弟选择器
	sel1 + sel2{}
6.兄弟选择器
	sel1 ~ sel2{}
7.全选选择器
	*{}

css伪类选择器

sel:伪类{
    伪类是指元素处于某种状态下
}
a:link{}
a:visited{}
:hover{}
:active{}

css盒子模型

1. 整体居中方式

   1. 设置像素：局限性较大，无法实现可响应式
   2. 设置百分比：永远与该元素的父元素进行比较。因此需要在head中声明高度为100%
   3. 使用视口宽度和高度：vw和vh 不需要设置任何参照物

2. 给子元素设置margin-top时，父元素会跟着子元素一起往下

   1. 父元素设置：overflow：hidden
   2. 父元素或子元素设置浮动
   3. 3.父元素设置border:1px solid transparent
   4. 父元素设置padding-top：1px

css定位

1. 相对定位：基于自己原本的位置进行定位，原位置不会被释放
   1. position：relative
2. 绝对定位：基于关系最近定位过的祖先元素进行定位，定位后原位置释放
   1. position：absolute
3. iframe标签与target属性

---

---

JS

1. 添加断点：debugger

2. 弹窗：alert

3. 根据id获取元素节点：document.getElementById(‘btn’)

4. 创建一个元素节点：document.createElement(‘tr’)

5. 向某个元素中添加超文本：元素.innerHTML()

6. 向某个元素中添加文本：元素.innerText()

7. 使用js渲染样式：元素节点.style.样式名 = 样式值

   样式名必须使用小驼峰：background-color ===》 backgroundColor

8. 模板字符串：${直接输出的值}==》ES6新特性

9. 箭头函数 ==》 ES6新特性

10. 可输入数据的弹窗：prompt(‘对话框里的文本’，默认值) 点击确定返回填写的值

11. 直接从页面输出数据(包含html标签)：document.write(${i}+${j}=${i + j}<br>)

    数组

12. 引入外部独立的JS文件， src表示外部独立文件的路径

    注意：一个script标签，要么引入独立文件，要么书写，不能两者兼得

13. 创建数组

    1. 通过复杂类型自带的构造器创建数组

       const arr = new Array()

    2. 直接创建数组

       const arr1 = [1,2,3,4,5]

    3. Array.of方法创建数组===》》ES6新特性

       let arr = Array.of(参数)

    4. Arrya.from方法创建数组===》》ES6新特性

14. 迭代：for of ===》》ES6新特性

15. 迭代：forEach ===》》ES6新特性

16. 迭代：for in

17. 复制数组：copyWithin===》》ES6新特性

18. 特定值填充数组：fill ===》》ES6新特性

19. find(),findIndex() ===》》ES6新特性

20. 是否包含某元素：includes===》》ES7新特性

21. 常用增删改查操作（可以修改原数组）

    1. push():尾部添加
    2. unshift():头部添加
    3. shift():头部删除
    4. pop():尾部删除
    5. reverse():逆序排列
    6. sort():正序排列
    7. splice():根据索引删除

22. 会创建新数组的函数

    1. filter() ：返回符合过滤条件的数据
    2. find() ：仅仅返回第一个符合过滤条件的数据
    3. map() ：一般不设置过滤表达式,如果设置了表达式则仅仅返回是否符合的布尔,原数组多少个数据,依然返回多少个布尔，map 生成的新数组长度和原数组肯定一致

对象

1. 使用对象字面量创建对象

   const|let 对象名 = {
       属性名:属性值,
       属性名:属性值,
       属性名:属性值,
       ...
       //如果属性名后面是一个函数,则这个属性就可以称之为方法
       //ES5 写法
       方法名:function(){
   
       }
       //ES6 新特性 直接将方法进行缩略写法
       方法名(){
       },
   }
   

   • 直接将方法进行缩略写法 ===》》ES6新特性

   • 如果属性名与属性值恰好重名,则仅书写属性名 ===》》ES6新特性

   • 获取属性值：

     1. 属性值 = 对象.属性名

     2. 属性值 = 对象[‘属性名’]

   • 删除属性和属性值 如果删除成功返回 true 失败 false：delete 对象名.属性名

   • 获取所有的属性名：Object.keys(person)

   • 获取所有的属性值：Object.values(person)

2. 使用对象自带的构造器创建对象

   const obj = new Object()
   obj.name = '张三'
   obj['age'] = 33
   console.log(obj)
   

结构赋值 ===》》ES6 新特性

1. 通过数组赋值：let [value1,value2,value3] = [100,true,‘etoak’]

2. 通过对象赋值：

    let {myname,mypass,myaddress,myhobby,myvalue} = { 
        myname:'钟离',
        mypass:12345,
        myaddress:'璃月港',
        myhobby:['和胡桃吃饭','逛街'],
        value:'测试',
    }
    let {demo} = {
        demo(){
            console.log('我是 demo-------')
        }
    }
   

分离语法 ===》》ES6新特性

1. 使用分离运算符 … 可以将数据从字符串、数组、对象中分离出来

2. 分离字符

   1. 针对字符串

      let str = 'etoak'
      console.log(...str) //e t o a k
      console.log([...str]) // ['e', 't', 'o', 'a', 'k']
      

   2. 针对数组

      const arr = [1, 2, 3, 4, 5]
      console.log(...arr)//1 2 3 4 5 6
      const demo = (a, b, c, d, e) => a + b + c + d + e
      console.log(demo(...arr)) //15
      const arr2 = [...arr,999]
      console.log(arr2)// 1 2 3 4 5 6 999
      

   3. 针对数组

      const obj = {
          name:'张三',
          age:33,
          location:'济南',
      }
      const obj2 = {...obj,hobby:['犯法']}
      console.log(obj2)/*
      				age: 33
      				hobby:['犯法']
                      location: "济南"
                      name: "张三"
      				*/
      

动态表格

1. 使用css选择器获取元素节点：document.querySelector(‘.main’)===》》ES6新特性

2. 获取单行文本输入框的元素节点：

   1. .value：表示获取value的属性值
   2. .trim()：去掉自负床两侧的空格

3. 如何判断单选框哪个被选中了

   document.querySelectorAll('input[name=gender]')
   
   nodeRadios.forEach(nodeRadio=>{
       /* 如果某个被选中了,则 checked 返回 true */
       if(nodeRadio.checked){
           /* 获取的性别就是这个被选中的单选框元素节点的
                       value 属性值 */
           gender = (nodeRadio.value-0)
       }
   })
   

4. 动态的对表格操作之后需要再次调用查询函数进行回显

浅拷贝和深拷贝

浅拷贝:两个拷贝后的数据不管哪一个修改,都会影响另一个,既你变我也变,称之为浅拷贝
深拷贝:两个拷贝后的数据不管哪一个修改,都不会影响另一个,既你变我不变,称之为深拷贝

1:使用 =
基本类型:肯定是深拷贝
复杂类型:肯定是浅拷贝
2:使用 ... Object.assign() slice() Array.from()	concat()  copyWithin(ES6新特性)
复杂类型:拷贝之后,如果修改的数据是这个复杂类型表层的数据,这个数据是基本类型,则深拷贝拷贝之后,如果修改的数据是这个复杂类型表层的数据,这个数据是复杂类型,则浅拷贝
3: JSON.parse(JSON.stringify())
又称之为万能转换器,不管什么数据,都是深拷贝	但是注意 对与数据有诸多限制

---

---

Jquery选择器

1. js中的元素节点与 jQuery 元素是不是同一种元素?如果不是为什么? 两者如何进行转换?

   1. jquery元素是对 js 元素节点一个轻度的封装,js 元素节点与 jquery 元素，不能通用 方法 函数 属性,只能使用自己的 方法 函数 属性
      • nodeSp.innerHTML = xxxx
      • $sp.html(xxxxx)

2. js => jQuery

   $(nodeSp)	$(document)	$(location)	$(history)	$(screen)
   

3. jQuery => js

   $sp[0]		$sp.get(0)
   

4. jQuery常用标签

   1. $(‘tagName’)
   2. $(‘.class’)
   3. $(‘#id’)
   4. $(‘tagName.class’)
   5. $(‘tagName#id’)
   6. $(‘sel1,sel2,selN’)
   7. $(‘sel1 sel2 selN’)
   8. $(‘sel1 > sel2’)
   9. $(‘sel1 + sel2’)
   10. $(‘sel1 ~ sel2’)
   11. $(‘[属性名]’)
   12. $(‘[属性名=属性值]’)
   13. $(‘[属性名^=属性值开头]’)
   14. ${(}^{\prime }[属性名$=属性值结尾]')
   15. $(‘[属性名*=包含属性值]’)*
   16. $(‘*’)

5. 使用jQuery渲染样式

   sel.css('样式名','样式值')
   sel.css({
       样式名:样式值,
       样式名:样式值,
       样式名:样式值,
   })
   样式名:必须使用小驼峰格式
   

激发事件

1. 给jQuery元素绑定多个事件

   sel.on('事件1 事件2 事件N',function(){
       只要激发一个事件,就执行此回调函数
   })
   $(:contains(text)):获取一个 jquery 元素,这个元素中包含了 text 文本
   事件:在 jQuery 中事件与 js 类似,但是没有 on 前缀
   $('button:contains(试试)').on('click mouseout',function(){
   /* 
   	$(this):表示已经通过 jquery 选择器获取的元素列表 
   	attr(属性名,更改后的属性值)         */
       $(this).attr('disabled',true)
   })
   

   2. 给jQuery元素绑定特定事件

      sel.事件(function(){ })
      $('input[type=button]').click(function(){
      /* append():向现有元素中追加子元素,如果存在子元素则追加到现有子元素之后,注意这里与 js 的 append功能一样，仅仅是重名,并不是同一个函数 */
          $('.tb').append('<tr><td>添加的一行</td></tr>')
      })
      

   3. 鼠标滑过滑出元素

      sel.hover(
          function(){//鼠标滑过执行此函数
      /* addClass():添加 class 属性
      removeClass():删除 class 属性
      toggleClass():如果不存在则添加,如果存在则删除
      只有 class 可增删,id 无此功能 */
         		$(this).removeClass().addClass('red')
      	},
          function(){//鼠标滑出执行此函数
           	$(this).removeClass().addClass('blue')    
          },
      )
      

   4. 迭代方式 1

      循环体.each(function(index,alias){})
      $('.myul li').each(function(index,a){
          if(index===3){
              $(this).addClass('red')
          }
      })