第5章 jQuery-Web前端开发-刘敏娜-清华大学出版社

合集下载

第7章 Dreamweaver基础-Web前端开发-刘敏娜-清华大学出版社

8
7.2.1 界面布局
6. 【面板组】
组合在一个标题下面的多个相关的面板的集合。可以通过单击组名称左侧的展开箭头将这多个面板在折叠或展开之间切换。
7. 【文件面板】
用来显示，可以通过【窗口】菜单下的【文件】选项打开。
3
Web前端开发基础 Contents
1 Dreamweaver CS6简介 2 Dreamweaver cs6工作界面
3 站点部署
4 文本处理 5 建立超级链接
6 在网页中使用图像 7 网页中插入多媒体元素 8 使用表格布局 9 使用行为
7.2 Dreamweaver cs6工作界面
• Dreamweaver的工作区域中集合了一系列的窗口、面板和检查器，在进行网页制作之前先要来对Dreamweaver的工作区有一定的了解，知道如何使用检查器和面板进行设置适合用户风格的界面。
第7章 Dreamweaver基础
Subtitle here
Speaker name and title
Web前端开发基础 Contents
1 Dreamweaver CS6简介 2 Dreamweaver cs6工作界面
3 站点部署
4 文本处理 5 建立超级链接
6 在网页中使用图像 7 网页中插入多媒体元素 8 使用表格布局 9 使用行为
3. 【状态栏】
【状态栏】位于窗口的底部，主要用来提供与当前文档相关的信息。这部分包括选择标签、选取工具、手形工具、缩放工具等。其中的选择标签用来显示环绕当前选定内容html标签的层次结构，单击任何标签可以选择该标签及其全部内容。
切换【状态栏】的上的按钮显示效果。
可以调试网页在手机屏幕，平板电脑和显示器屏幕的

javaweb清华大学出版社

404错误表示的是客户端错误，表示路径出错 Tomcat将目录的列表功能关闭了，所以现在要修改Tomcat中的web.xml文件
第一个程序Hello World。
hello.jsp <html> <head> <title>HELLO WORLD!!!</title> </head> <body> <% out.println("Hello World!!!<br>"); out.println("Hello World!!!"); %> </body> </html>
万维网上服务器所提供的文档需要通过浏览器进行访问，浏览器是一种程序。
1993年，美国伊利诺伊大学的 Marc Andreessen开发并发布了第一个图形化的浏览器，名为Mosaic。 Mosaic非常受欢迎，以至于在一年后Andreessen离开学校创办了著名的Netscape公司（Netscape Communications Corp.），其开发的浏览器称为Netscape Navigator。 1994年，CERN和MIT（Massachusetts Institute of Technology）签署了建立万维网联盟（World Wide Web Consortium，简称W3C）的协议，该组织致力于进一步开发Web、对协议进行标准化等工作。 W3C的主页是/Consortium/，在这里可以获得关于Web的最新信息。
配置虚拟目录
Tomcat中配置虚拟目录是必须的，因为所有的开发有可能是在其他目录中完成的，当然，如果想要配置需要目录，则首先也有严格的要求，配置的虚拟目录里必须有以下的目录结构： WEB ROOT->一般情况下虚拟目录要配置到此文件夹之中 WEB-INF web.xml:配置文件，有格式要求但是，此时不知道文件的格式是什么，那么可以直接从Tomcat 中找到此配置要求。

第9章 Web前端开发实验-Web前端开发-刘敏娜-清华大学出版社

