当前位置:网站首页 / 建站知识 / 网站制作知识

网站制作菜鸟如何玩转JavaScript和JQuery

来源:未知时间:2015-04-18 08:20点击:

网站制作菜鸟最头疼的事情就是提到代码,特别是提到JAVASCRIPT,就是我们平时说的 JS 啊。我们说 HTML 是骨头,CSS 是肉,那 JS 是啥?是生命啊。因为 JS 可以让你的网页动起来,这是一件十分美妙的事情啊!

然后哈,JavaScript 跟 Java 没啥关系,以后别再拿它俩攀亲戚了,这误会可有点大。好了,不废话了,我们来讲讲怎么在网页里插入 JS 。三种办法,跟 css 的感觉差不多,所以也挺好理解的。

第一种,直接写在代码里,其实我也很少用,而且我也不建议用,想找着维护挺麻烦的。比如说下面的代码:

<div id="box" onclick="alert('我就是问候一下,没别的事');"></div>

第二种就是直接写在 head 里面,比如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我不喜欢 JS</title>
<script type = "text/javascript">
alert("我又来了,不管你烦不烦我");
</script>
</head>
<body>
……
</body>
</html>

第三种就是把 js 写在一个单独的文件里,然后在网页文件里调用,像这样:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我不喜欢 JS</title>
<script src="js/script.js"></script>
</head>
<body>
……
</body>
</html>

你要是理解了 css 的插入方法,这里其实很简单了,下边我们说点好玩的。

JQuery 是个好玩的东西,它是一个 JavaScript 库。,你说库是什么东东?我打个比方啊:JS 是工具,比如锤子啊,扳手啊,我们可以用他们制造出我们想要的东西来,这是一个生产的工程。我们写JS,就相当于用这些工具生产我们想要的网页效果。但是呢 JQ 机器,用 JS 这些工具制造出来机器,我们只需要开动机器,就可以又快又好的生产我们需要的效果。这么说来,你是想要用锤子生产,还是用机器生产呢?

当然我们要明确一点,机器再好也不可能完全替代锤子扳手,因为机器终究只能生产一些预定好的东西。不过好在我们日常的小需求 JQ 这台机器基本都能满足了,所以我们先学习开机器,让生产进行起来。

既然 JQuery 就是 JS 搞出来的工具,那么其实他跟 JS 是兼容的,你只需要像用 JS 一样用 JQ 就差不多。我们来玩个简单的哦。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我喜欢 JQ</title>
<style>
#box{
width:300px;
height: 300px;
margin: 30px auto;
background: #EEF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$("#box").click(function(){
alert("就是这么简单");
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

