javascript
bboyjoe
勇气与智慧并行,才能越过人生的一座座高山。
展开
-
模仿jquery做一个js库的封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js封装</title></head><body><div&g原创 2019-02-12 21:19:31 · 922 阅读 · 0 评论 -
Javascript的Date类型总结
1)创建日期对象:使用new操作符和Date构造函数即可,不传递参数的情况下,新创建的对象自动获得当前日期和时间。var now=new Date();console.log(now);//=>Sat May 28 2016 17:35:44 GMT+0800 (中国标准时间)2)Date.parse():接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数。 如果原创 2016-05-28 18:33:57 · 530 阅读 · 0 评论 -
JavaScript的Array类型总结
1)length属性:通过设置length,可以从数组的末尾移除项或向数组中添加新项。var colors4=[1,2,3,4];colors4.length=3;console.log(colors4);//=>[1, 2, 3]2)instanceof操作符:可检测对象是否为数组类型。var colors=['red','blue','green'];console.log(co原创 2016-05-28 16:30:27 · 495 阅读 · 0 评论 -
javascript的函数和对象
定义和使用函数//定义无参函数function myFunc(){ document.writeln("this is a statement");}myFunc();//定义有参函数function myFunc2(name,weather){ document.writeln("hello "+name+"."); document.writeln("It原创 2015-07-06 15:26:52 · 668 阅读 · 0 评论 -
js中(function(){…})()立即执行函数写法理解
js中(function(){…})()立即执行函数写法理解javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。( function(){…} )()和( function (){…} () )是两种javascript立即执行函数转载 2015-08-28 00:17:49 · 578 阅读 · 0 评论 -
JavaScript基础——面向对象的程序设计
ECMAScript支持面向对象(OO)编程,但不使用类或者接口。对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体。、在没有类的情况下,可以采用下列模式创建对象。1)工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。 这个模式后来被构造函数模式所取代。2)构造函数模式,可以创建自定义引用类型,可以像创建内置对象实例一样使用new操作符原创 2015-11-13 17:35:54 · 652 阅读 · 0 评论 -
js实现跨域的几种方法的原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题,我们可以使用以下几种方法:一转载 2016-03-31 11:23:48 · 843 阅读 · 1 评论 -
JavaScript基础——错误处理与测试
错误处理对于今天复杂的Web应用程序开发而言至关重要。不能提前预测到可能发生的错误,不能提前采取回复策略,可能导致较差的用户体验,最终引发用户不满。多数浏览器在默认情况下都不会向用户报告错误,因此在开发和调试期间需要启动浏览器的错误报告功能。然而,在投入运行的产品代码中,则不应该再有诸如此类的错误报告出现。下面是几种避免浏览器响应JavaScript错误的方法。1)在可能发生错原创 2015-12-25 14:51:20 · 877 阅读 · 0 评论 -
JavaScript基础——html5脚本编程
HTML5除了定义了新的标记规则,还定义了一些JavaScript API。这些API是为了让开发人员创建出更好的、能够与桌面应用媲美的用户界面而设计的。1)跨文档消息传递API能够让我们在不降低同源策略安全性的前提下,在来自不同域的文档间传递消息。2)原生拖放功能让我们可以方便地指定某个元素可拖动,并在操作系统要放置时做出响应。还可以创建自定义的可拖动元素及放置目标。3)新的媒体原创 2015-12-23 17:17:03 · 1522 阅读 · 0 评论 -
JavaScript基础——使用Canvas画图
HTML5的元素提供了一组JavaScript API,让我们可以动态地创建图形和图像。图形是在一个特定的上下文中创建的,而上下文对象目前有两种。第一种是2D上下文,可以执行原始的绘图操作,比如:1)设置填充、描边颜色和模式;2)绘制矩形;3)绘制路径;4)绘制文本;5)创建渐变和模式。第二种是3D上下文,即WebGL上下文。WebGL是从OpenGLES2.0移植到浏览器原创 2015-12-22 17:02:05 · 11050 阅读 · 3 评论 -
JavaScript基础——表单脚本
虽然HTML和Web应用自诞生以来已经发生了天翻地覆的变化,但Web表单相对却没有什么改变。使用JavaScript可以增强已有的表单字段,从而创造出新的功能,或者提升表单的易用性。为此,表单、表单字段都引入了相应的属性和方法,以便JavaScript使用。下面介绍几个概念:1)可以使用一些标准或非标准的方法选择文本框中的部分或部分文本。2)大多数浏览器都采用了Firefox操作选原创 2015-12-21 14:46:17 · 1582 阅读 · 0 评论 -
JavaScript基础——Ajax与Comet
Ajax与Comet /** * Ajax 与Comet */function cl(x){ console.log(x);}/** * 21.1 XMLHttpRequest对象 *///创建XMLHttpRequest对象function createXHR(){ if(typeof XMLHttpRequest !="u原创 2016-01-04 00:35:28 · 1228 阅读 · 0 评论 -
JavaScript的RegExp类型总结
ECMAScript通过RegExp类型来支持正则表达式。var expression=/pattern/flags; 每个正则表达式都可带有一或多个标志(flags).g:表示全局模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;i:表示不区分大小写模式,即在确定匹配项时忽略模式与字符串的大小写;m:表示多行模式,即在到达一行文本末尾时还会继续查找下一行中是原创 2016-05-28 23:04:33 · 1248 阅读 · 0 评论 -
JavaScript中的Function类型总结
创建函数对象://函数声明function sum(num1,num2){ return num1+num2;};//函数表达式var sum=function(num1,num2){ return num1+num2;};//使用Function构造函数(不推荐)var sum=new Function("num1","num2","return num1+num2");原创 2016-05-29 12:21:50 · 674 阅读 · 0 评论 -
JavaScript中的Number类型、String类型、Global对象、Math对象总结
一.Number类型valueOf():返回对象表示的基本类型的数值。toString():传递一个表示基数的参数,告诉它返回几进制数值的字符串形式。var num=10;console.log(num.toString());//=>"10"console.log(num.toString(2));//=>"1010"console.log(num.toString(8));/原创 2016-05-29 16:52:55 · 739 阅读 · 0 评论 -
ES6中的Promise和async实践
Promise用法 function f1 (name) { return new Promise((resolve,reject) => { setTimeout(() => { if (name === 'first') { console.log('第一步') resolv...原创 2019-01-18 11:14:23 · 288 阅读 · 0 评论 -
JS面向对象知识点汇总
基本数据类型——undefined出现的情况: //1、一个变量声明了,但是没有赋值,值默认为undefined var b; console.log(b);//b就是一个undefined类型的值 //2、一个变量声明了,并且赋值了一个undefined的值 var c=undefined; console.log(c);//c也是一个und...原创 2019-01-11 16:51:19 · 344 阅读 · 0 评论 -
iscroll的实践
1. iscroll的常用属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>iscroll特性</title> <style> .wrap{原创 2018-05-07 20:43:21 · 334 阅读 · 0 评论 -
前端中那些与文件有关的操作
1.pc端拖拽文件并读取内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文件拖拽读取内容</title> <style> #div1{原创 2018-05-05 17:38:09 · 344 阅读 · 0 评论 -
移动端touch事件详解
1.单点触摸拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scala原创 2018-05-05 17:18:52 · 2565 阅读 · 0 评论 -
Base64编码及其作用
Base64编码的作用:由于某些系统中只能使用ASCII字符。Base64就是用来将非ASCII字符的数据转换成ASCII字符的一种方法。它使用下面表中所使用的字符与编码。而且base64特别适合在http,mime协议下快速传输数据。base64其实不是安全领域下的加密解密算法。虽然有时候经常看到所谓的base64加密解密。其实base64只能算是一个编码算法,对数据内容进行编码转载 2017-05-03 15:31:47 · 718 阅读 · 0 评论 -
js实现复制到剪贴板
以前用js实现复制内容到剪贴板是比较麻烦的,不过总有大神给我们提供各种库,如clipboard.js,所以一切变得比较简单了。下载地址:https://clipboardjs.com/ 复制到剪贴板!居然可以这样!这是复制的内容,嘿嘿! 复制按钮 $(document).ready(function(){原创 2016-03-21 14:37:52 · 6952 阅读 · 4 评论 -
前端实现一个简单的表格分页
实现原理与幻灯类似,不过要注意联动时体验要好。html结构: 分会账号名称充值总额充值次数注册人数注册IP数日期原创 2016-09-19 17:11:24 · 20274 阅读 · 2 评论 -
你不知道的高性能JAVASCRIPT
想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践,提高大家对JS的底层和实现原理的理解。数据存储计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能,在JavaScript中,数据存储的位置会对代码性能产生重大影响。 – 能使用{}创建对象就不要使用new Objec转载 2016-08-11 15:04:41 · 459 阅读 · 0 评论 -
JavaScript如何处理错误
1.错误类型://RangeError、ReferenceError、TypeError、URIErrortry{ someFunction();}catch(error){ if(error instanceof TypeError){ //处理类型错误 }else if(error instanceof ReferenceError){ //处理引用错误 }else i原创 2016-06-10 21:25:33 · 688 阅读 · 0 评论 -
JavaScript中的块级作用域、私有变量与模块模式
1.块级作用域(私有作用域),经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数。(function(count){ for(var i=0;i<count;i++){ console.log(i);//=>0、1、2、3、4 } console.log(i);//=>5})(5);(function(){ var now=new Date(); if原创 2016-06-01 22:54:29 · 561 阅读 · 0 评论 -
JavaScript基础——DOM2和DOM3
DOM2级规范定义了一些模块,用于增强DOM1级。"DOM2级核心"为不同的DOM类别引入了一些与XML命名空间有关的方法。这些变化只在使用XML或XHTML文档时才有用;对于HTML文档没有实际意义。除了与XML命名空间有关的方法外,"DOM2级核心"还定义了以编程方式创建Document实例的方法,也支持了创建DocumentType对象。"DOM2级样式"模块主要针对操作元素的样原创 2015-12-01 16:05:45 · 919 阅读 · 0 评论 -
JavaScript基础——DOM扩展
虽然DOM为与XML及HTML文档交互指定了一系列核心API,但仍然有几个规范对标准的DOM进行了扩展。这些扩展中有很多原来是浏览器专有的,但后来成了事实标准,于是其他浏览器也都提供了相同的实现。其中比较常用的三个规范如下:1)Selectors API,定义了两个方法,让开发人员能够基于CSS选择符从DOM中取得元素, 这两个方法是querySelector()和queryS原创 2015-11-30 16:29:17 · 533 阅读 · 0 评论 -
JavaScript基础——JSON
JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工程量。JSON使用JavaScript语法的子集表示对象、数组、字符串、数组、布尔值和null。即使XML也能表示同样复杂的数据结果,但JSON没有那么繁琐,而且在JavaScript中使用更便利。ECMAScript5定义了一个原生的JSON对象,可以用来将对象序列化微JSON字符串或者将JSON数据解析为JavaScrip原创 2015-12-30 23:46:28 · 471 阅读 · 0 评论 -
js中的数组应用小案例——省份城市的二级联动
主要利用js的数组方法及DOM编程实现下拉列表之间的二级联动html文件: 城市切换示例 array.js文件:window.onload=function(){ //创建省份 createProvinces(); //选择省份后,切换对应城市列表 province.onchange=createCit原创 2015-11-07 23:34:14 · 3439 阅读 · 0 评论 -
js中的hasOwnProperty和isPrototypeOf方法
hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true,否则返回false.function siteAdmin(nickName,siteName){转载 2015-11-03 13:59:37 · 399 阅读 · 0 评论 -
JS获取当前对象大小以及屏幕分辨率等
function getInfo(){ var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth+"\n"; s += " 网页可见区域高:"+ document.body.clientHeight+"\n"; s += " 网页可见区域宽:"+ document.body.转载 2015-09-06 19:06:26 · 2335 阅读 · 0 评论 -
javascript中的事件流,事件处理程序/事件监听器
1、事件流事件冒泡IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。事件捕获事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。DOM事件流“DOM2级事件流”规定的事件流包括三转载 2015-07-22 13:23:01 · 1060 阅读 · 0 评论 -
javaScript的设计模式之单例模式
1.何为js的单例模式?2.单例模式的作用和注意事项:3.代码示例:$(document).ready(function(){ //1.建两个独立的对象,jason,jerry; //2.让jerry与jason通过门铃进行通讯; //3.先看jason家有没有门,如果有门直接通过门铃通讯didi,如果没有,先建门 //4.两个单例之间原创 2015-08-28 00:46:01 · 944 阅读 · 0 评论 -
javascript为DOM元素设置样式
上海远地资产管理有限公司 p{ border:medium double black; background-color: lightgray; } #block1{ color: white; } tabl原创 2015-07-20 15:48:52 · 3826 阅读 · 0 评论 -
javascript使用事件
p{ background: gray; color: white; padding:10px; margin:5px; border: thin solid black; } span{ background: white原创 2015-07-22 16:43:27 · 750 阅读 · 0 评论 -
javascript操作window对象
document.defaultView或全局变量window——获取一个window对象;1)获取窗口信息innerHeight、innerWidth——获取窗口内容区域的高度、宽度;outerHeight、outerWidth——获取窗口的高度、宽度(包含边框和菜单栏等);pageXOffset、pageYOffset——获取窗口从左上角算起水平/垂直滚动过的像素数;scr原创 2015-07-16 15:08:45 · 2384 阅读 · 0 评论 -
javascript操作DOM元素
1)HTMLElement的元数据属性:checked——获取或设置checked属性是否存在;classList——获取或设置元素所述的类列表(返回DOMTokenList); classList.add()——给元素添加指定的类; classList.contains()——如果元素属于指定的类就返回true;原创 2015-07-17 15:14:11 · 896 阅读 · 0 评论 -
javascript操作Document对象
1)Document元数据属性:characterSet——返回文档的字符集编码,这是一个只读属性;charset——获取或设置文档的字符集编码;compatMode——获取文档的兼容性模式(CSS1Compat、BackCompat);cookie——获取或设置当前文档的cookie;defaultCharset——获取浏览器所使用的默认字符编码;defaultView—原创 2015-07-15 17:17:39 · 4516 阅读 · 0 评论 -
javascript中undefined和null的比较
undefined:未定义值得情况下得到的值;null:表示已经赋了值但该值不是一个有效的object、string、number或boolean值;示例 var myData11={ name:"jason" }; document.writeln("Var:"+myData11.weather); document.writeln("P原创 2015-07-06 17:12:32 · 551 阅读 · 0 评论