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>

原文地址:https://www.cnblogs.com/chu888chu888/p/1348599.html