现在我们来讲解这段代码,第一个 script 标签是引入 JQuery ,是的,你要用机器就要把机器搬过来,你要请人帮忙,就要先把人叫过来。你没搬机器,没请人来,后面你想做的工作肯定没法完成,对不?这是必须的准备工作,JQuery 你可以去官方下载( https://jquery.com/ ),然后放在合适的位置进行引用,我比较偷懒,直接使用的网上的一个网址。当然在这里大家也看出来了,JQuery 文件也就是个 js 文件。

搬来了机器,请来了工人要开始分配工作了,这就是第二个 script 标签里的内容,那么大家应该理解一个先后顺序了,先搬机器,再分配工作,也就是先引入 JQuery ,然后才能工作。

第二个 script 标签里,我们要认识的第一个结构(语句)是:

$(document).ready(function(){
代码
});

首先说这段代码什么意思呢?他就是说当文档(document)准备好(ready)之后运行函数(function)中的代码。让 JQ 在文档准备好(载入完成,或者说打开完成)之后在执行可以避免很多奇奇怪怪的问题哦,所以这也是一般写 JQ 必然先写上的结构。

然后我们来学习一下 JQ 的基本语法啊,其实这个好简单的,郭德纲有句话怎么说来着:”会一句你就会一万句!“拿来说 JQ真的再合适不过了。就一句基本的语法,玩转了就可以写出很多效果来了。

$(选择器).事件(执行的代码);

就是当某元素(选择器就是用来指定这个元素的哦),发生某个事件(比如被单击)的时候执行括号里的代码。然后这句结束用英文分号(;)标注,记得哦,这一个语句结束要有分号的,有点像 css 每个属性写完了要加一个分号。

当然,这个语句的格式记住就好,然后要活学活用,因为事件可能变成属性、动作,而括号里的是参数,如下:

(选择器).属性(属性值);

$(选择器).动作(动作参数);

反正变来变去都这一个格式啊,这个格式记牢了就能读懂了,也能试着去写了,剩下的事件啊,参数啊都是可以去查阅的。

回来继续看啊,还看这段代码:

$(document).ready(function(){
代码
});

我们现在可以给他拆分一下了,首先是

$(document).ready();

这次你就看懂了,然后是以前在 ready 后面括号里的内容:

function(){
代码
}

这个 function 是个啥东东啊,这是个函数,不过在这里你先不用管那么多,记住这个格式,记得我们可以用他把好多行代码打包在一起当一个整体看就是了。嗯,就是个塑料袋,把零碎的代码装进去,拎起来就走。

好啦,明白啦,文档准备好了就执行塑料袋……啊,不,是 function 里的东东,看看有什么东东呢?

$("#box").click(function(){
alert("就是这么简单");
});

这个结构跟上面的好像啊!我们试着解读一下,当 id=”box“ 的元素(选择器是 #box 嘛)被点击(click)的时候执行塑料袋(function)里的语句,咦,好像就这么就弄懂了呢~

那么执行了什么呢?

alert("就是这么简单");

alert (); 这是 JS ,是一个非i常常用的东东,所以我们需要记一下他,他的意思就是弹出一个提示框,把括号里的内容显示到出现了奇迹哦~

到这里要郑重的提醒一句哦,有问题一定要用审核元素的 Console(控制台) 标签了,看看 JS 出了什么错,点击错误可以直接定位到出错位置的。

嗯,努力点,免得反被 JQ 玩。这一次我没来做一个简单的,讨人厌的网页。用到 JQ 和一点简单的 JS。做出来是非常的讨人厌呢~

首先我们准备一个网页,这网页也很简单,就一个按钮,这个你们会写啊,来看看我写的。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我就是想气死你!</title>
<style>
button {
width:160px;
height: 38px;
display:block;
text-align: center;
font-size: 18px;
line-height: 38px;
background: #F3F3F3;
border:1px solid #DDD;
margin:150px auto 0;
box-shadow: 0 3px 12px #DDD;
cursor: pointer;
}
</style>
</head>
<body>
<button>有种你点我呀!</button>
</body>
</html>

我加了一些 css 样式,来让这个按钮看起来更讨厌一些……,现在我们开始赋予它灵魂!在 标签后面填上

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
一会在这里写
});
</script>

这是一个很基础的结构,我们照抄过来,然后开始写(上面代码里标注了要在哪里写)

$("button").mouseover(function(){
$(this).css("margin-top","50px");
});

 

来解释一下哦~ button 元素发生什么情况的时候呢?鼠标划到他的上面(mouseover),就执行后面括号里的代码。

那么括号里的代码会做些什么呢?首先说 this 指的是外层提到的元素,就是 button,它发生什么动作?他的 css 发生变化,就是后面括号里的 margin-top 变为 50px,比他以前的值(150px) 小了。

于是这个网页现在的效果就是,当你的鼠标移动到按钮上,按钮就往上移动了,于是你点不到他,但是你如果再次移动上去它就不动了,因为他现在的 margin-top 就是 50px,所以就没有变化了。

恶心人有了第一步是不够的,我们要切断他的一切希望,别以为你再追上去就可以点击了,哼哼,没那么容易的。

那么现在我们的想法是:鼠标划上去,按钮向上移动(已实现),再移上去,按钮向下移动,如此周而复始。

那么我们来说点相关知识:JQ 里有些事件不单单可以赋值,还能取值,比如:

mt=$("button").css("margin-top");
mt 里就储存了 button 元素的 margin-top 属性值。
然后再将一个很有用的 JS 语句
if (条件){
条件成立时要执行的代码;
}else{
条件
}

知道这两点我们就可以试试看了

$("button").mouseover(function(){
mt=$(this).css("margin-top");
if (mt=="150px"){
$(this).css("margin-top","50px");
}else{
$(this).css("margin-top","150px");
}
});

来看代码啊,首先当鼠标移动到 button 元素上的时候我们开始进行如下动作:

先是获取 button 的 margin-top 属性得值,存在 mt 里面。然后我们开始判断:如果 mt 等于(连续两个等号表示等于)

150px ,就把 button 的 margin-top 属性设置为 50px,否则(就是 mt 不等于 150px 的时候),就把 button 的 margin-top

属性设置为 150px.

看着有点绕?就是如果是 150,就改成 50,如果不是 150,就改成 150。这样说就明白了。

试试吧,反正你点不着这个按钮。赶紧发到网上调戏好友去,但是别调戏女友,会被拍死的。

完整代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我就是想气死你!</title>
<style>
button {
width:160px;
height: 38px;
display:block;
text-align: center;
font-size: 18px;
line-height: 38px;
background: #F3F3F3;
border:1px solid #DDD;
margin:150px auto 0;
box-shadow: 0 3px 12px #DDD;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$("button").mouseover(function(){
mt=$(this).css("margin-top");
if (mt=="150px"){
$(this).css("margin-top","50px");
}else{
$(this).css("margin-top","150px");
}
});
});
</script>
</head>
<body>
<button>有种你点我呀!</button>
</body>
</html>

上一节写的网页我自己也情不自禁的玩了起来,然后自己把自己气坏了,喵的,真的点不着!后来给自己写了一个作弊器才算完事。今天干点更气人的,要是我自己把自己气坏了,你们要补偿我!!!今天我就是要不畏艰辛,做一只虫子!嗯,就是一只一伸一缩,爬啊爬的虫子。

对了,画虫子怪麻烦的。一节一节的身体,毛茸茸的,还要有好多腿……好恶心……,喵的我偷点懒,做一只简单的虫子,你们别介意哈~

所以我决定,用一个绿色的矩形当虫子好了(好简单地说!)。好,我们来写一条虫子……为什么是写一只虫子……老好看了!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是一只小虫子,不呀不着急</title>
<style>
#cz {
position: absolute;
left: 10px;
top: 50px;
height: 5px;
width: 15px;
background:#393;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
一会在这写代码
});
</script>
</head>
<body>
<div id="cz"></div>
</body>
</html>

这是一个 15×5 像素的绿色虫子,嗯,我就说他是虫子,有本事你咬我啊?现在我们来研究虫子怎么往前爬啊,这是怎样一个过程呢?首先,虫子把脑袋伸出去(头前进,尾不动),然后虫子脑袋不动,把尾巴缩回来(头不动,尾前进),如此往复,方得前行。然后我们就来做这些事情啊。

第一步,头前进,尾不动。这不就是变长吗?

$("#cz").animate({width:'20px'},1000);

来解释这个能让你受用终身的句子:animate 动画的意思,他可以对几乎所有的 css 属性进行动画动作,爽歪啊~

后面的大括号里是要改变的 css 属性,就是从现有的值,变到这里给出的值。嗯,动画就是指这个变化的过程。格式有了,大家照着抄就是了啊。需要注意的是啊,如何是 margin-top 这样带有连接线的属性要换个写法啊,变成这样 marginTop 这样。

然后再后面的一个逗号和 1000 是什么意思呢?逗号是分割两个参数,前面说那里发生变化,说完了,逗号分隔一下,然后下一个参数,动画的速度,就是要用多长时间完成这个动画啊。这个时间单位是毫秒,像我这里写的 1000 其实就是一秒啦(1秒 = 1000 毫秒)。

然后呢,这句代码的意思是,#cz 花费一秒的时间,动态的将宽度(width)从原来的值(15px)变到指定的值(20px)。

