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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 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
php 求质素(素数) 的实现代码
2011/04/12 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
JavaScript this 深入理解
2009/07/30 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python fileinput模块使用实例
2015/06/03 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python中如何使用虚拟环境
2020/10/14 Python
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
三严三实学习心得体会
2014/10/13 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python