实验1 CSS应用实验内容及要求：设计一个网页，页面内容为 “I can designe HTML page!”，背景色为黑色，字体颜色为白色，页面的样式使用内嵌的 CSS定义。说明：页面的背景色由body标签中的bgcolor属性控制，页面文本颜色由text属性控制。
8
9.2 CSS基础
实验1 文字段落标记的应用实验内容及要求： 1.新建一个网页文件，添加文字。 2.使用h2标题标记设置主标题文字，使用文字格式标记设置标题颜色为#006600，文字居中对齐，副标题颜色为 #999，居中对齐。 3.正文文字字体微软雅黑，字号4号，颜色#333。 4.对标题文字设置超级链接，链接至http//。
13Leabharlann Contents1 HTML操作 2 CSS基础
3 DIV+CSS布局
4 Javascript实训 5 jQuery实训 6 HTML5应用 7 Dreamweaver实训
9.4 Javascript实训
实验目标： • 掌握Javascript的基本语法知识 • 熟悉网页元素的获取方法 • 掌握Javascript的选择结构和循环结构定义 • 掌握定时器的定义方法实验1 制作简易计算器实验内容及要求：制作一个简易计算器，能够对两个不为0的数进行“+、-、*、/”运算，用户输入两个运算数，选择运算符之后点击“=”可以计算结果。操作界面如下图所示。
3
9.1 HTML操作
实验2 列表标记应用实验内容及要求：使用有序列表标记和<img>标记完成如下图所示的网页。
4
9.1 HTML操作
实验3 表格标记应用实验内容及要求：使用HTML表格标记制作如下图所示的课程表。

jQuery系列教程一至五章节

jquery中文指导:15天学会jquery [jQuery中文社区]
页码，1/10
15天学会jQuery y(Day 0)---JQuery - What, Why, When, Where, Who
what jQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说，这使得javascript更加有趣。如果你这样想：“孩子，我需要另外一个javascript库，就好比我I need another hole in my head”那么加入这个俱乐部吧。这正是我第一次遇到的时候所想的。我已经用过了Moo.fx, Scriptaculous, TW-SACK, 和 Prototype. 我曾参与了RICO, Yahoo YUI和其他一些库的开发。没有了PHPjavascript和我一点也不亲近了。但是我还是尽全力保持头脑清醒，并尽量保持用AJAX去思考。所以当我遇到jQuery的时候我想:“还需要另外一个javascript库吗?不了,谢谢…” why 为什么我改变我我对jQuery的看法，以及为什么你要考虑去使用它? 很简单,只要你看一眼过使用jQuery的页面你就会发现它是如此的简单易用.只用很少的几行,就能表现出很优雅的效果. 有一天当我突然看到一些用 jQuery写的代码时我一下子豁然开朗了. 早茶的过程中,我例行公务的去翻阅我的订阅,去看每日必看的设计博客的时候我看到了一个用jQuery写的javascript的例子.事实证明,这些代码还是有些和浏览器关联的bug,不过这些概念还是我以前从来没有见过的. 还有那些代码… 代码看起来很简单看起来不像我以前见过的.但也不无道理. 我开始通读文档,并且惊奇的发现用一点点代码竟然能做这么多事情. when 你应当在你需要的时候使用jQuery. 给你一个小型的库文件 DOM强大的控制能力不费吹灰之力的工作,和少许的努力. 或者快速的通过AJAX 没有大量无用的代码和一些基本的动画效果但是如果你需要超级花式效果,动画,拖放,和超级平稳动画,那么你可能想使用Prototype.他是一个有大量动画效果的类库. where 你可以jQuery的官方网站下载到他的源代码(10K). who

网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.7

5.7 CSS内容属性
语法：content : attr(attribute) | counter(name) | counter(name, list-styletype) | counters(name, string) | counters(name, string, list-style-type) | noclose-quote | no-open-quote | close-quote | open-quote | string | url (url)
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
第5章 CSS3的属性
5.7 CSS内容属性
本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。
目录
第5章 CSS3的属性 5.1 CSS背景属性 5.2 CSS字体属性 5.3 CSS文本属性 5.4 CSS尺寸属性 5.5 CSS列表属性 5.6 CSS表格属性 5.7 CSS内容属性 5.8 CSS属性的应用 5.9 实训——制作社区网页面习题5
参数：content属性值见表5-2。示例： p::after { content: url("http:"); text-decoration: none; } p::before { content: url("beep.wav") } 【例5-19】content属性示例，本例文件5-19.html的显示效果如图5-22所示。
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
祝

5.AJAX-JavaScript前端开发入门-吕云翔-清华大学出版社

AJAX概述
异步处理以建议搜索场景为例，异步处理的过程： (1)用户在搜索栏中输入关键字。 (2)浏览器检测到输入框中有字符出现，将该字符发送到服务器。 (3)服务器处理该字符，用户此时可以继续输入更多或者使用页面的其他功能，当用户继续输入时浏览器重复(2)中步骤，将更长非关键字交给服务器处理。 (4)服务器返回结果，出现建议列表可供用户选择，用户可以选择建议项搜索或者使用自己输入的关键字
AJAX概述
AJAX使用场景
在早年没有使用AJAX技术的网站中，当网页需要与服务端产生交互时需要等待服务器的响应。然后通过重载整个页面来实现数据的更新，而AJAX就是一种能够在不需要重新加载整个页面的情况下，能够更新部分网页的技术。所以当我们需要在一些比较小的功能模块中与服务器进行交互时，就可以使用AJAX技术来只对局部进行更新。
AJAX用法
服务器响应 reponseXML是服务器返回的XML形式的数据，因此我们需要使用XML的解析方法来解析这个属性返回的数据，例如：
AJAX实例
AJAX实例一：搜索建议首先，我们先创建一个含有输入框的页面，为输入框绑定一个输入事件，并在下面穿件一个<p>用于显示搜索建议结果
AJAX概述 AJAX用法 AJAX实例
AJAX概述
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），因此它是一种把JavaScript和XML两种技术联合起来解决特殊问题的技术，当然其中还包含了HTML、CSS等技术。这门技术非常常用，在 JavaScript和XML技术的发展过程中就有很多人尝试吧这两门技术结合起来使用，随着这些技术的不断发展和结合，最终形成了现在十分流行的AJAX技术。

Web前端开发实例教程PPT课件(共13章)第12章 jQuery动画与UI插件

12.6.2 自动完成
【例12-5】通过使用自动完成实现根据用户的输入，智能显示查询列表的功能，如果查询列表过长，则可以通过为autocomplete 设置max-height来防止菜单显示太长。
12.6.3 标签页
标签页（Tabs）是一种多面板的单内容区，每个面板与列表中的标题相关，单击标签页，可以切换显示不同的逻辑内容。标签页（Tabs）必须在一个有序（<ol>）或无序（<ul>）列表
习题12
4．使用jQuery UI折叠面板插件制作如图12-14所示的页面。页面加载后，折叠面板中的每个子面板都带有图标，单击“切换图标”按钮，隐藏子面板的图标，可以反复切换图标的显示与隐藏状态。 5．使用jQuery UI自动完成插件制作如图12-15所示的页面。在文本框中输入关键字，实现“分类”智能查询。 6．通过使用日期选择器（Datepicker）插件选择日期并格式化，显示在文本框中，在选择日期时，同时提供两个月的日期供选择，而且在选择时，可以修改年份信息和月份信息，如图12-16所示。
$(selector).slideToggle(speed,callback)
12.4.3 交替伸缩效果
【例12-3】滑动效果示例。单击“向下展开”按钮，div元素中的内容从上往下逐渐展开；单击“向上收缩”按钮，div元素中的内容从下往上逐渐折叠；单击“交替伸缩”按钮，div元素中的内容可以向下展开也可以向上收缩。
12.5.3 jQuery UI的使用
在网页中使用jQuery UI插件时，需要将解压之后的jquery-ui1.12.1.custom文件夹复制到网页所在的文件夹下，然后在网页的 <head>区域添加jquery-ui.css文件、jquery-ui.js文件及 external/jquery文件夹下jquery.js文件的引用，代码如下：

web课程要点

第1章 Web前端开发技术综述
清华大学出版社
Page: 9
1.3.1
HTML超文本标记语言的发展历史
HTML1.0：1993年6月作为互联网工程工作小组（IETF）工作草案发布；
Web前端开发技术
HTML2.0：1995年11月作为RFC 1866发布，在RFC 2854 于2000年6月发布之后被宣布已经过时；
第1章 Web前端开发技术综述清华大学出版社
Page: 3
Web前端开发技术
1.1.1 Web的起源
追溯到遥远的1980年Tim Berners-Lee构建的ENQUIRE项目。
Web前端开发技术
1989年3月，Tim Berners-Lee撰写了《关于信息化管理的建议》一文，文中提及 ENQUIRE 并且描述了一个更加精巧的管理模型。 1990年11月12日他和Robert Cailliau（罗伯特· 卡里奥）合作提出了一个更加正式的关于万维网的建议。在1990年11月13日他在一台NeXT工作站上写了第一个网页以实现他文中的想法。
1991年8月6日，他在alt.hypertext新闻组上贴了万维网项目简介的文章。这一天也标志着因特网上万维网公共服务的首次亮相。
第1章 Web前端开发技术综述清华大学出版社
Page: 4
1.1.1 Web的起源（续）
1994年10月非赢利性的万维网联盟W3C（World Wide Web Consortium）在麻省理工学院计算机科学实验室成立。
第1章 Web前端开发技术综述
清华大学出版社
Page: 6
1.1.3
Web工作原理
Web前端开发技术
第1章 Web前端开发技术综述

第1章 Web前端开发基础-Web前端开发-刘敏娜-清华大学出版社

1.4 Web页面在地址栏中输入要访问的网页的url，通过http协议向url 所在的服务器发起服务请求
服务处理请求
根据浏览器发起的请求，把 url地址转换成网页所在服务器上的实际路径，找到相应的网页文件
3
反馈网页
网页中仅包含html标记，服务器直接通过http协议将文档发送到客户端，如果还包括jsp程序或者其他动态网站程序，则通过服务器执行后将运行结果发送给客户端
3
1.1 web介绍
Web起源
WWW的开发阶段 WWW的发展阶段 WWW商业化阶段无所不在的WWW
Web版本
Web 1.0 Web 2.0 Web 3.0
4
Web前端开发基础 Contents
1 Web介绍 2 Web开发 3 Web基本概念 4 Web页面浏览过程 5 Web前端开发技术 6 主流Web浏览器 7 Web前端开发流程 8 Web前端开发工具 9 Web前端工程师从业要求 10 网站鉴赏能力培养
Web也称万维网。Web的英文全称是“World Wide Web”，简称 WWW。 Web是基于“超文本”的信息查询和发布系统。万维网将Internet 上众多的Web服务器提供的资源连接起来，组成一个海量的信息网。 Web是英国的TimBerners-Lee 1980年在欧洲共同体的一个大型科研机构任职时发明的。通过Web平台，互联网上的资源在一个网页里展示出来，而且资源之间可以建立链接。
4
客户端显示网页
浏览器解释html文档，将结果显示在客户端浏览器
1
2
3
4
10
Web前端开发基础 Contents
1 Web介绍
2 Web开发 3 Web基本概念 4 Web页面浏览过程 5 Web前端开发技术 6 主流Web浏览器 7 Web前端开发流程 8 Web前端开发工具 9 Web前端工程师从业要求 10 网站鉴赏能力培养

网页特效设计基础第5章 jQuery中的事件处理和动画效果

