前端_模版字符串里面设置图片背景-程序员宅基地

技术标签: web  

移动端布局步骤:

视口:

  • 视觉视口
  • 布局视口
  • 理想视口
rem布局实现适配

​ root em-----rem html字体的倍率

​ em 当前字体的倍率

  1. 修改视口

    <meta name="viewport" content="width=device-width">
    
  2. 引入rem.js

    <script src=""></script>
    
  3. 修改rem.js中设计稿的宽度

背景图片:

	//引入背景图片  禁止重复  位置(top right bottom left)
backgorund:url() no-repeat left bottom/contain;
	//背景图片的大小
background-size:100% 100%;
	//背景图片的大小  按照宽高中的较大者占满屏幕(缩放图片)
background-size:contain;
	//背景图片的大小  按照宽高中的较小者占满屏幕(缩放图片)
background-size:cover;

渐变:

background:linear-gradient(top,颜色1,颜色2,颜色3,......);
第一个参数:渐变开始的方向:top  left  right  bottom  25deg
颜色:red  #fff  rgb(0,0,0)  rgba(0,0,0,0.7)

浏览器内核:

  • -webkit- 谷歌
  • -moz-火狐
  • -ms- IE
  • -o- 欧鹏

flex布局:

  • 容器的属性:

    1. flex-direction 决定主轴的方向

      row 主轴在水平方向 从左到右 (默认)

      row-reverse 主轴在水平方向 从右到左

      column 主轴在垂直方向 从上到下

      column-reverse 主轴在垂直方向 从下到上

    2. flex-wrap 换行的设置

      wrap 换行 第一行在上面

      wrap-reverse 换行 第一行在下面

      nowrap 不换行 (默认)

    3. justify-content 定义了项目在主轴上的对齐方式

      flex-start 主轴的起点方向

      flex-end 主轴的终点方向

      center 居中

      space-between 两端对齐,项目之间的间隔都相等

      space-around 每个项目两侧的间隔相等

    4. align-items 定义项目在交叉轴上如何对齐 (适用于一根轴线和多根轴线)

      flex-start 交叉轴的起点方向

      flex-end 交叉轴的终点方向

      center 居中

      baseline 项目的第一行文字的基线对齐 (文字的底部对齐)

      stretch 如果项目未设置高度或设为auto,将占满整个容器的高度 (默认值)

    5. align-content 定义了多根轴线的对齐方式 (仅适用于多根轴线)

      flex-start 交叉轴的起点方向

      flex-end 交叉轴的终点方向

      center 居中

      space-between 与交叉轴两端对齐,轴线之间的间隔平均分布

      space-around 每根轴线两侧的间隔都相等

      stretch 如果项目未设置高度或设为auto,将占满整个容器的高度 (默认值)

  • 项目的属性:

    1. order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

    2. flex-grow 属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大

    3. flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小 ,值为0时,项目不缩小

    4. flex-basis 定义了在分配多余空间之前,项目占据的主轴空间 可以给他像width 、height一样的固定值 则项目占据固定值

    5. flex 上述属性的简写形式

    6. align-self 定义单个项目在交叉轴上的对齐方式(允许单个项目有与其他项目不一样的对齐方式 )

      • flex-start 交叉轴起点

      • flex-end 交叉轴终点

      • center 中心

A链接:

  • title 标题
  • target 控制新页面打开的方式 默认值为_self 在本窗口打开 _blank 在新窗口打开

浮动:

  • 浮动的BUG
    • 问题:父元素不设置高度,子元素在浮动时,不能自动撑开父元素

    • 原因:浮动的元素脱离文档流

    • 解决方法:

      • 父元素设置高度

      • 给父元素添加overflow:hidden

      • 使用clear:both

        .box:after{
                  
            content="";
            display:block;
            width:0;
            height:0;
            line-height:0;
            clear:both;
        }
        

定位:

分类:
  • 相对定位:position:relative;

  • 绝对定位:position:absolute;

  • 固定定位:position:fixed;

    • 层级

      z-index:10;   层级只有在有定位属性的元素上调层级
      

文本模型:

  • 换行:

    • word-break:break-all; //使非中日韩的文本换行
  • 文本溢出(单行)或者(多行):

    • 单行文本溢出

      white-space:nowrap;  禁止换行
      overflow:hidden;  超出部分隐藏
      text-overflow:ellipais;  超出部分以...显示
      
    • 多行文本溢出

      display:-webkit-box;  指定盒子为弹性盒子
      -webkit-box-orient:vertical;  在弹性模型中指定元素的排布顺序
      -webkit-line-clamp:数字;   指定文本溢出的行数
      line-height:  ;   设置行高
      overflow:hidden;   盒子的高必须是行高的整数倍
      

