三生石上缘-优快云博客

原创 JS基础篇03

第10讲 BOM 什么是window对象？什么是document对象？ Window 对象：表示浏览器中打开的窗口。所有的全局函数和对象都属于Window 对象的属性和方法。 document对象：代表整个HTML文档，可用来访问页面中的所有元素。 window是所有对象的容器，document是DOM对象容器，window包含document offsetWidth、cli...

2019-08-29 21:41:48 283

原创 JS小案例锦集

1，图片轮播，实现点击按钮按顺序和循环切换效果图：实现代码： #outbox { margin: 20px auto; width: 500px; height: 380px; border: 1px solid black; } #box img { width: 5...

2019-08-23 21:42:34 383

原创 js小案例，模拟QQ聊天

点击人物图片可切换，输入内容可发送效果图：页面布局： <div id="box"></div> <img src="img/xiaohong.jpg" alt="" id="img" /> <span id="username">小红</span> <input type="text" id="text" />...

2019-08-23 21:12:30 688

原创 DOM怎么添加、移除、移动、复制、创建和查找节点

①创建：document.creatElement('li') ②添加：parentNode.appendChild(childNode) ③在指定元素之前插入节点：refNode.parentNode.insertBefore(newNode,refNode) ④替换：oldNode.parentNode.replaceChild(newNode,oldNode) ⑤移除，删除： de...

2019-08-23 20:50:47 710

原创解决ie低版本类名获取元素兼容问题

/** *实现通过类名获取元素 * @param {element} context,可选，表示获取范围，可以是document，也可是某个元素 * @param {string} cla,要获取的类名 * @returns 获取的类数组或者单个元素 */ function getByClass(context, cla) { if (arguments.length == ...

2019-08-23 13:30:16 326

转载 JS关于 [1,2,3]map(parseInt)问题的分析

想要弄懂这个问题，要清楚map()方法的定义用法和参数以及parseInt()函数的定义用法和参数。 1、map()方法的定义用法和参数 map()方法定义：按照原始数组元素顺序依次处理元素，然后返回一个新数组 map()语法 array.map(function(item,index,array),this) 参数说明： item：必须，当前处理的数组的值 index：可选，...

2019-08-22 22:45:39 273

原创 JS基础篇02

第五讲函数写一个获取非行间样式的函数 /** *获取非行内样式 * * @param {element} ele 需要获取样式的元素 * @param {string} attr 获取的样式属性名 * @returns */ function getCss(ele,attr){ if(!ele.currentStyle){ return getCo...

2019-08-20 21:07:01 274

原创 JS基础篇01

第一节初始JS 什么是javascript？ javascript是一种具有面向对象能力的、解释型的程序设计语言。是基于对象和事件驱动并具有相对安全性的客户端脚本语言 Javascript与ECMAScript的关系？ Javascript和ECMAScript通常用来表达相同的意思； ECMAScript是Javascript的标准（核心），定义了变量，语句，数据类...

2019-08-13 14:52:09 555

原创 css过渡、动画3D环绕相册

以下是八面环绕相册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <...

2019-08-06 21:09:05 1273

原创 HTML基础篇04

第17讲 CSS3过渡、变换与动画 CSS3中过渡和动画的区别和各自适用场景？过渡动画：当元素状态发生改变，不想直接变化，而是逐渐变化，就使用过渡。动画：可自动触发，支持多个状态，循环播放不同点： 1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。 2. 循环。 animation可以设定循...

2019-08-06 21:00:01 169

原创 HTML基础篇03

第十三讲 CSS3基础 CSS3有哪些新特性？新增模块：选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面边框属性 border-radius圆角一个值设置四个角的圆角大小二个值设置左上和右下、右上和左下的圆角大小三个值设置左上、右下和左下、右下的圆角大小四个值设置左上、右上、右下、左下的圆角大小 ...

2019-07-31 13:22:45 250

原创 HTML基础篇02

第六节如何让盒子水平垂直居中 //绝对居中 position:abolute/relative/fixed margin:auto; left:0; right:0; top:0; bottom:0; 简述BFC规则，及解决的问题？ BFC：块级格式化上下文，指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且...

2019-07-28 17:26:40 470

原创等高布局、圣杯布局、双飞翼布局的实现原理

等高布局： - 假等高: 原理：利用内外边距相抵消，注意父元素设置"overflow:hidden"，列变宽，其他列等高变化优点：结构简单，兼容所有浏览器缺点：伪等高，需要合理控制margin和padding值配合 /*三列，把外面设置一个大盒子，里面3个小盒子*/ 父级：overflow:hidden;(溢出隐藏) 子级：padding-bottom:99999px; ...

2019-07-28 17:18:17 1337

原创常见浏览器兼容问题

1. IE图片的边框问题（a标签下的图片） img{ border:0/none;} 2. IE8一下浏览器背景复合属性空格问题 baground-image:url()'空格'no-repeat left; 其他ie低版本兼容性问题了解（1）在ie6及更早浏览器中定义小高度的容器？ #text{ overflow:hidden; hei...

2019-07-28 15:28:52 368

原创 BFC解决的几种问题

外边距塌陷原因：父子嵌套标签垂直方向的margin，margin会其中最大值解决方法：给父级设置border或者padding 改变父级元素bfc渲染模式 position:absolution/fixed float:right/left overflow:hidden display:inline-bloack 浮动的问题原因：标签浮动后脱离正常文档流，导致父标...

2019-07-24 21:30:29 1314

原创数组删重

一个数组中有多个相同元素，删除重复元素 //获取一个数组 var arr = [1,3,4,2,5,5,6,7,2,2,1,1,1]; //遍历数组 for(var i=0;i<arr.length;i++){ //获取当前元素后面的所有元素for(var j=i+1;j<arr.length;j++){ //判断元素是否相等 if(arr[...

2019-07-23 08:25:19 200

原创 array数组操作方法

数组常用方法简要数组操作方法笔者分为两种，一是对原数组产生影响的，另一种是对原数组没有影响有影响，直接修改原数组的方法： push()向数组末尾添加元素，并返回数组的新的长度，该方法会将新数组的长度作为返回值返回 var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); console....

2019-07-22 22:13:17 401

原创 HTML基础篇01

第一节 HTML基础 <!doctype>作用声明文档类型，告诉浏览器该用哪种规范来解析文档内容常见的浏览器及其内核 Chrome Blink Firefox Gecko Ie Trident Safari webkit Opera 常见的块级标签和行内标签分别...

2019-07-22 10:02:29 184

qq_43239707的博客