代码改变世界

javaScript 和 CSS 的作用，说说jQuery 库的方便之处

2011-01-05 22:33  闫妍  阅读(481)  评论(0)  编辑  收藏  举报

javaScript ：用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能。

通过JavaScript，当访问者输入信息时，信息不用经过传给服务器处理之后，再传回来的过程，而是直接可以被客户端的应用程序处理。如我们在文本中写的一段程序代码：

javaScript语法：

1.创建脚本块

1:<script language=”JavaScript”>

2:JavaScript code gose here

3:</script>

 

2.隐藏脚本代码

1:<script language=”JavaScript”>

2:<!--

3:document.write(“Hello”）；

4://—>

5:</script>

 

在不支持JavaScript的浏览器中将进行相关代码

3浏览器不支持的时候显示

1:<noscript>

2:Hello to non-JavaScript browser.

3:</noscript>

 

4连接外部脚本文件

1:<script language=”JavaScript”src=”/”filename.js””></script>

 

5注释脚本

1://This is a comment

2：document.write（“Hello”）；//This is acomment

3:/*

4:All of this

5:is a comment

6:*/

image

image

image

image

image

image

image

 

 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .red
        {
            background-color: Red;
        }
        .green
        {
            background-color: Green;
        }
        .blue
        {
         background-color: Blue;
        }
    </style>

    <script type="text/javascript">

        $(document).ready(
        function() {
            $("div").addClass("blue");
            //$("#olID>li").addClass("green");

            $("#olID>li").hover(
            function() {
                $(this).addClass("red")
            },
            function() {
                $(this).removeClass("red")
            });

            $("#olID>li:last").hover(
            function() {
                $(this).addClass("green");

            },
            function() {
                $(this).removeClass("green");

            })
        })
       
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ol id="olID">
            <li>doubleyan.C</li>
            <li>闫妍</li>
            <li>doubleyan@live.cn</li>
        </ol>
    </div>
    </form>
</body>
</html>

原型为.txt格式，然后我们将它的扩展名改为.htm，我们就会发下文件的前面多了一个小浏览器的标志，image，我们双击打开它后会看到：

image

我们可以将鼠标分别放在123上面，我们会看到出现不同的颜色。同时我们也能发现这个IE的地址为文件夹，只是在我们本地上的文件，而无需去访问服务器，但是我们仍然可以对浏览器进行动态操作。

 

CSS:层叠式样式表(Cascading Style Sheet)用来为结构化文档（如HTML文档或XML应用）添加样式（字体、     间距和颜色等）的计算机语言。是描述style里的一套属性，如：

style="height: 78px; width: 1152px;">定义了Style中的高度和宽度

style="background-image: url('1136205215_SendPhoto_20110112192450_1.jpg')定义了Style中的背景为图片，图片的url地址为'1136205215_SendPhoto_20110112192450_1.jpg'等。

jQuery 库：jQuery是Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。