从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

李洪强和你一起学习前端之(3)Css基础和选择器

大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候,并不是非常迅速,但是,我相信天道酬勤,我相信勤能补拙,相信每一个一开始打算学习前端的人都有自己的梦想,或大或小,它一直激励着我们前行,就让我们不忘初心,一起进入下面的学习吧! Css基础 1.Css概念 CSS指层叠样式表(cascading style Sheets) 1.1 Css与html…

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

1:DOM(Document Object Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DOM常用属性 title:返回或设置当前文档的标题. all:返回所有元素的集合. forms:返回对文档中所有form对象的引用. 通过集合来访问相应的对象: 1.通过下标的形式. 2.通过name形式. 3:DOM查询方法 1.getElementById(id):返回拥有指定id的(第一个)对象…

从零开始学习前端JAVASCRIPT — 1、JavaScript基础

1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类型检查. 静态类型:编译的时候就知道每个变量的类型. 解释型:程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率比较低,但是跨平台性好. 编译型:程序在执行之前需要一个专门的翻译过程,把程序编译为机器语言的文件,运行时直接使用编译的结果就行了. 标记语言:标记语言的存…

从零开始学习前端JAVASCRIPT — 2、JavaScript基础ES5

1:ES5简介 ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正. 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化. 2:严格模式的意义相对于正常模式而言: 1:消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为. 2:消除代码运行的一些不安全之处,保证代码运行的安全. 3:提高编译器效率,增加运行速度. 4:为未来新版本的Java…

从零开始学习前端JAVASCRIPT — 7、JavaScript基础EVENT

1:事件驱动 1)事件:所谓事件就是js侦测到的用户的操作或是页面的一些行为(怎么发生的) 2)事件源对象:引发事件的元素.(发生在谁的身上) 3)事件处理程序:对事件处理的程序或是函数 (发生了什么事) 4)事件对象:当事件发生的时候,具体发生了哪些信息,(当按键盘的时候按的哪个键或者鼠标光标在页面的哪个位置等等). 2:事件分类 1.鼠标事件 onclick 点击鼠标 ondblclick 双击鼠标 onmousedown 鼠标按下 onmouseup …

从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6（ECMAScript6.0）

ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言.各大浏览器的最新版本,随着时间的推移,支持度已经越来越高了,ES6的大部分特性都实现了.那么也就意味着低版本浏览器是不支持ES6的. 1:let/const 声明变量关键字 1)let关键字特点 let声明的变量只在所在的块级作用域内有效(块级作用域特点:不受外部环境影响和内部代码块影响) j…

从零开始学习前端JAVASCRIPT — 9、JavaScript基础RegExp(正则表达式)

1:正则的概念正则表达式(regular expression)是一个描述字符规则的对象.可以用来检查一个字符串是否含有某个子字符串,将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等. 为什么要用正则:前端往往有大量的表单数据校验工作,采用正则表达式会使得数据校验的工作量大大减轻.常用效果:邮箱.手机号.身份证号等. 2:创建方式 i:表示忽略大小写. g:表示全局匹配,查找所有匹配并返回而非在找到第一个匹配后停止. m:多行匹配. 第一种方式:var reg = new Re…

从零开始学习前端JAVASCRIPT — 8、JavaScript基础COOKIE

1:通信协议定义:通信协议是指双方实体完成通信或服务所必须遵循的规则和约定.协议定义了数据单元使用的格式,信息单元应该包含的信息与含义,连接方式,信息发送和接收的时序,从而确保网络中数据顺利地传送到确定的地方.(通信间交流的规则) 在计算机通信中,通信协议用于实现计算机与网络连接之间的标准,网络如果没有统一的通信协议,电脑之间的信息传递就无法识别. 通信协议是指通信各方事前约定的通信规则,可以简单地理解为各计算机之间进行相互会话所使用的共同语言.两台计算机在进行通信时,必须使用的通信协议. 计…

从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍

Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法. 2:Math属性 PI:返回圆周率(约等于3.14159). 3:Math方法 Math.round(3.6); // 四舍五入. Math.random(); // 返回大于等于0到小于1之间的随机数. // 随机数如何设定范围 // 0 - 100(包含)…

从零开始学习前端JAVASCRIPT — 3、JavaScript基础string字符串介绍

1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串基本数据类型:var sStr = '字符串'; 对象的方法:var oStr = new String('字符串'); //统计每个字符出现的次数,结果显示 a 2.b 1.c 2.d1,去掉重复的字符,使结果显示 abcdfgj. //var定义的变量赋值字符串以对象[]的方式访问单个字符IE8以上支持 var str="abcdafgcj"; var arr={};…

从零开始学习前端JAVASCRIPT — 5、JavaScript基础BOM

1:BOM(Browser Object Model)概念 window对象是BOM中所有对象的核心. 2:window属性(较少用) self:self代表自己,相当于window. window.self; //指向自身窗口 parent:返回父窗口. top:返回顶层窗口,和parent作用一样. opener:窗口开启者. 3:window方法 1.window.open(url, name, feature, replace); url:一个可选的字符串,声明了要在新窗口中显示的文…

