JavaScript
miyacnn
专
展开
-
用面向对象的方法写选项卡功能
了解了面向对象之后,那我们来写下选项卡,,,面向对象的选项卡原则 先写出普通的写法,然后改成面向对象写法 普通方法变型 尽量不要出现函数嵌套函数 可以有全局变量 把onload中不是赋值的语句放到单独函数中 改成面向对象 ...2014-11-23 14:38:11 · 698 阅读 · 0 评论 -
原生js瀑布流及其原理
瀑布流目前已经不在是很时尚的词了,不过知道他实现的原理和具体实现过程还是值得我们好好学习的。 瀑布流效果目前在大多数网站中可以见到,参差不齐的多栏布局格式,是瀑布流的特点。瀑布流可以通过jQuery插件结合css代码来实现。 对于图片的展现,瀑布流的效果是高效而且独具吸引力的。瀑布流里延迟加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不定高的...2014-04-02 17:22:09 · 334 阅读 · 0 评论 -
浅谈ajax
作为前端人员,熟练掌握ajax已经是必不可少的了。下面做一个简单的学习目录表ajax基础一:1,什么是服务器 网页浏览过程分析 如何配置自己的服务器程序 2,什么是ajax 无刷新数据读取 用户注册,在线聊天室 异步,同步 3,使用ajax 基础:请求并显示静态txt文件 ...2014-04-02 11:24:53 · 106 阅读 · 0 评论 -
js中this的用法及应用
1,我们先看看this是个什么东西 那么,我们就直接:alert(this);看看这个this指的是什么东西 <script type="text/javascript"> alert(this);//object window,window 是js老大 //window.alert(this); </script> 这个时候就知道thi...2014-03-27 11:46:24 · 143 阅读 · 0 评论 -
js单元测试
javascript单元测试有不少工具,我们今天主要介绍下QUnit。QUnit是jQuery团队开发的js单元测试工具,使用方便,界面美观。近期试用了一下并进一步了解了JavaScript单元测试,记录一下所思所得。1,什么是单元测试2,为什么js需要单元测试3,怎么使用Qunit来进行单元测试4,测试示例好的:1,什么是单元测试:单元测试又称为模块测试,是针对程序...原创 2014-03-27 09:57:57 · 345 阅读 · 0 评论 -
js跨域问题
下面说一下js 的跨域问题:在不同的域名下面进行数据交互,存在跨域问题那么不需要存在跨域问题:如www.a.com/a.js和www.a.com/c/b.js那么存在跨域问题:如:www.a.com和 b.a.com 如:www.a.com和 www.b.com即使是同一个ip地址也存在ajax:XMLHttpRequest();不能跨域子公司和跟其他公...2014-03-25 11:04:49 · 86 阅读 · 0 评论 -
jQuery实现星级评分
前面有一篇原生js实现星级评分 。可能覆盖面不是很广,现在给出一个jquery实现的星级评分<div class="star"><span>jQuery星级评论打分</span><ul><li><a href="javascript:;">1</a>&2014-03-24 16:40:48 · 318 阅读 · 0 评论 -
解决IE6图片半透明效果
这个话题已经被讨论的不想在讨论的问题,,今天我们做个小小的回顾和总结,做项目中,遇到这样的问题,我们也不要去纠结,如果图片用gif也不影响美观的话就用gif。。如果要求更高的像素那就png8或者24.项目中可能只有个别一个or几个地方要用到半透明效果。那么我们可以用比较简单的hack来处理下就OK1,<div class="img4"></div> ...2014-03-24 16:02:17 · 117 阅读 · 0 评论 -
原生js星级评分
写个最简单的原生js的星级评分:<div id="rank" class="pingfen"> <ul> <li></li> <li></li> <li></li> <li>&2014-03-24 11:04:25 · 200 阅读 · 0 评论 -
canvasapi及实现简易祖玛
一,canvas简介1,我们说canvas,是一个html5的一种元素,通过使用javascript,可用于绘制图形,动画,图表,照片构图,或在飞行的任何其他可视化对象。2,支持的浏览器,Internet Explorer (9.0+)Safari (3.0+)Firefox (3.0+)Chrome (3.0+)Opera (10.0+)iOS (1.0+)...2015-02-09 17:48:56 · 326 阅读 · 0 评论 -
写一个字符串转成驼峰的方法
今天看到一个这样的基础js面题。就是让写一个字符串转成驼峰的方法:如:border-bottom-color 》 borderBottomColor想想应该有两种方法:1,用传统的字符串操作。2,用正则表达式的方法。首先我们看看第一种的实现原理:我们要把-b和-c转成大写的B和C。那么我们可以用split()方法来进行分割利用toUpperCase()方法来转大写。最...2014-03-21 14:59:37 · 782 阅读 · 0 评论 -
入门级seajs
13年在部门做了一个简单的分享seajs,温故一下。 js模块化我们看一下问题 1,当你的网站开发越来越复杂的时候,会经常遇到这些问题吗? 比如说冲突,比如说性能,比如说依赖这些问题用模块化开发都可以解决。 那么我们先看一下这些问题怎么产生的。多人开发。如:问题1,A:写的js,common.js有:function tab(){}f...2014-03-21 10:36:08 · 122 阅读 · 0 评论 -
搭建hexo博客并部署到github上
这几天一直在想用什么来搭建自己的博客。无意中接触到hexohexo是由Node.js驱动的一款快速、简单且功能强大的博客框架,支持多线程,数百篇文章只需几秒即可生成。支持markdown编写文章,可以方便的生成静态网页托管在github上。感觉不错。前端人员都在用github分享自己的代码。所以想着用hexo部署到git上。搞一个自己的博客。1,安装hexo安装hexo前:...2014-08-21 13:36:28 · 363 阅读 · 0 评论 -
瀑布流的实现原理(不固定列)
OK,我们接到上一篇瀑布流的实现,下面我们来讲讲不固定列的实现瀑布流像花瓣网,百度图片的实现方式一样。根据调整窗口也就是可视区的大小来改变显示图片的列数。同时也有个运动的效果。实现原理:布局:有一个容器,为相对定位,里面的img为绝对定位。数据添加:因为每张图片的宽度是固定的,高度是不固定的。所以我们先要算出可视区的宽度能放下几列图片,然后在算出每列图片的高度,由高度最低...2014-04-03 11:28:12 · 490 阅读 · 0 评论 -
javascript面向对象理解
理解javascript中的面向对象理解对象属性理解并创建对象理解继承 ----------------------------------------------------------------ECMAScript中有5种简单数据类型(也称基本数据类型):Undefined,Null,Boolean,Number,String,还有一种复杂的数据类型Obje...原创 2014-11-23 11:05:31 · 128 阅读 · 0 评论 -
javascript面向对象编程
什么是面向对象编程 用对象的思想去写代码,就是面向对象编程 过程式写法 面向对象写法 我们一直都在使用对象 数组 Array 时间 Date面向对象编程(OOP)的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象...2014-11-21 16:08:27 · 176 阅读 · 0 评论 -
javascript对象字面量
自己的理解对象字面量就是一种创建对象的一种模式(这几年开发的首选模式)。 对象字面量提供了一种非常方便地创建新对象值的表示方法。 一个对象字面量就是包含在一对花括号中的0个或多个“名/值”对。 对象字面量的输出方式以及定义好处 1.对象字面量的输出方式有两种:传统的‘。’,以及数组方式,只不过用数组方 式输出时,方括号里面要用引号括起来, 如v...原创 2014-11-20 17:06:34 · 166 阅读 · 0 评论 -
requirejs模块化开发后的合并压缩
requireJs 项目压缩合并必要性 requireJs好处无需过多介绍,为了应对日益复杂,大规模的Javascript开发,我们一般将复杂的逻辑划分成一个个小单元模块,化整为零。这个时候一个项目要引用几十个单元也是有可能的,每个单元都是一个js文件,如果上线的都是这些小的文件,每次加载页面都要向服务器发起这么多请求,将对性能造成一定影响。所以现在就需要一个工具可以将这些文件在不影...2015-10-22 16:34:19 · 220 阅读 · 0 评论 -
闭包详解
闭包详解下回分解2014-09-30 16:55:17 · 123 阅读 · 0 评论 -
js判断是移动端还是pc端
运行当页面的时候,执行到js会判断来自于移动端还是pc端,如果是移动端则跳转制定链接地址,,这样在手机端会有额外的不必要浪费的加载时间,,, 代码:var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; ...2014-09-19 09:50:14 · 132 阅读 · 0 评论 -
js简单的面试题(2)
续上一篇的js面试题10,在ie6.0下面是不支持position:fixed的,请写一个js使用<div id ="box"></div>固定在页面的右下角//如果用css实现的话html{_background-image:url(about:blank);_background-attachment:fixed;}//这个是防止抖动的。#time{...2015-04-23 15:53:45 · 247 阅读 · 0 评论 -
仿支付宝首页效果图(较完整)
这个主要是做的项目中用的效果图,奉献出来 主要的代码其实在上一篇博文中也都有体现。、<!DOCTYPE html><html><head><meta charset="gbk" /><title>大金融</title><link rel="stylesheet&quo2014-04-17 14:17:47 · 1191 阅读 · 0 评论 -
仿支付宝首页效果图
下面提供仿支付宝首页的效果图,淡入淡出的,直接上代码 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>仿支付宝首页效果图</title2014-04-17 11:36:00 · 525 阅读 · 0 评论 -
javascript运动框架
项目中要用到轮播,并且还是宽屏自适应的轮播效果,雷同alipay首页的轮播效果差不多。打算用原生js来实现。所以必然要用到js 的运动框架那么下面就先分享这个 下面就呈现js 的运动框架代码(网上有很多的)封装好的运动框架Move(obj,attr,iTarget),可直接调用:可用于设置width、border、fontSize、marginLeft、opacity等许...2014-04-10 10:46:24 · 87 阅读 · 0 评论 -
js简单的面试题
0,截取字符串abcdefg中的efgvar str = 'abcdefg';alert(str.substr(4,3)); 1,js有哪些数据类型,数据类型的判断函数?String,Number,Boolean,Null,Undefined,Object判断函数有:typeof,instanceof,constructor,prototype接下来我们一一对这些...2015-03-31 10:37:10 · 216 阅读 · 0 评论 -
js中的事件委托
知识点温故而知新 1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。好处呢:1,提高性能。我们可以看一个例子:需要触发每个li来改变他们的背景颜色。<u...原创 2014-03-20 10:49:09 · 146 阅读 · 0 评论 -
函数声明和函数表达式以及他们的区别
知识点温故而知新 :函数声明和函数表达式以及他们的区别 //函数声明 function 函数名(){}//函数表达式 function 函数名(可写可不写)(){}命名函数表达式,匿名函数表达式 /*function aaa(){}//函数声明var a = function aaa(){}//命名函数表达式var a = function(){}//匿...原创 2014-03-20 09:56:02 · 206 阅读 · 0 评论 -
关于闭包
知识点温故而知新 提到闭包,我们就会问到这几个问题:1,什么是闭包,2,闭包有什么好处?应用在哪里?3,闭包需要注意的地方?下面我们就一一来解释这几点。 1,概念:函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回。 //闭包的写法,,不回收function aaa(a){ var b=5; functio...原创 2014-03-19 14:43:02 · 422 阅读 · 0 评论 -
获取当前url并拼接成新的url
项目中,,因为要求点击完成的时候传给手机端当前页面的内容和url,如果是新加记事也要把pid带上,这个时候要获取当前页面url,可能还要加上pid var currentUrl = window.location.search;//获取当前页面的urlvar pidi = data.result.pid;//得到请求过来的pidvar searchPos = Url_l.ind...2014-06-20 19:04:38 · 700 阅读 · 0 评论 -
javascript中cookie的使用分析
1,cookie的概述2,cookie的使用 1,JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求。 cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。cookie是浏览器提供的一种机制,它将document ...2014-06-06 09:59:26 · 1106 阅读 · 0 评论 -
jquery 实现文字闪动效果
有个项目,之前添加记事成功是弹出一个提示框提示,添加成功,产品经理觉得这样不是很友好,但是不提示又不知道是不是添加成功,又不知道明确知道当前添加的是哪一条,所以:想让添加的当条信息闪动几下,然后停止。就OK下面就来说说实现的原理:1,先要获取到最新一条记事的pid,这个pid可以是后台给你接口中返回的值。2,在添加成功后来闪动这条记事,3,闪动的方法可以写到函数里,直接调用。...2014-06-05 10:09:10 · 621 阅读 · 0 评论 -
jquery中each和push详细介绍以及ajax的简单实例
1,js中push()的用法:2,jquery中each()遍历方法3,结合使用实例 一,push()定义和用法push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。语法arrayObject.push(newelement1,newelement2,....,newelementX) 参数 描述newelement1 必需。要添加到数组...2014-05-29 18:54:07 · 931 阅读 · 0 评论 -
关于ajax中的GET和POST方式的请求
1,请求方式、2,注意点3,区别4,缓存等 一:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 ...2014-05-27 19:40:59 · 344 阅读 · 0 评论 -
js时间戳和时间格式之间的转换
js里面的data对象的运行很实用的东西,,直接上代码: //时间戳转换成日期时间2014-8-8 下午11:40:20function formatDate(ns){ return new Date(parseInt(ns) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");}...2014-05-23 14:00:52 · 739 阅读 · 0 评论 -
输入限制字符串
直接看代码: 参数说明:str:就是字符串len:所要限制的字数str2:以什么来结束,如果不输入就是以...结束这里作为参数传进来,用户可以任意几个点 //限制字数function mCutStr(str, len, str2) { if (str == '') { return ''; } if (str2...2014-05-23 10:54:02 · 154 阅读 · 0 评论 -
手机记事项目
做的一个手机项目,进入app公司客户端然后点击我的记事,可以添加自己的记事,作为自己对股票的分析记录或者个人心情记录都可以,,也就是一个记事的功能。。里面有添加记事,修改记事,删除记事,记事列表。。等功能,,用到异步请求的有,添加,修改,删除。。记事列表属于是php动态渲染页面的。直接请求成功追加html就可以了,不用自己在拼html结构。 JS分有base.js(公共的接口,...2014-05-22 19:07:51 · 232 阅读 · 0 评论 -
安装nodejs成功,但是cmd下面找不到node
昨天有一次用到nodejs,所以到官网下载nodejs相应的系统位数的安装包,按理论说,安装过程中,会自动替换我的环境变量的,一直验证安装不成功的,其实安装过程是一步一步走,没有报错,是成功的。。为什么cmd下面node回车说找不到node命令 最后去找了一下环境变量,发现它没有把环境变量地址替换掉,而是在我以前的地址后面加上,所以一直验证找不到node。因为我之前配置过手机开发环...2014-05-07 18:18:08 · 8560 阅读 · 1 评论 -
查看HTML,CSS,JS,等属性方法对浏览器或者其他设备的支持情况
近期发现一个网站很好用了,可以查看HTML,CSS,JS,等属性方法对浏览器或者其他设备的支持情况。里面有,IE(4-11)版本,Firefox各版本,Chorme,Safari,Opera,ios opera, Opera Mini,Android Browser,Blackberry Browser,IE Mobile,输入你不确定的属性就可以查到改属性是不是对他们支持。htt...2014-05-03 16:59:13 · 320 阅读 · 0 评论 -
HTML5本地存储
这次做项目有一些简单设置,说不用后台给接口,让做在本地,用本地存储,,所以现 学习了本地存储 了。。其实还是蛮简单的。讲解的目录:1,cookie2,cookie的特点3,storage4,storage的特点5,storage API 1,cookie: 数据存储到计算机中,通过浏览器控制添加与删除数据。2,coo...2014-04-30 16:35:50 · 99 阅读 · 0 评论 -
把textarea内容中回车转<br/>传给后台 显示的时候把<br />转成换行显示到textarea中...
1,把textarea内输入的内容中有回车换行的转成<br />传给后台, var content = $("#text").val().replace(/\n/g,"<br />"); 2,把请求下来的数据在显示到textarea中的时候把<br />的在统一转为换行显示 var news = $(dat...2014-07-03 18:18:31 · 1917 阅读 · 0 评论