- 博客(22)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript(ES6)之面向对象和类的继承
1. 面向对象编程oop1.1 两大编程思想面向过程编程pop面向对象编程oop1.2 面向对象编程特性封装性 继承性 多态性1.3 对比 面向过程 面向对象 优点 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。 易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统，使系统更加灵活、更加易于维护 缺点 没有面向对象易维护、易复用、易扩展 性能比面向过程..
2020-09-22 23:48:53
146
原创 jQuery学习笔记之jQuery事件
1. jQuery注册事件单个注册事件语法：<body> <script> // element.事件(function(){}) $("div").click(function(){ ...; //事件处理程序 }) </script></body>其他事件和原生基本一致，如mouseover，mouseout，blur，focus，change
2020-07-28 21:39:32
208
原创 jQuery学习笔记--介绍、使用、API（API速查表）
目录1. 概述1.1 jQuery？2. jQuery的使用2.1 下载2.2 jQuery 的入口函数2.3 jQuery的顶级对象 $2.3.1 $ 是jQuery的别称2.3.2$ 是 jQuery的顶级对象2.4 jQuery对象和DOM对象2.4.1 两种对象之间的相互转换3. jQuery 选择器3.1 基础选择器3.2 层级选择器3.3 隐式迭代3.4 筛选选择器3.5 筛选方法1. 概述1.1 jQuery？...
2020-07-27 20:31:50
493
原创 JavaScript之移动端网页特效
1. 触屏事件触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发 1.1 触摸事件对象 TouchEvent三个常见的触摸事件对象 触摸列表 说明 touches 正在触摸屏幕的所有手指的一个列表 targetTouches 正在触摸当前DOM元素上的手指的一个列表 changedTouches
2020-07-25 19:16:31
182
原创 JavaScript之PC端网页特效
1.元素偏移量 offset系列1.1 概述offset翻译过来就是偏移量,我们使用ofet系列相关属性可以动态的得到该元素的位置(偏移).大小等。获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位offset系列常用属性 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位
2020-07-25 14:05:08
170
原创 JavaScript之BOM 浏览器对象模型
前言：BOM（浏览器对象模型），他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。1.BOM概述1.1 对比DOM,BOM:DOM BOM 文档对象模型 浏览器对象模型 DOM就是把[文档」当做一个「对象」来看待 把「浏览器」当做一个「对象」来看待 DOM的顶级对象是document BOM的顶级对象是window DOM主要学习的是操作页面元素 BOM学习的是浏览器窗口交互的一些对象 DOM是W3C标准规范 BOM
2020-07-23 16:01:53
120
原创 DOM高级事件
1. 注册事件（绑定事件）1.1传统注册方式利用on开头的事件，如onclick，onmouseover等 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数1.2方法监听注册方式1.2.1 addEventListener（）addEventListener（）方法 ie9之前用attachEvent() 代替 特点：同一个元素同一时间可以注册多个监听器 按注册顺序执行eventTarget.a...
2020-07-22 16:09:20
123
原创 JavaScript之DOM-- 获取元素、事件基础、操作元素、节点操作
DOM：DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
2020-07-21 15:19:59
353
原创 JavaScript 学习笔记之数组、函数、字符串
1.创建数组：数组元素的数据类型可以不同。1.1 new数组 // 空数组 var arr=new Array();1.2 利用数组字面量创建数组 // 空数组 var arr = []; // 非空数组 var arr = [1, 12, 123];...
2020-07-19 22:19:02
200
原创 JavaScript学习笔记--变量、循环
JS的组成： ECMAScript（JavaScript语法） DOM（页面文档对象模型） BOM（浏览器对象模型） JS输入输出语句 方法 说明 alert(msg) 浏览器弹出警示框 console.log(msg) 浏览器控制台打印输出信息 prompot(info) 浏览器弹出输入框，用户可以输入 特殊变量：不声明变量只赋值也能正常使用但不提倡这种写法 age=18；console.log(age);//能在控制..
2020-07-17 11:11:32
121
原创 移动web开发之bootstrap
1.响应式开发1.1 响应式开发原理使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下，看到不同的页面布局和样式变化平时我们的响应式尺寸划分也可根据实际情况划分尺寸2.bootstrap前端开发框架bootstrap是基于htm...
2020-07-15 10:37:38
189
原创 移动web开发之rem、媒体查询、less
前言：页面布局文字随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局，rem布局针对高度设置 rem布局能在屏幕发生变化时，元素的高度和宽度等比例缩放1.rem基础rem单位rem是一个相对单位，类似于em，em是父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 比如，根元素（html）设置font-size：12px；非根元素设置width：2rem；则换成px表示就是24px（即非根元素的width：24px）。 rem的优点：可以通过修改.
2020-07-12 20:11:18
202
原创 移动web开发之flex布局
1.flex布局体验1.1传统布局与flex布局传统布局兼容性好 布局繁琐 局限性，不能在移动端很好的布局flex布局操作方便，布局即为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE11或更低版本不支持或仅部分支持怎么选择：1.如果是PC端页面布局，选择传统布局2.如果是移动端或者不考虑兼容性问题的PC端页面布局，选择flex弹性布局1.2体验1.搭建HTML结构<body> <div> .
2020-07-11 21:39:56
193
原创 移动端web开发--开发选择、技术解决方案、常见布局
1.移动端开发选择1.1 移动端主流方案1.单独制作移动端页面（主流）2.响应式页面兼容移动端（其次）1.2单独移动端页面（主流）通畅在网址域名前加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。1.3响应式兼容PC移动端通过判断屏幕宽度来改变样式，以适应不同终端。如：三星官网缺点：制作麻烦，需要花大量精力去调兼容性问题2.移动端技术解决方案2.1移动端浏览器移动端浏览器基本以webkit内核为主，因此我们就考虑webkit
2020-07-10 20:59:27
477
原创 移动web开发--移动端基础、视口、二倍图
1移动端基础.1.1浏览器现状国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端浏览器，处理webkit内核浏览器即可。1.2手机屏幕现状现在移动端设备无论是Android还是iPhone，屏幕尺寸非常多，碎片化严重，分辨率也不同。作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。1.3常见移动端屏幕尺寸1.4移动端调试方法Chrome Dev
2020-07-10 15:50:47
533
原创 浏览器前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。1.私有前缀-moz-：firefox -ms-：IE -webkit-：Safari，Chrome -o-：Opera2.提倡写法-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;border-radius:10px;...
2020-07-08 10:21:16
525
原创 css3 动画animation
前言：相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。动画的基本使用： 制作动画 先定义动画 用kerframes定义动画（类似定义类选择器） @keyframes 动画名称{ 0%{ width:100px; } 100% { width:200px; }} 再使用（调用）动画 ...
2020-07-06 17:36:51
101
原创 css3 2D转换-移动、旋转、缩放
转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的移动（translate）、旋转（rotate）和缩放（scale）。1.移动语法：重点：2.旋转语法：重点：转换中心点：重点：注：1.transform-origin后可以跟方位名词，如左下角：left bottom；2.transform-origin默认的是50% 50% 等价于 center center；3.可以是px像素，如：transform-orig.
2020-07-06 16:11:11
154
原创 CSS3 选择器-属性选择器、结构伪类选择器、伪元素选择器
1.属性选择器用法：举例：2.结构伪类选择器：普通用法：特殊用法：举例：<head> <style> div:nth-child(1){ background-color:pink; } div:nth-child(2){ background-color:red; } /*下面这个写法选不到..
2020-07-05 21:22:32
106
原创 H5 多媒体标签
1.音频标签： 谷歌禁用了autoplay属性 因为不同浏览器支持不同格式，解决方案是：为这个音频准备多个格式<audio controls="controls"> <source src="media/happy.mp3" type="audio/mpeg"> <source src="media/happy.ogg" type="audio/ogg"> 先去升级浏览器在播放音频吧，现在版本太低放不了&l...
2020-07-05 10:19:05
138
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人