随笔分类 - JavaScript&jQuery
jQuery的Ajax操作小结——$.ajax和$.getJSON等用法小结
摘要:一、$.ajax用法与举例jQuery.ajax(url,[settings]) ——返回值:XMLHttpRequest通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。最简单的情况下,$.ajax()可以不带任何参数直接使用。$.ajax({ type:'GET', url:'http://www.phpernote.com/jquery.php', data:{username:'phpernote',password:'123456'}, d
阅读全文
jQuery数组处理详解(转)
摘要:1. $.each(array, [callback]) 遍历[常用]解释: 不同于例遍jQuery 对象的$.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~).回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容.如果需要退出each 循环可使回调函数返回false, 其它返回值将被忽略.each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例:$.each(_mozi,function(key,val){ //回调函数有两个参数,第一个是元素索引,第二个为当...
阅读全文
Javascript 严格模式 strict mode(转)
摘要:一、概述除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的,主要有以下几个:- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;- 消除代码运行的一些不安全之处,保证代码运行的安全;- 提高编译器效率,增加运行速度;- 为未来新版本的Javascript做好铺垫。"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支
阅读全文
多种方法实现div两列等高(收集整理)
摘要:HTML骨架头部 主内容区域 侧边栏页脚1.背景模拟(使用背景图片实现等高):背景模拟主要依靠一张图片,然后将其平铺,使页面在视觉上,产生等高效果,如图背景模拟实现很简单,直接利用了background-repeat属性,使背景图片以Y轴方向重复。图片: css: background-repeat:repeat-y;关于背景图片,这个需更具你的实际项目需求,值得注意的是背景图片切图时必须以两列的形式,否这达不到等高效果。*{ margin:0; padding:0;}#header,#footer{ width:960px;/*设置头部,页脚宽度*/ height:30px;...
阅读全文
11个超棒的 jQuery 分步指引插件(转)
摘要:当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果。然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情。 下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件,你可以根据自己需求定制,它们都具有一个时尚的外观,而且简单易用。1. Intro.jsIntro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性。支持键盘+鼠标的导航方式。2. aSimpleTouraSimpleTour 使用JSON数据进行存储配置和内容。一个浮动窗帮助管理重点元素的浏览、工具提示(可以定位)。3. Pageg
阅读全文
RequireJS使用小结1——for Effective JavaScript Module Loading
摘要:1. require和define的区别The require() function is used to run immediate functionalities, while define() is used to define modules for use in multiple locations.require()——用于一次性定义的语句或模块,或立即执行的语句或模块define()—— 用于可以重用的模块,可以放在不同的地方2. 管理依赖文件的载入顺序——Managing the Order of Dependent FilesRequireJS uses Asynchrono
阅读全文
同一页面中引入多个JS库产生的冲突解决方案(转)
摘要:发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号。因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原因就必须深入到jQuery的源码中去分析了,因此本文暂不深入讨论)。 解决方案: 解决JS库冲突总共可以分为以下几种方法: ①让渡‘$’标示符,使用jQuery作为jQuery对象的标示符(别名)。 ②使用别名替代‘$’和jQuery标识符,如下面的$j(名字可以任取)。var $j=jQuery.noConflict();$j("#div").hide(); ③使用匿名...
阅读全文
AMD和RequireJS初识----优化Web应用前端(按需动态加载JS)
摘要:RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。一、AMD 介绍前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了,这些框架都在尝试着解决一 些前端开发中的共性问题,但是实现又不尽相同。在这个背景下,CommonJS社区诞生了,为了让前端框架发展的更加成熟,CommonJS鼓励开发人员 一起在社区里为一些完成特定功能的框架制定规范。AMD
阅读全文
针对多点触控浏览器进行的开发(转)
摘要:触摸事件三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:1.touchstart:手指放在一个DOM元素上。2.touchmove:手指拖曳一个DOM元素。3.touchend:手指从一个DOM元素上移开。每个触摸事件都包括了三个触摸列表:1.touches:当前位于屏幕上的所有手指的一个列表。2.targetTouches:位于当前DOM元素上的手指的一个列表。3.changedTouches:涉及当前事件的手指的一个列表。例如,在一个touchend事件中,这就会是移开的手指。这些列表由包含了触摸信息的对象组成:1.identifier:一个数值,唯一标识触摸会话(touch se
阅读全文
CommonJS初识
摘要:CommonJS是什么CommonJS是一个标准库,或者说是一组规范。因为官方并没有给出真正的代码实现,而是给出一些代码组织规范、常用模块的api、包(Package)的命名规范和具体格式。CommonJS的官方网站是http://www.commonjs.org/ wiki地址http://wiki.commonjs.org/wiki/CommonJSModules模块的规范,其实就是require方法,定义了如何在当前的代码中使用已有的api。具体的规范(Modules/1.1.1)见http://wiki.commonjs.org/wiki/Modules/1.1.1约定Requirer
阅读全文
10个最佳的触控手式的JavaScript框架(转)
摘要:由于各种原因移动开发是一项艰难的工作,比如它是非常耗时的、充满压力的任务。最重要的是,作为一个开发人员,你必须保持更新所有最新 的技术和技巧——你必须知道所有最新的趋势,问题和解决方案等。例如跨浏览器支持和兼容性、屏幕分辨率等等曾经是巨大的问题,但尽管已经解决,开发者仍然 面临着这些被要求学习最新的技术来保持更新。移动开发是一个快速增长的行业,移动网站正在以惊人的速度布局。特别是现在令人惊讶的是触屏智能手机和平板电脑的井喷。因此拥有一个移动版的你的网站是一个必须跟上不断发展的科技世界。因此必须推出适应这些设备的应用程序来改善他们的业务。所有的这一切都可能是由于JavaScript 使得触摸设备
阅读全文
50个必备的实用jQuery代码段(转)
摘要:1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分。在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点。 .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("div#container1 div.item"); //现在你可以继续使用这些jQuery...
阅读全文
Javascript实用代码片段(译)
摘要:原文:http://www.bestdesigntuts.com/10-time-saving-javascript-code-snippets-for-web-developers1. 同高或同宽var getMaxHeight = function ($elms) { var maxHeight = 0; $elms.each(function () { // In some cases you may want to use outerHeight() instead var height = $(this).height(); if (height > maxHe...
阅读全文
Modernizr的介绍和使用
摘要:传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。什么是Modernizr?Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可
阅读全文
Jquery实用代码片段(转)
摘要:1、把所有带有#的空链接换成不友情的链接 $('a[href="#"]').each(function() { $(this).attr('href', 'javascript:void(0)') }); 2、jQuery全选与取消全选插件(function($){ $.fn.checkall = function(options){ var defaults = {chname:"checkname[]", callback:null}, options = $.extend(defaults...
阅读全文
javascript中call、apply、argument、callee、caller
摘要:1.Call方法调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])thisObj 可选项。将被用作当前对象的对象。arg1, arg2, , argN 可选项。将被传递方法参数序列。说明call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。function person(name,age,sex){ //定义person this.na...
阅读全文
Javascript特效代码大全(420个)(转)
摘要:转载自:Javascript特效代码大全(420个)收集资料,以便使用+面试+学习├Cookie脚本├ 随访问次数变提示├ 集成Cookies├ 使窗口仅弹出一次├ 签名提示程序├ 记录上次登录时间├ 自由控制打开窗口├ 记录页面修改时间├ 检测IE去过站点├ 离开时显示信息├ 弹出窗口自动关闭├ 离开页面弹出窗口├ 进入时显示信息├ 离开启动收藏夹├ 链接确认按钮├ 点击加入收藏夹├ 记录页面更新时间├ 页面载入等待├ 打开硬盘驱动器├ 设置默认首页├ 输入框测试警告├ 链接弹出警告框├ 关闭窗口链接├ 显示器分辨率检测├ 按分辨率导航├ 定制打开的窗口├ 控制窗口打开日期├ 打开窗口居中├
阅读全文
AJAX解惑篇(转)
摘要:这篇文章会使你对AJAX有一个基本了解,并给出两个容易上手的例子。 什么是AJAX AJAX是一个新的合成术语,隐含了两个已经存在多年的JavaScript特性,但是直到最近,随着一些诸如Gmail、Google Suggest以及Google Maps的轰动,才被许多网络开发者所注意到。 我们所讨论的两个JavaScript的特性是你能够: 向服务器发出请求而不需重新加载任何页面解析XML文档并且与之协同工作AJAX是一个缩写,A是指"asynchronous"(异步的),它表示你可以在向服务器发出一个HTTP请求后,边做其他的事情,边等待服务器的响应。JA表示"
阅读全文
使用JavaScript 和 CSS 实现图像缩放和剪裁(转)
摘要:英文原文:Scale and Crop an Image using Javascript and CSS在页面上需要裁减和缩放一张图片是一个常见问题。缩放图片比较简单的方法是使用image的hight和width属性。同样地,裁剪图片可以通过将图像 设置为元素背景并设置元素的高度和宽度来完成。无论如何,缩放和裁剪图像都稍微复杂了一点。如果这需要经常做,还是把图像的裁剪和缩放交给一个类 (class)好一些。为此,我写了这个裁剪缩放器(Cropenscaler)。思路是这样的:创建一个特定大小的div元素,这是一个嵌套的div,在其中显示相对定位的图像。我发现定义默认图像大小和裁剪位置的图像数
阅读全文
构建现代化网站的 20 个技巧(转)
摘要:英文原文:20 tips for building modern sites在过去几年中,我们与web开发者花了很多时间交流,听得最多的一件事情就是创建一个能很好的跨越各种类型浏览器版本与各种设备的网站有多么难。我们为 jQuery项目写代码的时候一直有这个问题。因此我们整理了20条编码模式与经验,它们是从出席无休止的会议和读了几百篇专稿中摘取出来的。我们希望能 在你建站的时候给你节省一些时间(和麻烦)。跨浏览器基础 网站不需要在所有浏览器里渲染得一样 一件普遍被开发者所关心的事情是确保他们的网站在所有浏览器中渲染得一样,包括非现代的一些。那一般并不需要。更好的路线是考虑逐渐增强你的网站,对非
阅读全文