zw06121-CSDN博客

原创 JavaScript中的时间动画效果和运动算子和动画序列

1. 时间实现动画效果var div = document.querySelector("div");var distance = 1000; //总共的距离var duration = 2000; //总共的时间var initLeft = div.offsetLeft; //初始化left值var startTime = new Date(); //动画开始时间setT...

2018-08-19 09:55:43 357

原创 JavaScript中的正则表达式

2. 正则表达式创建正则表达式使用构造函数 var reg = new("正则表达式","匹配模式"); 使用字面量 var reg = /正则表达式/gi; g表示全局匹配 i表示忽略大小写全局模式全局模式是每次测试都是从lastIndex开始测试不是全局模式的话,每次测试都是从开头开始测试 las...

2018-08-19 09:54:38 401

原创 JavaScript中的BOM操作

4. BOMdocument.documentElement 指的是html4.1 获取窗口的大小window.innerWidth,window.innerHeight这种方式不支持IE8 及以下,要兼容IE可以使用document.documentElement.clientWidth和document.documentElement.clientHeightvar w ...

2018-08-19 09:54:01 230

原创 JavaScript中的DOM2级事件及键盘事件和事件代理

1. DOM2级事件1.1 addEventListenterdiv.addEventListener("click",function () { console.log("22");},true); 参数一: 事件类型(不能加on) 参数二: 事件处理程序参数三: 布尔值,true表示捕获阶段,false表示冒泡阶段,不写代表冒泡阶段 ...

2018-08-19 09:52:57 380

原创 JavaScript中的鼠标事件及事件对象

1. 鼠标事件 mouseover和mouseout 当鼠标进入元素区域内触发和离开元素区域内触发这两个事件是冒泡的,就是当前事件会冒泡给父元素,一层一层冒泡 mouseenter和mouseleave 与mouseover和mouseout效果一致,但是这两个事件不冒泡 2. 事件对象的属性2.1 常用属性 bubble 返回的是布尔值,表示...

2018-08-19 09:51:30 1746

原创 JavaScript中的事件与事件类型

4. 事件事件处理程序中的 this, 是指前面的事件源对象.4.1 事件的三要素: 事件源:事件发生在哪个元素上事件处理程序:给事件赋的函数事件对象 (包含事件发生的所有的信息: 事件源是谁, 发生的坐标, 什么阶段....) DOM0级事件处理:var div = document.querySelector("div");div.onclic...

2018-08-19 09:50:27 225

原创 JavaScript中的offsetWidth,offsetHeight,offsetLeft,offsetTop

1. 获取宽高left,top值的简便方法获取宽度元素对象.offsetWidth 获取到的值会包括边框,padding值,自身宽度获取高度元素对象.offsetHeight 获取到的值会包括自身高度,边框 ,padding值获取父元素元素对象.offsetParent 获取到的是它的参考父元素而`parentElement`获取到的...

2018-08-19 09:48:06 916

原创 DOM节点之间的关系,与节点的基本操作

1. 节点之间的关系1.1 第一种获取方式以下获取节点都会获取所有的节点类型,不只是包括元素节点,还有文本类型等获取一个元素节点的所有子节点元素节点对象.childNodes 获取到的是一个类数组 NodeList 获取一个元素节点的第一个子节点元素节点对象.firstChild 获取一个元素节点的最后一个子节点元素节点对象.lastChi...

2018-08-19 09:43:23 2797

原创 JavaScript中的定时器,JavaScript中的DOM节点,获取元素的样式

