前端样式及 JS

想你有幸

已于 2024-06-19 10:48:55 修改

阅读量184

点赞数

文章标签： javascript

于 2021-06-16 13:38:51 首次发布

本文链接：https://blog.csdn.net/qq_57509012/article/details/117931069

版权

1、css的居中方式

1）text-align:centent

这种方式可以水平居中块级元素中的行内元素

2) mangin: 0 auto

要求内部元素 centent_text 是块级元素，并且不能脱离文档流，如：设置position:absoult

3) display:table-cell

配合width, text-align:centent vertical-algin:middle让大小不固定元素垂直居中，这个方式将要对其的元素设置成为一个td，float , absoult 等属性都会影响它的实现，不响应margin属性

4）垂直居中

行内元素的垂直居中把height和line-height的值设置成一样的才有效

5）脱离文档流

自定义选框，把背景设置成透明灰色，内容居中显示在最前面

2、px,em,rem,%

1）px

px像素（Pixel）相对长度单位，像素px是相对显示器屏幕分辨率而言的

px特点

IE无法调整哪些使用px作为单位的字体大小
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器

2）em

em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸为未被人设置，则相对于浏览器字体尺寸

em特点

em的值并不是固定的
em会继承父级元素的字体大小

3) rem

rem是全部的长度都相对于元素，根元素是谁？<html>元素，通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem

4）%

%使用频繁的是width,height，relative:width相对父元素的宽，height相对于父元素的高进行计算relative:top、bottom相对于父元素的高；left、right相对于父元素的宽进行计算
border-raudis:相对自身标签的宽高设置每个边角的垂直和水平半径
margin:left、right、top、bottom相对于父元素的宽高进行
absolute:top、bottom相对定位元素的高，left、right相对于定位元素的宽进行计算，同时位于absolute中的其他属性如：width、height、margin等都相对于定位元素进行计算
line-height设置内联元素垂直居中时，%相对于文本的行高进行计算，非父元素

3、display的值和作用

none: 表示影藏对象，与visibility属性的hidden值不同，display:none不为被隐藏的对象保留物理空间，然visibility：hidden就保留
inline （默认值）：表示指定对象为内联元素
block：指定对象为块元素
list-item: 指定对象列表项目
inline-block: 指定对象为内联块元素
table: 指定对象作为块元素级的表格，类似于html标签table
table-caption：指定对象作为表格标题。类同于html标签caption
table-cell：指定对象作为表格单元格。类同于html标签td
table-row：指定对象作为表格行。类同于html标签tr
table-row-group：指定对象作为表格行组。类同于html标签tbody
table-column：指定对象作为表格列。类同于html标签col
table-column-group：指定对象作为表格列组显示。类同于html标签colgroup
table-header-group：指定对象作为表格标题组。类同于html标签thead
table-footer-group：指定对象作为表格脚注组。类同于html标签tfoot
run-in：根据上下文决定对象是内联对象还是块级对象。
box：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）
flex：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）
inline-flex：将对象作为内联块级弹性伸缩盒显示。

4、路由跳转的方式

router-link(声明式路由)

1. 不带参数
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
 
2.带参数
 
<router-link :to="{name:'home', params: {id:1}}">  
 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id


<router-link :to="{name:'home', query: {id:1}}">

2. router.push(编程式路由)

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

3. this.$router.push() (函数里面调用)

1.  不带参数
 
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
 
2. query传参 
 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id
 
3. params传参
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

4. this.$router.replace() (用法同上,push)

5. this.$router.go(n) ()

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

ps : 区别

this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

注意：获取路由上面的参数，用的是$route，后面没有r

params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，

两者都可以传递参数，区别是什么？

query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变

5.JavaScript中‘this’值是什么

基本上，this指的是当前正在执行或调用该函数的对象的值，this值的变化取决于我们使用它的上下文和我们在哪使用它

const carDetails = {
  name: "Ford Mustang",
  yearBought: 2005,
  getName(){
    return this.name;
  },
  isRegistered: true
};

console.log(carDetails.getName()); // Ford Mustang

因为咋igetName方法中我们返回this.name，在此上下文中，this指向的是carDatails对象，该对象当前是执行函数的“所有者”对象

6.创建新数组，向数组插入数据

数组的创建

var arrayObj = new Array();　//创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向
数组元素的排序
arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

7.使用闭包实现一个方法，第一次调用返回1，第二次返回2，第三次3，以此类推。
count() //输出1
count() //输出2
count() //输出3

<script>
    function outer() {
        let number = 0;
        return function inner() {
            console.log(++number);
        }
    }
    let count = outer();
    count(); //1
    count(); //2
    count(); //3
    count(); //4
</script>

8.ajax

即异步的 JavaScript 和 XML，是一种用于创建快速动态网页的技术，传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。使用AJAX则不需要加载更新整个网页，实现部分内容更新

用到AJAX的技术：

HTML - 网页结构
CSS - 网页的样式
JavaScript - 操作网页的行为和更新DOM
XMLHttpRequest API - 用于从服务器发送和获取数据
PHP，Python，Nodejs - 某些服务器端语言

9.闭包

闭包就是一个函数在声明时能够记住当前作用域、父函数作用域、及父函数作用域上的变量和参数的引用，直至通过作用域链上全局作用域，基本上闭包是在声明函数时创建的作用域。

// 全局作用域
   var globalVar = "abc";

   function a(){
     console.log(globalVar);
   }

   a(); // "abc"

在此案例中，当我们声明a函数时，全局作用域是a 闭包的一部分

10.http中的方法，除了get方法、post方法

什么是HTTP

HTTP，即超文本传输协议，是一种实现客户端和服务器之间通信的响应协议，它是用作客户端和服务器之间的请求。
客户端（浏览器）会向服务器提交HTTP请求；
然后服务器向客户端返回响应；
其中响应包含有关请求的状态信息，还可能包含请求的内容。

HTTP请求方法

方法	描述
GET	请求指定的页面信息，并返回实体主体。
POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
HEAD	类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头。
PUT	从客户端向服务器传送的数据取代指定的文档的内容。
DELETE	请求服务器删除指定的页面。
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS	允许客户端查看服务器的性能。
TRACE	回显服务器收到的请求，主要用于测试或诊断。
PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新。

想你有幸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端样式及 JS

1、css的居中方式1）text-align:centent 这种方式可以水平居中块级元素中的行内元素2) mangin: 0 auto 要求内部元素 centent_text 是块级元素，并且不能脱离文档流，如：设置position:absoult3) display:table-cell 配合width, text-align:centent vertical-algin:middle让大小不固定元素垂直居中，这个方式将要对其的元素设置成为一个td，floa...
复制链接

扫一扫