zoukankan      html  css  js  c++  java
  • Jquery初学者指南-1

    JQuery是一套非常优秀的javascript核心框架,我们可以很轻松的利用Jquery完成许多工作.不过有件事情大家一定要清楚,那就是Jquery与YUI、Extjs、Dojo之类的JavaScript FrameWork比起来它最大的优点就是短小精悍,不会像其他的框架库一样什么都包含进来,它的主要工作就是对DOM文件的操作,同时它的选择器功能做的非常的棒,可以非常简单的起到javascript/xhtml/css之间的黏合剂的作用,并且Jquery在Ajax与事件处理的功能上也是一流的,它可以帮助你很容易的就完成一些Ajax工作。

    JQuery的扩展功能也是非常好的,现在在互联网中大家可以找到几百以上的Jquery的各种各样的插件,同时官方网站也推出了Jquery UI这种官方效果插件,现在看起来还是非常棒的,大家可以去看看(http://ui.jquery.com).还有一个好消息就是JQuery以得到微软官方的支持,在下一代Visual Studio中将内部支持Jquery,所以Jquery可以说是asp.net开发者不二的选择。

    要想使用Jquery就得必须下载它,大家可以过 在百度或者google中键入jquery就可以找到相关的网站来进行下载了,下载之后我们基础就可以在项目中添加使用了。

    一般来说所有的应用程序第一例子都是Hello World,我们也来做一个Hello Word的JQuery程序。见下例

       1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       2:  <html>
       3:      <head>
       4:          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       5:          <title>欢迎来到jquery的世界</title>
       6:          <script type="text/javascript" src="lib/jquery/jquery.js"></script>    
       7:          <script type="text/javascript">
       8:              $(document).ready(function(){
       9:                  $("div").append("大家好欢迎使用 jquery");
      10:              });
      11:          </script>
      12:          </head>
      13:      <body>
      14:          <div></div>
      15:      </body>
      16:  </html>

    在这段代码中我们使用了一些大家也许以前都没有见过的东东。

    $号是Jquery中的对象,使用$("div")就是用Jquery来选取元素,这个例子中如果使用$("div")的话,那么就代表着对文件中所有的xhtml中的div标签进行操作。

    为保证可以对文件中所有的div标签都生效,所以要等到整个dom文档都载入成功后才能执行,所以我们又用到了ready事件,它的做用是必须在文档的dom对象都载入后才能执行事件,这个方法我们在以后使用jquery时是经常使用的。

    为了使我们的例子更加有趣我们再一次的改变一下这个代码:

       1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       2:  <html>
       3:      <head>
       4:          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       5:          <title>欢迎来到jquery的世界</title>
       6:          <script type="text/javascript" src="lib/jquery/jquery.js"></script>    
       7:          <script type="text/javascript">
       8:              $(document).ready(function(){
       9:                  $("div").append("大家好欢迎使用 jquery");
      10:                  $("h1").click(function(){
      11:                      alert("哈哈哈,你胆子真大!");
      12:                  });
      13:              });
      14:          </script>
      15:          </head>
      16:      <body>
      17:          <div></div>
      18:          <h1>点我</h1>
      19:      </body>
      20:  </html>

    在学习Jquery中还有一个乐趣就是Jquery对Css的支持,真的是出奇的好,看以下的例子:

       1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       2:  <html>
       3:      <head>
       4:          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       5:          <title>Jquery的Css支持</title>
       6:          <style type="text/css">
       7:              body, div, p, h1, h2, h3, h4, ul, li, table {
       8:                  margin: 0;
       9:                  padding: 0;
      10:                  border: none;
      11:              }
      12:              
      13:              body {
      14:                  font-family: Tahoma, Arial, sans-serif;
      15:                  font-size: 75%;
      16:              }
      17:               .master_header {
      18:                  margin: -1px auto 0 auto;
      19:                   800px;
      20:              }
      21:               .demoarea {
      22:                  padding: 20px;
      23:                  background: #FFF url(images/demotop.png) no-repeat left top;
      24:              }
      25:          </style>
      26:          <script type="text/javascript" src="lib/jquery/jquery.js">
      27:          </script>
      28:          <script type="text/javascript">
      29:              $(document).ready(function(){
      30:                  $("#header").addClass("master_header");
      31:                  $("#content").addClass("demoarea");
      32:              });
      33:          </script>
      34:          <body>
      35:              <div id="header">
      36:                  我是头
      37:              </div>
      38:              <div id="content">
      39:                  我是躯干
      40:              </div>
      41:              <div id="footer">
      42:                  我是尾
      43:              </div>
      44:          </body>
      45:          </html>

  • 相关阅读:
    IOS 微信 6.5.2 自动播放音乐 解决方案
    【转载】动态新增svg节点
    通过并行数据以及TS学习来增强ASR的鲁棒性
    针对领域不变训练的注意力对抗学习
    BLSTM的训练算法、解码算法以及模型的改进
    kaldi chain模型的序列鉴别性训练代码分析
    kaldi通用底层矩阵运算库——CUDA
    kaldi通用底层矩阵运算库——CBLAS
    Thrax-构建基于语法的语言模型工具
    gdb nnet3-compute
  • 原文地址:https://www.cnblogs.com/chu888chu888/p/1348599.html
Copyright © 2011-2022 走看看