1.window对象window对象是ECMAScript中定义的浏览器端的全局对象global是服务器端的全局对象页面中定义的全局变量和函数,都会成为window对象的属性和方法2. 定时器2.1setTimeout定时器setTimeout(function(){ //要执行的代码},5000)这个定时器的含义是指,执行到这行代码时,等5s后将参数一的代码...

2018-08-19 09:41:08 543

原创 JavaScript中的字符串,JavaScript中的日期对象

1. 字符串1.1 基本知识字符串分为: 基本数据类型中字符串 "" '' String() 使用+连接对象中的字符串(包装类) 使用构造函数String创建字符串对象 new String("abc") new String(222) 注意:在JavaScript中,字符串是不可变的,只要是涉及到字符串的更改,都是创建新的字符串字符串中也有len...

2018-08-19 09:39:21 381

原创 JavaScript数组及数组中常用方法

1. 数组1.1 创建数组对象通过字面量创建数组: var arr=[10,20,30,40]; 通过构造函数创建对象 var arr1= new Array(10,20,30,40); 数组中的元素是可重复且有序的注意:用构造函数创建一个数组对象时,如果传入的只有一个参数且这个参数为整数时,此时这个参数会被认为是数组的长度如 :var a...

2018-08-03 23:36:41 403

原创 JavaScript原型

1. 原型在JavaScript中,一切皆对象对于基本数据类型,也有包装类型把它们包装成一个对象来使用只要是对象,那么就一定有属性和方法对于函数,也是对象,那么他也有属性和方法那有什么属性呢?函数一旦声明成功,那么每个函数对象都有一个属性prototype这个prototype指向的就是函数的原型对象而原型对象中也有一个属性constructo...

2018-08-03 23:36:10 107

原创 JavaScript基本数据类型和运算符

1. 常用的调试方法弹出警告框: alert("警告的内容"); 弹出确定框: confirm("文本内容"); 输入框: prompt("提示文字","默认值"); 向控制台输入结果: console.log("我会在控制台显示"); 向页面中输入内容: document.write("我会在页面中显示") 2.数据

2018-07-29 10:58:46 340

原创文本属性,字体,长度单位

1. 字体设置字体颜色: color:; 设置字体样式: font-style:normal/italic; 斜体/正常设置字体: font-family:; 多个字体用逗号隔开设置字体大小: font-size:; 设置字体粗体: font-weight:normal/bold; 正常/加粗bolder比父元素字体大小大一点lighter比父元...

2018-07-29 10:58:02 395

原创 css定位和css背景

1. 定位定位:position : ;有4个值:static静态定位(默认值,没有定位) , relative相对定位, absolute绝对定位,fixed固定定位1.1 相对定位相对定位:position:relative;相对定位的特点: 相对于静态位置的定位,它不会脱离文档流. 就算离开之前的位置,也不会影响页面的布局有4个方向的值:l...

2018-07-23 23:15:26 666

原创 css的浮动以及清除浮动的方法

1. 内联元素的盒模型内联元素可以分为替换元素和非替换元素替换元素: 浏览器会根据元素的标签和属性,来决定显示的内容除了不会独占一行,其他跟块元素没有什么区别,(能设置宽和高) 常见的有input img 非替换元素: 显示就是元素本身的内容不能设置宽高常见的有a span ...

2018-07-22 12:11:01 148

原创 css特性及盒子模型

一.css的三大特性继承性层叠性优先级1.1 继承性后代元素会继承祖先元素的某些样式,这就是css的继承性如果继承了多个祖先的相同的样式,那么采用就近原则,哪个祖先离得近,就用哪个祖先继承过来的样式哪些能被继承?哪些不能被继承呢?color font-xxx text-xxx line-xxx能被继承background 关于布局,定位之类的不能被继承1.2...

2018-07-20 22:57:04 170

原创 CSS的常用选择器

一.css基本语法1.1 css基本组成1.css由选择器和声明块组成<style> p{ color:red; font-size:30px; } </style>上面的样式中p就是一个选择器,大括号中的一条或多条声明就组成了声明块.1.2 css选择器1.2.1 简单选择器: ...

2018-07-18 19:31:13 239

原创列表与表单

一.常用的标签1.1 img标签img标签是指引入一个外部的图片<img src="" alt=""> src指的是一个图片的路径,跟a标签中href属性的路径设置是一样的 alt属性为当图片显示不出来的时候显示的文字 img可以设置宽高,为等比例缩放,设置了宽度则会自动等比例设置高度图片的格式 1.JPEG(JPG) JPEG图片支持的颜...

2018-07-18 19:30:15 1081

原创 HTML基本知识

一. HTML文档结构1.1 文档声明1.html5的声明<!DOCTYPE html>1.2 文档的标签<html> <head> <title></title> </head> <body> </body>&

2018-07-18 19:29:30 137

zw06121的博客