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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JavaScript类的写法
Sep 17 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
搭建vue开发环境
Jul 19 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 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python基于SMTP协议发送邮件
2019/05/31 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
文明礼仪小标兵事迹
2014/01/12 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
四年级语文教学反思
2014/02/05 职场文书
大学生校园创业计划书
2014/02/08 职场文书
考核工作实施方案
2014/03/30 职场文书
公司合作协议书范本
2014/04/18 职场文书
美术指导助理求职信
2014/04/20 职场文书
校园文化标语
2014/06/18 职场文书
清洁工个人总结
2015/03/04 职场文书
民事诉讼代理词
2015/05/25 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
小学体育教学随笔
2015/08/14 职场文书