表单标签:

  • form

    • action="链接后台文件" method="get/post";  
      action属性用于链接后台文件,method选择提交的方式。
      	get:地址栏,信息少,安全性低
      	post:信息量少,比较安全
      
  • input

    • input  是行内块标签
      ---用户名---
      用户名:<input type="text" placeholder="请输入用户名" maxlength="" value="" name="username">
      ---密码---
      密码:<input type="password" plceholder="请输入密码" maxlength="" value="" name="psw">
      ---单选---   在单选中name中的值必须要相同
      请选择你的性别:
      <label for="man">
      男:<input type="radio" name="sex" id="man" checked>
      </label>
      <label for="woman">
      女:<input type="radio" name="sex" id="woman">
      </label>
      ---多选---
      请选择你喜欢的音乐:
      摇滚乐:<input type="checkbox" checked>
      轻音乐:<input type="checkbox" checked>
      爵士乐:<input type="checkbox" checked>
      ---下拉框---
      请选择你的学历:
      <select name="" id="">
      	<option value="">学士</option>
      	<option value="">学士</option>
      	<option value="">学士</option>
      </select>
      ---文件---
      请上传照片:<input type="file">
      ---文本域---
      <textare></textarea>
      textarea{
              
          resize:none;  不允许拖动框
          resize:both;  能在几个方向拖动
          resize:vertical;   只能在垂直方向拖动
          resize:horizontal;   只能在水平方向拖动
      }
      ---重置按钮---
      <input type="reset">
      ---提交按钮---
      <input type="submit">
      ---自定义按钮---
      <input type="button" value="按钮">
      <button>搜索</button>
      ---颜色---
      <input type="color">
      ---时间.日期---
      年月:<input type="month">
      年周:<input type="week">
      时分:<input type="time">
      年月日:<input type="date">
      年月日时分:<input type="datetime-local">
      ---验证---
      邮箱验证<input type="email">
      电话验证<input type="tel" autofocus>   autofocus为自动获取焦点
      	checked   默认的选择
      	placeholder:默认提示文本
      	maxlength:规定输入的最大字符数
      	name:和后台进行数据交互
      	label标签for=""
      隐藏域:<input type="hidden">
      

音/视频控件:

  • 音频:<audio src="1.mp4" controls loop autplay></audio>
    	controls  控件向用户显示
    	loop   循环播放
    	autplay  自动播放
    视频:<video src="1.mp4" controls loop autplay></video>
    	controls  控件向用户显示
    	loop   循环播放
    	autplay  自动播放
    

h5语义化标签:

  • <header>头部</header>
    <footer>底部</footer>
    <nav>导航</nav>
    <aside>侧导航</aside>
    <section>页面中的某一部分</section>
    <main>主体</main>
    

获取焦点:

  • :focus{outline:none} outline:none 外边线消失

Javascript:

组成:

  • ECMAscript 变量、数据类型、运算符、数组、函数、对象
  • BOM 浏览器对象模型 window对象、history对象、location对象
  • DOM 文档对象模型 元素获取、操作属性、操作样式、节点、事件、事件对象

作用:

  • 数据验证
  • 动态创建、删除元素
  • 操作元素的内容和样式
  • 模拟动画
  • 创建cookie
  • ajax(请求数据)
  • JSON格式的数据处理

特征:

  • 客户端脚本语言,实现用户交互
  • 基于对象和事件驱动的松散型解释型语言

引入js:

  • 外部引入

    • <script src="***.js"></script>
      
  • 嵌入式

    • 在html页面中用script标签引入
  • 事件后

    • <div onclick="alert(1)">事件后</div>   div中间的事件不可少
      

需要注意:

  • js的几种引入方式是相互关联的,可以互相操作访问。
  • 外部js中不能添加script标签对
  • 嵌入式js中不能添加src属性

输出工具:

  • 弹出框

    • alert();  括号中填入变量或者字符串(带引号的为字符串)
      
  • 输出到控制台

    • console.log();   括号中填入变量或者字符串(带引号的为字符串)
      
  • 输出到页面中(可以识别标签对)

    • document.write('a'); document.write('倾斜');
      
  • 输入框

    • prompt("提示文本",[默认值])
      

注释:

  • 单行注释 ctrl+/
  • 块级注释 ctrl+shift+/

变量:

  • 就是一个容器 作用是存储数据
命名规范:(字母、下划线(_)、$)
  • 不能以数字开头
  • 区分大小写
  • 不能以关键字(js中已经用到的)命名
  • 不能以保留字(js中将来会用到的)命名
  • 命名得有意义
  • 首字母大写 (Array String Object)
  • 驼峰命名法 (getElementByld)
赋值:
  • 先声明,后赋值

    • var num;
      num=20;
      
  • 声明的同时进行赋值

    • var num=20;
      
  • 一次性先声明多个变量,再赋值

    • var a,b,c;
      a=10,b=20,c=30;
      
  • 一次性声明多个变量并赋值

    • var a=10,b=20,c=30;
      

let:

  • 声明变量,用法与var一致
  • 可以识别块级作用域
  • 不能重复声明
  • 不存在变量提升(先访问后声明)

const:

  • 声明常量,一旦声明就不能被改变
  • 声明的同时必须要赋值,否则报错
  • 可以识别块级作用域
  • 不能重复声明,不存在变量提升
