我以为自己很帅-CSDN博客

原创 20.处理事件

javascript基础事件的三个阶段捕获阶段: 事件从外层往里执行当前目标阶段冒泡阶段: 事件从里向外执行事件对象.eventPhase属性可以查看事件触发时所处的阶段注意: box.onclick box.attachEvent 只有冒泡事件##冒泡的作用(常用)事件委托:原理事件冒泡事件里面的默认参数,或者事件对象e/或者a 表示当事件发生时,可以获取与事件相关的数据e.target 表示真正出发事件的对象<body&gt

2021-08-27 15:59:07 113

原创 19.节点操作

javascript基础##节点属性nodeType 节点的类型1 元素节点2 属性节点3 文本节点4.注释节点nodeName 节点的名称(标签名称)nodeValue 节点值元素节点的nodeValue始终是nullvar box = document.getElementById('box');console.log(box.parentNode); //获取父节点,一般只有元素才会包含内容,所以相当于获取父元素console.log(box.chil

2021-08-27 14:49:26 96

原创 18.创建元素

javascript基础创建元素的三种方式(像搜索栏/购物车都需要用到)document.write() 覆盖整个原来的页面重新生成标签里面的内容document.write('新设置的内容<p>标签也可以生成</p>');node.innerHTML 选中node的所有子元素var box = document.getElementById('box');box.innerHTML = '新内容<p>新标签</p>'; 在当前页面,把bo

2021-08-27 14:43:49 142

原创 17.样式类名操作

javascript基础样式操作使用style方式设置的样式显示在标签行内var box = document.getElementById('box');box.style.width = '100px';box.style.height = '100px';box.style.backgroundColor = 'red';注意通过样式属性设置宽高、位置的属性类型是字符串，需要加上px类名操作修改标签的className属性相当于直接修改标签的类名var box

2021-08-27 14:40:06 341

原创 16.事件及属性操作

javascript基础事件###事件：触发-响应机制事件三要素事件源:触发(被)事件的元素事件名称: click 点击事件事件处理程序:事件触发后要执行的代码(函数形式)事件的基本使用var box = documen.getElementById('box');box.onclick = function() { console.log('代码会在box被点击后执行');}属性操作非表单属性href、title、id、src、className 美女相册 &lt

2021-08-27 13:50:17 104

原创 15.WebAPI

javascript基础API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)var max = Math.max(1, 2, 3);API的使用方法(console.log(‘adf’))Web API的概念浏览器提供的一套操作浏览器

2021-08-27 13:33:18 69

原创 14.内置对象案例

#javascript基础案例截取字符串"我爱中华人民共和国"，中的"中华"var s = "我爱中华人民共和国";s = s.substr(2,2);console.log(s);"abcoefoxyozzopp"查找字符串中所有o出现的位置var s = 'abcoefoxyozzopp';var array = [];do { var index = s.indexOf('o', index + 1); if (index != -1) { array.pu

2021-08-27 10:13:35 130

原创 13.内置对象

javascript基础内置对象JavaScript中的对象分为3种：内置对象、自定义对象、浏览器对象JavaScript 提供多个内置对象：Math/Array/Date…对象只是带有属性和方法的特殊数据类型。可以通过MDN/W3C来查询学习如何学习一个方法？方法的功能参数的意义和类型返回值意义和类型demo进行测试Math对象Math对象不是构造函数，它具有数学函数的属性和方法，都是以静态成员的方式提供Math.PI // 圆周率,这不带()括号,所以这是一个属性

2021-08-27 10:06:05 55

原创 13.内置对象

javascript基础内置对象JavaScript中的对象分为3种：内置对象、自定义对象、浏览器对象JavaScript 提供多个内置对象：Math/Array/Date…对象只是带有属性和方法的特殊数据类型。可以通过MDN/W3C来查询学习如何学习一个方法？方法的功能参数的意义和类型返回值意义和类型demo进行测试Math对象Math对象不是构造函数，它具有数学函数的属性和方法，都是以静态成员的方式提供Math.PI // 圆周率,这不带()括号,所以这是一个属性

2021-08-27 09:43:37 62

原创 10变量以及作用域

javascript基础作用域作用域: 变量可以起作用的范围.全局变量在任何地方都可以访问到变量就叫做全局变量,对应全局作用域局部变量只在固定的代码区域内可以访问到的变量,对应局部作用域(函数作用域)不使用var声明的变量是全局变量,不推荐.局部变量退出作用域后就会被销毁,全局变量关闭页面或浏览器才会销毁块级作用域任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。在es5之前没有块级作用域的的概念,只有函数作用域，现阶