来试试效果哦,当然这个变化不太明显,要仔细看才能看得到,不过你要是只是想看效果,可以先把上面语句中的 20px 换成 300px,然后是刷新页面看看,就很明显了。

这句我们就学明白了,然后,我们下节课再废话下一个步骤。

上一节我们完成了一个初级任务——头前进,尾不动。今天我们需要完成一个顶级任务,头不动,尾前进。很复杂的哦!这时候我们要认真研究一下了,我们现在要是让虫子宽度减小肯定是又把脑袋缩回去了。你想到了,改 left 的值,这个想法似乎正确,但是只改他明显不行,还要同时让宽度变化……想想就晕了。所以我们要换一个思路。

头前进,尾不动其实就是于左侧的距离不变,然后增大宽度;头不动,尾前进也就是与右侧的距离不变,然后缩小宽度。

所以我们首先把他的定位从 left 换做 right,方法如下:

$("#cz").css("left","auto");
$("#cz").css("right","50px");

但是当我们将这段代码放进去之后发现情况是:打开页面,虫子蹭的一下跑到右边(因为我现在 right 值设置的比较小),然后开始慢慢变长。咦?这个顺序不对啊!

我们要的是先变长,然后跳到右边(后面我们在研究他位置不变)。但实际执行起来,变长是一个过程(需要一定的时间),但是跳过去(改变一个属性)是瞬间的。而程序挨个通知他们执行,而不是等一个完成才通知下一个,导致了虽然变长最先开始,但是绝大部分的变长动作是在跳到右边之后完成的。明白了吗?打个比方:我要你蹲在瞬间传送仪上,然后我们设想的流程是这样的,我叫你的名字,你缓缓站起来,然后我打开传送,把你传送到宇宙飞船上。但是我叫了你的名字之后立刻打开传送,因为瞬间你就被传出去了,所以虽然你先开始往起站,但实际上你这个站起来的动作大部分还是在传送完成之后完成的。

这显然不是我们期望的,所以我们换个思路:我一喊你的名字“张二狗”,让后你就缓缓的站起来,站好之后你自己开动传送开关,诶,这就附合我们的预期了。那么到程序里呢?

前边我们讲了 animate 有两个参数,一个是变化的内容,一个是变化的速度,然后今天我们说说他的第三个参数——回调函数。什么是回调函数?就是当这个动作执行完之后(比如你站起来之后)要去执行的动作(再去开传送器)。

现在我们来整理我们的代码哦,先写一个带回调函数 animate 哦。

$("#cz").animate({width:'20px'},1000,function(){
一会这里写代码
});

看看比上一节就多了一个逗号,一个 function,我们说了 function 就是塑料袋,一堆代码打包就走。现在我们给 animate 加了个塑料袋,告诉他干完活把这袋盒饭拎走。你看,看着很复杂的句子,仔细一分析其实也没什么。

来,我们给塑料袋里装盒饭,装上之后就变成了

$("#cz").animate({width:'20px'},1000,function(){
$("#cz").css("left","auto");
$("#cz").css("right","50px");
});

于是虫子开始按我们的想法先变长,然后跳到右边。但是,我们其实并不是要他跳过去的,二是要他保持原地不动,刚才之所以跳一下,是为了判断代码是否正确执行。现在我们来研究他不动的问题。

其实这是一道数学问题:虫子长 20px,虫子尾巴距离左侧 10px,那么虫子距离右侧多远?这个结果就是我们一会要设置的right 的值。不过我们还缺一个条件:窗口的宽度。

不过这个也简单,获取窗口元素(你也当个元素看就是了)的宽度和获取其他元素宽度是一样,只是注意一下选择器的写法而已。

windowswidth=$(window).width();

等号后面的才是获取宽度的句子,但是光获取还不行,我们要把它储存起来,留着用,所以我就顺手把它储存在变量windowswidth 里面了。

