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案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图,也含有原生js轮播图案例,每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
在“jQuery练习实例”这个压缩包中,我们可以期待找到一系列的示例代码和讲解,帮助我们深入理解jQuery的核心功能和常见用法。 1. **DOM操作**:jQuery的核心在于其对DOM(Document Object Model)的操作。通过简洁...
通过练习,加深对jQuery的理解,提高编写高效、简洁代码的能力。 总结来说,jQuery作为一款强大的JavaScript库,它简化了许多前端开发中的常见任务,提高了开发效率。通过学习和实践jQuery,开发者可以更好地驾驭...
本篇文章将深入探讨“jQuery练习”这一主题,特别关注如何使用jQuery实现导航菜单弹出二级菜单的功能。 首先,让我们理解导航菜单的基本结构。在网页设计中,导航菜单通常包含一级菜单项,当用户悬停在这些项上时,...
本篇文章将围绕"Jquery部分效果练习"这一主题,详细阐述jQuery中的核心概念和常见效果的实现。 首先,jQuery的核心在于它的选择器。选择器类似于CSS,用于选取HTML文档中的元素。例如,`$("#id")`用于选取ID为"id...
8. **实例分析**:`jQ_NO1.rar`和`jQ_NO2.rar`可能包含的是jQuery的实例代码,通过解压并运行这些例子,你可以更直观地理解jQuery的用法和应用场景。 9. **jQueryDocXML2CHM-090223.chm**:这是一个帮助文档,可能...
通过上述的练习题,你可以实践并巩固这些选择器的用法。记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的...
本练习旨在帮助你熟悉并掌握jQuery的基本用法,包括选择器、事件、文档处理、函数以及属性的运用。 首先,让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器,允许你高效地选取DOM元素。例如,`$("#id")`...
jQuery 练习题 本资源为 jQuery 练习题,包含答案,可以进行学习。下面是从该资源中生成的相关知识点: 一、 jQuery 基础知识 1. jQuery 显示隐藏的元素用 show() 方法实现。 2. jQuery 中,$.ajaxSetup() 用于...
本文件是一个小的工程,关于ajax框架的jquery的一些小的练习,与大家分享。
jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,...
在本项目"Jquery练习2:制作QQ简易聊天框.zip"中,我们将探索如何使用jQuery这一流行的JavaScript库来创建一个类似QQ的简单聊天界面。这个练习旨在帮助开发者掌握jQuery的基本用法,以及如何利用它来增强网页的交互...
8. **遍历和操作集合**: `$.each()`函数可用于遍历数组或对象,而`.each()`方法则用于遍历jQuery对象集合。`.eq(index)`选取指定索引的元素,`.first()`和`.last()`分别选取集合中的第一个和最后一个元素。 9. **...
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品,虽然存在一些bug,但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中,`js` 文件夹可能包含你编写的所有 JavaScript 代码,这些代码...
标题中的“Jquery练习-包含JQUERY1.4.2的js库”指向的是一个学习资源,特别关注于jQuery 1.4.2版本的实践应用。这个版本在2010年发布,虽然不是最新版,但对于初学者来说,它仍然是理解jQuery核心概念的好起点。** ...
在本练习中,你将运用jQuery处理一系列与属性节点相关的任务,例如: - 灰太狼的图片显示与隐藏,通过控制`style.display`属性来实现。 - 灰太狼的位置移动,利用`data-*`自定义属性记录坐标,通过修改这些属性值并...
在"js练习,jquery练习 购物车.zip"这个压缩包中,我们可以期待找到一个基于 JavaScript 和 jQuery 的购物车应用的源代码。购物车功能是电商网站的核心部分,它涉及到商品的添加、删除、数量增减以及总价计算等多个...
(8)将tbody每个单元格里的文字设为:我爱jQuery (9)查找form元素的后代元素中标签为label的元素 (10)查找表单元素中是否有id值为checkbox5的元素 提示: 为某dom元素应用某css样式可以使用jQuery...
在"js 小项目练习,jQuery 小例子"中,我们可以看到几个基于jQuery实现的常见功能: 1. **菜单**:jQuery可以轻松地创建动态菜单,包括下拉菜单、滑动菜单等。通过监听用户的鼠标事件,如hover(悬停)和click...
8. **CSS和JavaScript的结合**:通过使用jQuery,我们可以更容易地控制CSS样式。例如,`toggleClass()`可以根据条件切换CSS类,而`css()`可以动态改变元素的样式属性。 在实践中,我们需要编写HTML结构来表示商品...