JQuery从头学起第二讲


Posted in Javascript onJuly 04, 2010

这一讲中,主要对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,下一讲,我们将会讲常用控件的取值和赋值。

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
jquery操作select大全
Apr 25 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
JQuery从头学起第一讲
Jul 04 #Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 #Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 #Javascript
一个原生的用户等级的进度条
Jul 03 #Javascript
清空上传控件input file的值
Jul 03 #Javascript
javascript深入理解js闭包
Jul 03 #Javascript
JSON JQUERY模板实现说明
Jul 03 #Javascript
You might like
url decode problem 解决方法
2011/12/26 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
python 基于wx实现音乐播放
2020/11/24 Python
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
教师自我评价范文
2013/12/16 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
房地产广告策划方案
2014/05/15 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
授权收款委托书
2014/09/23 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
禁毒主题班会教案
2015/08/14 职场文书