随笔分类 - javascript
javascript
摘要：项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择， autocomplete插件就是完成这样的功能。 autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/（可下载jQuery autocomplete插件）。 淘宝商品搜索功能 效果： 下面来使用 autocomplete插件来实现类似效果。1. 创建 AjaxPage.aspx 页面，在其中定义 WebMethod 方法来返回 搜索页面需...
阅读全文
摘要：serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。(摘自jquery文档)。有以下一个表单窗口，代码：<form action="" method="post" id="tf"><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><th>
阅读全文
摘要：JQuery之ContextMenu(右键菜单)插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js压缩版:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.jsJquery主页:http://jquery.com/插件中的参数说明:Parametersmenu_idTheidofthemenuasdefinedinyourmarkup.Youcanbindoneormore
阅读全文
摘要：JQuery图表插件——Highcharts因为项目中需要用到图表生成，所有Google了下，找到了这个插件，顺带写了个DEMO。点击跳转官网先上三个图，分别是曲线、柱状、扇形。图表中的数据纯属于DEMO的测试数据，没有实际用意。下面讲下大致的实现步骤第一步，下载并且引用JS包（highcharts.js），theme顾名思义是放皮肤的。可以下载DEMO逐一试试就知道效果怎么样了，上图就应用了两个样式。download中放的是打印和导出成图片的js文件（貌似是通过js上传到官网，然后再下载到本地），因为项目是放到内网的所以就没有用了。第二步，实现，贴代码。?var chart;$(docume
阅读全文
摘要：$(function(){ window.onbeforeunload = function(){ event.returnValue = "您正在编辑的信息尚未提交，离开本页面后信息将丢失!"; };} ------------------------------------------//有确认退出var msg_unload="您的文章内容还没有进行保存！";var unloadConfirm = {};unloadConfirm.SetConfirmMsg = function(confirmMsg){ window.onBeforeUnload
阅读全文
摘要：最近上网上找了些关于CSS实现垂直居中的方法，方法挺多，下面就我看到的几种好方法在这里说明一下，使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效，因此，到底选择哪种方法好，还要看具体情况。 方法一：这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。view sourceprint?1<div id="wrapper"> 2<div id="cell"> 3<div class="content"> 4Conten
阅读全文
摘要：在页面里加入些动画，可以是页面更加生动活泼，使用CSS3的动画功能，可以使页面上的文字或图像具有动画功能。比如说背景色从一种颜色，平滑的过度到另一种颜色。CSS3中的动画功能有两种，Transitions和Animations。这两种功能都可以通过改变CSS中的属性值来产生动画效果。本文简单介绍一下Transitions功能的使用方法。 到目前为止，支持CSS3中的Transitions功能的浏览器有：Firefox 4+ 、Opera 10+、Safari 3.1+、Chrome 8+等，transitions属性的使用方法如下： transition: property durati...
阅读全文
摘要：在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。 目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+ 一、旋转： CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。 例一：一个黄色的div元素，通过在样式代码中使用“transform: rotate(45deg)”...
阅读全文
摘要：http://themeforest.net/item/http://preview.walkingpixels.com/tachyonhttp://jsfiddle.net/hleinone/UF4nr/（FileInput）http://www.walkingpixels.com/http://themeforest.net/item/options-business-corporate-premium-wordpress-theme/full_screen_preview/533599http://themeforest.net/item/boulevard-a-wordpress-ma
阅读全文
摘要：在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换，如$('#msg')等同于JQuery('#msg')的写法。然而，当我们引入多个js库后，在另外一个js库中也定义了$符号的话，那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。 第一种情况：jquery.js在prototype.js之后进行引入,如： Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.Co
阅读全文
摘要：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>chainningcode</title><scriptsrc="../scripts/jquery-1.2.3.intell
阅读全文
摘要：<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>使用数据库实现Web留言本</title><script> var datatable = null; var db = openDatabase('MyData', '', 'My Database', 102400); function init() { datatable = document.getElementById("datat
阅读全文
摘要：绑定事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() { obj["e"+type+fn](); } ); }};另一个实现 var addEvent = (function () {
阅读全文
摘要：if(!coos)var coos = function(){};if(!coos.browser){coos.userAgent = navigator.userAgent.toLowerCase();coos.browser = {version: (coos.userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],safari: /webkit/.test(coos.userAgent),opera: /opera/.test(coos.userAgent),msie: /msie/.test
阅读全文
摘要：jQuery动画高级用法（上）——详解animation中的.queue()函数 如果你拿着一个疑问去找专业人士寻找答案，那么你的一个疑问会变成三个，因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问。 我想这是大多数，包括我在内，IT人在学习过程中碰到的最大问题。当你有一段代码或是一个概念不是很清楚，百度也好，Google也好，在论坛发问也好，给出的答案往往又会夹杂着更多你不懂得概念和令你头疼的代码。 我亦是吃了同样的亏，痛定思痛，决定对animate方面做一些总结，希望能给大家一些启发和帮助从一个实际应用谈起 今天不谈animate()、fadeIn()、fadeOut()...
阅读全文
摘要：jQuery框架学习第二天：jQuery中万能的选择器jQuery框架学习第一天：开始认识jQueryjQuery框架学习第二天：jQuery中万能的选择器jQuery框架学习第三天：如何管理jQuery包装集 jQuery框架学习第四天：使用jQuery操作元素的属性与样式jQuery框架学习第五天：事件与事件对象jQuery框架学习第六天：jQuery中的Ajax应用jQuery框架学习第七天：jQuery动画–jQuery让页面动起来! jQuery框架学习第八天：ASP.NET jQuery实施方案jQuery框架学习第九天：jQuery工具函数介绍与使用 jQuery框架学习第十天：
阅读全文
摘要：JavaScript处理事件的一些兼容写法 博客分类：jsJavaScriptChromeC#C++C绑定事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() { obj["e"+type
阅读全文
摘要：HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。1、sessionStorage检测!!window.sessionStorage;常用方法.key = value.setItem(key, value).getItem(key).removeItem(key).clear()
阅读全文
摘要：jQuery选择器共有四大类，分别为基本选择器，层次选择器，过滤选择器和表单选择器。下边就来分别总结一下。 1， 基本选择器？ 基本选择器就是jQuery中最常用的选择器，也是最简单的选择器，它通过元素标签名，元素Id，Class来查找DOM元素。基本选择器共有五种，总结如下： 选择器返回示例元素标签选择器集合元素$(“p”)选取所有的<p>元素。Id选择器单个元素$(“#test”)选取Id为test的元素。Class选择器集合元素$(“.test”)选取所有class为test的元素通配符选择器集合元素$(“*”)选取所有的元素。群组选择器集合元素$(“div,span,p.m
阅读全文
浙公网安备 33010602011771号