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 键盘keyCode键码值表
Dec 24 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
JS作用域深度解析
Dec 29 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
js实现随机圆与矩形功能
Oct 29 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
js读取配置文件自写
2014/02/11 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
javascript如何实现create方法
2019/11/04 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
基于Python log 的正确打开方式
2018/04/28 Python
python调用摄像头拍摄数据集
2019/06/01 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
英文自荐信格式
2013/11/28 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
企业标语口号
2014/06/10 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
离婚协议书范文2015
2015/01/26 职场文书
共青团员自我评价
2015/03/10 职场文书
青年志愿者活动感想
2015/08/07 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书