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

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

时间:2022-08-15

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

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

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

第二种就是直接写在 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。做出来是非常的讨人厌呢~

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

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

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

$("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>

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

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

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

这是一个 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

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

这部分基本不再需要解释了吧，就是把上一节的代码放进了函数 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>

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

上一篇: 站长在运营网站过程中要注意的错误手法

下一篇: 网站建设功能性的体现与保障

本文网址：http://www.chinafangzhan.com{dede:field name='arcurl'/}
本文由企盟仿站网发布( http://www.chinafangzhan.com )，如果您还想了解更多关于 网站仿制 的文章，请点击查看 仿站知识 的其它文章。
承接以下业务：传统网站改自适应网站、网站增加手机站、网站改全屏网站改大屏展示、GBK转UFT-8、DEDECMS转WORDPRESS、网站站群制作、企业网站设计、企业网站优化、网站托管等业务

相似内容

推荐资讯

热点标签