2021-08-26 18:34:00 108

原创 9匿名函数以及匿名函数调用.s

javascript基础知识函数其他匿名函数var fn = function() { console.log('你好boy')}fn() //匿名函数调用(function() {console.log('nihao')})() //匿名函数自调用没有名字的函数,叫匿名函数,匿名函数在多人开发时还需要设置防命名重复处理,后面学习高阶函数再来讲函数作为参数因为函数也是一种类型,可以把函数作为一个函数的参数,其他函数中调用函数可以作为返回值fu

2021-08-26 17:17:57 148

原创 8.arguments对象以及使用

javaScript基础arguments的使用arguments对象是一个比较特殊的对象,实际上是当前函数的一个内置属性,也就是说所有的函数都内置了一个arguments对象.arguments对象中存储了传递的所有实参,是一个伪数组.求任意的最大值function getMax() { var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (max < argumen

2021-08-26 16:52:04 100

原创 7.函数的语法以及函数的返回值

javascript基础函数把一段相对独立的具有特定功能的代码块封装起来,形成一个独立的实体,就是函数,给函数起个名字,后续可以反复调用.//声明函数function sayHi() { console.log('吃了吗?');}function getSum () { var sum = 0; for (var i = 0; i < 100; i++) { sum += i; } console.log(sum);}getSum();语法通过参数的

2021-08-26 15:27:36 214

原创 6.数组元素添加以及排序

javaScript基础数组将多个元素按一定顺序排列到一个集合中,这个集合就成数组.###数组的字面量var arr1 = [];var arr2 = [1, 3, 4];var arr3 = ['a', 'c', 'd'];console.log(arr3.length); 获取数组的长度;arr3.length = 0; 改变数组里面的元素个数for(var i = 0;i < arr.len

2021-08-26 15:14:53 246

原创 5.流程控制语句

javaScript 基础表达式和语句表达式一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。语句语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句流程控制顺序结构从上到下执行就是顺序结构(程序默认就是从上到下执行)分支结构根据不同的情况执行if语句示例:<script> var num = 10; if (num > 10) {

2021-08-26 15:03:30 51

原创 4.运算符

javaScript基础运算符算术运算符+ - * / %++i 自身加1--i 自身减1(注意是自身,运算之后自己的值被改变)前置++(自身的值加1,结果值加1) var num1 = 5; ++ num1; 结果为6,num1的值变为6; var num2 = 6; console.log(num1 + ++ num2); 结果为 13; 后置++(自身的值加1,结果值不变) var num1 = 5; num1

2021-08-26 14:49:00 104

原创 3.数据类型之间的转换

JavaScript基础获取变量的类型var age = 18;console.log(typeof age); //'number'注释/*var age = 18;var name = 'zs';console.log(name, age);*/这是多行注释var name = 'hm';输入输出语句prompt('请输入你的年龄'); //网页中弹出输入对话框,提示"请输入你的年龄"alert('计算的结果是');// 弹出对话框,提示"计算的结果是";

2021-08-26 14:35:56 79

原创 2.变量以及简单数据类型

javascrip基础变量计算机中存储数据的标识符,根据变量可以获取内存中的数据var age, name, sex;age = 18;var age = 18;var age = '18';变量可以申明并赋值##变量的命名规则由字母数字下划线符号组成,不能以数字开头不能是关键字和保留字,例如: for while.区分大小写.变量名必须有意义,(建议遵守)遵守驼峰命名,首字母小写,后面单词的首字母需要大写.,例如: userName.(建议遵守)

2021-08-26 14:19:42 72

原创 1.认识JavaScript

JavaScript基础知识什么是javascript?javascript是一种运行在客户端(浏览器)的一种脚本语言.javascript现在的应用场景网页特效服务端开发(Node.js)命令行工具(Node.js)桌面程序(Electron)App(cordova)控制硬件—物联网(ruff)游戏开发(cocos2d-js)HTML/CSS/JavaScript的区别html: 提供网页结构,以及网页中的内容css: 用来美化结构javascript: 控制页面的内容,

2021-08-26 13:46:54 59

原创项目实战练习(比较散的知识点)

=项目实战(比较散的知识点)第一步准备开发工具&素材&图纸审查布局类型 ( 上中下 | 上(左右)下 | 左右找版心(内容最宽处,内容宽度最通用处)寻找页面上的公共要素字号颜色**背景颜色 **(注意区分是背景颜色还是背景图片)文本颜色 #ccc装饰颜色行高间隙组件: 通用的样式,可以写准备好,后面需要的时候直接调用.搭建结构剪切后想取消可以按下 ESC所有的轮播按钮一般都是定位起来的导航条有些是吸顶导航,就是导航

2021-07-11 20:10:07 61

原创 iframe-视口单位-文本模糊-固定定位(二十四)

iframe 内联框架(了解)可以将例外一个网页通过iframe框架引入到当前页面.<iframe width='200' height='200' src='http://www.baidu.com/'></iframe>属性值描述widthpx*%*定义 iframe 的宽度。heightpx*%*规定 iframe 的高度。frameborder1 || 0规定是否显示框架边框nameframe_name规定 i

2021-07-05 17:09:41 926

原创 FC格式化(二十三)

FC格式化上下文FC: Formatting Contexts,是w3c css2.1规范中的一个概念.相当于页面中的渲染区域,并且有一套渲染规则,决定其子元素将如何定位,以及和其他元素的关系和相互作用BFC: 块级格式化上下文.Block Formating Contexts 就是页面上的一个隔离的渲染区域,容器里面的子元素不会布局上影响到外面的元素.形成条件1.根元素;2.float属性不为none;3.position为absolute或者 fixed;4.display为inl

2021-07-05 14:24:18 96

原创变量var函数(二十三)

变量使用：var() 函数var() 函数是用来读取变量，如下例：a { --foo：#f1f2f5; --bar: red; color: var(--foo); text-decoration-color: var(--bar);}var()函数也可作为其他变量的值使用.变量作用域| css变量遵从css优先级的原则, 变量值会被覆盖html { --color: blue; }div { --color: green; }* {

2021-07-05 12:22:10 1160

原创 3D变换(二十二）

3D变换(transform3D)##坐标轴[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJpnbFui-1625458830250)(D:/JAVA/WEB%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%EF%BC%88%E5%85%A8%E5%A5%97%EF%BC%89/%E4%BA%8C%E5%8D%81%E4%B8%83/%E8%AF%BE%E4%BB%B6%E7%AC%94%E8%AE%B0/as

2021-07-05 12:20:38 576

原创 css3弹性布局模式

CSS3弹性布局flex传统的布局方式依赖盒状模型,靠 display属性 position属性 float属性,对于特殊布局不方便,比如说垂直居中就比较难实现. w3c提出了一种新的方案 flex布局,比较简便完整地实现各种页面布局.尤其是在移动端小程序等方面.任意一个容器都可以指定为flex布局,行内元素也可以.设置Flex 布局以后,float clear 和vertical-align 属性将失效.基础概念采用flex布局的元素,称为flex容器,简称容器.[

2021-06-30 13:48:49 72

原创 css3关键帧已经动画效果(二十)

##css3 帧动画 animation @keyframesanimation比较类似于flash中的逐帧动画,就像播放电影.前面提到的transition只是制定了开始和结束的状态,整个过程还是需要函数来确定.逐帧动画是由关键帧组成,多个关键帧连续播放就组成了动画,由属性keyframes来完成.1. @keyframes 关键帧 .animationName: 动画名称,开发人员命名; .percentage: 百分比值,可以添加多个;.properties: 样

2021-06-30 13:36:54 77

原创 css文本处理补充.(十九)

css文本补充css2属性描述属性值color设置文本颜色rgb HEX rgbadirection设置文本方向。ltr(左->右) rtl(右->左)letter-spacing设置字符间距pxline-height设置行高pxtext-align对齐元素中的文本leftcenterrightjustify (两端对齐)text-decoration向文本添加修饰text-decoration: underline

2021-06-26 12:07:05 89

原创 css3变换-过渡-曲线-阴影(十九)

css3 transform 2D变换transform: translate(20px,30px) rotate(30deg) scale(3,4) skew(20deg,30deg);transform-origin: x-axis y-axis z-axis;平移translate:从当前位置移动.transform: translate(50px,100px);旋转rotate: 顺时针旋转元素,负值表示逆时针旋转.transform: rotate(30deg);缩

2021-06-26 12:06:27 90

原创 css3圆角边框-渐变-(十九)

css3新增样式border-radius: 1-4 length|% / 1-4 length|%;/* xy合并参数写法 */border-radius: 10px 20px 30px 40px;border-radius: top-left top-right bottom-right bottom-left/* 全参数写法 */border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;border-radius: top-left-x

2021-06-26 12:05:57 757

空空如也

空空如也