注意事项:
  • 变量一般情况下要先声明后访问,变量的默认值是undefined
  • 声明的变量新值覆盖旧值
  • 变量可以重复声明
  • 不用var关键字声明变量,但是赋值了就不会报错,此时这个变量为全局变量
  • 不用var关键字声明,也不赋值的变量就会报错
  • 先访问后声明变量,输出的值为undefined 预解析只识别(var function这两个关键字)

数据类型:(根据数据在内存中的存储位置划分)

  • 基本数据类型(存放在栈中)

    • undefined

    • null

    • string

    • boolean

    • number

      二进制:以0B开头,
      八进制:以0O开头,0~~7
      十六进制:以0x开头,0~~9  a~~f
      NaN:not a number  本来期望返回数值的操作但并未返回数值的情况
      
  • 引用数据类型(指针存放在栈中,内容存放在堆中)

    • object(一些属性和方法的集合:数组、函数(function)、对象…)

typeof

  • 用来判断变量的数据类型 它的结果是一个字符串类型
数据类型 情况 typeof的结果
undefined undefined undefined
null null,空占位符 object
boolean 布尔型 true/false boolean
string 字符串型 带引号的都是字符串""、’’ string
number 数值型 整数、小数、八进制、十进制、十六进制、特殊值 number
object 数组、函数 object

运算符:

​ 表达式:能够求值的语句

  • 算术运算符:

    +  -  *  /  %  ++var  var++ --var  var--  
    	Math.random()取随机数   
    	Math.floor()向下取整 
    	Math.ceil()向上取整
    	prompt("提示文本",默认参数)  提示输入框
    	alert   显示到弹框
    

    +:

    1. 两边都是数值型执行相加运算
    2. 不是两边都为数值型的相当于连接符

    var++ ++var var-- --var++ --中的运算都一样

    1. ++var:++在前,先算++再执行本行中的其他语句
    2. var++++在后,先执行本行中的其他语句再算++
  • 关系运算符:

    ​ 它的返回值为布尔值(true/false)

    >  <  >=  <=  ==  ===(全等于,数据类型也要相等)  !=   !==(不全等于)
    
    • 如果两个操作数都是字符串(数字型字符串),按照ASCII码表进行比较
    • 如果两个操作数都是数字,直接进行比较
    • 如果一个操作数是字符串,另一个是数字,先尝试将字符串转换为数字,如果转换成功,按照数字比较;如果转换不成功就返回false
    • 1true,0false
    • ==值相同
    • ===值相同,数据类型也要相同
    • undefinednull相等(undefined==null)
  • 赋值运算符:

    • = += -= *= /= %=

    • var num=5;
      num+=10;  //num=num+10;
      
  • 逻辑运算符:

    测量值与变量之间的逻辑关系

    0 false undefined null NaN “”(空字符串) 这六个为false 其余的都为true

    • && 与

    • || 或

    • ! 非

    • 逻辑运算符真值表

      A B A&&B A||B A!B
      true true true true false
      true false false true false
      false true false true true
      false false false false true
    • 返回值(判断的真假与返回值可能不一样):

      • && 同真为真 返回第一个假值
      • || 同假为假 返回第一个真值
      • ! 取反 返回值为true/false
  • 三元运算符

    表达式?语句1:语句2;
    如果表达式的结果为真,执行语句1的代码,如果结果为假,执行语句2
    

字符编码:

流程控制:

代码按照指定条件的执行顺序

  • 顺序结构

    语句按照从上到下的顺序执行

  • 分支结构

    当条件成立时执行相应语句

    • 单分支结构

      if(条件){
      	条件成立时执行的语句
      }
      
    • 双分支结构

      if(条件){
      	条件成立时执行的语句
      }
      else{
      	条件不成立时执行的语句
      }
      
    • 多分支结构

      if(条件1){
      	条件1成立时执行的语句
      }
      else if(条件2){
      	条件1不成立,条件2成立时执行的语句
      }
      else{
      	以上条件都不成立时执行的语句
      }
      
    • 嵌套分支

      if(){
      	if(){}else{}
      }
      else{
      	if(){}else{}
      }
      
    • switch

      switch(表达式){
      	case 值1:语句1;break;
      	case 值2:语句2;break;
      	......
      	default:语句;
      }
      
  • 循环结构

    当条件满足时,重复不断的执行一段代码

    • for循环:

      for(初始条件;终止条件;步进值){
      	满足条件时执行的循环体
      }
      

      执行顺序:

      1. 初始条件
      2. 终止条件
      3. 循环体
      4. 步进值
      5. 重复执行2.3.4.5步骤,直到不满足终止条件,跳出循环
    • while循环:

      while(条件){
      	当满足条件时执行的语句
      }
      exm:
      var j=0;
      while(j<5){
         console.log(j);
         j++;
      }
      
    • do while循环:

      do{
      	循环体;
      }while(条件)
      exm:
      var j=0;
      do{
      	console.log(j);
      	j++;
      }while(j<5)
      
  • 终止循环:

    • continue 满足条件时跳出本次循环,执行下一次循环
    • break 满足条件时终止所有循环

数组:

按照顺序排列的一组相关数据,每一个数组元素都有特定的键名(下标)

