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 Tools tooltip使用说明
Jul 14 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
vue3.0 搭建项目总结(详细步骤)
May 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/04/22 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
VUE实现强制渲染,强制更新
2019/10/29 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python csv模块使用方法代码实例
2019/08/29 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
介绍一下gcc特性
2012/01/20 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
中秋节主持词
2014/04/02 职场文书
质量保证书格式
2015/02/27 职场文书
门球健将观后感
2015/06/16 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
靠谱准确的求职信
2019/04/02 职场文书
python实现简单的聊天小程序
2021/07/07 Python