JQuery从头学起第二讲_jquery

这一讲中，主要对JQuery的选择器做个简单的介绍，JQuery是怎么样来获取到值的。废话不多说，直接贴代码，我们根据DEMO来说事。

从代码的第一行可以看出，其实这是个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，下一讲，我们将会讲常用控件的取值和赋值。