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，下一讲，我们将会讲常用控件的取值和赋值。

赞 (0)

相关推荐

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

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

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

  • JQuery从头学起第二讲

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

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

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

  • 解决JQuery全选/反选第二次失效的问题

    解决JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了. 原代码大致结构关键如下: function selectAll(obj){ $('input[name="xxx[]"]').attr("checked",obj.checked); } <input type="checkbox" id="mother" name="

  • 跟着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()这个函数用来干吗的

  • 《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组

    数字.浮点.布尔型是值类型,英文:int.float.bool,这样你知道他们怎么用了. 比如语句:$fa=3.14; 字符串和数组是引用类型,也就是说他们作为地址放在栈里,当重新赋值时,栈里的地址改变方向,原来的指向变没或给回收了,英文:string.array. 比如:$str="字符串";$arr=array("a"=>"数","b"=>"组");// array()是一个数组赋值函数,这

随机推荐