从零开始学习前端JAVASCRIPT — 14、闭包与继承

一.闭包 1 . 概念:闭包就是能够读取其他函数内部变量的函数.在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”. 2 . 闭包的特点 1)可以读取函数内部的变量. 2)让这些变量的值始终保存在内存中. 3 . 闭包的原理理解闭包,首先必须理解JS变量的作用域.变量的作用域无非就是两种(es5):全局变量和局部变量. JS语言的特殊之处,就在于函数内部可以直接读取全局变量.另一方面,函数外部自然无法读取函数内的局部变量. 注意: 1)函数内部…

从零开始学习前端JAVASCRIPT — 11、Ajax-前后端异步交互以及Promise-异步编程的改进

(注:本章讲解涉及部分后端知识,将以php提供数据的方式进行相应的demo实现) 1:ajax的概念全称:Asynchronous Javascript And Xml AJAX不是一种新的编程语言,而是一种用于创建更快更好以及交互性更强的WEB应用程序技术,该技术在98年前后得到了应用.通过AJAX,你的JS可以通过JS的XMLHttpRequest对象在页面不重载的情况下与服务器直接进行通信.这样可以在服务器请求到想要的数据,而不是整个页面.AJAX的核心就是JS的XMLHttpReque…

从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程

一.构造函数的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象编程</title> </head> <body> <script> /*构造函数(构造函数命名一般此采用大驼峰式命名即驼峰式命名首字母大写)*/ // 构造函数中的this指向的是即将生成的对…

从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

未完待续...... 一.运动原理通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. 注:物体每次运动都应该把之前的定时器清除掉. 二.边界处理遇到边界是应该停止掉还是反弹,方向相反. 改变物体运动方向:将物体的速度值取反. 三.加速减速加速:速度越来越快. 减速:速度越来越慢. 四.抛物线水平方向有一速度,垂直方向有一速度,并做自由落体. 五.透明度的变换难点:处理低版本I…

从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况

JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函数的所属对象是谁,this指向函数所属对象.4.当this所在函数没有所属对象,this指向window对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g…

从零开始学习前端开发 — 1、HTML基础

一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联盟)制定,行为标准由ECMA(欧洲电脑厂商联合会)制定二.html相关概念 1.html-超文本标记语言 2.xhtml-可扩展的超文本标记语言 3.html5-html的第五次重大修改注:html和xhtml的区别: XHTML规范:必须小写,有开始结束标签,属性也用双引号. HTML规范:不…

从零开始学习前端开发 — 2、CSS基础

一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成,声明由属性和值组成. 语法: 选择符{ 属性:值; 属性:值; } 注: (1)属性和值用冒号连接 (2) 一条声明结束要添加分号 (3)属性和属性不分先后顺序 3.样式表的创建 1.内联样式(行间样式,行内样式) 语法:<标记 style="属性:值;"></标记&g…

从零开始学习前端开发 — 14、CSS3变形基础

一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotateX(180deg) 沿x轴翻转等价于 rotate3d(1,0,0,180deg) b) rotateY(180deg) 沿y轴翻转等价于 rotate3d(0,1,0,180deg) c) rotate(60deg) 2d空间的旋转,正值为顺时针,负值为逆时针 d) rotateZ(180d…

李洪强和你一起学习前端之(1)Html基础

1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试) Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a 全选 Ctrl + x 剪切 Ctrl + s 保存 Ctrl + z 返回上一步 Alt +tab 切换软件 Ctrl +tab 内部的切换 Windows +d 返回桌面 Windows + r(notepad) 运行窗口 Windows + e 打开本地磁盘 2 认识大前端 2.1解决用户体…

从零开始学习前端开发 — 6、CSS布局模型

一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元素设置float后会脱离正常的文档流 3.层模型(Layer) 使用position属性对元素进行定位设置二.定位语法:position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位); 1.绝对定位语法: position:absol…

从零开始学习前端开发 — 18、BFC

一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left,right) 2.设置overflow除visible以外的值(hidden,auto,scroll) 3.设置display属性(table,table-cell,inline-block,flex) 4.设置position属性(fixed,absolute) 三.BFC的作用 1.可以解决上下marg…

从零开始学习前端开发 — 17、CSS3背景与渐变

一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见二.背景原点: background-origin:padding-box|border-box|content-box; 作用:…

从零开始学习前端开发 — 16、CSS3圆角与阴影

一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border-radius:50px 5px; 左上,右下为50px,右上,左下为5px 3.设置三个值 border-radius:10px 50px 20px; 左上为10px,右上,左下为50px,右下20px 4.设置四个值 border-radius:0px 10px 30px 50px; 顺时针方向依…

从零开始学习前端开发 — 15、CSS3过渡、动画

一.css3过渡语法: transition: 过渡属性过渡时间延迟时间过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性…

从零开始学习前端开发 — 12、CSS3弹性布局

一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一即可 3.设置栏间距column-gap:数值+单位; 4.设置栏间隔线column-rule:5px solid|dashed|dotted black; 5.设置是否跨栏显示column-span:all(跨栏)|none(不跨栏); 注:a)给需要跨栏显示的元素设置该属性 b) 该属性只有ch…