文章分类 -  前端

jquery--尺寸相关(获取设置尺寸/高度,获取页面绝对位置)/滚动事件/例子-置顶菜单、无缝滚动
摘要:1、获取和设置元素的尺寸 width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和hei 阅读全文

posted @ 2019-12-23 21:48 cherry_ning 阅读(190) 评论(0) 推荐(0)

html标签使用定位时,自动居中技巧
摘要:例: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>置顶菜单</title> 6 7 <script type="text/javascript" src="../js/jquery-1 阅读全文

posted @ 2019-12-22 20:58 cherry_ning 阅读(542) 评论(0) 推荐(0)

jquery--jquery循环/动画/动画实例-手风琴效果
摘要:jquery动画 通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。 $('#div1').animate({ width:300, height:300 },1000,swing,function(){ alert('done!'); }) 阅读全文

posted @ 2019-12-22 12:09 cherry_ning 阅读(342) 评论(0) 推荐(0)

jquery--jquer特殊效果/层级菜单
摘要:jquery特殊效果 fadeIn() 淡入 $btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); }); fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide 阅读全文

posted @ 2019-12-21 17:29 cherry_ning 阅读(121) 评论(0) 推荐(0)

jquery--样式操作/click事件/jquery选项卡/jquery索引值/jquery操作属性
摘要:jquery样式操作 jquery用法思想二 同一个函数完成取值和赋值 操作行间样式 // 获取div的样式 $("div").css("width"); $("div").css("color"); //设置div的样式 $("div").css("width","30px"); $("div") 阅读全文

posted @ 2019-12-21 17:25 cherry_ning 阅读(252) 评论(0) 推荐(0)

jquery--加载/选择器
摘要:jquery介绍 jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系 阅读全文

posted @ 2019-12-21 16:44 cherry_ning 阅读(135) 评论(0) 推荐(0)

JavaScript高级--面向对象
摘要:面向过程与面向对象编程 1、面向过程:所有的工作都是现写现用。 2、面向对象:是一种编程思想,许多功能事先已经编写好了,在使用时,只需要关注功能的运用,而不需要这个功能的具体实现过程。 javascript对象 将相关的变量和函数组合成一个整体,这个整体叫做对象,对象中的变量叫做属性,变量中的函数叫 阅读全文

posted @ 2019-12-20 00:15 cherry_ning 阅读(156) 评论(0) 推荐(0)

JavaScript高级--类型转换/变量作用域/封闭函数/闭包及其用法/内置对象/新增选择器
摘要:类型转换 1、直接转换 parseInt() 与 parseFloat() alert('12'+7); //弹出127 alert( parseInt('12') + 7 ); //弹出19 alert( parseInt(5.6)); // 弹出5 alert('5.6'+2.3); // 弹出 阅读全文

posted @ 2019-12-18 21:06 cherry_ning 阅读(164) 评论(0) 推荐(0)

JavaScript--定时器/实例(时钟/倒计时)
摘要:定时器 定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流 见实例-整屏滚动 定时器类型及语法 /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 阅读全文

posted @ 2019-12-18 20:59 cherry_ning 阅读(589) 评论(0) 推荐(0)

JavaScript--实例(计算器)
摘要:1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initia 阅读全文

posted @ 2019-12-14 16:28 cherry_ning 阅读(125) 评论(0) 推荐(0)

JavaScript初级--变量函数预解析/匿名函数/js函数传参/函数return关键字/条件语句/数组/数组去重/通过标签获取元素/循环/字符串处理方法-js调试方法
摘要:函数 函数就是重复执行的代码片。 函数定义与执行 <script type="text/javascript"> // 函数定义 function aa(){ alert('hello!'); } // 函数执行 aa(); </script> 变量与函数预解析 JavaScript解析过程分为两个 阅读全文

posted @ 2019-12-14 15:11 cherry_ning 阅读(173) 评论(0) 推荐(0)

JavaScript介绍--变量、操作元素属性、函数
摘要:JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微软,IE独有),ActionScript( Adobe公司,需要插件)等 阅读全文

posted @ 2019-12-10 22:25 cherry_ning 阅读(119) 评论(0) 推荐(0)

弹性盒模型布局
摘要:1、容器属性display : flex声明使用弹性盒布局 flex-direction : row | row-reverse | column | column-reverse确定子元素排列的方向 flex-wrap : nowrap | wrap | wrap-reverse元素超过父容器尺寸 阅读全文

posted @ 2019-12-08 12:13 cherry_ning 阅读(129) 评论(0) 推荐(0)

html5+基于rem的布局实例
摘要:前端页面开发流程 1、创建页面项目目录 2、使用Photoshop对效果图切图,切出网页制作中需要的小图片 3、将装饰类图像合并,制作成雪碧图 4、结合Photoshop和代码编辑器,参照效果图,进行html和css代码书写,制作页面 基于rem的布局 首先了解em单位,em单位是参照元素自身的文字 阅读全文

posted @ 2019-12-07 10:21 cherry_ning 阅读(414) 评论(0) 推荐(0)

html5+css流体布局实例
摘要:前端页面开发流程 1、创建页面项目目录 2、使用Photoshop对效果图切图,切出网页制作中需要的小图片 3、将装饰类图像合并,制作成雪碧图 4、结合Photoshop和代码编辑器,参照效果图,进行html和css代码书写,制作页面 1 /* 将标签默认的间距设置为0 */ 2 body,p,h1 阅读全文

posted @ 2019-12-04 21:25 cherry_ning 阅读(504) 评论(0) 推荐(0)

移动端页面布局--视口、视网膜屏幕图片适配、background-size、流体布局、响应式布局、弹性盒模型布局
摘要:移动端页面布局 移动端app分类 1、Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C 2、Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用 3、Web App 阅读全文

posted @ 2019-12-01 12:18 cherry_ning 阅读(214) 评论(0) 推荐(0)

css3浏览器前缀/HTML5 新结构标签/HTML5 新增表单控件/HTML5 音频和视频
摘要:CSS浏览器前缀 浏览器样式前缀 为了让CSS3样式兼容,需要将某些样式加上浏览器前缀: -ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari 比如: div { -ms-transform: rotate(30deg); 阅读全文

posted @ 2019-12-01 12:12 cherry_ning 阅读(217) 评论(0) 推荐(0)

css3--animation动画
摘要:1、@keyframes 定义关键帧动画2、animation-name 动画名称3、animation-duration 动画时间4、animation-timing-function 动画曲线 linear 匀速 ease 开始和结束慢速 ease-in 开始是慢速 ease-out 结束时慢速 阅读全文

posted @ 2019-11-30 14:13 cherry_ning 阅读(194) 评论(0) 推荐(0)

css3--transform变换
摘要:1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设 阅读全文

posted @ 2019-11-27 23:20 cherry_ning 阅读(164) 评论(0) 推荐(0)

css3--transition动画
摘要:CSS3 transition动画 1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 阅读全文

posted @ 2019-11-25 21:18 cherry_ning 阅读(270) 评论(0) 推荐(0)

导航