chaoyv

tp://www.zhihu.com、百度知道 http://zhidao.baidu.com/等。这里我们重点参考“知乎”，来学习一下它采用的前端效果。一．项目介绍我们重点仿照“知乎”的架构模式来搭建界面和布局，以及大部分前端功能。而“百度知道”作为辅助功能来确定我们这个项目需要的前端功能。从以上知名问答站点中，我们可以确认最主要的前端功能：1.弹出对话框；2.前端按钮；3.折叠菜单；4.选项卡切换；5.滑动块；6.日历；7.自动补全；8 拖放；等一系列前端模块。二．jQuery UIjQuery UI

触发事件、事件委托事件、和统一整合的 on 和 off，以及仅执行一次的 one 方法。这些方法大大降低了开发者难度，提升了开发者的开发体验。一．模拟操作在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如：当网页加载完毕后自行点击一个按钮触发一个事件，而不是用户去点击。//点击按钮事件$('input').click(function () {alert('我的第一次点击来自模拟！');}); //模拟用户点击行为$('input').trigger('click');

容方面的处理。jQuery 在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。一．事件对象事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event事件对象，event 对象有很多可用的属性和方法，我们在 JavaScript 课程中已经详细的了解过这些常用的属性和方法，这里，我们再一次演示一下。//通过处理函数传递事件对象$('input').bind('click', function (e) { //接受事件对象参数alert(e);

这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。一．创建节点为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。 var box = $('<div id="box">节点</div>'); //创建一个节点$('body').append(box); //将节点插入到<body&

和 XML），它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。一．Ajax 概述Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。 它本身不是单一技术， 是一串技术的集合，主要有：1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为；2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向

。使用它，极大的解放了在表单上繁杂的验证过程，并且错误提示显示的完善也增加了用户体验。一．使用 validate.js 插件官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是 validate.js，还有两个可选的辅助文件：additional-methods.js（控件 class 方式）和 message_zh.js（提示汉化）文件（实际使用，请使用 min 压缩版） 。第一步：引入 validate.js

