HTML/CSS/JavaScrript
文章平均质量分 92
前端技术
讲文明的喜羊羊拒绝pua
Java高级开发工程师
展开
-
Ajax请求过程
Ajax的使用(1)创建 XMLHttpRequest 对象,也就是创建一个异步调用对象;(2)创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、 URL 以及验证信息;(3)设置响应 HTTP 请求状态变化的函数;(4)发送 HTTP 请求;(5)获取异步调用返回的数据;(6)使用 JavaScript 和 DOM 实现局部刷新。例如:var xmlHttp = n...原创 2018-11-26 12:56:27 · 2214 阅读 · 0 评论 -
JavaScript基础(十六)jQuery插件扩展、鼠标事件、实战案例
jQuery插件扩展、鼠标事件、实战案例jQuery插件扩展$.extend$.fn.extendonmouseover与onmouseout+onmouseenter与onmouseleave实战案例全屏滚动特效省市区的三级联动放大镜酷炫照片墙瀑布流jQuery插件扩展jQuery为开发插件提供了两个方法 $.extend() $.fn.extend()$.extend// 一个参...原创 2020-07-22 09:34:38 · 153 阅读 · 0 评论 -
JavaScript基础(十四)淘宝banner、京东banner、弹窗组件
淘宝banner、京东banner、弹窗组件淘宝无缝Banner京东淡入淡出Banner弹窗组件淘宝无缝Banner*{padding:0;margin: 0;}body{background:gray;}ul li{list-style: none;}#banner{width: 520px;height: 280px;margin: 50px auto;position: relat...原创 2020-07-22 09:33:57 · 180 阅读 · 0 评论 -
前端技术笔记-48个 JS 开发常用工具函数
前端技术笔记48个 JS 开发常用工具函数48个 JS 开发常用工具函数1、isStatic:检测数据是不是除了symbol外的原始数据function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof v...原创 2019-07-11 17:39:59 · 330 阅读 · 0 评论 -
JavaScript基础(十五)多态、多继承、设计模式
多态、多继承、设计模式多态多继承单继承多继承设计模式简单工厂安全工厂抽象工厂适配器模式多态多态:同一个方法多种调用方式例如:有一个需求——不传参数返回10,1个参数返回10+参数,2个参数返回参数和function add(){ var args = arguments, len = arguments.length; switch(len){ case 0: return ...原创 2018-12-23 21:02:06 · 229 阅读 · 0 评论 -
JavaScript基础(十三)原型、继承
原型、继承原型prototype原型链原型的默认方法和属性hasOwnPropertyconstructorinstanceoftoString继承拷贝继承原型继承类式继承instance之安全模式继承总结类式继承构造函数继承组合式继承寄生组合式继承原型prototype原型链实现对象和原型对象的链接function Person(){// this.number = 10;}Per...原创 2018-12-15 22:53:26 · 200 阅读 · 0 评论 -
JavaScript基础(十二)面向对象、ajax
面向对象、ajax面向对象面向对象编程new、prototype案例-面向对象编程实现banner图包装对象Ajax封装jsonp面向对象面向对象编程面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象去执行方法 继承:从已有的对象上继承新的对象 多态:多个对象的不同形态(电脑USB口,接入不同的设备有不同的表现形式)对象的组成: 属性 方法// 例如v...原创 2018-12-15 22:33:15 · 229 阅读 · 0 评论 -
JavaScript基础(十一)正则表达式、3D拖拽相册
正则表达式、3D拖拽相册正则表达式需求:找出一串字符串中的数字初识正则表达式正则表达式-匹配子项正则表达式-转义字符\b应用案例\1的使用正则表达式-字符集正则表达式-量词常用正则表达式总结3D拖拽相册阶段一:阶段二:正则表达式需求:找出一串字符串中的数字var str = 'fsalf6784h./#@$%hf12938';for(var i=0;i<str.length;i++)...原创 2018-12-13 22:18:19 · 271 阅读 · 0 评论 -
JavaScript基础(十)动画、事件委托、3DBanner
动画、事件委托、3DBanner动画一个简单的动画QQ客户悬浮窗动画封装案例-Banner轮播图焦点淡入淡出向上向下向左向右无缝自动播放事件委托事件之冒泡案例事件之默认行为事件委托3DBannerCSS实现滑动banner3D Banner动画一个简单的动画#box{width: 100px;height: 100px;background: #000;color:#fff;text-ali...原创 2018-12-13 21:52:08 · 282 阅读 · 0 评论 -
JavaScript基础(九)form表单、事件、3D
form表单、事件、3Dform表单form表单操作event事件对象案例事件冒泡事件的绑定与解绑键盘事件默认事件面试题选项卡javascript实现jQuery实现3D3D翻牌3D翻牌(2)form表单form表单操作onchange事件text--->当表单value值发生变化的时候触发radio-->当选中的时候触发checkbox-->当选择的时候触发sel...原创 2018-12-09 10:44:28 · 399 阅读 · 0 评论 -
JavaScript基础(八)DOM节点、BOM相关操作
DOM节点、BOM相关操作DOM节点childNodes与childrennextSibling与nextElementChildparentNode与offsetParentoffsetTop与offsetLeftDOM节点之获取宽高BOM相关操作window.open()window.navigatorwindow.locationwindow相关事件clientHieght、offsetHe...原创 2018-12-08 15:53:47 · 278 阅读 · 0 评论 -
JavaScript基础(七)元素样式属性、定时器、系统时间对象
元素样式属性、定时器、系统时间对象元素样式属性设置与获取获取通过class去获取对象定时器系统时间对象案例文字打印无缝运动日期经典案例之倒计时元素样式属性设置与获取获取*{padding: 0;margin: 0}#box{width: 100px;background: red}.on{height: 100px}&lt;div id="box"&gt;&lt;/div&gt;&原创 2018-12-08 15:25:40 · 298 阅读 · 0 评论 -
JavaScript基础(六)即时函数、链式调用原理
即时函数、链式调用原理即时函数链式调用的原理即时函数// 即时函数(function(接收参数){ // 代码块})(传递参数);例如:(function(a){ alert(a); // 10 ^_^ 即时函数默认会执行一次代码块})(10);(function(a){ a(); // 1 ^_^})(function(){alert(1)});var T = (...原创 2018-12-03 22:19:33 · 462 阅读 · 0 评论 -
JavaScript基础(五)json、for in、数组操作
json、for in、数组操作jsonfor in数组数组的基本用法数组的常用方法数组的其他方法排序的应用-input输入框排序jsonvar json = { name: 'test', age: 0, say: function(){ alert('abc'); }, obj: { hobby: [0, 1, 2] }, 'a.b': 'csdn'};alert...原创 2018-12-03 22:08:38 · 195 阅读 · 0 评论 -
JavaScript基础(四)字符串操作
字符串操作length、charAt、fromCharCode小案例:验证QQ号字符串拼接、查询索引字符串截取slicesubstringlength、charAt、fromCharCodelength:获取字符串长度alert('yangwei杨'.length); // 8alert('yangwei 杨'.length); // 9alert('yangwei 杨 '.le...原创 2018-12-02 13:03:42 · 213 阅读 · 0 评论 -
JavaScript基础(三)函数与作用域
函数与作用域函数的定义、传参与调用函数的定义函数的传参函数的调用作用域全局作用域script作用域函数作用域函数的定义、传参与调用函数的定义// 申明式function fn(){...}// 函数字面量var fn = function(){...}// 构造函数var fn = new Function();函数的传参// 基本传参function func(a, b)...原创 2018-12-02 12:45:00 · 208 阅读 · 0 评论 -
JavaScript基础(二)javascript六大数据类型
数据类型javascript六大数据类型显示类型转换Number方法parseInt 与 parseFloat隐式类型转换一些常见问题NaN的理解isNaN的理解null与undefined的区别javascript六大数据类型/*1、number2、string3、boolean4、object5、undefined6、function*/var a = 10;consol...原创 2018-12-02 09:43:35 · 158 阅读 · 0 评论 -
JavaScript基础(一)元素获取与元素属性
元素获取与元素属性元素获取与属性获取getElementById属性的获取属性值设置图片的相对路径问题与background问题元素获取与属性获取getElementById*{margin: 0;padding: 0}#wrap{width: 300px;margin: 20px auto;}#wrap li{float: left;list-style: none;margin: 5...原创 2018-12-01 23:28:35 · 356 阅读 · 0 评论 -
JavaScript——call、apply和bind方法的用法以及区别
call、apply和bind方法的用法以及区别 call、apply、bind的作用是改变函数运行时this的指向,所以先说清楚this1、方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么他就是被当做一个方法来调用,此时的this被绑定到这个对象。例如var a = 1; var obj = { a: 2, ...原创 2018-11-24 18:39:39 · 10758 阅读 · 1 评论 -
HTML5(三)canvas(3)
简易祖玛游戏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style>原创 2018-11-18 17:12:42 · 153 阅读 · 0 评论 -
HTML5(三)canvas(2)
(7)变换 translate:偏移,从起始点为基准点,移动当前坐标位置 rotate:旋转(参数为弧度) scale:缩放例如: window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext...原创 2018-11-18 17:06:51 · 198 阅读 · 0 评论 -
HTML5(三)canvas(1)
anvas标签:<canvas> 不支持 canvas 的浏览器可以看到的内容<canvas> 绘制环境: getContext('2d'):目前支持2d的场景(1)绘制方块 fillRect(L, T, W, H):默认颜色是黑色 strokeRect(L, T, W, H):带边框的方块,默认1像素黑色边框,显示...原创 2018-11-18 15:54:41 · 118 阅读 · 0 评论 -
HTML5(二)新特性
1、HTML5新特性的浏览器支持情况 http://www.caniuse.com/#index2、新的选择器 (1)querySelector <script> //document.getElementById(); //document.getElementsByTagName(); //$('#div1') $('.box'...原创 2018-11-18 15:50:51 · 165 阅读 · 1 评论 -
HTML5(一)语义化标签、新增表单控件
1、新的页面结构以及宽松的语法规范 <!doctype html> <meta charset="utf-8"/>2、语义化标签(1)<header></header> 页眉:主要用于页面的头部的信息介绍,也可以用于版块头部(2)<hgroup></hgroup> 页面上的原创 2018-11-18 08:55:10 · 272 阅读 · 0 评论 -
实现三栏水平布局
圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象一下圣杯是主体是加上两个耳朵;鸟儿是身体加上一对翅膀),圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师(传说是玉伯)改进并传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点: ——三列布局,中间宽度自适应,两边定宽; ——中间栏要在浏览器中优先展示渲染...原创 2018-11-23 11:06:49 · 199 阅读 · 0 评论 -
如何将一个div水平垂直居中
方法一: div绝对定位水平垂直居中【margin: auto实现绝对定位元素的居中】,兼容性:IE7及之前版本不支持div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; ...原创 2018-11-22 23:53:15 · 335 阅读 · 0 评论