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取float型小数点后两位数的方法
Jan 18 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
js实现tab切换效果
Feb 16 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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
新浪新闻小偷
2006/10/09 PHP
最省空间的计数器
2006/10/09 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
详解php协程知识点
2018/09/21 PHP
新浪的图片新闻效果
2007/01/13 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
angularjs性能优化的方法
2018/09/05 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python内置数据类型详解
2014/08/18 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python列表切片常用操作实例解析
2019/12/16 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
党员自我评价分享
2013/12/13 职场文书
综合办公室主任职责
2013/12/16 职场文书
意向书范本
2014/07/29 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
2016年寒假生活小结
2015/10/10 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Python面向对象编程之类的概念
2021/11/01 Python