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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
javascript this详细介绍
Sep 19 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
jQuery手风琴的简单制作
May 12 jQuery
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP数据过滤的方法
2013/10/30 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python如何为创建大量实例节省内存
2018/03/20 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python函数不定长参数使用方法解析
2019/12/14 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
中班开学寄语
2014/04/04 职场文书
村居抓节水倡议书
2014/05/19 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL