初识javascript及jquery在线视频

大家好

在前面的课程中

我们学习了制作网页框架的html语言

以及使网页更加美化的css语言

但是我们的网页始终是静止而不生动的

本节课我们来介绍一下javascript语言

使我们的网页生动起来

javascript是一种属于网络的脚本语言

并且已经被广泛应用于

web应用的开发

用来为网页添加各式各样的动态功能

实现更流畅美观的动态交互效果

通常javascript脚本

是通过嵌入在html中

来实现自身的功能的

javascript脚本语言

同其它语言一样

有它自身的写法和基本数据类型

表达式和算术运算符

以及程序的基本程序框架

来完成复杂的交互功能

例如嵌入动态文本与html页面

对浏览器事件做出响应

读写html元素

在数据被提交到服务器之前

验证数据

检测访问的浏览器信息等等

这些都是用javascript语言

来实现的功能

由于javascript语言

对于我们初学者来说有一些复杂

那么下面我给大家介绍一下

非常流行的jquery框架

jquery是一个快速简捷的javascript框架

是一个优秀的javascript代码库

jquery倡导的是

写更少的代码做更多的事情

它封装了javascript常用的功能代码

提供了一种简便的实用的

javascript的设计模式

优化了html文档的操作

事件处理 动画设计

和数据交互的操作

jquery同时可以和css框架

非常好的结合使用

具有高效灵活的css选择器

并且可以对css选择器进行扩展

拥有便捷的插件扩展机制

jquery同时可以和css框架

非常好的结合使用

具有高效灵活的css选择器

并且可对css选择器进行扩展

拥有便捷的插件扩展机制

和丰富的插件

并且兼容各种主流的浏览器

我们现在呢回到编程环境当中

初步的来了解一下javascript的写法

和引用方法

和css 比较类似

javascript的用法呢也是有两种

第一种是写在head标签当中

它的写法是script type

类型是text/javascript

然后/script

所有的javascript代码

可以写在html文件当中的这个部分

会集中的写在这个部分

另外一种方法呢就是

外部引用的形式

我们可以用外部引用的形式

来引用自己所写好的js文件

这个js文件会存在js文件夹当中

也可以引用各种javascript的效果库

功能库等这些框架文件

那么由于javascript是一个

是另外的一门程序语言

我们会在其它课程

就是javascript课程当中

再有讲解

那么我们在我们本门课程中

就不做过多的讲解了

在这里呢我们给大家介绍一个

非常实用也很常用的一个javascript框架

就是jquery框架

那么我们先来下载这个框架

我们呢先来打开jquery的官网

jquery.com

然后点击下载

好 在这里呢有一个下载列表

里面有不同版本的jquery文件

这种有压缩的和未压缩的

压缩的这种模式呢是

我们基本上看不明白它的代码内容

这种未压缩过的形式

是可以看明白它的代码内容的

如果我们是自己做实验应用的话

可以选择这种未压缩的版本

这样我们可以来学习

来看一看它的一些写法

然后如果要是大家要发布的

我们的成品的网页的话

可以使用这种压缩版的

好 我们先下载

这两种都可以下载下来

都可以用的

好 下载完成之后把它拷到

我们这个js文件夹当中

拷过来之后这里

就有了我们下载的jquery的js文件

那么我们来看一下

这个呢就是没压缩的形式

我们基本上是可以看得明白

里边的函数的方法

然后另外这一种形式是

压缩过的形式

我们已经看不出各种方法和函数了

但是我们依然可以使用

好 现在我们把它给引用到

我们的文件当中来

script type还是javascript

地址js

我们用压缩过的吧

然后/script

好 现在我们就已经把

这个jquery的库文件

给引用到我们的html网页当中来了

现在它的功能我们就可以使用了

我们现在在咱们网页当中的javascript

写代码的这一部分

然后来写一些jquery的程序

然后看一下效果

好 我们还是先拿测试的这个页面

来做一些效果

先把引用的语句给写进来

好 现在我们这儿是用了

有一个盒子

先来看一下 显示一下效果

好 是一个盒子

接下来我们在这里写一个

初始的语句

这个呢是入口函数

先是一个$符号

然后小括号function

好 这个就是入口函数

也就是在执行功能的时候从这里开始

我们在这里先写一个

在这个$符号后面小括号中间

是我们要选取对谁进行操作的元素

我们这里呢只有一个head元素id

然后所以是#head

先让它隐藏

好 我们现在看一下效果

什么都没有了已经隐藏了

那我们现在再做一个盒子

给它起名叫button

好 给这个盒子呢增加一些效果

在这儿吧

给它设一个宽度 高度 背景色

好 又给安了一个盒子

看一下效果

好 有一个

我们现在把刚才head显示出来

把这个button盒子里边内容改成head

好 这样我们希望是做一个效果就是

点击button的时候

让这个head这个盒子消失

我们现在先看一下效果

有一个head这个盒子

还有一个hide这个button

然后我们现在写一下

首先对button做操作

当它被点击的时候

实现一个功能

这个功能是什么呢

让head隐藏

好 我们现在看一下效果

点一下 隐藏了

那么同样的呢我们也可以

再做一个让它显示出来

这样我们要把刚才这个button1

做一下css样式表

好 然后我们看一下效果

还有两个

我们换一个颜色

好 再来做一个

当button1点击的时候

让它显示

好 现在看一下效果

那么我点hide的时候它消失了

点show的时候它就显示了

这个呢就是jquery的运行方式

可以对某一个元素

给它增加功能来控制其它元素

好 再来看一个小例子

我们现在把这些动效先给去掉

好 再来看一个小例子

我们现在把这些动效先给去掉

这里改成一个change

改变颜色 背景色

这么一个按钮

好 然后我是想让它的背景色

有所改变

可以改变它的css

然后第一项是背景色

css的属性

逗号

第二项呢就是数值

先随便写一个

然后把背景色改成我们想要的

我们看一下效果

当我们点击这个按钮的时候

这个header盒子

背景色就改变了

这里改成一个change

改变颜色 背景色

这么一个按钮

好 然后我是想让它的背景色

有所改变

可以改变它的css

然后第一项是背景色

css的属性

第二项呢就是数值

先随便写一个

然后把背景色改成我们想要的

我们看一下效果

当我们点击这个按钮的时候

这个header盒子

背景色就改变了

好

这个jquery呢

它能够实现的功能很多

这个大家如果感兴趣的话

可以课下再找相关的资料

进行进一步的学习

那么我们现在呢回到

我们的案例当中

把我们案例中需要的

利用jquery做的一些特效给加上

这个jquery呢

它能够实现的功能很多

这个大家如果感兴趣的话

可以课下再找相关的资料

进行进一步的学习

那么我们现在呢回到

我们的案例当中

把我们案例中需要的

利用jquery做的一些特效给加上

好 我们首先呢先来看一下效果

来看一下都哪些地方需要我们

做这个jquery的效果

首先呢是这个大的盒子

目前我们可以看到

这个盒子的宽度

背景图是跟着走的

但是它的高度并没有变化

看 它这个留白就会变多

那么也就说第二个盒子就会往下排

那么我们其实需要的是

第一个盒子它的比例

就按照背景图来实现

这样我们的后面的盒子

就可以紧接着

上面背景图的位置来排列

第二个部分呢就是

这里的输入框

我们希望鼠标划入这个放大镜

然后输入条体现出来

然后第三个地方呢就是这个小三角

鼠标划到小三角上

然后这两个

简体中文和繁体中文这两个文字

才会划出来

主要就是这几个部分

好我们现在回到这里写程序

首先写一个入口程序

好 然后我们先定义一个变量

这个呢就是我们背景图素材的宽度

好 我们现在回到这里写程序

首先写一个入口程序

好 然后我们先定义一个变量

这个呢就是我们背景图素材的宽度

我们让它来获取这个背景图的宽度

获取方法呢是从

这个head元素它的宽度

这样呢也就是我们

因为我们head的宽度是屏幕的100%

这样我们就可以获得到

实际的背景图的宽度

这样我们根据背景图素材的宽高比

我们就可以计算出

它其实需要的高度大概是多少

然后我们让它的实际高度

让head的实际高度css

它的属性是高度的属性

等于刚才我们获取到的宽度

乘以一个0.48

因为这个是一个变量

所以我们不拿引号引用它

这块呢是属性

所以我们用引号

加上引号来实现这个功能

那我们现在过来

调整一下这个searchbak

首先我们想让它是从右侧划出来

那我们这里呢应该选择是右对齐

那我们现在过来

调整一下这个searchbak

首先我们想让它是从右侧划出来

那我们这里呢应该选择是右对齐

好 我们看一下

咱们这块是headerall

这块应该是headerall

对应的是最外层的盒子

整体的

好 我们现在来看一下效果

好 现在我们的高度已经有了一定的变化

刷新

这已经是在计算之后实现的了

每次如果改变了屏幕的尺寸

在刷新之后它都会计算一下

但是我们还是有一点留白

那说明我们的比例还有点不太对

我们调整一下

改成47看一下

还有一点

我们可以改成46

好 看一下效果

现在基本上就是比较合适的了

紧接着就是第二个盒子

如果是不同尺寸的窗口的时候

刷新 好

也都是一个比较合理的布局

好 现在我们来看这部分

我们一开始呢是想让

搜索框下面这个bak是

然后我们回到代码这里

给search上面加鼠标划入

好 当search这个也就是放大镜

鼠标划入的时候

让它的这个背景框给它加一个动效

让它的宽度

变成刚才我们原先设定好的230像素

好 我们现在看一下效果

现在背景框已经没有了

当鼠标划入的时候就弹出来了

但是它弹出来的方向不太对

所以我们要把它的焦点改一改

我们现在来调整一下这个searchbak

我们是想让它从右侧划出来

那么我们首先要把它变成右对齐的形式

也就是说它越来越宽

所以它会从右侧划出来

那么我们这里呢

其实这块不需要用背景图的形式

完全可以用我们css画的圆角矩形

来体现

像这种它的实现方法是不唯一的

大家可以寻找更适合的方法

来实现我们需要的效果

我们可以给它做上一个圆角矩形

它的圆角设成一个8像素

那么位置呢我们要把它改成绝对的

因为它绝对位置

所以它顶部是设成0

就是最靠上对齐的

好 现在我们看一下效果

我们没给它加背景色

刚才我们看是出什么问题了

我们没有给它加背景色

背景色呢我们用rgba的这种配色方式

这种方式它就是有透明度的

255

255其实就是十六进制的f

这样呢前面三组颜色rgb

这样就体现的是一个白色

最后一位呢是它的

我们可以看到这块是它的透明度

是0到1之间的数

我们给它设成0.2

好 现在我们再来看一下效果

好 现在我们出现了一个圆角矩形

大家看到这个是太宽了

我们可以给它做窄一点

因为我们把它变窄了

所以要把它往下移

好 看一下效果

好 现在基本上满足我们的需要了

我们现在想要鼠标划到这个小放大镜上

让它变成小手的图标

我们可以这样写

在search这个上

用cursor这个属性

让它是pointer

这样它就变成了小手

然后我们把

它会被这个挡住

我们把这块也变成小手

好 再来看一下

是不是我们想要的效果

好 这儿都变成小手了

那么我们呢想让它

在点击的时候把这个输入条

给收回去

我们就可以还是给这个search

增加click事件

就是鼠标点击事件

让它的宽度变回0

我们现在看一下效果

划入的时候出来

点击的时候

点击回来没反应呢

其实是因为下面这一个层

把上面这个放大镜给挡住了

那我现在点不到放大镜

那我们怎么能把它放到上一层呢

我们使用的是index

我们在css里

给这里设置一下index

它的层叠关系

例如我把它设成9

把它底下这层设成8

只要比它小就行了

好 划入 点击 就收回来了

划入 点击 收回来

好 现在我们来看一下这个三角

做法基本上也是一致的

我们先要给三角增加一个鼠标划入

然后让它的bak向下划出

可以用这个方法

就向下划出

那么我们一开始呢

是想让它是不可见的

所以我们在这里

给它设置成隐藏display

让它是none的形式

这样就隐藏了

好我们现在看一下效果

这个三角已经没有了这个bak

划入的时候它会出现

然后我们去点击

可以选的简体中文还是繁体中文

那么我们让它点击的时候

把它收回去

同样的给它增加一个click事件

让它收回去

看一下效果

好 点击的时候就收回去了

接下来呢

但是我们还是想让这个小三角变成小手

我们可以同样的道理

指针变成小手

好 再来看一下效果

是不是达到我们的预期

点击就收回来了

划入 显示 点击 收回

好

接下来呢我们再看一下这部分

我们是想让鼠标划入

让这个字变一个颜色

颜色就是小方块里的这个颜色

同时让前面的小方块显示

我们也还是先让小方块不显示

让fang display等于none

好 再给相关的文字增加

在这里呢我们先找到#

然后是这块

给这个元素的每一条li列项

增加

增加什么呢 mouseover

鼠标划过效果

在鼠标划过的时候

我们第一步先是让$

然后是自己

触发这个事件的自己

可以用this表示

$（this）代表的就是

触发这个事件的自己本身

元素自己本身

然后它呢在这个li里面

它里面有一个div是fang

我们可以获取到

用children

然后里面是一个元素

$ 引号 点 fang

好

然后让它的css做一些变化

属性是display

然后值呢是block

这个就是让它显示的意思

接下来我们再给它改一下颜色

$ 还是this

然后它的css

属性呢是color

然后颜色的值是这个

在css当中能找到

好 来看一下效果

好 现在鼠标划入

颜色改变了

我这儿写错了

少一个s display

好再看一下效果

现在鼠标划入

文字变成了黄色

前面小方块也出现了

接下来呢我们还要再做一下

鼠标划出的效果

一样的就是复制一下

把mouseover改成mouseout

划出的时候

小方块变成none

颜色变成白色

好 现在再来看一下效果

好 划出之后就变回原样了

好 我们把它放大一点

再看一下

现在正常网页的效果

到这里呢我们第一个盒子

模块的布局 制作

就已经完全的完成了

其它的每一个盒子的布局和制作呢

都是类似的

步骤都是一样的

大家可以根据我们之前学过的内容

思考一下

然后看一看我们自己

设计的网页的每一个模块

需要怎样制作

到这里呢我们第一个盒子

模块的布局 制作

就已经完全的完成了

其它的每一个盒子的布局和制作呢

都是类似的

步骤都是一样的

大家可以根据我们之前学过的内容

思考一下

然后看一看我们自己

设计的网页的每一个模块

需要怎样制作