JQuery从头学起第一讲

JQuery的重要性对一个coder来说应该是不言而喻的, 多少次在应聘的时候被问及是否会JQuery;多少次在写脚本的时候因为浏览器的不兼容而吐血;多少次因为需要用脚本做一个简单的效果而写到手抽筋。JQuery出现后,很多问题都被轻易解决了。
每学一样东西的时候,我们总是喜欢去了解下它的历史。既然是从头学起,我们也来稍微了解下它的历史。
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer, 罗马尼亚的Stefan Petre等等。
  jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是—— WRITE LESS,DO MORE,写更少的代码,做更多的事情。
  它是轻量级的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即可。
下面开始我们第一个DEMO,我们根据DEMO来讲解,第一讲我们只做简单的介绍,不做深入的讲解分析。如果需要提供源码的网友可以加入群:34979719


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuery_1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
alert("hello world");
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world again");
});
</script>
<script type="text/javascript">
function f1() {
alert("hello world again again");}
</script>
</head>
<body onload="f1();">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

从上面的DEMO1中可以看出要用JQuery必须先引用一个JQuery包,JQuery包的下载地址附上

压缩版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=<SPAN>Download<%2FSPAN>

未压缩版:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js

以上下载的JQuery包版本是1.3.2的,最新的JQuery的包已经到1.42了,各位网友如果想尝鲜可以自己去下载。目前我们讲的主要还是1.3.2版本的

引入JQuery包后,我们可以开始写我们的脚本程序了,从例子的运行效果可以看出,页面在加载后会依次弹出:“hello world”、“hello world again”、“hello world again again”,效果相同。第一个和第三个是传统的JS,第二个是JQuery程序。如果把<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>这行去掉,运行后会提示:$ is not defined。

$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。$()是选择器,$(document)构造了一个JQuery的document对象。函数 ready () 是这个jQuery对象的一个方法,DOM载入后开始执行该方法的事件,DEMO中该事件触发时执行了它所提供的alert方法。JQuery的方法都以一对小括号()括起来,括号后面加分号。

今天就讲这么多,不好的地方希望各位网友可以谅解,也希望各位网友踊跃讨论,及时指正。下一讲我们会讲JQuery的选择器,JQuery是如何来获得控件值的。

(0)

相关推荐

  • JQuery从头学起第三讲

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery3.aspx.cs" Inherits="JQuery_1.JQuery3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • JQuery从头学起第二讲

    这一讲中,主要对JQuery的选择器做个简单的介绍,JQuery是怎么样来获取到值的.废话不多说,直接贴代码,我们根据DEMO来说事. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %> <!DOCTYPE html PUBLIC

  • Jquery从头学起第四讲 jquery入门教程

    今天主要讲的控件是radio,select,input,Label,Literal.这边服务器控件讲的比较少,主要是因为服务器控件一来可以在后台赋值,其次服务器控件在解析后也是也是html控件 在平时写程序的时候,给radio赋值最头痛了.今天把这些控件的赋值做成DEMO,跟大家一起分享. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jquery4.aspx

  • JQuery从头学起第一讲

    JQuery的重要性对一个coder来说应该是不言而喻的, 多少次在应聘的时候被问及是否会JQuery:多少次在写脚本的时候因为浏览器的不兼容而吐血:多少次因为需要用脚本做一个简单的效果而写到手抽筋.JQuery出现后,很多问题都被轻易解决了. 每学一样东西的时候,我们总是喜欢去了解下它的历史.既然是从头学起,我们也来稍微了解下它的历史. jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer

  • 从头学Python之编写可执行的.py文件

    Python可是真强大.但他具体是怎么强大的,让我们一点一点来了解吧(小编每天晚上下班回家会抽时间看看教程,多充实下自己也是好的). 废话不多说,就讲一下这个背景吧: 事情是这个样子的~本着好学的精神,咱就买了本书,学习python结果呢,发现python的教程都是一个样子滴,上来的第一个helloworld都是通过IDLE来实现的.这个就比较让我头疼了,这个太简单了啊.可是我该肿么脱离IDLE来编写自己的python模块呢.于是乎,就有了这个文章 一.先讲一下我的操作步骤吧,后面再统一简单介绍

  • python入门课程第一讲之安装与优缺点介绍

    目录 说在前面 何为Python 如何安装Python呢 Max OS下安装Python3 普通的安装方式 通过Homebrew来安装 Python有哪些优缺点呢? 优点 缺点 Python能干什么 总结 这是Pyhon系列文章的第一篇,本文主要介绍Python的基本概念以及如何安装. 干货满满,建议收藏,需要用到时常看看. 小伙伴们如有问题及需要,欢迎踊跃留言哦~ ~ ~. 说在前面 Python语言对各位读者而言一定不会陌生,哪怕没有使用过Python,也一定听说过它.那一句人生苦短,我用P

  • jquery基础知识第一讲之认识jquery

    jQuery是一个优秀的JavaScript库,它凭借简洁地语法和跨平台的兼容性,极大地简化了开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax操作. jQuery优势: 1.轻量级 2.强大的选择器 3.出色的DOM操作的封装 4.可靠的事件处理机制 5.完善的Ajax 6.不污染顶级变量 7.出色的浏览器兼容性 8.链式操作方式 9.隐式迭代 10.行为层与结构层分离 11.丰富的插件支持 12.完善的文档 13.开源 (1)编写简单的jQuery代码: 注:$ 就是jQ

  • 跟着Jquery API学Jquery之一 选择器

    有了Jquery的选择器,吃饭饭饭香,身体倍棒-- 1.基本 我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器-基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法 css样式也有几种情况:1.类样式 2.id样式 3.标签样式, 如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{} 如果有一个bb的id,那么我们定义bb的样式就要写成 #bb{} 如果有标签<div></div>

  • 跟着JQuery API学Jquery 之二 属性

    我们常常需要对节点属性,内容,文本进行变更,就需要用到这里的几个函数了 . 1属性 这里我们看到了一个 attr()函数,有四种形式其中 attr(name)是得到一个所选择的属性值,attr(properties)attr(key,value) attr(key,fn)是为一个属性赋值 这里要说一下的是在Jquery中有这样的设计,得到一个对象的值和给一个对象赋值使用的是同样的函数,用fn(name)来给一个对象赋值,用fn(name,value)来给一个对象赋值. 先看attr(name)是

  • 跟着JQuery API学Jquery 之三 筛选

    1.过滤 eq(index) 看这个函数和基础里的:eq貌似是一样的(其实就是一样的) 比如我们对<div>1</div><div>1</div>做选择,那我们可以用$("div").eq(1)或$("div:eq(1)") 来选中第二个div效果是一样的 hasClass(class) 用来判断当前元素是否含有一个类 这个和is("."+class)是一样的,我们来看一下is()这个函数用来干吗的

随机推荐