它彻底扩展了 HTML 中的 title 属性，让提示更加丰富，更加可控制，全面提升了用户体验。一．调用 tooltip()方法在调用 tooltip()方法之前，首先需要针对元素设置相应 title 属性。<input type="text" name="user" class="text" id="user" title="请输入帐号， 不小于 2 位！ " />$('

v id="reg" title="会员注册"><p><label for="user">帐号：</label><input type="text" name="user" class="text" id="user" title="请输

供更多丰富多彩的外观。它不单单可以设置按钮或文本，还可以设置单选按钮和多选按钮。一．使用 button 按钮使用 button 按钮 UI 的时候，不一定必须是 input 按钮形式，普通的文本也可以设置成button 按钮。$('#search_button').button(); 二．修改 button 样式在弹出的 button 对话框中，在火狐浏览器中打开 Firebug 或者右击->查看元素。这样，我们可以看看 button 的样式，根据样式进行修改。我们为了和网站主题符合，

学习要点：1.项目介绍2.jQuery UI3.UI 主题知问系统，是一个问答系统。主要功能：即会员提出问题，会员回答问题。目前比较热门的此类网站有：知乎 http://www.zhihu.com、百度知道 http://zhidao.baidu.com/等。这里我们重点参考“知乎”，来学习一下它采用的前端效果。一．项目介绍我们重点仿照“知乎”的架构模式来搭建界面和布局，以及大部分前端功能。而...

学习要点：1.显示、隐藏2.滑动、卷动3.淡入、淡出4.自定义动画5.列队动画方法6.动画相关方法7.动画全局属性在以前很长一段时间里，网页上的各种特效还需要采用 flash 在进行。但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用 JavaScript 动画效果来取代 flash。这里说的取代是网页特效部分，而不是动画。网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：故事情...

学习要点：1.模拟操作2.命名空间3.事件委托4.on、off 和 onejQuery 不但封装了大量常用的事件处理，还提供了不少高级事件方便开发者使用。比如模拟用户触发事件、事件委托事件、和统一整合的 on 和 off，以及仅执行一次的 one 方法。这些方法大大降低了开发者难度，提升了开发者的开发体验。一．模拟操作在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如：当网页加载完毕后自...

学习要点：1.事件对象2.冒泡和默认行为JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼容方面的处理。jQuery 在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。一．事件对象事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event事件对象，event 对象有很多可...

学习要点：1.绑定事件2.简写事件3.复合事件JavaScript 有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jQuery 为开发者更有效率的编写事件行为， 封装了大量有益的事件方法供我们使用。一．绑定事件在 JavaScript 课程的学习中， 我们掌握了很多使用的事件， 常用的事件有： click、 dblclick、mouse...

学习要点：1.常规选择器2.表单选择器3.表单过滤器表单作为 HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用 jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素。一．常规选择器我们可以使用 id、 类(class)和元素名来获取表单字段， 如果是表单元素， 都必须含有 name属性，还可以结合属性选择器来精确定位。...

学习要点：1.创建节点2.插入节点3.包裹节点4.节点操作DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。一．创建节点为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节...

学习要点：1.DOM 简介2.设置元素及内容3.元素属性操作4.元素样式操作5.CSS 方法DOM 在 JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装...

学习要点：1.基本过滤器2.内容过滤器3.可见性过滤器4.子元素过滤器5.其他方法过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类，可以让不支持 CSS3 的低版本浏览器也能支持。和常规选择器一样，jQuery 为了更方便开发者使用，提供了很多独有的过滤器。一．基本过滤器过滤器主要通过特定的过滤规则来筛选所需的...

学习要点：1.简单选择器2.进阶选择器3.高级选择器jQuery 最核心的组成部分就是：选择器引擎。它继承了 CSS 的语法，可以对 DOM 元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了 CSS1~CSS3 的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。备注：课程必须有(X)html+CSS 基础。一．简单选择器在...

学习要点：1.代码风格2.加载模式3.对象互换4.多个库之间的冲突本节课我们简单的介绍一下jQuery一些核心的问题，这些问题都粗略的为大家介绍了jQuery的大致使用模式，为后续课程展开提供了帮助。对于JavaScript课程已经学完的同学，这些概念会非常的清晰，而对于JavaScript薄弱的同学可能会有一些模糊，但不必太担心，后续会慢慢展开。而对于完全没有JavaScript基础的同学，...

学习要点：1.Ajax 概述2.load()方法3.$.get()和$.post()4.$.getScript()和$.getJSON()5.$.ajax()方法6.表单序列化Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形...

学习要点：1.加载请求2.错误处理3.请求全局事件4.JSON 和 JSONP5.jqXHR 对象在 Ajax 课程中，我们了解了最基本的异步处理方式。本章，我们将了解一下 Ajax 的一些全局请求事件、跨域处理和其他一些问题。一．加载请求在 Ajax 异步发送请求时，遇到网速较慢的情况，就会出现请求时间较长的问题。而超过一定时间的请求， 用户就会变得不再耐烦而关闭页面。 而如果在请求期间能给用...

学习要点：1.字符串操作2.数组和对象操作3.测试操作4.URL 操作5.浏览器检测6.其他操作工具函数是指直接依附于 jQuery 对象，针对 jQuery 对象本身定义的方法，即全局性的函数。它的作用主要是提供比如字符串、数组、对象等操作方面的遍历。一．字符串操作在 jQuery 中，字符串的工具函数只有一个，就是去除字符串左右空格的工具函数：$.trim()。//$.trim()去掉...

学习要点：1.调用 autocomplete()方法2.修改 autocomplete()样式3.autocomplete()方法的属性4.autocomplete()方法的事件5.autocomplete 中使用 on()自动补全（autocomplete），是一个可以减少用户输入完整信息的 UI 工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。一．调用 autoco...