ex-8.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
//给文本输入框增加聚焦函数
$(":text").focus(function(){
var val = $(this).val() ;
if(val = this.defaultValue) {
$(this).val("") ;
}
//给文本输入框增加失去(或移去)焦点函数
}).blur(function(){
var val = $.trim($(this).val()) ;
if(val == "") {
$(this).val(this.defaultValue) ;
}
}) ;
$(":button:eq(1)").click(function(){
//这样就表示单选下拉框选中
//这里的val()中的值是指文本信息
$("#single").val("选择3号") ;
}) ;
$(":button:eq(2)").click(function(){
//这样就表示多选下拉框选中多个(多个就用数组表示)
//这里val()中的值是指文本信息
$("#multiple").val(["选择2号","选择4号"]) ;
}) ;
$(":button:eq(3)").click(function(){
//同上,这里的val()中的值是指标签的属性value等于的值
$(":checkbox").val(["check2","check4"]) ;
//$(":checkbox").val(["check2"]) ; checkbox 即使选择一个也是用数组表示
}) ;
$(":button:eq(4)").click(function(){
//同上
$(":radio").val(["radio2"]) ;
}) ;
$(":button:eq(5)").click(function(){
alert($("#single").val()) ;
alert($("#multiple").val()) ;
alert($(":radio:checked").val()) ;
//下面的方式只能打印被选中的 checkbox 的第一个值
//alert($(":checkbox:checked").val());
//若希望打印全部被选中的值, 需要遍历
$(":checkbox:checked").each(function(){
alert($(this).val()) ;
}) ;
}) ;
}) ;
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"><br>
<input type="text" id="password" value="请输入邮箱密码"><br>
<input type="button" value="登录">
<br><br><br>
<input type="button" value="使单选下拉框的'选择3号'被选中"/>
<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" name="c" value="check1"/> 多选1
<input type="checkbox" name="c" value="check2"/> 多选2
<input type="checkbox" name="c" value="check3"/> 多选3
<input type="checkbox" name="c" value="check4"/> 多选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
</html>
分享到:
相关推荐
jquery练习
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图,也含有原生js轮播图案例,每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
自己练习的jquery ui 一些基本的用法
jQuery练习题1
里面有几个jquery的实例,还有一部分方法
新人,最近练习的一些jquery实现的前端效果
js练习,jquery练习一个小程序js练习,jquery练习一个小程序js练习,jquery练习一个小程序
本文件是一个小的工程,关于ajax框架的jquery的一些小的练习,与大家分享。
jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,...
其中包括jQuery手册;jQuery示例;共同学习~
1:导航菜单弹出二级菜单 博文链接:https://justsee.iteye.com/blog/798405
本练习简单涉及到了JQuery选择器、事件、文档处理、函数、属性的使用
Jquery练习1:制作简易的当当购物车页面.zip
JQuery练习集合 包括:节点遍历、节点替换、链式编程、链式each、选择过滤器、相对选择器、球队选择、属性选择器等等例子
一个jquery的属性节点的训练,在这个小练习里面可以巩固对jquery知识的掌握,适合jquery的初学者,是一个很好的练习案例。我实在编不下去了呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀
Jquery练习2:制作QQ简易聊天框.zip
jQuery的练习题,含有答案,可以进行学习。
js 小项目练习,jQuery 小例子。 使用jquery写的一些小例子,比如菜单,星级评分,轮播图,拖拽上传等效果源码。 jquery小项目
锋利的jquery(练习)