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学习笔录 简单的JQuery
Apr 09 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Vue watch响应数据实现方法解析
Jul 10 Javascript
微信小程序实现文件预览
Oct 22 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入门学习知识点三 PHP上传
2011/07/14 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
python清除函数占用的内存方法
2018/06/25 Python
python斐波那契数列的计算方法
2018/09/27 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
用Python解数独的方法示例
2019/10/24 Python
wxPython色环电阻计算器
2019/11/18 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python如何爬取网页中的文字
2020/07/28 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
大学活动总结格式
2014/04/29 职场文书
python办公自动化之excel的操作
2021/05/23 Python
详解JVM系列之内存模型
2021/06/10 Javascript
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js