JQuery从头学起第二讲
更新时间：2010年07月04日 18:26:18 作者：
在第一讲中，已经对JQuery做了入门级的介绍，我相信看过的网友都应该知道怎么开始写一个简单的JQuery程序了。首先是需要引入一个JQuery包，其次是根据JQuery的语法写代码就可以了。
这一讲中，主要对JQuery的选择器做个简单的介绍，JQuery是怎么样来获取到值的。废话不多说，直接贴代码，我们根据DEMO来说事。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %>
<!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">
function btnclick() {
var t1 = $("#txt1").val();
alert(t1);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn2").click(function() {
var t1 = $("#txt1").val();
alert(t1);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="txt1" type="text" />
<input id="btn" type="button" value="button" onclick="btnclick();" />
<input id="btn2" type="button" value="button2" />
</div>
</form>
</body>
</html>
从代码的第一行可以看出，其实这是个aspx页面，其实把第一行去掉也没关系，因为JQuery就是JavaScript脚本，在htmL里也同样可以运行。因为我是用VS写的JQuery所以就直接添加aspx页了。
代码中东西很少，头部写了两段JavaScript脚本，body中有一个文本输入框，两个按钮，一个按钮有onclick="btnclick();"事件，另一个没有。从运行的效果看，其实两个button实现的是相同的效果，都是弹出文本框输入的内容。现在我们来简单分析下这两段JS
在第一段JS中，自定义了个函数，名字叫：btnclick(),该函数体内用var 关键字定义了个变量t1。T1的值通过JQuery的选择器得到。$("#txt1")创建了一个JQuery的对象，#取的是ID，如果换成name则会得不到值。$("#txt1")的val()方法获取到了文本框的值。$("#txt1").val()相当于JavaScript中的document.getElementById("txt1").value;
第一个Button中onclick事件执行了第一段JS中的自定义函数，那么第二个Button中没有onclick事件，如何实现与第一个Button相同的效果呢？我们接下来分析第二段JS代码。
第二段JS代码中一开始就直接创建了个JQuery的document对象，并调用了document对象的ready事件，ready事件会在DOM加载完后立即执行。在ready事件中又建了个JQuery对象$("#btn2")，从该对象可以看出JQuery选择的是id为btn2的控件。创建$("#btn2")的同时调用了onclick();方法。正是这个方法实现了让Button二实现了和Button一相同的效果。这里简单说下，在第二段JS代码中如果把$(document).ready(function() {});这个事件去掉，直接写$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么点击第二个Button将不会有任何的效果。
今天这一讲就到此，其他不赘述，如果有疑问或需要源码可以加入群：34979719，下一讲，我们将会讲常用控件的取值和赋值。
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %>
<!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">
function btnclick() {
var t1 = $("#txt1").val();
alert(t1);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn2").click(function() {
var t1 = $("#txt1").val();
alert(t1);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="txt1" type="text" />
<input id="btn" type="button" value="button" onclick="btnclick();" />
<input id="btn2" type="button" value="button2" />
</div>
</form>
</body>
</html>
从代码的第一行可以看出，其实这是个aspx页面，其实把第一行去掉也没关系，因为JQuery就是JavaScript脚本，在htmL里也同样可以运行。因为我是用VS写的JQuery所以就直接添加aspx页了。
代码中东西很少，头部写了两段JavaScript脚本，body中有一个文本输入框，两个按钮，一个按钮有onclick="btnclick();"事件，另一个没有。从运行的效果看，其实两个button实现的是相同的效果，都是弹出文本框输入的内容。现在我们来简单分析下这两段JS
在第一段JS中，自定义了个函数，名字叫：btnclick(),该函数体内用var 关键字定义了个变量t1。T1的值通过JQuery的选择器得到。$("#txt1")创建了一个JQuery的对象，#取的是ID，如果换成name则会得不到值。$("#txt1")的val()方法获取到了文本框的值。$("#txt1").val()相当于JavaScript中的document.getElementById("txt1").value;
第一个Button中onclick事件执行了第一段JS中的自定义函数，那么第二个Button中没有onclick事件，如何实现与第一个Button相同的效果呢？我们接下来分析第二段JS代码。
第二段JS代码中一开始就直接创建了个JQuery的document对象，并调用了document对象的ready事件，ready事件会在DOM加载完后立即执行。在ready事件中又建了个JQuery对象$("#btn2")，从该对象可以看出JQuery选择的是id为btn2的控件。创建$("#btn2")的同时调用了onclick();方法。正是这个方法实现了让Button二实现了和Button一相同的效果。这里简单说下，在第二段JS代码中如果把$(document).ready(function() {});这个事件去掉，直接写$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么点击第二个Button将不会有任何的效果。
今天这一讲就到此，其他不赘述，如果有疑问或需要源码可以加入群：34979719，下一讲，我们将会讲常用控件的取值和赋值。
相关文章
这篇文章主要介绍了jQuery简单获取键盘事件的方法,涉及jQuery针对键盘事件的获取与响应技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jQuery简单绑定单个事件的方法,结合具体实例形式分析了jQuery使用bind方法进行事件绑定与事件响应的相关操作技巧,需要的朋友可以参考下2017-06-06
本文给大家分享的是使用abort来终止JQUERY的$.AJAX请求的方法和示例，有需要的小伙伴可以参考下2016-02-02
今天发现在使用jquery ajax.post提交数据时会发现数据在ff正常，但在chrome与ie浏览器中post过去的数据全部是乱码2013-11-11
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。2010-03-03
这篇文章主要介绍了jQuery操作动态生成的内容的方法,对比分析了bind与live方法,说明了live方法在处理新增元素时的作用,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery+ajax中getJSON() 用法实例,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery延迟执行的实现方法,结合简单实例形式分析了jQuery针对无法同步执行的情况使用延迟执行的操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了jQuery封装的屏幕居中提示信息代码,可以很方便的集成到项目开发中使用,涉及jQuery针对页面元素的动态操作技巧,需要的朋友可以参考下2016-06-06
jquery 选择器，jquery学习与开发中需要用的到，大家可以收藏下，另外可以看下本站提供的学习jquery的资料。2009-10-10
最新评论