人们常说“事件是脚本语言的灵魂”，事件使页面具有了动态性和响应性，如果没有事件将很难完成页面与用户之间的交互。在传统的 JavaScript 中内置了一些事件响应的方式，但是 jQuery 增强、优化并扩展了基本的事件处理机制。
5.1 jQuery 中的事件处理
5.1.1 页面加载响应事件
events：一个或多个用空格分隔的事件类型和可选的命名空间，如"click"事件。
selector：一个最初传递到.on()事件处理程序附加的选择器。
on(events,[selector],[data],fn)
events：一个或多个用空格分隔的事件类型和可选的命名空间，如"click"事件。
selector：可选参数。
data：当一个事件被触发时要传递 event.data 给事件处理函数。
fn：该事件被触发时执行的函数。当 fn=false 时可以做一个函数的简写，返回值为 false。
5.1.2 jQuery 中的事件
只有页面加载显然是不够的，程序在其他的时候也需要完成某个任务。比）事件以及失去焦点（onblur）事件等。
在不同的浏览器中事件名称是不同的，例如，在IE浏览器中的事件名称大部分都含有 on，例如 onkeypress() 事件，但是在火狐浏览器却没有这个事件名称，jQuery统一了所有事件的名称。jQuery 中的事件如表 5-1 所示。
$(document).ready()方法是事件模块中最重要的一个函数，它极大地提高了 Web 响应速度。$(document) 是获取整个文档对象，从这个方法名称来理解，就是获取就绪的文档。
方法的书写格式为：
$(document).ready(function() { //在这里写代码

网页设计与开发HTML、CSS、JavaScript实例教程 (郑娅峰著) 清华大学出版社课后习题1-10章答案

第一章习题1．HTML指的是（ A ）。

A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。

A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。

A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看源文件______命令，可以在打开的记事本中查看到网页的源代码。

5．实现网页交互性的核心技术是_______ JavaScript _______________。

6．CSS的全称是________ Cascading Style Sheet __________ ______。

7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus ___________。

8．URL的全称是____Uniform Resource Locator _____________________________。

《JavaScript jQuery前端开发基础教程微课版》读书笔记思维导图PPT模板下载

最新版读书笔记，下载可以直接修改
《JavaScript jQuery前端开发基础教程微课版》
思维导图PPT模板
本书关键字分析思维导图
实践
内容
习题
对象
语法
部分
知识
编程
第章
基础使用
系统
小结
函数
选择器
页面
简介
方法
前端开发
01 内容提要
目录
02
第1章 JavaScript 基础
03 第2章 JavaScript 核心语法基础
5
14.5 习题
参考答案
谢谢观看
9.1 jQuery()函数
9.2 基础选择器
9.3 层级选择器 9.4 过滤器
9.6 小结
9.5 编程实践：带提示的课表
9.7 习题
第10章操作页面元素
01
10.1 元素内容操作
02
10.2 插入结点
03
10.3 包装结点
04
10.4 替换结点
06
10.6 复制结点
05
10.5 删除结点
05
5.5 小结
06
5.6 习题
第6章浏览器对象
01
6.1 Window 对象
02
6.2 Documen t对象
03
6.3 表单对象
04
6.4 编程实践：动态人员列表
05
6.5 小结
06
6.6 习题
第7章 AJAX
7.1 使用
1
AJAX完成
HTTP请求
7.2 使用
2
<script>完

网站设计与Web应用开发技术(第三版) 第7章 Web的未来

清华大学出版社
第11页
网站设计与Web应用开发技术(第三版)
清华大学出版社
7.2 XML及其相关技术
XML的使用前景
商务的自动化处理
丰富的标签完全可以描述不同类型的单据，可以被加密，并且很容易附加上数字签名等
信息发布
客户可根据其需求选择和制作不同的应用程序以处理数据，构成广泛的、通用的分布式计算
教学重点
XML及相关技术
清华大学出版社
第3页
网站设计与Web应用开发技术(第三版)
教学过程
XML及其相关技术 XML范例 Web Assembly技术移动开发和混合开发模式
清华大学出版社
第4页
网站设计与Web应用开发技术(第三版)
7.1 Web的发展路径
信息共享信息共建知识传承知识分配语用网云计算和物联网人工智能
清华大学出版社
7.3 WebAssembly技术
WebAssembly的运行原理
开发者用户
C语言
X86
C++
IR
ARM
Rust
MAC
第16页
网站设计与Web应用开发技术(第三版)
清华大学出版社
7.3 WebAssembly技术
WebAssembly的应用
第17页
网站设计与Web应用开发技术(第三版)
CSS、XSL和XSLT
XML Style Language和XML Stylesheet
Language Transformation；分别定义了
XML的显示和文档类型的转换方式
第9页
网站设计与Web应用开发技术(第三版)
清华大学出版社

web课程

2.JavaScript组成一个完整的JavaScript实现是由以下3个不同部分组成的：
核心（ECMAScript）文档对象模型（DOM）浏览器对象模型（BOM）
第1章 Web前端开发技术综述
清华大学出版社
Page: 15
1.3.3 JavaScript案例
Web前端开发技术
第1章 Web前端开发技术综述
1991年8月6日，他在alt.hypertext新闻组上贴了万维网项目简介的文章。这一天也标志着因特网上万维网公共服务的首次亮相。
第1章 Web前端开发技术综述清华大学出版社
Page: 4
1.1.1 Web的起源（续）
1994年10月非赢利性的万维网联盟W3C（World Wide Web Consortium）在麻省理工学院计算机科学实验室成立。
Web前端开发技术
第1章 Web前端开发技术综述
建议课时：1-2课时
第1章 Web前端开发技术综述
清华大学出版社
Page: 1
本章学习目标
Web前端开发工程师应掌握以下内容：了解Web发展史；
Web前端开发技术
了解Web前端开发工程师职业需求
掌握Web网站相关的基本概念；理解Web前端开发技术及其在Web网页中的作用；了解常用的Web前端开发工具、浏览器工具，并学会使用。
第1章 Web前端开发技术综述
清华大学出版社
Page: 14
1.3.3 JavaScript
JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃元素和更加精彩的内容。 1.JavaScript由来 Web前端开发技术 JavaScript最初由网景公司（Netscape）的Brendan Eich设计，是一种由Netscape的LiveScript发展而来的客户端脚本语言，主要目的是为了解决服务器端语言，提供数据验证的基本功能。

HTML5+CSS3 Web前端设计基础教程第3版(第5章)

relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间
absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法
1．方法一：额外增加应用“clear: both;”规则的空容器在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在CSS中赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: ”规则清除浮动向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、 left、right、bottom和clip。
表5-1 position属性的取值及其含义

web前端开发教案-Web前端开发-刘敏娜-清华大学出版社

《web前端开发》教案第1单元教案器。

具有跨平台性，可以在Windows、Mac和Linux三个操作系统平台上运行。

Opera浏览器创始于1995年4月。

5.SafariSafari是苹果计算机的最新操作系统Mac OS X中的浏览器，也是iPhone手机、iPodTouch、iPad平板电脑中iOS指定默认浏览器。

它使用了KDE的KHTML作为浏览器的运算核心。

1.7 Web前端开发流程典型的Web前端开发包括以下5个阶段。

（1）制定网站的需求分析：确立建站目标，网站所面向的用户及网站所要实现的功能。

（2）设计阶段：明确网站的栏目组成，页面的内容，网站的链接结构。

（3）制作阶段：使用网页制作软件和图像处理软件来完成网页。

（4）测试阶段：检查网站的链接结构，跨浏览器兼容性，检查页面是否出现显示错误。

（5）维护和更新阶段：使用网页设计软件对网站进行更新和维护。

1.7.1 需求分析明确下面几个问题：1.建网站的目的是什么？产品、服务销售建立一种公益性服务为一种思想、观念、事业作宣传使自己的业务走向世界2.你的主要浏览者是哪类群体？按性别分：女性男性按年龄段分：青少年儿童成人按职业分：学生白领蓝领3.基于明确的受众定位，你希望网站又怎样的特色？以内容为本，访问速度快视觉设计具有特色大量使用图和动画，忽略登录速度打开页面的速度最重要在通常的用户群体分析时，我们去统计一些人口特征，如平均年龄，性别比例，平均文化程度，民族习惯等，根据这些数据去套用普遍的行为和需求，比如年轻人喜欢活泼的颜色和个性的版面结构，老年人喜欢稳重的风格。

采集到用户需求之后，需要将需求转换成文档，便于开发人员使用。

需求文档中应该包括网站建立所需要的软硬件设备、网站的功能描述等信息。

1.7.2 网站设计设计阶段在整个网站开发过程中也是非常重要的，接下来重点分析设计、规划过程中要考虑哪些方面因素。

《web前端开发》教案02第二单元教案第2章HTML-网页骨架结构本章内容与学习目标熟悉HTML基本语法掌握编辑器的使用方法熟悉常见标签及属性的使用方法2.1HTML基础HTML(Hypertext Markup Language，超文本标记语言)，是一种使用文本符号表示，由浏览器解释执行的标记语言。

第8章图书馆网站开发案例-Web前端开发-刘敏娜-清华大学出版社

2.2 硬件环境：采用用户目前已有的硬件环境。
2.3 软件环境：操作系统可以是 windows，linux。
3.
功能需求
3.1 功能划分: 网站的功能有馆藏数目检索，新书通报，书刊荐购，学术信息与动态，新生专栏，联系
我们，资源检索，读者服务，信息服务，网络导航，公告栏等。
3.2 核心功能描述:
书刊荐购：为了加强图书馆与读者之间的沟通与交流，既方便读者推荐图书，也保证图书馆采编人员
ipt脚本
1.页面载入时显示欢迎访问对话框（1）创建js文件在Sublime Text中新建js文件，将文件保存到D:\library\js文件夹，如果没有此文件夹则创建一个文件夹，为文件起名为index.js。（2）为index.html设置link到index.js文件。（3）在index.js文件中定义脚本。
了解读者需求，使图书馆馆藏更符合读者的文献信息需求，通过书刊荐购栏目，广大读者可以在线填写图
书荐购单，图书馆将尽力满足每位读者的荐购请求。
资源检索：分为中文数据库、外文数据库、试用数据库、电子图书、网络免费资源、随书光盘、特色
资源和自建资源等类型，方便读者检索资源。
读者服务：提供读者信息查询、文献续借、文献预约、证件管理、常见问题解答、外借服务、读者教
10
首页分析
首页分为14个模块，结构图如下图所示。
开发分解为3个任务：HTML页面结构设计、CSS样式设计和细节设计。开发过程如下页图所示
11
12
任务1：HTML页面结构设计
操作步骤：（1）Sublime Text中新建HTML文件，将文件保存到D盘library文件夹中，如果没有此文件夹则创建一个文件夹，为文件起名为index.html。注意：文件默认类型为All Files，将类型修改为HTML。（2）录入网页基本结构标记。（3）HTML文件中定义模块，分别是container、logo、navigator、content、c1、c2、c3、c4、 c5、news、recommand、box 、resource、database、hotlink和copyright。

第14章 jQuery-Web编程基础(第2版)-任平红-清华大学出版社

$("input").click(function(){ $(this).hide();
}); }); </script> … <body> <input type="button" value="单击我会消失"/><br/> <input type="button" value="单击我会消失"/><br/> <input type="button" value="单击我会消失"/><br/> <input type="text" value="单击我也会消失"/> </body> …
$(document).ready(function() { alert("Hello World!");
}); </script> </head> <body> </body> </html>
14.2 jQuey选择器
❖ 在CSS中，选择器（或选择符）的作用是选择页面中的某一类元素或者某一个元素。
❖ jQuery是当前最流行的JavaScript库，它封装了很多预定义的对象和实用函数。
❖ jQuery是一个轻量级的JavaScript库，压缩之后只有几十K，它与CSS、浏览器兼容。
❖ 利用jQuery，用户可以更方便地处理HTML文档、事件、实现动画效果、与AJAX交互及创建富有特性的客户端页面等。
$("input").click(function(){ $("#my").css("background-color","orange");

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

5
5.1.4 第一个jQuery程序
【例5.1】jQuery程序示例
1 <html><head>
2
<meta charset="utf-8">
3
<script type="text/javascript" src="jquery-3.3.1.js"></script>
4
<script type="text/javascript">
5.2 jQuery选择器
通过jQuery可以对HTML元素进行动态管理，在操作网页元素之前先需要通过jQuery选择器引用元素。在 jQuery中有基础选择器和层次选择器。选择器的写法$(基础选择器/层次选择器) 5.2.1 基础选择器
1.标签选择器标签选择器表示通过HTML标签名称选择网页元素。如通过$("table")可以选取网页中的table元素。语法：$("标签名") 2.类选择器类选择器是根据网页元素类名来选取网页元素。如在网页中定义了一个名为title的css类，在p标记中应用了该样式， <p class="title">，如果要引用该p对象，可以通过类选择器表示，$(".title")。语法： $(".类名") 3. id选择器 id选择器是通过网页元素的id号选择对应的HTML元素。语法：$("#id号")
3
5.1.2 jQuery功能
查询HTML元素，修改HTML元素的属性和样式。
动态生成网页元素，并插入到原来的布局中，读取和改变元素的内容、属性值以及样式。
jQuery动画特效
与ajax进行交互，实现提交数据局部刷新网页。
4
5.1.3 jQuery下载
任何一款网页编辑工具都可以用来编辑和调试jQuery程序，如HBuilder，SublimeText。如果编写jQuery脚本，需要在官网下载jQuery脚本库。最新的jQuery版本是3.3.1，每个版本对应三种脚本库，compressed版、uncompressed版和 source map版。compressed是压缩版，文件比较小，适合项目开发，但是不便于调试。 Uncompressed是没有经过压缩处理的，文件较大，但是方便调试。Source map是一个信息文件，里面储存信息转换后的代码的位置所对应的转换前的位置，方便进行javascript还原性调试。通过 Source map，调试工具将直接显示原始代码，而不是转换后的代码。本书使用最新的版本jQuery 3.3.1，在使用时需要将其复制到站点根目录下。
HTML文件中的元素是有一定的层次关系的，如处于根部的是HTML元素，其下有头部元素和主体元素，它们分别有自己的子元素，如head中包含title和meta等元素。 1.祖先—后代选择器利用祖先后代选择器可以选取某个祖先元素的指定后代元素。如利用$("div p ")可以选择div中所有的p元素。语法：$("祖先选择器后代选择器") 2.父>子选择器使用父>子选择器可以选取指定父元素中的某些子元素。如通过$("div>p ")可以选取div中所有的p元素。语法：$("父选择器>子选择器")
10
5.2.2 层次选择器
3.前+后选择器前+后选择器可以选择指定的前面元素后面的元素。语法：$("前元素+后元素") 4.前~兄弟选择器使用前~兄弟选择器可以引用前面元素后面的兄弟元素。语法：$("前元素+兄弟元素")
11
5.2.3 过滤器
利用过滤器可以对选中的数据进行过滤。过滤器的使用方法：$("选择器:过滤器")。 1.基本过滤器 :first匹配找到的第一个元素。如$("input:first")选择网页中的第一个input元素。 :last匹配找到的最后一个元素。如$("input:last")选择网页中的最后一个input元素。 :not过滤与给定选择器匹配的元素。如$("input:not(.one)")表示引用input中class不是one的元素。 :even匹配所有索引值是偶数的元素。如$("input:even")表示引用input元素中索引值为偶数的元素，索引值从0开始表示，所以表示的是第奇数次出现的 input元素。 :odd匹配所有索引值是奇数的元素。如$("input:odd")表示引用input元素中索引值为奇数的元素，索引值从0开始表示，所以表示的是第偶数次出现的 input元素。 :eq(index)匹配索引值是index的元素。如$("input:eq(0)")匹配input中索引号为0的元素。 :gt(index)匹配索引值大于index的元素。如$("input:gt(0)") 匹配input元素索引值大于0的元素。 :lt(index)匹配索引值小于index的元素。如$("input:lt(2)") 匹配input元素中索引值小于2的元素。 :header匹配h1-h6的元素。语法$(":header ")。
第5章 jQuery
Speaker name and ty选择器 3 设置HTML属性及CSS样式 4 jQuery常见事件方法 5 jQuery+ajax
5.1.1 jQuery概述
jQuery是一个快速、简洁的JavaScript 函数库。 jQuery设计宗旨是“write Less，Do More”（写更少的代码做更多的事情）。 jQuery提供一种简便的JavaScript设计模式，在jQuery中优化了HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery兼容各种主流浏览器，如IE 6.0以上、FF 1.5以上、Safari 2.0以上、Opera 9.0以上。
5
$(document).ready(function(){
6
alert("hello world!");
})
7
</script>
8 </head>
9 <body>
10 </body>
11</html>
6
Contents
1 jQuery基础 2 jQuery选择器 3 设置HTML属性及CSS样式 4 jQuery常见事件方法 5 jQuery+ajax
8
5.2.1 基础选择器-续上页
4.选择所有元素在jQuery中，使用通配符“*”表示引用所有HTML元素。语法：$("*") 5.同时选择多个元素如果同时对多个HTML元素进行相同的操作，可以通过逗号运算符一次性引用多个元素。语法：$("选择器1,选择器2,选择器3")
9
5.2.2 层次选择器