初始化数组元素:

  • 先声明后赋值 var arr=[];arr[0]="a",arr[1]="b"
  • 声明的同时赋值 var arr=[1,2,3,4];

数组的下标:

访问数组元素。

数组的长度:

arr.length 访问数组长度(数组的长度是可变的)

清空数组:arr.length=0

遍历数组元素:

  1. for循环遍历数组

    for(var i=0;i<arr.length;i++){
          
        arr[i]
    }
    
  2. 用for in 遍历数组

    for(var i in arr){
        i;//下标
        arr[i];//元素
    }
    
数组对象:
  • 数组名.push(插入的元素) 向数组的后面插入一个元素
注意事项:
  • 数组元素的默认值是undefined
  • 数组长度是可变的
  • 数组元素可以是任意的数据类型

二维数组:

访问:arr[i][j](双下标)
遍历:
  • 使用for循环遍历数组
for(var i=0;i<arr.length;i++){
    
    for(var j=0;j<arr[i].length;j++){
    
        arr[i][j]
    }
}   //二维数组的遍历需要双重循环
  • 使用内置函数forEach()遍历数组

    function map(arr,fn){
          
        arr.forEach(function(vlue,index){
          
                    value=fn(value);
                    })
        return arr;
    }
    

函数:

1、封装的代码块

2、对象

3、构造函数(类)

把实现某一特定功能的代码块封装起来并且能够重复调用。

定义函数:

  • 基本语法(function关键字)

    function 函数名([形参1],[形参2],...){
          
        函数体
        [return 返回值;]
    }
    
  • 字面量,自变量

    var variable=function(){
          
        函数体;
    }
    variable()
    

    用字面量的方式声明一个函数必须先声明一个函数后调用,用关键字function声明的函数,调用可以在声明前也可以在声明后。(函数的预解析)

  • 对象的方式

箭头函数:
let aa = ()=>{
    
    console.log(123);
    console.log(456);
    console.log("item",item);
}

函数的调用:

  • 函数名+(实参) functionName()
  • 自变量+(实参)

参数:

动态地改变函数体的变量,使函数更加灵活

  • 形参:

    定义函数时写在括号中的变量,作用是接收实参

  • 实参:

    函数调用时写在括号中的值,作用是给形参传递值

参数的传递:
  • 参数可以是任意的数据类型
  • 按照顺序传递
  • 形参 = 实参:一一对应
  • 形参 > 实参:多余的形参赋值为undefined
  • 形参 < 实参:实参由arguments对象来接收
参数默认值:
  • 分支结构
  • 三元运算符
  • 逻辑或
  • es6 给形参赋值,当形参的值为undefined
arguments对象:(arguments是一个对象不是一个数组)

arguments对象接收的是所有实参,不管是已经定义的还是没有定义的

  • 用来接收参数的详细信息
  • 每声明一个函数,在其内部自动生成arguments对象,这个对象只在函数内部起作用
  • arguments[i] arguments.length 遍历 类似数组却不是数组
剩余参数:rest

...rest对象接收的是多余实参

  • 声明:...rest
  • rest参数与arguments对象的区别:
    • rest接收多余的实参,arguments接收所有实参
    • rest是一个数组,arguments是一个类似数组的对象 但不是数组

作用域:

变量起作用的范围

  • 全局作用域
  • 局部作用域
  • 块级作用域
全局作用域

在整个js代码中都能访问到变量,凡是进行修改,变量的值就全部改变

  • 在函数外部用var声明的变量,拥有全局作用域
  • 不用var声明,但赋值的变量,拥有全局作用域
局部作用域

在局部能访问到的变量

  • 形参是局部变量,拥有局部作用域
  • 在函数内部用var关键字声明的变量,拥有局部作用域

回调函数:

把一个函数的指针(函数名)作为形参传递给另一个函数,当指针调用函数时,这个函数叫做回调函数

function isExist(arr,fn){
    
    if(fn==true){
    
        return true;
    }
    return false;
}
function odd(arr){
    
    for(let i=0;i<arr.length;i++){
    
        if(arr[i]%2==0){
    
            return true;
        }
    }
    return false;
}

返回值:return

  • 返回值可以是任意的数据类型
  • return 终止函数(return后面的代码不执行)
  • 一个函数中可以有多条return分支语句,但最终只执行一条return语句
  • 如果一个函数没有返回值,它返回的是undefined ***

内置顶层函数:

内置:ECMAscript自带的函数,只需知道如何使用,不必关心如何封装

顶层:在代码中的任意位置都能够使用

  • escape():

    将输入的字符串进行编码

  • unescape():

    将编码的字符串进行解码

  • Boolear():

    将其余数据类型准换为布尔型

  • String():

    将任意数据类型转换为字符串型

  • Number():

    将其余数据类型转换为数值型

    • null -->0 “” -->0 " " -->0
    • false -->0 true -->1
    • undefined -->NaN
    • 进制数转换为十进制
    • 去掉没有意义的后导0
    • 字符串:字符串里面传的必须是规范的浮点数和数值型的字符串
  • parseint():

    将字符串转换为整数型

    开头必须是数字(+,-,空格) 如果不是转换不成功 返回NaN

  • parseFloat():

    将字符串转换为浮点型

    仅能转换规范的浮点数,不是一个数转换不成功 返回NaN

  • isNaN():

    判断一个值是否能转换为数值型,能转换为数值型的返回false 不能转换为数值型的返回true

