首頁 > web前端 > js教程 > 主體

JQuery从头学起第二讲_jquery

WBOY
發布: 2016-05-16 18:23:44
原創
1207 人瀏覽過

这一讲中,主要对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,下一讲,我们将会讲常用控件的取值和赋值。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板