然后获取虫子距离左边的距离,这时你高呼着:用 css ,你前两张讲过的,css 方法可以设置,也可以获取。嗯,你说的没错,可是你用 $("#cz").css("left"); 获取到的结果是什么?是 10px ,注意啊,是带着单位的啊,我们要计算是要把安慰去掉的,当然,这个我们也能做得到,不过我懒,就不费那个事了,换个办法更好用的说。

x=$("#cz").offset();

这个 x 获取到的是两个值,就是元素的左上角那个点的坐标,咦,一个代表两个……怎么用?

x.left 就是元素距离左侧的距离,x.top 就是距离顶部的距离,都是指距离窗口内容区域的边界啊!

然后我们就可以写了

$("#cz").animate({width:'30px'},600,function(){
windowswidth=$(window).width();
x=$("#cz").offset();
right=windowswidth-$("#cz").width()-x.left;
$("#cz").css("left","auto");
$("#cz").css("right",right+"px");
});

看看能明白不?但是这时候我们遇到一个问题,很有意思啊。你看啊,我们现在可以确定他的头不动了,然后该让尾前进了,其实就是宽度变短,我们知道这个要等上面那些代码都执行完了再执行,那应该把这个变短的动画写在上面的回调函数里。可是变短之后我们还要变长啊,肯定又要写倒变短这个动画的回调函数里,稍稍一想就觉得这是一个不断往里套的过程……,你拿着照片,照片里有你拿着照片……这肯定没法搞啊,所以我们下节课继续。

鉴于即将产生的混乱情况,所以我们要来使用函数了,正经的用一用这个塑料袋哦。

function 函数名(参数){函数的主要代码}

这是比较正经的格式,参数可有可无,我们以前当塑料袋用的时候连函数名都省了。这个问题是酱紫的,你手里有个塑料袋,那我说你手里那个塑料袋就很明确了。但是要是那边一堆塑料袋,我就得说,去,把那个写着老王家小卖部的塑料袋拿过来,你才明白是哪一个。

好,现在我们写两个函数 a 和 b ,a 负责变长, b 负责变短。因为就两个函数,我就不取复杂的名字了。

function a(){
b();
}
function b(){
a();
}

现在假如我运行了 a() 也就是调用函数 a,然后呢执行 a 里面的代码,运行函数 b,然后运行 b 里面的代码,执行函数 a

……如此往复,无休无止,好像就是我们需要的效果了。那就开始改造。

function a(){
$("#cz").animate({width:'20px'},1000,function(){
windowswidth=$(window).width();
x=$("#cz").offset();
right=windowswidth-$("#cz").width()-x.left;
$("#cz").css("left","auto");
$("#cz").css("right",right+"px");
b();
});
}

这部分基本不再需要解释了吧,就是把上一节的代码放进了函数 a 里,然后加上了对函数 b 的调用。然后写 函数 b

function b(){
$("#cz").animate({width:'15px'},1000,function(){
x=$("#cz").offset();
$("#cz").css("right","auto");
$("#cz").css("left",x.left+"px");
a();
});
}

这个就没啥可说了,你认真看看就懂。最后,虽然我们定义了两个函数,但是注意只是定义啊,定义和运行是两码事。我们要给他一个开始,所以要在 $(document).ready 里调用一下函数 a。好了,下面是完整的代码,其中有些数值我稍微修改了一下,以使效果更舒服。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是一只小虫子,不呀不着急</title>
<style>
#cz {
position: absolute;
left: 10px;
top: 50px;
height: 5px;
width: 15px;
background:#393;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript">
function a(){
$("#cz").animate({width:'30px'},600,function(){
windowswidth=$(window).width();
x=$("#cz").offset();
right=windowswidth-$("#cz").width()-x.left;
$("#cz").css("left","auto");
$("#cz").css("right",right+"px");
b();
});
}
function b(){
$("#cz").animate({width:'15px'},600,function(){
x=$("#cz").offset();
$("#cz").css("right","auto");
$("#cz").css("left",x.left+"px");
a();
});
}
$(document).ready(function(){
a();
});
</script>
</head>
<body>
<div id="cz"></div>
</body>
</html>

对了,这只傻虫子,只会爬,不会停……