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 相关文章推荐
浅析jquery的作用与优势
Dec 02 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
Angular6项目打包优化的实现方法
Dec 15 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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 传值赋值与引用赋值的区别
2010/12/29 PHP
php标签云的实现代码
2012/10/10 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python Django批量导入不重复数据
2016/03/25 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python dumps和loads区别详解
2020/02/04 Python
详解Python yaml模块
2020/09/23 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
寄语是什么意思
2014/04/10 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
检讨书格式范文
2015/05/07 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS