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.open()弹出居中的窗口
Feb 01 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP插入排序实现代码
2013/04/04 PHP
php实现mysql封装类示例
2014/05/07 PHP
php文件上传类的分享
2017/07/06 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JavaScript 指导方针
2007/04/05 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JS之相等操作符详解
2016/09/13 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
利用Python查看目录中的文件示例详解
2017/08/28 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python使用matplotlib绘制热图
2018/11/07 Python
python基础 range的用法解析
2019/08/23 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python实现取余操作的简单实例
2020/08/16 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
元宵节主持词
2014/03/25 职场文书
技术股份合作协议书
2014/10/05 职场文书
未婚证明格式
2015/06/15 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python