数据类型的转换:
  • 强制数据类型转换
  • 隐式数据类型转换:算数运算符、逻辑运算符、条件 if() while()

对象:

概念:

  • 类:一群具有相同特征的对象集合的描述
  • 对象:具有存在的对象个体
  • 属性:对象基础信息的描述
  • 方法:对象功能的描述

定义对象:

  • 构造函数的方式(模拟定义类),实例化对象
function Computer(color,play){
	this.color=color;
	this.play=function(){
		console.log("上网");
	}
}
//实例化对象
let SAUS=new Computer();
  • JSON方式:直接定义对象
let ASUS={
	属性名:属性值,
	属性名:属性值,
	方法名:function(){

	}
}
  • class定义类,实例化对象

属性:

对象.属性名=属性值

方法:

对象.方法名=函数

增删改查:

  • 增加:对象.属性名=属性值
  • 删除:delete 对象.属性名
  • 修改(覆盖):对象.属性名=属性值(修改后)
  • 查找(访问):对象.属性名、对象[“属性名”] 方法的访问:对象.方法名()

遍历对象:

for(let i in 对象){
	i;  //属性名
	对象[i];   //属性值
}

关键字:

construcor:

对象的属性,返回该对象的构造函数

instanceof:

对象 instanceof 构造函数 用来判断函数是否是对象的构造函数,是就返回true,否就返回false

DOM(文档对象模型)

获取元素:

  • 获取ID名的元素

    let 变量名=document.getElementById("idname");
    
  • 获取类名元素:集合(不是数组,通过下标访问,不可forEach遍历)

    let obj=document.getElementsByClassName("classname");
    
  • 获取标签名的元素:集合(不是数组,通过下标访问,不可forEach遍历)

    let obj=document.getElementsByTagName("li");
    
  • 获取表单的值:

    obj.value
    
  • 获取选择器中的第一个元素:

    let obj=document.querySelector("选择器");
    
  • 获取选择器中的集合:

    let obj=document.querySelectorAll("选择器");
    
  • 获取元素的属性:

    let 变量名=getComputerStyle(obj.null).attr;   attr为属性名
    

操作内容:事件源.事件=function函数

  • innerText
  • innerHTML 可以识别标签对

操作属性:

标准属性:obj.attr
自定义属性:
  • 获取:obj.getAttribute(name)
  • 设置:obj.setAttribute(name,value)

操作样式:

设置:
  • 行内样式:

    object.style.属性名=属性值
    
  • 批量样式:

    obj.className="";
    obj.id="";
    
  • 类的更新

    obj.classList.add("");   类的添加
    obj.classList.remove("");   类的删除
    obj.classList.toggle("");   类的切换
    

BOM(浏览器对象模型)

完成的是窗口与窗口的交互(通信),window对象是其核心对象

  • history
  • location
  • dom
  • screen
  • frames
  • navgation

window对象:

属性:
  • 浏览器的宽高
    • window.innerWidth 获取浏览器的宽度
    • window.innerHeight 获取浏览器的高度
    • document.documentElement.clientWith 获取浏览器的宽度(IE8及以下版本获取)
    • document.documentElement.clientHeight 获取浏览器的高度(IE8及以下版本获取)
  • 浏览器左上角距离屏幕左上角的偏移量
    • window.screenTop 垂直偏移量
    • window.screenLeft 水平偏移量
方法:
  • alert() 弹出框

  • prompt() 输入框

  • confirm() 弹出确定取消框 返回的是True/False

  • close() 关闭页面

  • open() 打开页面

    • open中的参数:url 打开页面的地址
  • setInterval(fn,1000时间) 隔一段时间重复执行函数fn 时间单位是ms

    let b=setInterval(gg,1000);
        function gg() {
          
            console.log(1);
        }
        clearInterval(b);
    
  • clearInterval(t) 清除时间函数

  • setTimeout(fn,1000时间) 隔一段时间执行一次fn 时间单位是ms

  • clearTimeout(t) 清除时间函数

操作内容:事件源.事件=function函数

  • innerText
  • innerHTML 可以识别标签对

操作属性:

标准属性:obj.attr
自定义属性:
  • 获取:obj.getAttribute(name)
  • 设置:obj.setAttribute(name,value)

操作样式:

设置:
  • 行内样式:

    object.style.属性名=属性值
    
  • 批量样式:

    obj.className="";
    obj.id="";
    
  • 类的更新

    obj.classList.add("");   类的添加
    obj.classList.remove("");   类的删除
    obj.classList.toggle("");   类的切换
    

元素的尺寸和位置:

  • obj.offsetWidth: 获取元素的真实宽度

  • obj.offsetHeight: 获取元素的真实高度

  • obj.offsetTop: 获取这个元素的外边框top到第一个定位了的父元素内边框top的距离

  • obj.offsetLeft: 获取这个元素的外边框left到第一个定位了的父元素内边框left的距离

  • obj.scrollTop: 有滚动条的元素,浏览器在滚动时在垂直方向的拉伸距离

  • obj.scrollLeft: 有滚动条的元素,浏览器在滚动时在水平方向的拉伸距离

    document.body.scrollTop||document.documentElement.scrollTop   body标签获取的兼容性问题
    

动态创建元素:

document.creatElement("TagName");

添加类名

插入到页面

父元素.appendChild(子元素);
document.body.appendChild(div);

模板字符串(拼接 es6):

`字符串${变量}${变量}字符串`

数学方法:

  • Math.random() 取随机数 [0,1)
  • Math.floor() 向下取整
  • Math.ceil() 向上取整
  • Math.pow(X,Y) 算X的Y次幂

继承的原型与原型链:

function person(){
    
    this.name="";
}
person.prototype={
    
    say:function(){
    
        alert(this.name);
    }
}
let xb =new person();

子对象的proto继承了父类的prototype

string方法:

获取字符编码:

str.charAt(a);  获取下标为a的元素
str.charCodeAt(a);  获取下标为a的元素的字符编码
String.fromCharCode(12345);  获取编码为12345的字符
查找下标:
str.indexOf();   查找对应字符的下标如果有就返回下标,没有就返回-1(从前往后)
str.lastIndexOf();   查找对应字符的下标如果有就返回下标,没有就返回-1(从后往前)
str.search();   查找对应字符的下标如果有就返回下标,没有就返回-1  (正则)
str.match();   返回一个数组,如果没找到返回null  (正则)
字符串的截取:
str.substr(start,length);  截取从开始到结尾的元素
str.subString(start,end);  截取从开始到end前的元素(不包括end)
str.slice(start,end);  截取从开始到end前的元素(不包括end  数组的方法)
字符串的转化:
str.toLowerCase();  转换为小写
str.toUpperCase();  转换为大写
字符串的替换:
str.replace("需要替换的元素","替换成什么元素")
字符串转换成数组:
arr = str.split(",");   以逗号隔开的元素放到数组中

array的方法:

操作数组的方法:
1.
arr.push();  在数组的最后插入内容(可插入多个内容)
2.
arr.pop();   删除数组的最后一个内容
3.
arr.unshift();  在数组的开始插入内容(可插入多个内容)
4.
arr.shift();  在数组的开始删除一个内容
5.
//万能的插入和删除内容
arr.splice(3,1);  删除下标为3的元素  1为只删除一个
arr.splice(3,1,"four");  把下表为3的元素替换成four
arr.splice(3,0,"four");  在下标为3的元素前添加元素four
6.
//是否包含
arr.includes();    是否包含某个元素
7.
//截取
arr.slice(start,end);  截取从start到end之前的元素(不包括end)
8.
//连接
arr.concat();  连接(拼接)多个数组,生成新数组
9.
//取反
arr.reverse();  把数组元素反向
带有高阶函数的数组操作
1.
//将数组转换为字符串
arr.join(",");  中间用","隔开
2.
//排序
arr.sort(function(x,y){
    
    return x-y;  //升序排序(从小到大)
    return y-x;  //降序排序
})
arr.sort((x,y)=>x-y)  //箭头函数升序排序
arr.sort((x,y)=>y-x)  //箭头函数降序排序
3.
//查找符合条件的第一个元素
arr.find(item=>item>7)  //查找数组中第一个比7大的元素
arr.find(function(item){
    
    return item>7;
})  //与箭头函数表示的意思一样
4.
//查找符合条件的第一个元素的下标
arr.findIndex(item=>item>7)
5.
//查找符合条件的一些元素
arr.some(item=>item>8)  //查找数组中比8大的元素
arr.some(function(){
    
    return item>8;
})
6.
//查找全部元素是否符合条件  符合返回true   不符合返回false
arr.every(item=>item>8)  //查看是否每个元素都大于8
7.
//筛选
arr.filter(item=>item>8)  //把每个大于8的元素筛选出来放到新数组中
8.
//遍历,让数组中的每一个元素都执行一个操作,不会影响原数组
arr.forEach((item)=>{
    
    console.log(item*10);
})
9.
//让数组中的每一个元素都执行一个函数,并返回一个新数组
arr.map((item)=>{
    
    console.log(item*10);
})

节点:

节点的属性:
  • 文档节点
  • 元素节点
  • 属性节点
  • 文本节点
  • 注释节点
节点 nodeName nodeValue nodeType
文档节点 #document null 9
元素节点 大写标签名 null 1
属性节点 大写属性名 属性值 2
文本节点 #text 文本 3
注释节点 #comment 注释的内容 8
节点的获取:
子节点:
document.childNodes  //每个元素的子节点,这个属性返回的是一个list列表
父节点:
document.parentNode  
上一个兄弟节点:
document.previousSibling  
下一个兄弟节点:
document.nextSibling  
上一个兄弟元素节点:
document.previousElementSibling  
下一个兄弟元素节点:
document.nextElementSibling  
节点的方法:
  • 创建节点
let div = document.createElement("div");  //创建节点
  • 插入节点

    let box = document.querySelector(".box");
    box.appendChild(div);  //在最后插入节点
    box.insertBefore(span,div);  //在div之前插入节点span
    
  • 创建文本节点

    let text1 = document.createTextNode("内容");
    span.appendChild(text1);
    
  • 创建注释节点

    let comment1 = document.createComment("内容");
    box.appendChild(comment1);
    
  • 创建属性节点

    let attr = document.createAttribute("id");
    attr.nodeValue="box";
    
  • 添加(设置)属性节点

    box.setAttributeNode(attr);
    
  • 删除节点

    box.removeChild(div);
    
  • 删除属性节点

    box.removeAttributeNode(attr);
    

事件:

事件的添加方式:
  • 节点.onclick = function(){}
  • 节点.addEventListener("事件",事件处理程序,事件类型)
事件的构成方式:
  • 事件源:谁去出发事件谁就是事件源
  • 事件:
  • 事件处理程序:
事件流:

当触发一个事件的时候,从这个事件的容器到整个文档都按照特定的顺序进行一次触发

e.target

阻止事件流:

let event = event || window.event

event.stoppropagation()

event.returnValue = true

事件委派:

event.target 目标事件源

事件的分类:
  • 捕获型事件:true 从不具体的事件源到具体的
  • 冒泡型事件:false 从具体的事件源到不具体的
常用的事件(web端):
鼠标事件:
  • onclick 单击
  • ondblclick 双击
  • onmousedown 按下
  • onmouseup 抬起
  • onmousemove 鼠标移动
  • onmouseover 鼠标移入
  • onmouseout 鼠标移出
  • onmouseenter 鼠标移入
  • onmouseleave 鼠标移出
  • oncontextmenu 鼠标右击事件
  • onmousewheel 鼠标滚轮事件
  • e.preventDefult 阻止浏览器的默认行为
事件对象:

用来保存事件触发时的信息

w3c:事件处理程序的形参中

IE:window.event

处理兼容性问题:let event = e || window.event

鼠标事件对象常用的属性:
  • clientX 鼠标焦点距离浏览器的X轴偏移
  • clientY 鼠标焦点距离浏览器的Y轴偏移
  • offsetX 鼠标焦点距离事件源的X轴偏移
  • offsetY 鼠标焦点距离事件源的Y轴偏移
  • screenX 鼠标焦点距离屏幕的X轴偏移
  • screenY 鼠标焦点距离屏幕的Y轴偏移
键盘事件:
  • onkeydown 键盘按下
  • onkeyup 键盘抬起
  • onkeypress 键盘按下 当你按下一些功能键的时候不触发onkeypress
键盘对象的常用属性:
  • keyCode 键盘码
  • ctrlKey 是否按下Ctrl
  • altKey 是否按下Alt
  • shiftKey 是否按下Shift
  • key 键盘名
表单事件:
  • oninput 输入
  • onchange 内容发生改变并且失去焦点
  • onblur 失去焦点
  • onfocus 获得焦点
  • onsubmit 提交表单
  • onselect 选中文本
  • onchecked 选中表单控件
窗口事件:
  • onscroll 当滚动条滚动时执行Javascript代码
  • onload 当页面载入完毕后执行Javascript代码
  • onresize 当浏览器被重置大小时执行Javascript代码
移动端事件:
  • ontouchstart 按下
  • ontouchmove 移动
  • ontouchend 抬起
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/linzhi_1022/article/details/88545013

智能推荐

Python技能树及MarkDown编辑器测评_python实现技能树-程序员宅基地

文章浏览阅读561次。文章目录前言一、python技能树是什么二、python技能树的样式三、python技能树如何使用四、技能树在一些方面存在的问题总结前言无论是初学python的同学,还是学过一段时间有一定经验的同学或多或少都会有这样的疑惑:想学python领域相关的知识点,但网上的教程太杂太乱,看了半天还是不知道从何下手,下面将推荐介绍python技能树,让python的学习有一个明确的路线和清晰的体系结构。一、python技能树是什么技能树是CSDN提供的系统化,面向实战的学习环境。它能帮助用户从初学者成长为合_python实现技能树

python 安装邮件模块_我的电子邮件模块-程序员宅基地

文章浏览阅读1.9k次。python 安装邮件模块This module optionally depends on ymlparsers. 该模块可选地取决于ymlparsers 。 The source code you can found here. It is available as part of my AlexBerUtils s project. 您可以在此处找到源代码。 它是我的AlexBerUtil..._from mengling_tool.notice_tool import customize_emailsend, sender

程序员应该用程序来思维,有空来研究一下狼 羊 草和农夫过河,将算法转换为代码《转》_java 状态空间 农夫狼羊白菜-程序员宅基地

