js与用户体验
关注
分享
扫一扫
文章平均质量分 72
soldierluo
羽毛球
展开
-
模态对话框与非模态对话框
一、 前言要打开一个可以载入页面的子窗口有三种方法，分别是window.open、window.showModalDialog和window.showModelessDialog。open方法就是打开一个页面，可以说同用url链接打开一个页面一样，不推荐使用，因为很多浏览器会拦截。这里推荐使用的是window.showModalDialog和window.showMo原创 2009-10-28 14:28:00 · 1760 阅读 · 0 评论 -
二、HTML DOM及事件
<br />什么是DOM（文档对象模型）<br />1. DOM（Document Object Model）定义了访问和操作HTML、XHTML和XML文档的标准方法<br />2. DOM把文档呈现为带有元素、属性和文本的树形结构<br />3. DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）<br /> <br /> <br />为什么要使用DOM<br />1. 我们可以通过操作DOM来重构整个HTML文档，原创 2010-06-25 16:20:00 · 2622 阅读 · 0 评论 -
Javascript基础
<br />什么是javascript<br />1. javascript是用来向html页面添加交互行为的<br />2. javascript是一种脚本语言，它是由浏览器解释执行的<br /> <br /> <br />为什么要使用javascript<br />1. javascript可以动态的操作改变html元素，从而动态地改变页面<br />2. javascript可以对页面的事件做出响应<br /> <br /> <br />如何使用java原创 2010-06-25 17:00:00 · 1030 阅读 · 0 评论 -
再读《悟透javascript》之二、JavaScript原型
<br />前言<br /> JavaScript原型是JavaScript的精髓所在，理解了JavaScript原型对于我们理解JavaScript有着重大的意义。<br /> <br /> <br />一、构造对象引出的问题<br />1. 构造对象<br />在JavaScript中创建一个新的对象，可以如下：<br /> function test(){}<br /> var t1 = new test();<br /> 而上面的方法等价于如下：原创 2010-06-25 10:51:00 · 1052 阅读 · 0 评论 -
再读《悟透javascript》之一、JavaScript基础
<br />引言<br /> 编程世界只存在两种基本元素：一个是数据、另一个是代码。无论多么复杂的程序，都是对数据和代码间千丝万缕的关系进行的操作。<br /> <br /> <br />一、回归简单，JavaScript的数据类型<br />1. 简单数据类型<br />1) undefined：代表一切未知的事物，什么也没有（注意：typeof(undefined)也是undefined）<br />2) null：有一个空间，但空间中没有数据<br />3原创 2010-06-25 10:21:00 · 1003 阅读 · 0 评论 -
《悟透javascript》学习笔记：十、原型扩展
引言 想必君的悟性极高，可能你会这样想：如果在JavaScript 内置的那些如Object 和Function等函数的prototype上添加些新的方法和属性，是不是就能扩展JavaScript的功能呢？ 那么，恭喜你，你得到了！ 闭包模型 function person(){ this.age = 52; //使用this声原创 2010-02-25 15:56:00 · 887 阅读 · 0 评论 -
《悟透javascript》学习笔记：九、原型毕露
引言 prototype源自法语，软件界的标准翻译为“原型”，代表事物的初始形态，也含有模型和样板的意义。 prototype属性 JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个 object 类型的对象，因此我们也可以给这个 prototype 对象添加任意的属性和方法。既然 prot原创 2010-02-25 15:56:00 · 813 阅读 · 0 评论 -
《悟透javascript》学习笔记：八、构造对象
引言 除JSON外，在JavaScript中我们可以使用new操作符结合一个函数的形式来创建对象。例如： function MyFunc() {}; //定义一个空函数 var anObj = new MyFunc(); //使用 new 操作符，借助 MyFun 函数，就创建了一个对象 JavaScript的这种创建对象的方式可真有意思原创 2010-02-25 15:55:00 · 767 阅读 · 0 评论 -
《悟透javascript》学习笔记：七、对象描述
引言 在JavaScript中我们使用了一种被称为 JavaScript Object Notation(缩写JSON)的形式，翻译为中文就是“JavaScript对象表示法”。它可以简介清晰地将对象的结构描述出来，从而大大降低了我们的工作量并减少了数据量。 Json示例 //创建一个没有任何属性的对象var o = {} //创建一个对象,并设原创 2010-02-25 15:54:00 · 731 阅读 · 0 评论 -
CSS
<br />什么是css<br />1 Cascading Style Sheets：层叠式样式表<br />2 Css是用来对html页面进行美化的，所以使用css的前提是有html的基础<br />3 多重样式将重叠为一个（即：在不同地方为同一个元素定义多种样式的话，将按不同地方的优先权来取，取其中的拥有最高优先权的），以下是优先级（从低到高）<br />3.1 浏览器缺省值<br />3.2 外部样式表（于css文件内，原创 2010-06-25 16:26:00 · 1204 阅读 · 0 评论 -
再读《悟透javascript》之五、五子棋
<br />前言<br /> 五子棋是个很有趣的游戏，在用javascript开发之后，我发现其实ai算法才是最难的，这里的ai算法是直接借鉴自其它的ai算法。<br /> <br /> <br />代码如下：<br /><htmlxmlns="http://www.w3.org/1999/xhtml"><br /><headrunat="server"><br /> <title>五子棋</title><br /> <scripttype="text/javascript"><br原创 2010-07-05 10:53:00 · 1194 阅读 · 0 评论 -
一、HTML基础
<br />什么是HTML<br />1. HTML（英文：HyperText Markup Language）：即超文本标签语言<br />2. HTML标签是包含一些标签的文本文件<br />3. 这些标签告诉浏览器如何在页面上显示<br /> <br /> <br />编写一个最简单的HTML文件<br />1. 新建一个文本文件并打开，输入如下代码：<br /><html><br /><head><br /><title>这是页面标题</title><原创 2010-06-25 16:19:00 · 1089 阅读 · 0 评论 -
再读《悟透javascript》之三、甘露模型
<br />前言<br /> 甘露模型是用于开发基于javascript的类库的，通过它，我们可以以类似C#等面向对象的语言式的模式来开发javascript类库，这将使你的javascript代码变得清晰有条理也便于维护。<br /> <br /> <br />一、创建对象三部曲<br />前面有说过，使用new来创建一个对象，可以分为三个步骤,比如：var x = new obj();<br />1. 创建一个空对象，var x = {};，注意，即使x指针原来指向某个对象，此时也原创 2010-06-25 10:31:00 · 1400 阅读 · 0 评论 -
jQuery在学习之五、jQuery的ajax
<br />前言<br />jQuery的ajax提供了简介易用的方法让我们来实现ajax。<br /> <br /> <br />1 jQuery.ajax(options);——通过http请求加载远程数据<br />1.1 $.ajax() 只有一个参数，参数是一个json对象<br />1.1.1 url：发送请求的地址<br />1.1.2 type：请求方式包括GET和POST<br />1.1.3 timeout：请求超时时间(毫秒)<br />1.1.4 da原创 2010-08-03 09:45:00 · 1555 阅读 · 0 评论 -
jQuery再学习之二、jQuery选择器
<br />前言<br />jQuery选择器非常非常强大而且灵活，要完全掌握它是需要狠下一番功夫的。当然，掌握了主要的部分后，其它的了解就好，因为一些比较偏的毕竟用得少，而且可以有其它方法来实现。<br /> <br /> <br />选择器<br />1 基本选择器<br />1.1 #id选择器，通过元素的id来查找对象，<br />例：$("#txtTime") <br />查找id为txtTime的元素<br /> <br />1.2 html标签选原创 2010-08-03 09:42:00 · 4981 阅读 · 2 评论 -
jQuery再学习之一、jQuery核心
<br />前言<br /> jQuery核心是最基础的jQuery对象，或者叫函数，有了它我们才可以进行其它的操作，所以，需要认真掌握。<br /> <br /> <br />jQuery核心函数<br />1 获取jQuery对象（包装集），对于jQuery来说，获取对象然后进行相关的操作，所以获取对象是第一步，这里提供了三种获取jQuery对象的模式，而通过选择器模式获取对象是最普遍也最灵活和复杂的，这个后面会讲。<br />1.1 $("#id"); ：通过原创 2010-08-03 09:40:00 · 1023 阅读 · 0 评论 -
jQuery在学习之四、jQuery事件与动画
<br />前言<br />jQuery的事件取消了普通的javascript事件中的on，所以调用jQuery的事件是不需要on的，这样就更方便我们的使用了。<br /> <br /> <br />1 页面载入事件，例：<br /> $(function(){<br /> //此处的代码是在dom树加载完后才执行的<br /> });<br /> <br /> <br />2 事件切换<br /> $(function(){<br />原创 2010-08-03 09:44:00 · 958 阅读 · 0 评论 -
jQuery再学习之三、jQuery操作
<br />前言<br />jQuery也有自己的方式操作属性、css、值等。<br /> <br /> <br />1 使用jQuery操作元素属性<br />1.1 attr(…) ：读取元素属性，例：<br />$("...").attr("type")<br />读取元素的type属性值<br /> <br />1.2 attr({xx:yy,xx:yy}) ：设置元素属性值(注意大括号)，例：<br />$("...").attr({id:"testI原创 2010-08-03 09:43:00 · 2026 阅读 · 0 评论 -
再读《悟透javascript》之四、贪吃蛇
前言 贪吃蛇是个很简单的小游戏，但是却很有趣，下面是我用JavaScript写的一个贪吃蛇的代码：代码如下：htmlxmlns="http://www.w3.org/1999/xhtml">贪吃蛇 function createCell(x, y){ //创建单元格 var newDiv = document.createElement("div"); newDiv.style.position = "absolute"; newDiv.s原创 2010-07-04 10:52:00 · 952 阅读 · 0 评论 -
《悟透javascript》学习笔记：六、放下对象
引言 再来看看function与object的超然结合吧。 在面向对象的编程世界里，数据与代码的有机结合就构成了对象的概念。自从有了对象，编程世界就被划分成两部分，一个是对象内的世界，一个是对象外的世界。对象天生具有自私的一面，外面的世界未经允许是不可访问对象内部的。对象也有大方的一面，它对外提供属性和方法，也为他人服务。不过，在这里我们要谈到一个有趣的问题，就是“对象的原创 2010-02-25 15:54:00 · 835 阅读 · 0 评论 -
《悟透javascript》学习笔记：三、似类却不是类
引言 JavaScript没有 “类”的概念！这让很多学习过高级语言的人感到很不爽，其实比之于C语言又如何呢？显然JavaScript要比C语言好用很多。 不废话，上代码 /*一句句的看更容易明白*///声明一个对象，但它什么都没有var life = {}; //任何时候可以随意地改变对象的属性或函数，life后直接接.age，它就有了age属性for原创 2010-02-25 15:52:00 · 979 阅读 · 0 评论 -
JQuery UI之(一)简介
jQuery UI 是 jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI可以实现底层交互, 各种高级特效, 动画, 并且可定制主题. 我们可以用它轻松的构建高度交互的Web应用程序. 官方首页: http://jqueryui.com/home 文档、示例、皮肤下载: http://jqueryui.com/th原创 2009-12-13 14:25:00 · 2142 阅读 · 0 评论 -
JQuery基础之(六)JQuery事件与事件对象
一、 摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二、 旧有的事件与事件对象首先来做个测试，代码如下： div id="divEvent" style="background-color:Silver;">点击我div> script type原创 2009-12-07 13:52:00 · 3442 阅读 · 3 评论 -
JQuery基础之(四)JQuery包装集
一、 前言在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二、 动态创建元素1) 使用HTML DOM创建新元素什么是 DOM？通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项原创 2009-12-07 10:26:00 · 1129 阅读 · 0 评论 -
JQuery基础之(三)JQuery选择器
一、 前言本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的元素", 完成这些工作只需要编写一个jQu原创 2009-12-07 10:24:00 · 1230 阅读 · 0 评论 -
JQuery基础之(二)第一个JQuery程序
一、 下载JQuery类库下载地址：http://code.google.com/p/jqueryjs/downloads/list上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:1) min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js2) vsdoc: 在Visua原创 2009-12-07 10:19:00 · 2138 阅读 · 0 评论 -
JQuery基础之(一)JQuery简介
一、 什么是JQuery、为什么是JQueryjQuery是一套Javascript脚本库.注意：jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery原创 2009-12-07 09:51:00 · 1170 阅读 · 0 评论 -
JQuery基础之(七)jQuery动画处理
一、 前言本文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单! 二、 基本动画函数——从实例开始原创 2009-12-07 18:03:00 · 1981 阅读 · 1 评论 -
JQuery基础之(五)使用JQuery操作元素的属性和样式
一、 前言本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二、 区分DOM属性和元素属性一个img标签:通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成"DOM对象", 并且将元素的"元素属原创 2009-12-07 10:28:00 · 3400 阅读 · 0 评论 -
JQuery UI之(二)对话框——dialog
一、 前言弹出框是非常实用的页面功能，它有两个特点：一是可拖拽(Draggable)、一是可改变大小(Resizeable) 二、 废话不说——先看如何弹出一个对话框代码如下： 先引入之前加入的css和js如下： link type="text/css" rel="Stylesheet" href="Css/redmond原创 2009-12-13 14:28:00 · 13338 阅读 · 1 评论 -
JQuery UI之(三)可切换面板——tabs
一、 前言Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用. 二、 直入主题引入样式和js库： link type="text/css" rel="Stylesheet" href="Css/redmond/jquery-ui-1.7.2.custom原创 2009-12-13 16:48:00 · 10541 阅读 · 0 评论 -
《悟透javascript》学习笔记：二、回归简单
引言 要理解 JavaScript，你得首先放下对象和类的概念，回到数据和代码的本原。前面说过，编程世界只有数据和代码两种基本元素，而这两种元素又有着纠缠不清的关系。JavaScript就是把数据和代码都简化到最原始的程度。 基本类型一、简单数据类型：undefined、null、boolean、number、string（注意：都是小写，js区分大小写）原创 2010-02-25 15:51:00 · 1236 阅读 · 0 评论 -
《悟透javascript》学习笔记：一、前言
《悟透JavaScript》学习笔记 原文地址：http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html 这是一本很形象生动的书，使我们可以更深地了解了JavaScript。 引言 编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和原创 2010-02-25 15:51:00 · 719 阅读 · 0 评论 -
《悟透javascript》学习笔记：五、奇妙的对象
引言 任何一个函数都可以为其动态地添加或去除属性，这些属性可以是简单类型，可以是对象，也可以是其他函数。也就是说，函数具有对象的全部特征，你完全可以把函数当对象来用。其实，函数就是对象，只不过比一般的对象多了一个括号“()”操作符，这个操作符用来执行函数的逻辑。即，函数本身还可以被调用，一般对象却不可以被调用，除此之外完全相同。请看下面的代码： 关于函数，上代码 fun原创 2010-02-25 15:54:00 · 791 阅读 · 0 评论 -
《悟透javascript》学习笔记：四、函数的魔力
引言 JavaScript的代码就只有 function 一种形式，function 就是函数的类型。也许其他编程语言还有 procedure 或 method 等代码概念，但在 JavaScript 里只有 function 一种形式。当我们写下一个函数的时候，只不过是建立了一个function类型的实体而已。 函数类型 1. 定义型函数，如下：fun原创 2010-02-25 15:53:00 · 803 阅读 · 0 评论 -
《悟透javascript》学习笔记：X、深入继承
引言 JavaScript不是按面向对象的思想设计的程序语言，所以它不具备像现有的面向对象的语言那样的功能，但是面向对象的思想是如此的深入人心，以至于JavaScript也削尖了脑袋“面向对象”。果真，通过一些特殊的处理，JavaScript也具有了基本的面向对象的功能。 function、new、prototype与constructor 看代码：原创 2010-02-28 17:04:00 · 1224 阅读 · 0 评论 -
JQuery UI之(五)日期选择——Datepicker
一、 前言JQuery官方的Datepicker控件，可以很方便的使用，但是在我看来他所提供的功能却稍显简单，并不能完全地符合我们的需求，所以，如果只是很简单的需求的话使用JQuery提供的Datepicker控件是没问题的，但是如果需要比较复杂的功能的话，请参考这个网址：http://www.my97.net/dp/demo/ 二、 使用Datep原创 2009-12-15 11:05:00 · 3514 阅读 · 2 评论 -
JQuery UI之(六)进度条——Progressbar
一、 前言进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。 二、 最简单的例子首先引入样式和js库： link type="text/css" rel="Stylesheet" href="css/jquery-ui-1.7.2.custom.css" /> script type="text/原创 2009-12-16 17:07:00 · 37829 阅读 · 1 评论 -
JQuery UI之(四)手风琴面板——accordion
一、 前言手风琴面板我又叫他可折叠面板，可以使用户创建一组可折叠的面板 二、 开始动手添加样式和js库： link type="text/css" rel="Stylesheet" href="Css/redmond/jquery-ui-1.7.2.custom.css" /> script type="text/javasc原创 2009-12-13 17:47:00 · 2242 阅读 · 0 评论 -
解决js跨子域问题
解决js跨子域问题 问题描述：在框架页面index.aspx中，通过iframe加载多个子域名的页面，此时子域名中的页面的js将无法使用，报“没有权限”错误 原因： 因为考虑到安全性的问题，浏览器禁止js进行跨域名的操作，所以出现以上问题 解决方法： 通过将框架页面及iframe加载的子域名页面的document.domain修改为他们的顶级域名可解原创 2013-09-11 16:53:27 · 3033 阅读 · 0 评论