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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
很棒的vue弹窗组件
May 24 Javascript
详解a++和++a的区别
Aug 30 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 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作的文本留言本的例子(三)
2006/10/09 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
javascript求日期差的方法
2016/03/02 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
JS实现li标签的删除
2019/04/12 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
学生喝酒检讨书
2014/02/06 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
地雷战观后感
2015/06/09 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电