文章浏览阅读4k次。题目描述:农夫需要把狼、羊、菜和自己运到河对岸去,只有农夫能够划船,而且船比较小,除农夫之外每次只能运一种东西,还有一个棘手问题,就是如果没有农夫看着,羊会偷吃菜,狼会吃羊。请考虑一种方法,让农夫能够安全地安排这些东西和他自己过河。 这个题目考察人的快速逻辑运算和短期记忆力。分析一下,在狼-》羊-》菜这个食物链条中,“羊”处在关键位置,解决问题的指导思想就是将“羊”与“狼”_java 状态空间 农夫狼羊白菜

经验总结:java软件下载安装-程序员宅基地

文章浏览阅读59次。开头在找工作的过程中,对于 Redis 技术知识的掌握已经成为必须的技能。美团面试常常就会被问到Redis相关知识,而这次我就差点倒在了美团3面,面试官连问我以下几个Redis的问题,然后就卡壳了…redis了解吗?你说说怎么用redis实现分布式锁?Redis常用数据结构及底层数据结构实现如何解决 Redis 的并发竞争 Key 问题如何保证缓存与数据库双写时的数据一致性?剩下的不太记得了…为此面试完回来针Redis专门做了一个面试问题大总结01 Java技术概览0

单片机扩展IO口-程序员宅基地

文章浏览阅读3.3k次。单片机如何扩展IO口?首先我们先讲讲为什么要扩展IO口。在我们使用51单片机的时候,有时候会出现IO口不够用的情况。比如键盘!这个时候IO口的资源就十分有限了。按键是我们常用的器件,做某些东西的时候又不能缺少按键。如果一个按键对应一个IO口,那么可想而知,按键所占的IO口的数量是很大的。单片机IO口的资源是有限的,因此我们要采取一些方法来扩展单片机的IO口,控制按键所占的单片机IO_单片机扩展io口

python取array中指定元素_python取数组中的指定元素-程序员宅基地

文章浏览阅读3.5w次,点赞7次,收藏29次。对于array,如2-D的array,如何取指定元素设array为3*10的shapes = array([[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [20, 21, 22, 23, 24, 25, 26, 27, 28, 29]])想取..._python取数组中的指定元素

随便推点

关于c语言的教学方法,浅谈C语言实例教学方法-程序员宅基地

文章浏览阅读260次。摘要:分析C语言程序设计课程的特点;探讨如何在C语言程序设计实验教学中采用科学的实验教学手段,培养学生的学习兴趣,提高学生用C语言解决实际问题的综合能力;对C语言程序设计实验教学提出一些可行的探索方法。关键词:C语言;实验教学;实践能力C语言是许多高校学生程序设计的入门课程.是学生接触的第一门程序设计语言。这门课的学习效果会极大影响学生一生的程序设计技术、技巧、风格和习惯。它的应用领域非常广泛,既...

php zend引擎解析原理,PHP内核分析-Zend引擎-栈结构及操作-程序员宅基地

文章浏览阅读358次。Zend引擎对栈常量的定义:#define ZEND_STACK_APPLY_TOPDOWN 1//由顶部向底部对栈进行遍历操作#define ZEND_STACK_APPLY_BOTTOMUP 2//由底部向顶部对栈进行遍历操作#define STACK_BLOCK_SIZE 64 //每次扩容的元素个数看一下Zend引擎栈的数据结构定义:typedef struct _zend_s..._php8 zend引擎

matlab 将数组写入txt_matlab定义一维数组 输出到文本文件中的数据-程序员宅基地

文章浏览阅读8.4k次。fid = fopen('100data.txt','w');fprintf(fid,'%d\n',a); % a 为要写入的数组 fclose(fid)_matlab定义一维数组 输出到文本文件中的数据

matlab安装打不开(一个黑框一闪而过)解决办法!_matlab打不开-程序员宅基地

文章浏览阅读1.9w次,点赞23次,收藏93次。matlab安装打不开(一个黑框一闪而过)解决办法_matlab打不开

学习材料1-程序员宅基地

文章浏览阅读144次。【五脏】心、肝、脾、肺、肾【六腑】胃、胆、三焦、膀胱、大肠、小肠【七情】喜、怒、哀、乐、爱、恶、欲【五常】仁、义、礼、智、信【五伦】君臣、父子、兄弟、夫妇、朋友【三姑】尼姑、道姑、卦姑【六婆】牙婆、媒婆、师婆、虔婆、药婆、稳婆【九属】玄孙、曾孙、孙、子、身、父、祖父、曾祖父、高祖父【五谷】稻、黍、稷、麦、豆【中国八大菜系】四川菜、湖南菜、山东菜、江苏菜、浙江菜、广东菜、福建菜、安徽菜【五毒】石胆、...

Keras实现CNN:手写数字识别准确率99.6%_cnn 手写数字识别 99正确率-程序员宅基地

文章浏览阅读2.9k次,点赞5次,收藏12次。 在安装过Tensorflow后,后安装Keras默认将TF作为后端,Keras实现卷积网络的代码十分简洁,而且keras中的callback类提供对模型训练过程中变量的检测方法,能够根据检测变量的情况及时的调整模型的学习效率和一些参数. 下面的例子,MNIST数据作为测试import pandas as pdimport numpy as npimport matplotlib.pyp..._cnn 手写数字识别 99正确率

推荐文章

热门文章

相关标签