HTML 学习总结 10

1、加入JavaScript和外部内容

  (1)画布介绍

    画布元素是一个自由格式的区域,在这里你可以通过用图像、手工制图、动画和文本来提升网页的用户提样。

    可以用适当的<canvas>标记符在网页上加上一个画布元素。像其他HTML标记符一样,<canvas>标记符也有属性,最基本的属性是网页中画布的高和宽。创建一个       200x200画布可以使用以下代码:

    <canvas width="200" height="200"></canvas>

    <canvas>标记符什么也没做,他实际上是一个空白区域,我们可以利用现在浏览器能明白的编程语言JavaScript来赋予画布新的生命。

2、JavaScript

  JavaScript不是Java、它基本上和Java编程语言没有什么关系。

  使用程式库或框架技术可以让JavaScript在所有流行的浏览器中以同样的方式工作,其中一种流行的框架技术称为jQuery

3、在网页中加入JavaScript,需要加入<script>标记符。具体来说,开始标记符应该是这样的:

  <script type="text/ javascript">

  结束标记符应该像下面这样:</script>

  在开始标记符和结束标记符中间正是你要插入JavaScript代码的地方。<script>标记符通常包含src属性,该属性说明,网页插入了外部的JavaScript文件。例如:有一个     JavaScript文件,它的文件名是“myjavascript.js",则应该以这样的的方式加入该文件。

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

4、用户的浏览器可能禁用JavaScript

  有些用户浏览器禁用JavaScript或者一些用户没有安装最新版本的浏览器Web浏览器,很多原因使用户不愿意启用JavaScript,为了网站在没有JavaScript的情况下依然可以工   作,你要确保JavaScript以适当的方式发出错误信息。

  检验JavaScript是否被启用的方法是使用<noscript>标记符,如果浏览器不支持或没有启用JavaScript,可以使用<noscript>提供补充内容,将<noscript>标记符插入到网页  并在其中加入HTML代码,如果网站访问者没有启用JavaScript,他会看到<noscript>标记符中的内容。

5、JavaScript事件和jQuery

  jQuery是一个开源的JavaScript文件,它不仅省略了开发人员索要处理的跨浏览器兼容性的问题,而且简化了JavaScript初学者所所不具备的高级编程技术,jQuery的      JavaScript框架,对于JavaScript事件和所有常见的JavaScript来说,都是非常理想的编程工具。

6、获取jQuery工具

  可以从http://jquery.com下载jQury。jQuery只有一个文件,将它放在网站的文档的根目录处或主文件夹下(或具体环境中放置JavaScript文件的地方)

7、jQuery中有一个函数叫.ready()。它只会在浏览器完全装载网页并且已经为JavaScript准备好了后才会执行。jQuery代码以$符号开头和括号开始。

  例如:

   <!DOCTYPE HTML>

     <html>

      <head>

        <title> Document Ready</title>

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

      </head>

      <body>

      <script type="text/javascript" >

      $(document).ready(alert(‘Hello Again‘));

      </script>

       </body>

      </html>

8、

  (1)用jQuery来选择元素,例如:<p>、<img>、<div>等。

  HTML代码带有一个<div>元素,它的id属性,设置为contentDiv:

  <div id="contentDiv">Your first JavaScript Page.</div>

  如果使用jQuery,以下的语法会使选择元素变得简单:

  <div id="contentDiv">Your first JavaScript page.</div>

  $("#contentDiv")

  另外还可以用下面的语法选择所有的<div>元素:

  $(".classname")

  (2)jQuery 还提供了其他几种方法来选择元素,包括分层功能,通过分层你可以选择元素的子元素;或者选择除指定元素外的所有的其他的元素;或者选择一个元素的上级元素

      或者用许多其他的选择器进行选择。

    请看一个额外附加的例子;

    <!DOCTYPE html>

        <html>

        <head>

        <meta http-equiv="Content-type" content="text/html; charset=urf-8">

        <title>iQuery 101</title>

        <script type="text/javascript" src="jQuery-1.4.4.min.js"></script>

        </head>

        <body>

        <div id="contentDiv">Your second Javascript page.</div>

        <script type="text/javascript">

        $("#contentDiv").css("backgroundColor","#abacab");

        $("#contentDiv").fadeOut();

        </script>

        </body>

        </html>

9、用jQuery和JavaScript来响应事件

  如果要让<div>元素在用户用鼠标单击它以后消失,你需要在<div>元素上附加一个单击事件处理程序。在jQuery中,你可以通过.click()函数来帮助完成,

  如下面的示例所示:

  <!DOCTYPE HTML>

    <html>

      <head>

        <meta http-equiv="Content-Type" content="text/html;charset=uft-8">

      <title>jQuery 101</title>

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

      </head>

     <body>

      <div id=“contentDiv”>Your second JavaScript page.</div>

      <script type="text/javascript">

          $("#contentDiv").css("backgroundColor","#abacab");

          $("#contentDiv").click(function(){

          $(this).fadeout(5000);});

      </script>

    </body>

   </html>

  注意 click函数直接附在<div>上,其中id变量等于contentDiv。在.click()函数中,它调用了另一个函数 ,叫.fadeOut()(一个匿名函数的函数,包括在大括号中)。注意,这  里,有一个新的部分,$(this)标记符。$(this)标记符指的是产生事件的元素,所以这个示例指定的是contentDiv元素,也可以用如下的方式编写:

   $("contentDiv").click(function(){$("contentDiv").fadeout(5000);})

10、用jQuery和JavaScript来验证表单

   

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。