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传递变量: 值传递?引用传递?
Feb 22 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
jQuery定义插件的方法
Dec 18 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
微信小程序实现简单表格
Feb 14 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
Vue vee-validate插件的简单使用
Jun 22 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实现json_decode不转义中文的方法
2017/05/20 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python实现画圆功能
2018/01/25 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
上班睡觉检讨书
2014/01/09 职场文书
微博营销计划书
2014/01/10 职场文书
委托证明书
2014/09/17 职场文书
房产公证书格式
2015/01/26 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Go使用协程交替打印字符
2021/04/29 Golang
mysql 生成连续日期及变量赋值
2022/03/20 MySQL