如初的博客🥝
04-jQuery的事件机制和其他知识
jQuery 设置宽度和高度 宽度操作: 12$(selector).height(); //不带参数表示获取高度$(selector).height(200); //带参数表示设置高度 宽度操作: 12$(selector).width(); //不带参数表示获取宽度$(selector).width(200); //带参数表示设置高宽度 问题:jQuery的css()获取高度,和jQuery的height获取高度,二者的区别? 答案: 123$("div").css(); //返回的是string类型,例如:30px$("div").height(); //返回得失number类型,例如:30。常用于数学计算。 如上方代码所示,$("div").height();返回的是number类型,常用于数学计算。 jQuery 的坐标操作 offset()方法 12$(selector).offset();$(selector).offset({left:100, top: 150} ...
04-运算符
本文首发于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。 我们在本文件夹的第二篇里讲到了JS中变量的概念,本篇文章讲一下运算符和表达式。 前言 比如说+、*、/、( 都是运算符,而(3+5)/2则是表达式。 运算符的定义和分类 运算符也叫操作符。通过运算符可以对一个或多个值进行运算,并获取运算结果。 比如:typeof 就是运算符,可以来获得一个值的类型。它会将该值的类型以字符串的形式返回:number string boolean undefined object。 注:运算符都是会返回结果的,而typeof这个运算符返回的结果就是变量的类型。那返回的结果的类型是什么呢?是字符串。 运算符有很多分类,比如: 算数运算符 自增运算符 逻辑运算符 赋值运算符 关系运算符 三元运算符(条件运算符) 算数运算符 常见的算数运算符有以下几种: 求余的举例: 假设用户输入345,怎么分别得到3、4、5这三个数呢? 答案: 12345得到3的方法:345 除以100,得到3.45然后取整,得到3。即:parseI ...
05-CSS样式表的继承性和层叠性
本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论: 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。 继承性是从自己开始,直到最小的元素。 但是呢,如果再给上方的代码加一条属性: 上图中,我们给div加了一个border,但是发现只有div具备了border属性,而p标签却没有border属性。于是我们可以得出结论: 关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。 关于盒子、定位、布局的属性,都不能继承。 以后当我们谈到css有哪些特性的时候,我们要首先想到继承性。而且,要知道哪些属性具有继承性、哪些属性没有继承性。 CSS的层叠性 很多公司如果要笔试,那么一定会考 ...
05-流程控制语句:选择结构(if和switch)
本文首发于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。 代码块 用{}包围起来的代码,就是代码块。 JS中的代码块,只具有分组的作用,没有其他的用途。 代码块中的内容,在外部是完全可见的。举例: 1234567{ var a = 2; alert("smyhvae"); console.log("永不止步");}console.log("a = " + a); 打印结果:(可以看出,虽然变量 a 是定义在代码块中的,但是在外部依然可以访问) 12永不止步a = 2 流程控制语句 在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的。所以,我们必须清楚每条语句的执行流程。而且,很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。 流程控制语句分类 顺序结构 选择结构:if语句、switch语句 循环结构:while语句、for语句 顺序结构 按照代码的先后顺序,依次执行。结构 ...
05-Vue组件的定义和注册
前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。 模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用 全局组件的定义和注册 组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 全局组件的定义和注册有三种方式,我们接下来讲一讲。 写法一 写法一:使用Vue.extend方法定义组件,使用 Vue.component方法注册组件。 代码举例: 123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l ...
05-CSS3属性详解:动画详解
前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。 补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态。 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。 参考链接:补间动画基础 transition 包括以下属性: transition-property: all; 如果希望所有的属性都发生过渡,就使用all。 transition-duration: 1s; 过渡的持续时间。 transition-timing-function: linear; 运动曲线。属性值可以是: linear 线性 ease 减速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 transition-delay: 1s; 过渡 ...
06-CSS3属性详解:flex布局
多列布局 类似报纸或杂志中的排版方式,上要用以控制大篇幅文本。用得不多。 格式举例: 123456789101112131415161718192021.wrapper{ /* 分成几列 */ -webkit-column-count: 3; /* 每列之间,用分割线隔开 */ -webkit-column-rule: 1px dashed red; /* 设置列之间的间距 */ -webkit-column-gap: 60px; /* 设置每一列的宽度 */ /* -webkit-column-width: 400px; */ /*-webkit- -moz- -ms- -o-*/}h4{ /* 设置跨列:让h4这标题位于整个文flex-wrap本的标题,而不是处在某一列之中*/ -webkit-column-span: all; text-align: center;} 备注:上面这几个属性涉及到兼容性问题,需要加私有前缀。 flex:伸缩布局 CSS3在布局方面做了非 ...
06-CSS盒模型详解
盒子模型 前言 盒子模型,英文即box model。无论是div、span、还是a都是盒子。 但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个:width、height、padding、border、margin。如下: width和height:内容的宽度、高度(不是盒子的宽度、高度)。 padding:内边距。 border:边框。 margin:外边距。 盒子模型的示意图: 代码演示: 上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。 注意:**宽度和真实占有宽度,不是一个概念!**来看下面这例子。 标准盒模型和IE盒模型 我们目前所学习的知识中,以标准盒子模型为准。 标准盒子模型: IE盒子模型: 上图显示: 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式: width和height:内容的宽度、高度(不是盒子的宽度、 ...
06-chrome浏览器
控制台的使用 控制台查看源码 控制台的Sources标签可以查看源码。按住快捷键「cmd + P」,可以根据文件名查找源码文件。 其他 show user agent shadow DOM 把上图中的红框部分打钩。
06-Vue组件之间的传值
父组件向子组件传值 我们可以这样理解:Vue实例就是一个父组件,而我们自定义的组件(包括全局组件、私有组件)就是子组件。 【重点】需要注意的是,子组件不能直接使用父组件中的数据。父组件可以通过props属性向子组件传值。 父组件向子组件传值的代码举例 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" ...
06-流程控制语句:循环结构(for和while)
前言 循环语句:通过循环语句可以反复的执行一段代码多次。 for循环 for循环的语法 语法: 123for(①初始化表达式; ②条件表达式; ④更新表达式){ ③语句...} 执行流程: 1234567①执行初始化表达式,初始化变量(初始化表达式只会执行一次)②执行条件表达式,判断是否执行循环: 如果为true,则执行循环③ 如果为false,终止循环④执行更新表达式,更新表达式执行完毕继续重复② for循环举例: 123for (var i = 1; i <= 100; i++) { console.log(i);} 上方代码的解释: for循环举例 1234for (var i = 1; i < 13; i = i + 4) { console.log(i);} 上方代码的遍历步骤: 12345678910111213程序一运行,将执行var i = 1;这条语句, 所以i的值是1。然后程序会验证一下i < 13是否满足,1<13是真,所以执行一次循环体(就是大括号里面的语句)。执行完循环体之后 ...
07-CSS3属性详解:Web字体
前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体。从此,把特殊字体处理成图片的方式便成为了过去。 支持程度比较好,甚至 IE 低版本的浏览器也能支持。 字体的常见格式 不同浏览器所支持的字体格式是不一样的,我们有必要了解一下字体格式的知识。 TureTpe格式:(.ttf) .ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。 支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。 OpenType格式:(.otf) .otf 字体被认为是一种原始的字体格式,其内置在TureType的基础上。 支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。 Web Open Font Format格式:(.woff) woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩 ...
空降评论复制本文地址
随便逛逛昼夜切换关于博客美化设置切换全屏打印页面