jQuery系列-基础(理论)
HTML5理论试卷一
HTML5工程师培训知识试卷（一）注意事项1. 请首先按要求在试卷的标封处填写您的姓名、考号和身份证号。
2. 请仔细阅读各种题目的回答要求，在规定的位置填写您的答案。
3.一、1分。
满分65分）：1.关于HTML5说法正确的是( )。
只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5新增了离线缓存机制主要是针对移动端进行了优化2.以下说法不正确的是( )。
标准还在制定中兼容以前HTML4下浏览器C.<canvas>标签替代FlashD.简化的语法3.在HTML文件中使用JavaScript脚本时，JavaScript代码需要出现在（）之间。
A. < JavaScript >和</ JavaScript >B. < JScript>和</JScript >C.〈Script Language ="JavaScript">和</Script>D. <Js>和</Js>4.下面关于JavaScript变量的描述错误的是（）。
A.在JavaScript中，可以使用var关键字声明变量。
B.声明变量时必须指明变量的数据类型。
C.可以使用typeof运算符返回变量的类型D.可以不定义变量，而通过使用变量来确定其类型。
5.下面（）是JavaScript支持的注释字符。
A. ; C. — D. &&6.包含浏览器信息的HTML DOM对象是（）。
A. NavigatorB. WindowC. documentD. Location7.以下哪条语句会产生运行错误的是（）。
obj = ( );obj = [ ];obj = { };obj = / /;8.以下哪个单词不属于javascript保留字是（）。
A. withB. parentC. classD. void9.请选择结果为真的表达式是（）。
学软件开发需要学哪些基础理论？
学软件开发需要学哪些基础理论？
我们不变，时代在变。
时代推着我们向前走，只有我们以超过时代的速度进步，我们才能在这个时代中脱颖而出。
北大青鸟沈阳三好可助你的加速一臂之力！
学计算机有前途吗？学计算机的前途肯定是有的，各行各业都有前途。
三百六十行，行行出状元，老祖宗的话还是要听的。
但是，只有那些手上握有社会或者公司需要的技能的人才有前途。
其实在任何一行也都是这样的。
软件开发需要学习一些软件技术基础、Java、C#、数据库知识、HTML+CSS 网页设计知识、jQuery、JSP、SSH企业开发框架、 MVC开发企业级应用等专业软件开发课程。
虽然看着内容很多，但是其实编程语言之间有他们的共通性，比如每种编程语言都有数据类型、变量、常量、流程控制语句、函数、输入输出等概念，只要掌握了一种编程语言，掌握了编程的思想，再学习其他的就会很容易了的。
2016年5月23日，Java诞生21周年。
细数IT的语言开发平台，从汇编到BASIC;从CORBA到FORTRAN;从PASCAL到C，C++，.NET…，似乎每个语言都曾闪耀一时，而Java凭借卓越的通用性、高效性、平台移植性和安全性，被广泛应用于PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网。
您还在为选择好学校，好专业课程迷茫吗！建议更多直接通过电话或者短信咨询专业老师。
将会为您详细介绍学校师资教学、专业、课程含金量、就业保障、就业工资待遇等你所关心的问题。
详情请咨询点击查看。
HTML5理论试卷三
HTML5 工程师培训知识试卷(三)注 意 事 项1. 请首先按要求在试卷的标封处填写您的姓名、考号和身份证号。
2. 请仔细阅读各种题目的回答要求，在规定的位置填写您的答案。
3. 不要在试卷上乱写乱画，不要在标封区填写无关内容。
01 第一部分 第二部分 第三部分 第四部分 总 分 总 分 人 得 分一、 单选题 (第 1~65 题。
选择正确的答案，将相应的字母填入题内的括号中。
每题 1分。
满分 65 分) ：1.以下不是 HTML5 的新增的标签是( )。
A.<bdi>B.<xmp>C.<command>D.<dialog> 2.以下不是 HTML5 新增的 API 是( )。
A.Media APImand APIC.History APID.Cookie API 3.以下( )结果是正确的？var a=100 ,b="100.5a6", c="100.1";alert(Math.max(a , b ,c));A.100B.100.1C.NaND.undefined4.以下( )语句能正确弹出结果。
A. alert(new Date(2011 , 12 , 25).getDay());B. alert(new Date(2011 , 12 , 25 , 5).getDay());C. alert(new Date(2011 , 12 , 25 , 5 , 5 , 9).getDay());D. 以上三个结果都正确5.以下代码正确的运行结果是( )。
var arr=[0,1,2,3,4,5,6]; arr2 = arr.slice(2,5); alert(arr2);A.1,2,3B.1,2,3,4C.2,3,4D.2,3,4,56.下面哪个描述不正确的是( )。
A.NaN!=nullB.null!=undefinedC. {}!=falseD.null!=false7.var a = new Array(new Array(9,0,3,6,5), new Array(2,9,0,6));则 a[0][3]= ( ) 。
《Web应用开发》课程教学大纲
/
/
/
56
8.1
8.1使用MySQL访问数据库
建立与MySQL服务器的连接和访问数据库以及处理查询结果和事务管理
0.3讲授0.3自教材578.2
8.2使用预处理语句
创建预处理语句和执行预处理语句并处理查询结果
0.3
讲授
0.3
自学教材
58
9.1
9.1表单处理
如何提交表单和获取并检验表单数据
0.3
讲授
4
1.3
1.3在Web页中嵌入PHP代码
PHP标签
0.2
讲授
0.2
自学教材
5
1.4
1.4输出HTML
如何输出HTML
0.1
讲授、讨论
0.1
自学图书2
6
1.5
上机实验1
页面头和页面脚
1
上机
1
自学
7
第二章
第二章HTML与CCS简介
本章重点难点：理解HTML和CSS的基本概念。
/
/
/
/
8
2.1
2.1 HTML基础
《Web应用开发》教学大纲
一、课程基本信息
课程名称
Web应用开发
Web Application Development
课程编码
CST220221020
开课院部
计算机科学与技术学院
课程团队
（未设置）
学分
2.0
课内学时
36
讲授
24
实验
0
上机
12
实践
0
课外学时
36
适用专业
计算机科学与技术
授课语言
前端文档汇总（含代码规范、开发流程、知识分享,持续更新）
前端⽂档汇总（含代码规范、开发流程、知识分享,持续更新）front-end-Doc前端⽂档汇总（含代码规范、开发流程、知识分享,持续更新）进去后可直接点链接查看⽂章综合类地址前端⽂档基本例⼦前端知识体系前端知识结构Web前端开发⼤系概览Web前端开发⼤系概览-中⽂版Web Front-end Stack v2.2免费的编程中⽂书籍索引前端书籍前端免费书籍⼤全前端知识体系免费的编程中⽂书籍索引智能社 - 精通JavaScript开发重新介绍 JavaScript（JS 教程）⿇省理⼯学院公开课：计算机科学及编程导论JavaScript中的this陷阱的最全收集--没有之⼀JS函数式编程指南JavaScript Promise迷你书（中⽂版）腾讯移动Web前端知识库Front-End-Develop-Guide 前端开发指南前端开发笔记本⼤前端⼯具集 - 聂微东前端开发者⼿册中间插播前端学习⼤佬群493671066，美⼥多多。
⽼司机快上车，来不及解释了。
作者相关Vue⽂章打赏衷⼼的表⽰感谢⼊门类地址前端⼊门教程瘳雪峰的Javascript教程jQuery基础教程前端⼯程师必备的PS技能——切图篇结合个⼈经历总结的前端⼊门⽅法效果类地址弹出层焦点图轮播特效⼯具类地址css sprite 雪碧图制作版本控制⼊门 – 搬进 GithubGrunt-beginner前端⾃动化⼯具慕课专题地址张鑫旭 - 慕课系列lyn - 慕课系列lyn - 慕课系列慕课专题地址艾伦 - 慕课系列碧仔 - Hello，移动WEB周报类地址平安科技移动开发⼆队技术周报开发中⼼地址mozilla js参考chrome开发中⼼（chrome的内核已转向blink）safari开发中⼼microsoft js参考(v=vs.94.aspxjs秘密花园js秘密花园w3help综合Bug集合⽹站综合搜索地址javascripting各种流⾏库搜索综合API地址-包含各种API集合开源中国在线API⽂档合集devdocs英⽂综合API⽹站jQuery地址jQuery API 中⽂⽂档hemin 在线版css88 jq apicss88 jqui api学习jqueryjquery 源码查找Ecmascript地址Understanding ECMAScript 6 - Nicholas C. Zakasexploring-es6exploring-es6翻译exploring-es6翻译后预览阮⼀峰 es6阮⼀峰 JavascriptECMA-262，第 5 版es5Js template地址template-chooserartTemplatetomdjs淘宝模板juicer模板Fxtpl v1.0 繁星前端模板引擎laytplmozilla - nunjucksJuicerdustjsetpl弹出层地址artDialog 最新版artDialog ⽂档google code 下载地址贤⼼弹出层响应式⽤户交互组件库sweetalert-有css3动画弹出层CSS地址CSS 语法参考CSS3动画⼿册CSS3动画⼿册CSS地址腾讯css3动画制作⼯具志爷css⼩⼯具集合css3 js 移动⼤杂烩bouncejs 触摸库css3 按钮动画animate.css全局CSS的终结(狗带 [译]Angularjs地址Angular.js 的⼀些学习资源angularjs中⽂社区Angularjs源码学习Angularjs源码学习angular对bootstrap的封装angularjs + nodejs吕⼤豹 AngularjsAngularJS 最佳实践Angular的⼀些扩展指令Angular数据绑定原理⼀些扩展Angular UI组件Ember和AngularJS的性能测试带你⾛近AngularJS - 基本功能介绍Angularjs开发指南Angularjs学习不要带着jQuery的思维去学习AngularJS angularjs 学习笔记angularjs 开发指南angularjs 英⽂资料angular bootstrapangular jq mobileangular ui整合jQuery Mobile+AngularJS经验谈有jQuery背景，该如何⽤AngularJS编程思想AngularJS在线教程angular学习笔记React地址react.js 中⽂论坛react.js 官⽅⽹址react.js 官⽅⽂档react.js material UIreact.js TouchstoneJS UIreact.js amazeui UIReact ⼊门实例教程 - 阮⼀峰React Native 中⽂版Webpack 和 React ⼩书 - 前端乱炖Webpack 和 React ⼩书 - gitbookwebpackWebpack，101⼊门体验webpack⼊门教程基于webpack搭建前端⼯程解决⽅案探索React原创实战视频教程移动端API地址99移动端知识集合移动端前端开发知识库移动前端的⼀些坑和解决⽅法（外观表现）【原】移动web资源整理zepto 1.0 中⽂⼿册zepto 1.0 中⽂⼿册移动端API地址zepto 1.0 中⽂⼿册zepto 1.1.2zepto 中⽂注释jqmobile ⼿册移动浏览器开发集合移动开发⼤杂烩微信webview中的⼀些问题框架地址特⾊的HTML框架可以创建精美的iOS应⽤淘宝SUIavalon地址avalonjsAvalon新⼀代UI库： OniUIavalon.oniui-基于avalon的组件库Requriejs地址Javascript模块化编程（⼀）：模块的写法Javascript模块化编程（⼆）：AMD规范Javascript模块化编程（三）：require.js的⽤法RequireJS⼊门（⼀）RequireJS⼊门（⼆）RequireJS进阶（三）requrie源码学习requrie ⼊门指南requrieJS 学习笔记requriejs 其⼀require backbone结合Seajs地址seajsseajs 中⽂⼿册Less,sass地址sasssass教程-sass中国Sass 中⽂⽂档lessMarkdown地址Markdown 语法说明 (简体中⽂版markdown⼊门参考gitbook国外的在线markdown可编辑成书mdeditor⼀款国内的在线markdown编辑器stackedit国外的在线markdown编辑器，功能强⼤，同步云盘mditor⼀款轻量级的markdown编辑器lepture-editormarkdown-editorD3地址d3 TutorialsGallerylofteriteyeruanyifeng兼容性地址esma 兼容列表W3C CSS验证服务caniusecsscreatormicrosoft(v=vs.85.aspx在线测兼容-移动端在线测兼容-移动端兼容性地址emulatorsUI相关地址bootcssMetroUICSSsemanticButtonskitecsspintueramazeuiworldhellolinuxtoygitmagicrogerdudlergitrefbookgogojimmyHTTP地址HTTP API 设计指南其它API地址javascript流⾏库汇总javascriptoo验证apiunderscore 中⽂⼿册underscore源码分析underscore源码分析-亚⾥⼠朱德的博客underscrejs en apilodash - underscore的代替品ext4apibackbone 中⽂⼿册qwrap⼿册youa/#/qw/base/loadJs.htm 缓动函数svg 中⽂参考svg mdn参考svg 导出 canvassvg 导出 pngai-to-svglocalStorage 库图表类地址Highcharts 中⽂APIHighcharts 英⽂APIECharts 百度的图表软件⾼德地图开源的⽮量图脚本框架svg 地图vue地址VueVue 论坛Vue ⼊门指南Vue 的⼀些资源索引awesome-vue正则地址JS正则表达式元字符正则表达式30分钟⼊门教程MDN-正则表达式ruanyifeng - RegExp对象⼩胡⼦哥 - 进阶正则表达式is.jsis.js正则地址正则在线测试ionic地址ionic其它地址Mock.js 是⼀款模拟数据⽣成器前端地址通过分析github代码库总结出来的⼯程师代码书写习惯HTML&CSS编码规范 by @mdo团队合作的css命名规范-腾讯AlloyTeam前端团队前端编码规范之js - by yuwenhui前端编码规范之js - by 李靖前端开发规范⼿册Airbnb JavaScript 编码规范（简体中⽂版）AMD与CMD规范的区别AMD与CMD规范的区别KISSY 源码规范bt编码规范规范加强版前端代码规范及最佳实践百度前端规范百度前端规范百度前端规范ECMAScript6 编码规范--⼴发证券前端团队JavaScript 风格指南/编码规范（Airbnb公司版）⽹易前端开发规范css模块前端规范资源列表PHP地址最流⾏的PHP 代码规范最流⾏的PHP 代码规范Android地址【敏捷开发】Android团队开发规范Android 开发规范与应⽤各⼤公司开源项⽬地址Facebook Projects百度web前端研发部百度EFE百度githuballoyteamalloyteam-githuballoyteam-AlloyGameEngineAlloyDesigner即时修改，即时保存，设计稿较正，其它开发辅助⼯具H5交互页编辑器AEditor介绍H5动画交互页开发的⼯具介绍AEditor H5动画交互页开发的⼯具maka值得订阅的weekly腾讯html5奇舞团开源项⽬Qunar UEDScrat常⽤地址ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性模拟键盘拼⾳中国个⼈⾝份证号验证常⽤地址算法地址数据结构与算法 JavaScript 描述. 章节练习常见排序算法（JS版）经典排序常见排序算法-js版本JavaScript 算法与数据结构精华集⾯试常考算法题精讲移动端地址fastclickno-click-delayJSON地址模拟⽣成JSON数据返回跨域JSONAPIHtml5地址HTML5 有哪些让你惊艳的 demo？CSS地址browserhacks焦点图地址myfocusmyfocus-官⽅演⽰站SuperSlidev2.1 -- ⼤话主席soChangeExt, EasyUI, J-UI 及其它各种UI⽅案地址extjsext4英⽂apiext4中⽂apiEasyUI地址jquery easyui 未压缩源代码J-UI地址J-UIOther地址MUI-最接近原⽣APP体验的⾼性能前端框架Amaze UI中国⾸个开源 HTML5 跨屏前端框架淘宝 HTML5 前端框架KISSY - 阿⾥前端JavaScript库⽹易Nej - Nice Easy JavascriptKendo UI MVVM DemoBootstrapSmart UI雅虎UI - CSS UI页⾯社会化分享功能地址百度分享pc端JiaThis pc端社会化分享组件移动端ShareSDK 轻松实现社会化功能移动端友盟分享移动端富⽂本编辑器地址功能齐全 tinymce百度 ueditor经典的ckeditor经典的kindeditorwysiwyg⼀个有情怀的编辑器。
jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.propertiesjQuery.i18n.properties是⼀款轻量级的jQuery国际化插件，能实现Web前端的国际化。
国际化英⽂单词为：Internationalization，⼜称i18n，“i”为单词的第⼀个字母，“18”为“i”和“n”之间单词的个数，⽽“n”代表这个单词的最后⼀个字母。
jQuery.i18n.properties采⽤.properties⽂件对JavaScript进⾏国际化。
jQuery.i18n.properties插件⾸先加载默认的资源⽂件（strings.properties），然后加载针对特定语⾔环境的资源⽂件（strings_zh.properties），这就保证了在未提供某种语⾔的翻译时，默认值始终有效。
资源⽂件命名有以下三种格式：basename.propertiesbasename_language.propertiesbasname_language_country.propertiesjQuery.i18n.properties APIjQuery.i18n.properties的API只有⼏个：jQuery.i18n.properties()、jQuery.i18n.prop()、jQuery.i18n.browserLang()，当然也可以采⽤.i18n.properties()、.i18n.prop()、$.i18n.browserLang()的形式使⽤这些API。
jQuery.i18n.properties(settings)该⽅法加载资源⽂件，其中settings是配置加载选项的⼀系列键值对。
各项配置项的具体描述如下：选项描述类型可选name资源⽂件的名称，例如strings或[strings1,strings2]，前者代表⼀个资源⽂件，后者代表资源⽂件数组string或string[]否path资源⽂件所在路径string是mode 加载模式：“vars”表⽰以JavaScript变量或函数的形式使⽤资源⽂件中的Key“map”表⽰以Map的⽅式使⽤资源⽂件中的Key“both”表⽰以同时使⽤两种⽅式。
dynaTrace使用分享-基础篇
教程 – 基础篇》 | 2010/4/19
应用变得更加容易，糟糕的是，随之而来的，定位这些应用的问题也越来越难，尤其是与性能相关的时候。
企业级环境也一样。
垃圾的IE 诊断
应用的挑战不仅是理解网络交互
安装好dynaTrace 后，我们会进入到下面的主界面。
dynaTrace 使用所谓的运行设置（Run Configurations ）来直接浏览你要追踪的网站，避免每次
接下来我们将以追踪Google为例，在Name中填入本次
时忽略缓存的影响时可以将其选中，设置好后点击
在dynaAjax工具栏中最右边的按钮可以用来打开首选项（
运行追踪后，我们会发现浏览器上出现dynaTrace工具栏，上面的Connected
正出于追踪状态，此时你可以浏览所有要检测的网页，所有数据都会被记录，浏览好后关闭浏览器，会自动生成追踪文件。
双击左边的将打开Summary（总结），这里显示了大部分我们需要的信息，如下图所示。
在Summary中记录了所有访问的网页的详细信息，点击上面不同的URL将会看到相关的中
我们可以将追踪内容导出成追踪文件，当然，也可以将追踪文件导入到dynaTrace进行解析。
A j a x 教程 – 基础篇》 | 2010/4/19。
js重写jquery中常见方法
js重写jquery中常见方法JavaScript是一门动态脚本语言，它支持面向对象的编程风格，并且可以在客户端和服务器端运行。
而jQuery是一个轻量级的JavaScript 库，提供了一系列的简化和增强的API，使得JavaScript在网页开发中更容易、更简洁。
虽然jQuery提供了很多强大的功能和方法，但是我们仍然可以使用纯JavaScript来实现类似的功能。
下面是对一些常见的jQuery方法进行用JavaScript重写的示例。
1.选择器方法：jQuery: `$('selector')`JavaScript:```document.querySelectorAll('selector')//或者document.querySelector('selector')```2.添加类方法：jQuery: `$('selector').addClass('class-name')`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.classList.add('class-name');});```3.移除类方法：jQuery: `$('selector').removeClass('class-name')`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.classList.remove('class-name');});```4.切换类方法：jQuery: `$('selector').toggleClass('class-name')`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.classList.toggle('class-name');});```5.获取属性值方法：jQuery: `$('selector').attr('attribute-name')`JavaScript:```document.querySelector('selector').getAttribute('attribute-name');```6.设置属性值方法：jQuery: `$('selector').attr('attribute-name', 'value')`JavaScript:```document.querySelector('selector').setAttribute('attribute-name', 'value');```7.显示元素方法：jQuery: `$('selector').show(`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.style.display = '';});```8.隐藏元素方法：jQuery: `$('selector').hide(`JavaScript:```document.querySelectorAll('selector').forEach(function(eleme nt)element.style.display = 'none';});```9.获取文本内容方法：jQuery: `$('selector').text(`JavaScript:```document.querySelector('selector').textContent;```10.设置文本内容方法：jQuery: `$('selector').text('content')`JavaScript:```document.querySelector('selector').textContent = 'content';```这些示例展示了如何使用JavaScript来重写一些常见的jQuery方法。
孙俏 web前端开发 教学大纲
孙俏web前端开发教学大纲全文共四篇示例，供读者参考第一篇示例：孙俏web前端开发教学大纲一、课程简介本课程旨在教授学生如何成为一名优秀的web前端开发人员。
通过本课程的学习，学生将掌握各种前端开发技术和工具，包括HTML、CSS、JavaScript等。
通过实践项目，学生将获得宝贵的实战经验，为将来从事前端开发工作打下坚实的基础。
二、课程目标1. 熟练掌握HTML、CSS和JavaScript等前端开发技术和工具；2. 掌握响应式设计和移动端开发的相关知识；3. 熟练运用前端开发常用工具和框架，如Bootstrap、jQuery 等；4. 能够独立完成前端开发项目，并具备良好的团队协作能力；5. 深入了解前沿的web前端开发技术和趋势，保持不断学习和进步。
三、课程大纲1. HTML基础- 了解HTML的基本结构和语法- 学习常用的HTML标签和属性- 掌握HTML5的新特性和语义化标签2. CSS基础- 掌握CSS的基本概念和语法- 学习CSS选择器和层叠样式表- 熟练运用CSS布局技术和样式优化3. JavaScript基础- 了解JavaScript的基本语法和数据类型- 学习DOM操作和事件处理- 掌握JavaScript的面向对象编程和闭包4. 前端开发工具和框架- 介绍常用的前端开发工具，如VS Code、Git等- 学习Bootstrap和jQuery等前端框架的使用- 掌握响应式设计和移动端开发的技术5. 前端项目实践- 设计并实现一个完整的web前端项目- 学生自主选择项目主题，并在教师指导下完成项目开发- 强调项目管理和团队合作的重要性6. 前沿技术和趋势- 介绍前端开发的最新技术和趋势，如Vue.js、React等- 鼓励学生不断学习和尝试新技术，保持前端开发的竞争力四、评价方式1. 日常作业和课堂表现（30%）2. 期中项目成果展示和报告（30%）3. 期末综合考试（40%）五、教学方法本课程采用“理论结合实践”的教学方法，注重学生的实际动手能力和创造力培养。
jQueryUI常用功能实战
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能.二.前言经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI.如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择.使用插件有太多的坏处:1.不利于维护2.增加页面大小3.不利于成员间交流共享,具有学习成本.4.不够健壮, 不能保证插件版本一直更新并修复所有问题.下面就引入今天的主角:jQuery UI三.jQuery UIjQuery UI 是jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI 可以实现底层交互, 各种高级特效, 动画, 并且可定制主题.我们可以用它轻松的构建高度交互的Web应用程序.官方首页:/下载:/download示例和文档:/demos/皮肤:/themeroller/jQuery UI 的在线网站十分强大. 首先就是在下载时可以组装自己想要的功能定制下载:并且针对各种控件不仅提供了详细的参数说明和实例, 还可以随时更换实例的皮肤:本文主要讲解实例, 大家可以通过实例代码快速上手jQuery UI. 使用jQuery UI我们可以再不借助其他插件的情况下完成大部分页面应用, 说其是一个官方的超级UI插件也不为过. 包含所有功能的jQuery UI类库文件为188K, 启用Gzip压缩后是45K. 虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受.()目前还没有jQuery UI的中文教程. 因为本文是实战篇, 所以不会仔细讲解基础内容. 在后面的章节中我会加入jQuery UI的基础教程.争取成为中文jQuery UI第一教程.四. 准备工作我将所有相关的文件, 包括各种类库文件, Theme模板放置在如下路径:/JSLib/此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织.另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN 本文的实例的所有引用都使用WebConfig.ResourceServer 这个属性:public class WebConfig{public static string ResourceServer = @"http://www.dotn /";}五.弹出层对话框弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景.1. 艺龙网应用场景举例(1) 静态提示类弹出层. 弹出层的内容是固定的.(2) 动态提示类弹出层. 弹出层内容是根据事件源变化的.(3)遮罩类弹出层. 弹出时背景变灰并不可点击.2. 应用实例使用jQuery UI 的Dialog 组件. 我以轻松实现上面三种效果.Dialog组件的主要特点是可以拖动(Draggable), 可以改变大小(Resizable) .示例完整代码如下:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional/ /EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 弹出层应用实例 Dialog</title><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vad er--><link rel="stylesheet"type="text/css"href="<%=WebConf ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script><script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css"></style></head><body><!-- Demo 静态提示类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3><div><span id="spanShowTip1">显示提示</span> &nb sp; <span id="spanShowTip2">显示提示</span> <span id="spanShowTip3">显示提示</span> &nb sp; <span id="spanShowTip4">显示提示</span> </div></div><br /><br /><!-- Demo 动态提示类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3><div><span id="spanShowDataTip1" data="颜色是红色">红色</span> <span id="spanShowDataTip2" data="颜色是绿色">绿色</span> </div></div><br /><br /><!-- Demo 遮罩类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 弹出IFrame </h3><div><input type="button" id="btnShowIframe" name="b tnShowIframe" value="显示弹出层"/></div></div><!-- 提示类弹出层 --><div id="divTip" title="自定义标题"><p>弹出层</p></div><!-- 遮罩类弹出层 --><div id="divIframe" title="iFrame弹出层" style="text-al ign:center;"><iframe src="" width="450px" he ight="230px"></iframe></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){//静态提示类弹出层$("span[id^=spanShowTip]").css("cursor", "point er").click(function(event){$("*").stop();event.stopPropagation();var top = $(event.target).offset().top + 20;var left = $(event.target).offset().left;$("#divTip").dialog("option", "position", [l eft, top]);$("#divTip").dialog("open");});//动态提出类弹出层$("span[id^=spanShowDataTip]").css("cursor", "p ointer").click(function(event){$("*").stop();$("#divTip").dialog("close");event.stopPropagation();var top = $(event.target).offset().top + 20;var left = $(event.target).offset().left;$("#divTip").html($(event.target).attr("dat a"));$("#divTip").dialog("option", "position", [l eft, top]);$("#divTip").dialog("open");});//遮罩类弹出层$("#btnShowIframe").click(function(event){event.preventDefault();event.stopPropagation();$("#divIframe").dialog("open");});//单击自身取消冒泡$("#divTip, #divIframe").bind("click", function (event){event.stopPropagation();});//document对象单击隐藏所有弹出层$(document).bind("click", function(event){$("#divTip").dialog("close");$("#divIframe").dialog("close");});});/*==========加载时执行的语句==========*/$(function(){//初始化提示类弹出层$("#divTip").dialog({show: null,bgiframe: false,autoOpen: false});//初始化遮罩类弹出层$("#divIframe").dialog({show: null,bgiframe: false,autoOpen: false,width: 500,height: 300,draggable: true, resizable: false,modal: true});});</script></body></html>效果如图:静态提示类弹出层动态提示类弹出层:遮罩类弹出层:3.关键点讲解(1)计算弹出层位置提示类弹出框最重要的是计算弹出框的位置. 通过事件对象获取到事件源, 使用offset()函数计算事件源相对于document的位置:var top = $(event.target).offset().top;var left = $(event.target).offset().left;需要将弹出层放在Body元素中的第一层.即父类因为是相对于document, 即页面左上角的位置, 所以需要将弹出层放在就是body. 如果包含在其他元素中, 需要确定任何一个父类的position样式设置为了relative.计算出来的top和left是事件源的位置, 在此位置显示会将事件源对象遮盖住. 所以通常需要手工做一些偏移, 比如top+20.(2) 取消冒泡和浏览器默认行为如果我们为document对象绑定了单击后关闭弹出层的事件, 那么就一定要取消事件的冒泡. 使用event 对象的stopPropagation()方法可以取消冒泡.event.stopPropagation();对于具有默认行为的元素,比如提交按钮的提交表单行为, <a>元素的超链接行为等, 我们如果在这些元素上应用事件, 还需要取消它们的默认行为:event.preventDefault();(3) 设置动画效果与取消动画通过设置dialog的配置项的show属性, 可以设置显示dialog时候的动画效果:$('.selector').dialog({ show: 'slide' });show默认为null即无动画, 可以是使用下列值:'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.对于这些动画的效果, 可以在此页观看:/demos/show/当一个动画效果执行时, 如果用户在此对这个元素进行操作, 就会出现各种问题, 比如定位不准确等. 所以如果应用了动画, 我们在对其操作时需要使用stop()函数来停止动画, 通常是停止虽有元素的动画:$("*").stop();但是即使停止了动画再进行操作, 如果操作的太快也容易产生问题. 所以至于是否使用动画需要经过权衡决定.(4) 动态提示类弹出层的数据传递动态提示类弹出层的数据是不同的, 本文实例使用的是将数据存储在元素属性data上:<span id="spanShowDataTip1"data="颜色是红色">红色</span>这是一种简单直观的方式. 比较容易编程实现(尤其是在使用MVC编程模型的时候.)还有一种常用方式是使用javascript变量存储数据.这两种方式在第5章时有过讲解:/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html(5)更换主题大家注意实例中的弹出层没有为其编辑任何样式, 但是显示出来后已经被美化过了. 这是因为我引用了jQ uery UI的主题:<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/>注释中有很多的主题, 只需要将引用路径中的"redmond"改为其中任何一个, 弹出层的样式会立刻发生变化.VS中有一个Bug, 就是针对link标签, href中的语句块编译有问题, 某些情况下<%%>不被编辑解析. 所以我使用上面代码中的方式构造href属性值.()可以在下面的地址查看各个主题的效果:/themeroller/#themeGallery六.Tab标签不刷新页面, 在页面中的不同标签间切换:本实例通过jQuery UI的Tabs组件实现. Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.1.应用实例源代码:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 弹出层应用实例 Dialog</title><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css"></style></head><body><!--Demo.默认Tab与Ajax Tab --><div id="tabs1" style="width:300px;"><ul><li><a href="#tabs1-1">One</a></li><!-- Ajax Tab --><li><a href="TabData.htm">Two</a></li><li><a href="#tabs1-3">Three</a></li></ul><div id="tabs1-1"><p>Tab1内容</p></div><div id="tabs1-3"><p>Tab3内容</p></div></div><br /><br /><br /><!--Demo. 可折叠的Tab --><div id="tabs2" style="width: 300px;"><ul><li><a href="#tabs2-1">One</a></li> <li><a href="#tabs2-2">Two</a></li> <li><a href="#tabs2-3">Three</a></li> </ul><div id="tabs2-1"><p>Tab1内容</p></div><div id="tabs2-2"><p>Tab2内容</p></div><div id="tabs2-3"><p>Tab3内容</p></div></div><br /><br /><br /><!--Demo. 鼠标滑动即切换的Tab --><div id="tabs3" style="width: 300px;"><ul><li><a href="#tabs3-1">One</a></li> <li><a href="#tabs3-2">Two</a></li> <li><a href="#tabs3-3">Three</a></li> </ul><div id="tabs3-1"><p>Tab1内容</p></div><div id="tabs3-2"><p>Tab2内容</p></div><div id="tabs3-3"><p>Tab3内容</p></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){});/*==========加载时执行的语句==========*/ $(function(){//默认Tabs$("#tabs1").tabs();//可折叠的Tabs$("#tabs2").tabs({collapsible: true});//鼠标滑动即切换的Tabs$("#tabs3").tabs({event: "mouseover"});});</script></body></html>效果:1. 默认设置的Tabs, Two标签内容使用Ajax获取2.再折叠tab3.鼠标滑动即切换的tab2.要点讲解(1) 注意Tabs中的HTML结构.使用ul构建标签. 内容div一定要和标签关联, 没有关联的div将不被处理直接显示.容器中.内容放入指定容器中(2) 使用Ajax可以不指定内容容器, 但是也可以将Ajax内容放入指定<li><a href="hello/world.html"title="Todo Overview"> ... </a></li><div id="Todo_Overview"> ... </div>(3) 活用事件tab有很多事件:select, load, show, add, remove, enable, disable使用这些事件可以完成很多复杂任务. 需要注意事件的签名:$('#example').bind('tabsselect', function(event, ui) { // Objects available in the function context:ui.tab // anchor element of the selected (clicked)tabui.panel // element, that contains the selected/clicked tab contentsui.index // zero-based index of the selected (clicked) tab});第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.比如我们可以在事件中做验证:$('#example').tabs({select: function(event, ui) {var isValid = ... // form validation returning trueor falsereturn isValid;}});或者当添加一个tab时立刻切换到选中状态:var $tabs = $('#example').tabs({add: function(event, ui) {$tabs.tabs('select', '#' + ui.panel.id);}});活学活用, 更多应用大家也可以参见tab组件的官方文档:/demos/tabs七. 手风琴菜单使用jQuery UI的accordion组件可以实现手风琴菜单. 效果见下图.accordion文档地址: /demos/accordion/1.实例效果2.实例代码<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional/ /EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 手风琴菜单应用实例 Accordion </title> <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vad er--><link rel="stylesheet"type="text/css"href="<%=WebConf ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css">body{font-size: 12px;}</style></head><body><!-- Demo. 默认配置的Accordion菜单 --><div style="width: 300px; float:left; margin-left:20px; "><div id="accordion1"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><!-- Demo. 取消自动高度, 可折叠 --><div style="width: 300px; float: left; margin-left: 20p x;"><div id="accordion2"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><!-- Demo. 鼠标滑动触发, 自定义图标 --><div style="width: 300px; float: left; margin-left: 20p x;"><div id="accordion3"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){});/*==========加载时执行的语句==========*/$(function(){//默认配置的Accordion菜单$("#accordion1").accordion();//取消自动高度, 可折叠$("#accordion2").accordion({autoHeight:false,collapsible: true});//鼠标滑动触发, 自定义图标$("#accordion3").accordion({icons: {header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circl e-arrow-s"},event: "mouseover"});});</script></body></html>3. 关键点讲解(1) 注意高度设置过小问题当包含accordion控件的容器高度设计过小时, 在FireFox3中在此容器后面的内容会被accordion控件部分遮盖. 在IE中没有此问题. 经检查是因为容器高度小于菜单高度导致. 所以我们在应用时应当注意不要将容器高度设置过小.(2) 部分关键属性autoHeight: 设置是否自动将内容高度设置为容器高度.collapsible: 设置是否可折叠一般上面两个配合使用, 以为折叠后肯定会改变菜单高度, 会导致autoHeight设置为true无效.更多属性和事件使用请参阅官方文档.八.总结本章简单介绍了jQueryUI, 并且使用jQuery UI完成了弹出层,tabs,手风琴菜单的应用实例. 使用jQu ery UI可以不需要额外寻找插件. 并且实现简单.但是有些功能是必须使用插件完成的. 下一张讲解两个插件实例: 自动完成插件AutoComplete 和表单验证插件jQuery Validate.本章源代码下载:/zhangziqiu/Code-jQueryStudy-10.rar。