SS'Blog - SS'Blog

PHP THAT DOESN'T HURT. CODE HAPPY & ENJOY THE FRESH AIR.

HAPPY NEW YEAR !

Laravel
StudyScript.com

angularjs 指令-封装复用html

在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中。避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素。你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 dire ······
阅读全文

RequireJS中define和require

define用来定义模块(注册为requirejs中模块),require是用来加载和使用模块。define([require,path/myMod1,path/moMod2], function(require){      var mod1 = require('path/myMod1& ······
阅读全文

js写日历

JavaScript写日历注意事项: 闰年2月份有29天,那么问题来了,什么是闰年呢?通常的解释是说一年有多少天多少小时多少分,取整数365还有多余的,累积达到一天24小时后,就多加一天的年是闰年。这个解释只是告诉了大家怎么计算,是人为设置的东西。 最根本的原因是:地球绕太阳运行周期为36 ······
阅读全文

JS和CSS优化工具Minify

Minify 是一个 PHP5 的应用,可让网站更加符合 Yahoo 的:Rules for High Performance Web Sites.  Minify可以按需对JavaScript以及CSS文件进行合并、压缩以及缓存,以加快页面的载入速度。安装minify极其简单,只需在网站根 ······
阅读全文

Angularjs通过事件广播机制($broadcast、$emit、$on)来进行不同作用域(Controller)之间的数据传输通信

三个方法使用参考//将事件从父级作用域传播至自己作用域、自己 $broadcast(eventName,args) //将事件从子级作用域传播至父级作用域、自己 $emit(eventName,args) //在作用域中监控从子级、父级作用域中传播的事件和相应的数据 $on(event,d ······
阅读全文

调用对象方法的两个模式

原型prototype模式:var x=function(name){       this.name=name; } x.prototype.get_name=function(){       return this.name; } 闭包closure模式:var Y=fun ······
阅读全文

javascript (设计模式)-JavaScript 组件化

作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。下面我们来谈谈,在现有的知识体系下,如何很好的写组件。比如我们要实现这样一个组件,就是一个输入框里面字数的计数。这个应该是个很简单的需求。我 ······
阅读全文

angularJS—验证 用户权限

angularjs中需要在每次路由发生变化时,都需要验证用户权限的时候,可以在run块中设置路有时间的监听器以及过滤未经授权的请求。angular.module('myApp',[],)         .run(             function($rootScope, ······
阅读全文

angularjs的ui-router 管理状态-01

其它相关系列ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态。在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置通过定义controller、template和view等属性,来定义指定位置的用户界面和界面行为通过嵌套的方式来解决页面中的一些重复出现的 ······
阅读全文

package.json文件详细介绍

概述每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。下面是一个最简单的package.json文件 ······
阅读全文

js判断从那个方向进入容器,HoverDir响应鼠标移动方向的悬停效果插件

插件信息: js判断从那个方向进入容器,HoverDir响应鼠标移动方向的悬停效果插件 国内介绍地址:http://www.tuicool.com/articles/F36fQ3 国外:http://tympanus.net/codrops/2012/04/ ······
阅读全文

Javascript严格模式

一、设立"严格模式"的目的,主要有以下几个:  - 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;  - 消除代码运行的一些不安全之处,保证代码运行的安全;  - 提高编译器效率,增加运行速度;  - 为未来新版本的Javascript做好铺垫。"严格模式"体现了Javas ······
阅读全文

kindeditor编辑器代码过滤

标签用于表示计算机源代码或者其他机器可以阅读的文本内容。 在bootstrap中也定义了的默认样式。 当我们在Kindeditor编辑器在源代码视图模式加入标签让后切换为视图在切换为源代码时,发现不见了。就起原因是Kindeditor编辑器过滤了该代码。 修改办法当然也就是 ······
阅读全文

Angularjs

参数手册angular.module(name, [requires], [configFn]);name:字符串类型,代表模块的名称;requires:字符串的数组,代表该模块依赖的其他模块列表,如果不依赖其他模块,用空数组即可;configFn:用来对该模块进行一些配置。 ······
阅读全文

PHP环境下UEeditor的配置与使用

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。最近在开发程序的时候需要集成一个富文本编辑器,UEditor的UI及UE比CKEditor、KindEditor要好出不少。 ······
阅读全文

JSON中字符串与json对象互转方法

json官网:www.json.org  json2.js地址:https://github.com/douglascrockford/JSON-js/blob/master/json2.js  json.js引入解决IE7及以下版本JSON未定义问题。使用例子:  JSON.par ······
阅读全文

Web前端开发(MVVM/MVC)

从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着React Native的推出而迎来大爆发:AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS…… 一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些 ······
阅读全文

递归函数赋给变量时不要加括号-arguments.callee;

var SelfFun = arguments.callee; 与 var SelfFun = arguments.callee(); 区别: 原理与click()与click或者fun()与fun一样! 立即执行与不执行 加括号就是立即执行,容易bug 把递归赋给变量时不要加括 ······
阅读全文

防止页面重复提交前端及后端处理方法总结

1、提交按钮置disabled当用户提交后,立即把按钮置为不可用状态。这种用js来实现。提交前$("#submit").attr('disabled','true'); $("#submit").val("正在提交,请稍等");执行后,把按钮置为原来状态$(' ······
阅读全文

自定义回调函数

如果向 jQuery.when(延迟对象)方法 传入一个延迟对象,那么会返回它的 Promise 对象(延迟方法的一个子集)。可以继续绑定 Promise 对象的其它方法,例如, defered.then 。当延迟对象已经被受理(resolved)或被拒绝(rejected)(通常是由创建延迟对象的 ······
阅读全文

异步加载之 promise与Deferred

deferred对象是jQuery回调函数解决方案 defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历 ······
阅读全文

bootstrap使用

简单使用教程:http://www.minwt.com/html/9966.html ie8兼容问题: 必须声明html5的Doctype头 meta标签使用可用的ie内核最高版本渲染 指定双核浏 ······
阅读全文

JSON判断某属性是否存在

如何判断传过来的JSON数据中,某个属性/字段是否存在 : obj["key"] != undefined 这种有缺陷,如果这个key定义了,并且就是很2的赋值为undefined,那么这句就会出问题了。 !("key" in obj)  obj.hasOwnProperty("k ······
阅读全文

gulp打包工具安装与项目使用

----------------------环境搭建----------------------------1.安装node.js环境,安装npm包管理工具2.以全局方式安装gulp:npm install -g gulp------------------------具体项目中操作前准备配置--- ······
阅读全文

跨域请求-getJSON

一、jsonp跨域 ajax请求不同域名下服务器端PHP数据示例: js部分$.ajax({     type : "post",     url : "ajax.php",     dataType : "jsonp",     jsonp: "callback",//传递给请求处 ······
阅读全文

方便json数据查看页面调试--扩展程序JSONView

为了方便浏览器在测试代码时查看json查看数据,推荐一款浏览器插件神器。: 浏览器中可以查看从服务器端传回来的json数据,这些数据可能没有经过格式化的,也或者是经过了unicode编码,没有缩进,没有换行等等,造成阅读有一定困难。 JSONView可以自动对json数据转码,缩进,格式化 ······
阅读全文

前端与后台交互-tips

后台会用到的(链接地址)保存变量中, 原始值写在html文档节点元素属性中, 通过js获取节点元素属性值,赋给变量, 通过改变变量来改变url地址。方便后台代码改变url地址对前端影响! tips:后台用到的/会变的值不要写在javascript中,尽量写在html中,在javascri ······
阅读全文

移动平台/手机端前端技巧

http://handyxuefeng.blog.163.com/blog/static/45452172201263105851965/ ······
阅读全文

resize窗口改变事件Bug

函数方法A:function A(){ …… } 当浏览器窗口大小改变时调用方法A: $(window).resize(function(){ var resizeTimer = null; resizeTimer = resiz ······
阅读全文

开发工具phpstorm & webstorm常用技巧

svn配置 : http://js250.com/home/?p=35   更多介绍:http://my.oschina.net/maomi/blog/137807#OSC_h2_7 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具 1.本地修改记录:在项目名 ······
阅读全文

JavaScript原型对象-prototype和对象指针-constructor

原型(对象)、对象、实例(对象)-------》关系 javascript中所有构造函数/函数构造器(例中A函数)都有一个属性,叫prototype(存放原型对象) 原型对象(prototype)有一个属性constructor(指向函数本身)。 可给原型对象(prototype)添加属性 ······
阅读全文

面向对象-封装写法

一切事物皆对象。对象拥有属性和方法。 对象具有封装和继承特性。封装对象的属性和方法;继承对象的属性和方法。 假设你想搞个项目:抢银行。 面向过程: 你手头有几把枪,认识那么几个不怕死的兄弟,刚好某个在银行做保安工作,他知道什么时机银行要进钞票,无意中告诉了你,你最近手头紧,老婆长时间没钱 ······
阅读全文

seajs点击在异步加载某模块require.async

require.async(模块,回调函数):用来异步加载模块,加载完执行回调函数。A.jsxx.click(function(){         require.async("B.js",function(){                  $("...").yy()//此处即可用B.j ······
阅读全文

seajs路径

define模块内require(‘文件路径’): //无歧义,相对于根路径解析require("/xx/Base"); // 无歧义,顶级标识,相对于 base 基础路径解析require("xx/Base");require("http://example/js/a");------就代表载入  ······
阅读全文

前端包管理工具

什么是包管理: Javascript 语言本身是没有模块的概念的,直到 node.js 的出现 CommonJS 规范应运而生,之后在浏览器端也出现了 AMD, CMD 等规范。这些规范都提供了一种组织方式使 javascript 的代码模块化,模块可以单独存在与使用,模块和模块之 ······
阅读全文

seajs使用jQuery插件

将js插件cmd模块化(define封装成seajs模块,返回匿名函数,包含插件的源码)。define(function(require,exports,moudles){      return function(jquery){          (function($) {        ······
阅读全文

让谷歌浏览器支持本地json

出于安全考虑谷歌浏览器会限制本地json 在快捷方式后面加--disable-web-security(注意前面要有个空格) C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --disab ······
阅读全文

seajs一次提前引入jquery,不用在require

 seajs. config中 preload一次 jquery 就可以使用,而不是在每一个模块中 require 一次 jquerypreload: ['路径/路径/jquery.js']                                ······
阅读全文

seajs.config({....})

SeaJS 还提供 data-config 来加载配置文件:   //data-config 等价: seajs.config({ preload: ['path/to/config'] }); 路径解析规则与 seajs.use 一致。                       ······
阅读全文

seajs.use加载模块

  seajs.config({ ........... }) seajs.use(‘./main’);  seajs.use 用来在页面中加载模块。通过 use 方法,可以在页面中加载任意模块。 语法:seajs.use seajs.use(id, callback?)// 加载模块 m ······
阅读全文

seajs配置map避免请求缓存,添加时间戳

避免缓存的方案是在请求上加上时间戳,现在我们让所有的请求都加上时间戳:seajs.config({     alias:......(其它),//注意逗号要有,与下面map分隔,格式要正确map: [         [/^.*$/, function(url) {             r ······
阅读全文

seajs中require、exports、module

在模块化编程方式下,每个文件都是一个模块。每个模块都由一个名为define的函数创建。 js文件/模块内结构:define(function(require, exports, module) {         var $=require("jquery.js"); exports.getn ······
阅读全文

javascript和ECMAScript

问题1:Scope作用范围考虑下面的代码:(function() {      var a = b = 5; })(); console.log(b);什么会被打印在控制台上?回答上面的代码会打印 5。这个问题的诀窍是,这里有两个变量声明,但 a 使用关键字var声明的。代表它是一个函数的局部 ······
阅读全文

前端框架

前端框架UI框架是一个前端的界面框架,然后有一些附带的js插件。 前端JS框架是一个javascript的mvvm的框架,是为了开发有复杂业务逻辑的CRUD应用而生的。web app框架是可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP 框架。 ······
阅读全文

检查客户端平台(移动端还是PC端)

通过window的navigator.platform属性和文档是否支持触屏事件来判断: var noSupportTouch = "ontouchend" in document ? false : true;//是否支持事件属性     //检测平台     var p = navig ······
阅读全文

javascript模块加载器

但凡是比较成熟的服务端语言,都会有模块或者包的概念。模块化开发的好处就不用多说了。由于javascript的运行环境(浏览器)的特殊性。js很早之前一直都没有模块的概念。经过一代代程序猿们的努力。提供了若干的解决方案。基本对象为了解决模块化的问题。早期的程序员会把代码放到某个变量里。做一个最简单的命 ······
阅读全文

cookie使用(jQuery.cookie.js插件)

Tips:cookie使用必须在服务器环境下才有效。以下案例使用jQuery.cookie.js插件。 github下载地址本地下载使用示例index.html设置cookie页面:          Document cookie使用要依赖服务器环境哦 cookie.htm ······
阅读全文

http-form表单提交过程

从使用者的角度看,一个HTTP请求起始于用户端浏览器上输入的一个URL地址;网页中的一个超链接;提交一个HTML表单。但本质上说,一个HTTP请求起始于用户端向HTTP服务器发送的一个URL请求。 一个标准的HTTP请求由以下几个部分组成 []http://wenku.baidu.c ······
阅读全文

文件上传插件webuploader、Uploadify

webuploader为百度的上传文件插件,具体见官网。Uploadify一、属性属性名称默认值说明autotrue设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。buttonClass”按钮样式buttonCursor‘hand’鼠标指针悬停在按钮上的样子button ······
阅读全文

瀑布流思路与源码

瀑布流:          Jquery瀑布流布局              body, ul, li, h3 {             margin: 0;             padding: 0;             list-style: none;     ······
阅读全文

Notice:setTimeout直接调用函数只会访问全局的不会访问局部的

例子:setTimeout(“alert(‘a’)”,3000);//1.类似setTimeout('fun(parm)',500) setTimeout(function(){alert(“a”)},3000);//2.类似setTimeout(function(){fun(pa ······
阅读全文

颜色拾取器-jQuery插件

spectrumhttps://github.com/bgrins/spectrum示例在文件夹example下testcase.html 需要引入spectrum.css和spectrum.js文件注意:使用时不可提到函数里面去调用,因为页面初始化时要执行xx.spectrum()方法创建需要的 ······
阅读全文

easyui使用/引用顺序/引用文件

.引用Jquery的Js文件 .引用Easy UI的Js文件  .导入Easy UI的主题Css文件  .导入Easy UI的图标Css文件   .引用Easy UI的国际化文件         以下为让它显示中文  .页面上加上UTF-8编码       防止jquery.easyui.m ······
阅读全文

js控制把元素放在屏幕中心,可视屏幕区域中元素居中

如何把一个元素放在屏幕的中心位置:jQuery.fn.center = function () {     this.css('position','absolute');     this.css('top', ( $(window).heigh ······
阅读全文

通过js在页面输出window对象所有属性和方法

由于浏览器太多,支持又不尽相同,所以有个简单方法查看浏览器都支持哪些属性和方法还是必要的,google浏览器和火狐都可以通过console.log()输出对象,但IE浏览器还不能输出对象的具体属性和方法,只能输出个对象名,而其下的属性和方法却输出不来。 为了查看浏览器的都支持哪些通过js在页 ······
阅读全文

jQuery-File-Upload图片上传预览/批量上传显示进度插件

fileupload是一个jquery下的ajax文件上传插件 依赖关系:         使用Tips: $('#fileupload').fileupload({.....})必须加完文档时初始化执行一次。 如:function test() {     ······
阅读全文

多窗口跨页操作window.opener用法

window.opener 就是通过window.open打开窗体的父窗体 A通过window.open打开B窗口,那么B中window.opener就是指A窗口,通过window.opener可以去访问操作A页面文档或脚本等。例:B.window.opener = A.window跨页操作常 ······
阅读全文

原型链

关于原型式继承:利用原型链实现继承。 创建函数时,自动为函数创建一个prototype属性,prototype属性指向原型对象。如:所有函数的prototype属性最终指向Object? constructor属性放回该对象的构造函数:如:function fun(){     alert("ce ······
阅读全文

设置开关-true和false

    $(":submit[id=J_Submit]").click(function (check) {//点击按钮符合条件就提交,不符合则不提交并提示var hd_name = $.trim($("[name=promotionName]").val());         var hd_s ······
阅读全文

开关的使用true和false

例:$(":submit[id=J_Submit]").click(function (check) {//点击按钮符合条件就提交,不符合则不提交并提示     var hd_name = $.trim($("[name=promotionName]").val());     var hd_s ······
阅读全文

jQuery截取获取数组一部分、分组多个标签元素,截取字符串

截取数组指定索引间的数组元素例如:获取 $( " li " ) 为数组ArrayLIArrayLi.slice( 0 , 5 );//截取前5个li,不包括索引5 ArrayLi.slice( 5 , 10 );//截取索引5到索引9的li, 可以给每组添加外标签包裹起来 ArrayLi.sl ······
阅读全文

jQuery中特性prop与属性attr区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单: · 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。 · 对于HTML元素我们自己自 ······
阅读全文

.on( )绑定事件 .delegate( ) 和 .live() 和.bind() 事件绑定区别

先看下事件委托on()方法的使用参考:tips:在需要为较多的元素绑定事件的时候,优先考虑事件委托,可以带来性能上的好处。 多个事件绑定同一个函数:  $("p").on("mouseover mouseout",function(){     $("p").toggleClass(" ······
阅读全文

多方法配合使用,返回函数

$(this).closest(".portlet").fadeOut("fast", function (){     $(this).remove()(); });                                ······
阅读全文

javascript 运行机制

JavaScript引擎会优先解析var变量和function函数定义,在预解析完成后才会执行代码,若一个文档中有多个script代码段(即多个),则运行顺序是:读入第一段代码。做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到第5步。对var变量和function定义做“预解析”,永远不会 ······
阅读全文

jQuery插件开发

1,开始可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){      //开始写你的代码吧!  };    但是,那惹人喜爱的美元符号$哪里去了?她就是jQuery,但是为了确保你的插件 ······
阅读全文

My97 DatePicker日历控件使用方法

http://www.my97.net/dp/demo/resource/2.1.asp 在使用该日期控件的文件中加入JS(仅这一个文件即可,其他文件会自动引入,请勿删除或改名)库和css(一个datePicker), 代码如下  注:src="datepicker/WdatePicker.js" ······
阅读全文

创建新节点属性给节点

把class属性赋予指定节点 例:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        ······
阅读全文

function用法详解-对象-包装-继承中使用

javascript 函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法:以下是引用片段:function func1(…){…}  var func2=function ······
阅读全文

js拖拽放大缩小

EX:              * {             margin: 0;             padding: 0;         }         #zhezhao {             width: 100%;             heig ······
阅读全文

JavaScript设计模式详解

一:理解工厂模式工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。   简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点;比如如下代码: function CreatePerson(name,age,sex) {    var o ······
阅读全文

页面加载优化

分析tmall详情页: 头部左侧图片下面缩略图目前仍加载大图,改为加载小图,默认加载首先显示的第一张大图和所有缩略图,其它大图延后加载(在头部信息加载完在加载)。装修的商品详情部分内大图较多,内容较多,在详情页头部部分(第一屏)加载完成后(通过ajax请求)再去请求加载商品详情部分。详情页 ······
阅读全文

JavaScript合并对象与获取对象属性的方法

Obj.hasOwnProperty(attr); hasOwnProperty()方法不检查对象的原型中的属性,只检查对象本身的属性成员,即不会包含prototype原型的属性成员。 所以可以用hasOwnProperty()方法判断属性attr是对象obj的自定义属性还是原型 ······
阅读全文

JavaScript 判断该对象是否为数组

1. typeof首先我们会想到的是使用typeof来检测数据类型,但是对于Function, String, Number, Undefined等这几种基本类型来说,使用typeof来检测都可以检测到,比如代码如下:function test(){}console.log(typeof 1); / ······
阅读全文

JS日期时间对象扩展方法-格式化时间

封装扩展时间格式Date.prototype.format = function(format){     var o = {         "M+": this.getMonth() + 1, //month         "d+": this.getDate(), //day     ······
阅读全文

jQuery框架源码设计模式解析

首先是jQuery将自己所有的代码封装在一个闭包内;用闭包防止命名空间的变量污染,继续在本身闭包中初始化了一个名为jQuery的自动运行闭包函数;形如:(function(window, undefined){       var jQuery = (function(){})();   })( ······
阅读全文

浏览器window下的Navigator对象的使用

JavaScript 对象、Browser 对象、HTML DOM 对象、HTML(主要是html标签)这几个大对象构成了前端开发中的绝大部分内容。 Browser(浏览器) 对象下主要有 Window、Navigator、Screen、History、Location这几个对 ······
阅读全文

JS高级应用

网上找的哦,非原创~~,有点乱,改天整理下方便参考。页面跳转: window.location.href('地址') window.open('地址', '_self')打开新窗口: window.open('地址', '_bl ······
阅读全文

DOM操作,代码优化

文档对象模型(DOM)是一个独立于特定语言的应用程序接口。在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScript中重要的组成部分。在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通 ······
阅读全文

通过构造函数实现继承

通过构造函数实现继承。 /*店铺装修布局控制*/ function getSize() {//创建构造函数     this.win_w = $(window).width();//屏幕窗口最大化时的宽度;     this.win_h = $(window).height();//屏 ······
阅读全文

js性能优化-一次性向文档插入节点

document.createDocumentFragment()说白了就是为了节约使用DOM。 每次JavaScript对DOM的操作都会 改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。 为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次 ······
阅读全文

判断是否按着shift键等

有时我们需要在浏览器页面内实现想Computer操作文档文件一样可以多选全选等操作,可以通过事件对象来判断: 在本文本中点击。console.log会输出是否按着shift键 function isKeyPressed(event) { if (event.shiftKey==1) ······
阅读全文

原生JavaScript操作DOM

添加和删除节点(HTML元素)添加节点:先创建该节点,然后把该节点追加到一个已存在的节点内。var childP=document.creatElement('p');//先创建节点 var textNode=document.createTextNode('我是p标签内的 ······
阅读全文

给js对象扩展新属性方法

为字符串添加心属性html脚本String.prototype.trim = function String$trim() {     if (arguments.length !== 0) {         throw Error.parameterCount();     }      ······
阅读全文

slide滚动插件

js/*      *slide滑块 begin      */     var $slide = $(".slide");//整个slide容器     var $slideLi = $(".slide-nav li", $slide);//底部1、2、3..按钮导航     var i ······
阅读全文

Switch判断是===全等于.区分字符串与数值型数字

参数和值要全等 字符串1下面要"1"; 区分数字与字符串 switch (d) {      case "0":      .............      break;      case "1":      .......................      break; ······
阅读全文

阻塞浏览器js代码运行与模态窗口

alert、confirm等都属于特殊的模态窗口,执行这些语句会阻塞浏览器 Javascript 代码的运行。 例如:  var test = confirm( "Are you OK ? " ) ; 执行了 confirm( "OK?" )  弹出一个确认框后,javascript 就不再执 ······
阅读全文

原型和原型继承、原型链实例

原型 JavaScript 不包含传统的类继承模型,而是使用prototypal原型模型。 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大。 实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多。 ( ······
阅读全文

闭包-变量-遍历-获取值

闭包与变量   作用域链的一个副作用:闭包只能取得包含函数中任何变量的最后一个值。function createFunctions(){     var result = new Array();     for (var i=0; i  ······
阅读全文

标准Ajax模版

var jqxhr = $.ajax({     url: url,     type: "GET", // 默认为GET,你可以根据需要更改     cache: true, // 默认为true,但对于script,jsonp类型为false,可以自行设置     data: {}, / ······
阅读全文

JavaScript绝句欣赏

1. 取整同时转成数值型:'10.567890'|0结果: 10'10.567890'^0结果: 10-2.23456789|0结果: -2~~-2.23456789结果: -22. 日期转数值:var d = +new Date(); //1295698416792 ······
阅读全文

多个点击事件

Html部分:           script部分     $(".main").delegate("#fun01", "click", function tang() {//事件01         $("#fun01").val("我是事件01");         $(".m ······
阅读全文

JavaScript 执行顺序

HTML文档在浏览器解析过程:按着文档流从上到下逐步解析页面结构和信息,JavaScript作为嵌入的脚本也是文档的一部分,所以JavaScript代码在装载是时的执行顺序也是按照script脚本标签出现的顺序来确定的。window.onload与jQuery的$(function(){"代码"}) ······
阅读全文

jQuery原生拖动标签

代码    jquery或JS拖动DIV左右移动          body {background-color: #fff; }      .win {position: absolute; top: 0px; left: 0px;width: 300px;height: 222px; ······
阅读全文

操作查找iframe内的节点

//子iframe框架去找父框架窗口内的其它iframe框架窗口内的节点 window.top.$("iframe.style_module").contents().find("xxxxx")DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documen ······
阅读全文

jQuery库与其它冲突解决方法

方法1:(function($){     //在这里面的语句都可用 用自定义的符号表示jQuery     //现在是$表示, 可function中的参数用$$表示 $$就表示 jQuery })(jQuery)方法2: var  jq=jQuery.noConflict()   aler ······
阅读全文

IE8下脚本JavaScript错误

IE8下脚本有错误则会影响到其它代码,整个js文件可能都不能用。 如p标签无clss属性,用jQuery去获取他,则会造成整个js文件不可用。 须判断:if($(" p ").attr(" class"))                                 ······
阅读全文

javascript 设计模式3——模块模式

在一些大的项目中经常使用到模块,在这里,我们将了解一下什么是模块模式。模块模式最简单的方法大家一定会用过,如下所示:var a = {      b : 1,      c : 2  }这样一个对象的直接量其实就已经是可以表示一个模块的定义了。但是这里会有些问题:a对象里面的b和c属性是 ······
阅读全文

把字符串分割成数组元素并保存为数组

把字符串分割成数组元素并保存为数组:string . split(“分割符”); 例: var str="hello,meet,you,me";  var arr=str.split(",");//以逗号为分隔符,把str分割为数组,逗号前后为新数组的元素。  alert(arr instanc ······
阅读全文

javascript作用域

Javacript 中有一系列作用域的概念。对于新的JS的开发人员无法理解这些概念,甚至一些经验丰富的开发者也未必能。这篇文章主要目的帮助理解JavaScript中的一些概念如:scope,closure, this, namespace, function scope, global scope, ······
阅读全文

异步加载Ajax之$.get( url , data , [callback] , [type] )

$.get( url , data , [callback] , [type] )url:提交请求的地址(后台给到,把data(键值对形式)传送过去)data:要提交的数据--一般是以变量形式获取某个值,发送到url地址 例:var  addrDataType = $(this).attr("dat ······
阅读全文

判断点击的鼠标按键(左键、右键、中键)

判断鼠标点击的是左键或右键,可以用来扩展做右键菜单。 那个鼠标按钮被点击测试(左键、右键、中键) (function(){ document.getElementById('p1').onmousedown=function( ······
阅读全文

对URl中请求与获取的参数进行编码解码

在获取请求参数时,一般要对参数进行URI编码与解码。name=encodeURIComponent("要进行URI编码的字符串");  var url="reg.html?name="+name;如参数被恶意修改,程序就会被注入,很可能带来安全性问题。对参数进行URI编码可以保证数据传输的准 ······
阅读全文

正则使用实例

返回字符串中数字 var str=123abc456zyx; str.match(/\d+/g)//返回数组['123','456'] str.match(/\d+/g).join(',')//返回字符串“123,456” 证书和小数 /(\d+ ······
阅读全文

检测IE浏览器版本

做网页有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代码! 第一种: var browser=navigator.appName var b_version=navigator.appVersion var version= ······
阅读全文

call方法与apply方法

方法定义call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 t ······
阅读全文

EVENT对象

EVENT对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。  事件通常与函数结合使用,函数不会在事件发生前被执行! 事件句柄(Event handlers)/事件处理函数:是指事件发生时要进行的操作,。每一个事件均对应一个事件句柄,在程序执行时,将相应的函数 ······
阅读全文

二级菜单元素不再一级菜单元素内时控制二级菜单隐藏显示

解决方法1: 平常做的导航菜单或tab效果都是二级在一级内,即控制一级鼠标移入或移出时即可方便控制二级内容隐藏显示,但当二级内容不再一级菜单时,移出一级菜单到二级内容上,二级内容却不现实。下面就实例解决这个问题。          鼠标移出到指定div上仍然显示div(原绑定事件为 ······
阅读全文

延时加载(拖到哪里加载哪里)

引用jQuery库:jquery主库和jquery.lazyload.js  例:$(function(){      function($){ $("img").lazyload({          placeholder:"../grey.gif",                  / ······
阅读全文

JavaScript作用域与作用域链

作用域 [scope]:就是变量和函数可访问的范围,控制着变量和函数可见性和生命周期。作用域链 [scope chain]:javascript的代码中形成的一个具有优先顺序,相关的作用域的链。 this总是指向当前引用此函数的对象,判断当前引用的对象--须弄清楚当前函数所在的scope。this只 ······
阅读全文

jQuery性能优化指南

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了,  比如我.  jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了这篇文章, 简单的摘译了一下:总是从ID ······
阅读全文

获取盒子模型里面的值(padding/margin/…)

后跟属性值是设置其值,不跟则返回它的值: 联想:height()、css('padding-top')、offset()…… var $img = $('img'); var paddT = $img.css('padding-top') + & ······
阅读全文

滚动至页面某个区域

=如果自动滚动到页面中的某区域jQuery.fn.autoscroll = function(selector) {     $('html,body').animate(         {scrollTop: $(selector).offset().top},       ······
阅读全文

JS高级选择器

                                       querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。目前几乎主流浏览器,包括 IE8(含 ······
阅读全文

jQuery事件重复注册

jquery click事件中嵌套click会重复注册内部的click事件,导致重复执行。 比如 $(...).click(function(){     $(...).click(function(){     ...//多次执行      });  });  //解决方法一:每次执行完 ······
阅读全文

自定义滚动条

一下火狐不支持,仅google浏览器支持,其它浏览器令设 div { width: 200px; height: 200px; overflow: auto; border: 1px solid #007aff; }  ::-webkit-scrollbar { width: 14px; heig ······
阅读全文

冒泡

冒泡: 例如html标签代码 在body、div、span上面都绑定事件,当点击span时依次触发span、div、body上的事件。 如只想触发span,在span的click事件中添加return false;//返回不继续执行后面的注:层级关系下,只在父子关系中使用,而非兄弟关系。 示例: ······
阅读全文

scrollTo(x,y)、scrollBy(x,y)、

以IE浏览器为准,其它浏览器清查找相关手册。window.scrollTo(x,y);x,滚动条横向滚动x距离;y,滚动条纵向滚动y距离。前提高度设置高点出现滚动条。实例(滚动条纵向滚动200px): function tang(){       window.scrollTo(0,200)  ······
阅读全文

给数组扩展方法添加新属性及实际运用

EArray.prototype.item = function(index) {          return this[index] || null;  } //只要是数组即可使用,如 [1].item(0) ······
阅读全文

Function函数声明方式

①普通的函数声明 function func1(…){...} ②匿名方式声明: 只不过做成匿名函数赋值变量,从语义上来讲不同但效果最后一样,都会在当前上下文产生一个func2的变量名 var func2=function(…){…}; ③将func4函数体赋给func3 var func3 ······
阅读全文

class标签操作

原生JavaScript来操作DOM(文档对象)js通过class名称获取DOM对象html部分:按钮 按钮02     111111111     111111111     111111111 给获取到的标签添加class名称://onclick事件,给id为lala的id添加cl ······
阅读全文

对于this理解

this 在 JavaScript 开发中占有相当重要的地位,不过很多人对this这个东西都感觉到琢磨不透。要真正理解JavaScript的函数机制,就非常有必要搞清楚this到底是怎么回事。函数调用方式不同,this 含义也跟着不同。JavaScript语言中有七种调用函数方式:第一种:调用方法v ······
阅读全文

函数作用域特性之其内变量作用域

javascript的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的,这就意味着变量在声明之前就可以用,javascript这个特性被非正式的称为“声明提前”即javascript函数里声明的所有变量(但不涉及赋值/只声明不初始化赋值)都被提前至函数体的顶部。var scope="glo ······
阅读全文

网页元素间距离、文档高度、宽度

网页元素间距离解析(原生与jQuery):注:整个文档的根是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。 body是子节点,要访问到body标签,在脚本中应该写:document.body。 $(document).ready(fn): ······
阅读全文

阻止表单提交

阻止表单提交01: //阻止提交公共 var boo=true; function optionSelect(ID, popInfo) {      var sellength = ID.find("option:selected").length;      if (sellength  ······
阅读全文

命名规则参考

1. 命名规则1.1. 类名规则: 一个或多个单词构成,每个单词的首字母大写,其余字母小写,单词之间直接相连,没有其他符号。 说明: 例子: 正确的:TestClass 错误的:Test_Class、testClass、test_class等  1.2. 公共方法 ······
阅读全文

return 应用/理解

return:返回结果12345678910111213function one2N(intnumber){var intTotal = 0;for(var i=0;ib){return//如果a>b则return/返回函数,不继续执行下面的方法;如果a不大于b,则继续执行下面的alert(x=a+ ······
阅读全文

闭包(closure)

收集的闭包概念,总有一个能看懂吧: 闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量,而这些变量是不会随上一级函数的执行完成而销毁。闭包就是能够读取其它函数内部变量的函数。在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义 ······
阅读全文

声明函数的方法&&结构解析

一:通过关键字创建函数:以函数声明的方式创建函数//规则,声明与使用它的对象的位置顺序无要求,js会在页面加载时预读取函数,所以即使在声明函数前调用该函数仍然可以调用到。function f(x){     return x * x; }匿名函数创建(以表达式的方式创建函数)//规则通声明变量, ······
阅读全文

js对象判断是否有某个属性

javascript判断对象内是否有某个属性var obj={"a":"a的属性值"}; if('a' in obj){     alert("有a属性") }else{     alert("没有a属性") }判断input标签是否支持placeholder属性if(&# ······
阅读全文

js日期初始化方法与js日期时间处理解析

创建一个日期对象: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh:mm:ss"); 2)new Date("month dd,yyyy"); 3)new Date(yyyy,mth,dd ······
阅读全文

事件对象的属性和方法

事件对象的属性和方法:   event.pageX 事件发生时,鼠标距离网页左上角的水平距离event.pageY 事件发生时,鼠标距离网页左上角的垂直距离event.type 事件的类型(比如click)event.which 按下了哪一个键event.data 在事件对象上绑定数据,然后传入事件 ······
阅读全文

页面打印功能

Exmple://点击按钮 document.getElementById("printBtn").onclick = function(){            window.print();//打印      document.printForm.submit();//提交表单,用于计算打 ······
阅读全文

js属性:arguments,callee,caller,length,prototype

arguments : 类似数组的参数集合,arguments.length - -- 实参长度callee : callee是arguments的属性  arguments.callee  -----函数自己caller : 函数名的属性  fun.caller ----返回的函数是调用fun函数 ······
阅读全文

jQuery高效率获取body等节点

$("body") 是一个选择器,jQuery 会从 DOM 顶端开始搜索,直到找到标签为 body 的元素。 而 $(document.body) 中的 document.body 已经是一个 DOM 对象,jQuery 可以直接使用此元素。 所以它们的区别在于效率,$(document.body ······
阅读全文

ajax的async属性同步于异步

(默认: true) 默认设置下,所有请求均为异步请求。 如果需要发送同步请求,请将此选项设置为 false。 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 ······
阅读全文

Ajax回调函数的返回值给全局变量赋值

Ajax是异步JavaScript&XML,浏览器解析页面时不等Ajax响应返回,便会继续向下执行,这时你的全局mm任然是1,如果你在回调函数function(data){}内部alert的话,就会是8了。一种是楼上说的方法 另一种就是把异步改为同步 async: false     var mm ······
阅读全文

判断浏览器

浏览器判断//函数  function getBrowser() {      if(navigator.userAgent.indexOf("MSIE")>0) {          return "MSIE";     }      if(isFirefox=navigator.use ······
阅读全文

js日期时间比较

比较两个时间大小: var d=new Date("2011.03.05");//下行格式也可 //var d=new Date("2011-03-05");//指定日期 //var d=new Date()//当前日期 var d=d.getTime(); console. ······
阅读全文

MySQL删除重复数据

删除重复数据,对于相同数据保留ID最大的DELETE t1 FROM user1_test t1 JOIN ( SELECT user_name,COUNT(*),MAX(id) AS id FROM user1_tesst GROUP BY user_name HAVING COUNT(*) ······
阅读全文

$.each用法,遍历数组,对象

实例1var arr = [ "one", "two", "three", "four"];  $.each(arr, function(){      alert(this);  }); //上面这个each输出的结果分别为:one,two,three,four实例2var obj = {  ······
阅读全文

加载进度条

进度条:          Document              input {             font-family: Arial;             color: gray;             border-style: none;    ······
阅读全文

判断数组内是否有相同值、跳出外圈循环

判断数组内是否有想通值多个循环嵌套,跳出外圈循环,给循环语句命名。//属性管理属性值不能重复         "propertyValue": function (IDPro, alertPro) {outerloop://命名外圈循环语句for (var x = 0; x  ······
阅读全文

Jquery平滑滚动至指定页面位置或元素节点位置——scrollTop()、offset()

scrollTop():返回或设置匹配元素的滚动条的垂直位置 例(返回顶部): $(function(){ $(".XXX").click(function(){ $("html","body").animate({scrollTop:0},1000); ······
阅读全文

window对象

window对象即是我们打开的浏览器的窗口,浏览器打开页面中的所有属性和方法都是window对象或window下其它对象属性的。如果浏览器html页面有包含iframe或者frame框架,那么这个iframe是另一个独立的window对象,相当于另一个打开的浏览器页面。 因此,window ······
阅读全文

节点属性和方法、节点操作

getAttribute(“id/class/href/…”)  获取id/class/href/…的值; 例子:document.getElementsByTagName(“a”)[0].getAttribute(“target”);获取target属性的值 ······
阅读全文

表单元素事件

onchange:当元素改变时执行脚本;当用户改变输入域内容时执行的代码。(改变完后再点击其他空白地方即可执行) function upperCase(x) { var y=document.getElementById(x).value document.getElementByI ······
阅读全文

禁用鼠标滚轮、鼠标中键,滚动条不显示

function xx(){     window.onmousewheel=function(){return false}//鼠标滚轮、鼠标中键     document.body.style.overflow="hidden"//滚动条不显示 } ······
阅读全文

遍历-加载json数据-html元素、节点

                                       $.each(数组/对象,function(索引,索引对应的内容){ var  trs += "xxyyzz";//遍历出所有数组元素放在tr里 $(ele tbody).append(trs);//添加遍历出的trs ······
阅读全文

支持onload事件的对象和标签

当页面加载的时候可以调用某些函数 例如function a(){ console.log(""123) }  window.onload = a; 在页面加载的时候就可以调用函数a了 还可以 window.onload = =function() { a();  b(); }来调 ······
阅读全文

javascript对象

javascript中所有事物都是对象:字符串、数字、数组、日期、等等。 javascript中对象是拥有属性和方法的数据。 对象化能力,就是将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和function类型提供了对象化的能力.                 ······
阅读全文

验证输入的数值

例子: 我的第一段 JavaScript 请输入数字。如果输入值不是数字,浏览器会弹出提示框。   function myFunction() {     var x = document.getElementById("demo").value;     if (x == ""  ······
阅读全文

DOM获取元素

DOM 访问某一特定元素尽量用标准的getElementById(), 访问标签用标准的getElementByTagName()[x], 但IE不支持getElementsByName()[x],所以就要避免使用getElementsByName()[x], x是该节点/标签第x个 附 ······
阅读全文

条件运算符--待

greeting = (visitor == "PRES") ? "Dear President " : "Dear " ;当visiter==“PRES”时,greeting=“Dear President”; 否则(visiter不等于“PRES”时,greeting=“Dear”)     ······
阅读全文

match方法

例子:  function changeImage() {     element = document.getElementById('myimage')     if (element.src.match("bulbon")) {         element. ······
阅读全文

json运用实例

json文件部分module.json: [ { "value": "AAP" }, { "value": "AIM" }, { "value": "ANZ" }, { "value": "AOO" } ] Ajax请求部分:  $.get("../js/module ······
阅读全文

window与document,outHeight()、height()

window:当前浏览器窗口(当前框架iframe),依赖客户端屏幕大小变化。document:文档-整个网页,依赖于网页内内容。 使用(均不包含滚动条): $(window).height();  //获取当前框架iframe可视浏览器内网页内容高度。依赖于屏幕大小 $(document).hei ······
阅读全文

js节点操作-增加、删除

document.createElement(eleNode)方法:创建一个元素节点eleNode  document.createTextNode(textNode)方法:创建一个文本节点textNodeeleNode.appendChild(textNode)方法:将textNode节点添加到 ······
阅读全文

window对象下的location对象,获取当前网站域名

location的search属性使用 window.location.search.slice(1) 用例: a.html页面1212链接到的index.html页面的脚本文件输出:console.log(window.location.search.slice(1));//会输出a ······
阅读全文

input-checked 全选/取消全选思路

点击全选input元素,判断其checked属性值(true/false), 根据其状态改变其它input的checked状态, 注:checked=“checked”等价于checked=“true”----(只有两种状态--有或无) 语法:$( all ).click(function(){  ······
阅读全文

jQuery中index()方法-获取索引的使用

html部分:            js脚本部分:        $("input").click(function () {             alert($(this).index("dl dd input"))//当前input元素在一组DOM元素("dl dd input")中 ······
阅读全文

对象(Object)、属性(property)、方法(method)、变量(变量名variable)、关键字(keywords)、 函数:(function)

对象:Object对象字面量内this关键字是指该对象,而非调用上该对象上下文对象。 创建对象两种方式:1.用字面式声明来构造一个对象:var obj=new Object( ),  或者obj={ }; Object()是用于创建Object对象的构造器。2.使用函数构造器构造(new)新对象 ······
阅读全文

substring()方法提取指定位置之间的字符串

substring(start,stop)例:var str="Hello world !"; document.write(str.substring(0,3)) //输出结果为Hell ······
阅读全文