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>

  • 相关阅读:
    OSX安装nginx和rtmp模块(rtmp直播服务器搭建)
    用runtime来重写Coder和deCode方法 归档解档的时候使用
    Homebrew安装卸载
    Cannot create a new pixel buffer adaptor with an asset writer input that has already started writing'
    OSX下面用ffmpeg抓取桌面以及摄像头推流进行直播
    让nginx支持HLS
    iOS 字典转json字符串
    iOS 七牛多张图片上传
    iOS9UICollectionView自定义布局modifying attributes returned by UICollectionViewFlowLayout without copying them
    Xcode6 iOS7模拟器和Xcode7 iOS8模拟器离线下载
  • 原文地址:https://www.cnblogs.com/chu888chu888/p/1348599.html
Copyright © 2011-2022 走看看