JQuery从头学起第三讲


Posted in Javascript onJuly 06, 2010
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery3.aspx.cs" Inherits="JQuery_1.JQuery3" %> 
<!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 Get() { 
var v1 = $("#txt1").val();//获取文本框输入的值 
var v11 = $("#txt1").attr("value");//获取文本框输入的值,效果和上面方法一致 
var v2 = $("#txt2").val();//文本框输入的密码的值 
var v3 = $("input[name='ck']:checked").val();//获取checkbox勾上后的值, 
var v4 = $("#h1").val();//获取隐藏控件的值 
var v5 = $("input[name='rdo']:checked").val();//获取一组radio被选中的值 
var v6 = $("#ss").val();//获取下来框选中的value 
var v7 = $("select[name='s1'] option[value='" + v6 + "']").text();//选取下拉框选中的文本 
var v8 = $("select[id='ss'] option[value='" + v6 + "']").text();//选取下拉框选中的文本,上面是通过name来获取,这里是通过ID来获取,但这里的ID不能加# 
alert(v1+","+v2+","+v3+","+v4+","+v5+","+v6+","+v8) 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="text" id="txt1" /> 
<input type="password" id="txt2" /> 
男<input type="checkbox" id="ck1" name="ck" value="男" /> 
<input type="hidden" id="h1" value="www.54talk.cn" /> 
www<input type="radio" id="r1" name="rdo" value="www" /> 
54talk<input type="radio" id="r2" name="rdo" value="54talk" /> 
cn<input type="radio" id="r3" name="rdo" value="cn" /> 
<select name="s1" id="ss"> 
<option value="0">男</option> 
<option value="1">女</option> 
</select> 
<input type="button" onclick="Get()" value="取值"/> 
</div> 
</form> 
</body> 
</html>

以上DEMO中的代码是我一个个敲出来的,都经过测试,大家可以放心的使用。这个DEMO中主要加了对输入框的几种类型的取值,这也列举了取值的两种方式,DEMO中除了介绍了文本框的取值外还介绍了下拉框,单选框,多选框的取值,这里用到了复合属性选择器,需要同时满足多个条件时使用。不像文本框那么单纯,用个ID就可以获取到值。在获取select的value的时候也用个复合属性选择器就可以了,但是要获取下拉框的文本就要先得到value,再根据value去获取text。

今天这一讲就讲这么多,下一讲我们讲用JQuery来对这些常用控件赋值,因为我们在做页面初始化的时候,常常需要对某些控件进行初始化。

Javascript 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 #Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 #Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 #Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 #Javascript
jquery 查找新建元素代码
Jul 06 #Javascript
jquery 3D球状导航的文章分类
Jul 06 #Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP 代码规范小结
2012/03/08 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
vue组件name的作用小结
2018/05/23 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
python绘制趋势图的示例
2020/09/17 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
纽约海:Sea New York
2018/11/04 全球购物
毕业生实习鉴定
2013/12/11 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技