1、代码
<!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>jQuery的val()方法的两个练习</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数
$(":text").focus(function(){
//2. 当获取焦点时, 若 #address 中是默认值
//(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""
var val = $(this).val();
if(val == this.defaultValue){
$(this).val("");
}
}).blur(function(){
//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""
//则为其恢复默认值.
var val = this.value;
if($.trim(val) == ""){
this.value = this.defaultValue;
}
});
//2.使单选下拉框的'选择3号'被选中
$(":button:eq(1)").click(function(){
$("#single").val("选择3号");
});
//3.使多选下拉框选中的'选择2号'和'选择4号'被选中
$(":button:eq(2)").click(function(){
$("#multiple").val(["选择2号", "选择4号"]);
});
//4.使多选框的'多选2'和'多选4'被选中
$(":button:eq(3)").click(function(){
$(":checkbox[name='c']").val(["check2", "check4"]);
});
//5.使单选框的'单选2'被选中
$(":button:eq(4)").click(function(){
//即便是为一组 radio 赋值, val 参数中也应该使用数组.
//使用一个值不起作用。
$(":radio[name='r']").val(["radio2"]);
});
//6.打印已经被选中的值
$(":button:eq(5)").click(function(){
//val() 可以直接获取 select 的被选择的值.
alert($("#single").val());
alert($("#multiple").val());
//val 不能直接获取 checkbox 被选择的值
//若直接获取, 只能得到第一个被选择的值.
//因为 $(":checkbox[name='c']:checked") 得到的是一个
//数组. 而使用 val() 方法只能获取数组元素的第一个值
//若希望打印被选择的所有制, 需要使用 each 遍历.
//alert($(":checkbox[name='c']:checked").val());
$(":checkbox[name='c']:checked").each(function(){
alert(this.value);
});
//而 raido 被选择的只有一个, 所以可以直接使用 val() 方法.
alert($(":radio[name='r']:checked").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>
2、原始界面
相关推荐
在本节课程“04_尚硅谷_jQuery_王振国 - 课堂笔记1”中，主要讲解了jQuery中的一些核心操作，包括属性操作、练习、CSS样式操作、动画操作和事件操作。以下是对这些知识点的详细说明： 1. jQuery 的属性操作： - `...
### jQuery基础教程：常用思路与方法详解 #### 一、简介 jQuery 是一款流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。本教程旨在帮助初学者掌握 jQuery 的基本用法，并通过...
后端 核心框架：Spring Framework 4.2.5.RELEASE 安全框架：Apache Shiro 1.3.2 视图框架：Spring MVC 4.2.5.RELEASE 数据库连接池：Tomcat JDBC 缓存框架：Ehcache ORM框架：Spring Data ...表单验证 ：jquery.vali
3. **动画效果**：jQuery的`.animate()`方法是实现平滑动画的关键。它可以改变元素的CSS属性，如位置、大小、透明度等，创建出丰富的视觉效果。另外，`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等预定义动画也是...
1. **jQuery选择器**：jQuery提供了丰富的选择器，如ID选择器(#id)，类选择器(.class)，元素选择器(element)，以及组合选择器(如：$, $(), $('div.class'), $('#id .class')等)。这些选择器帮助开发者高效地定位到...
3. **选择器**：jQuery的选择器基于CSS，如`.class`选取具有特定类名的元素，`$("tagname")`选取特定标签，`$(".class1.class2")`选取同时具有两种类名的元素。 4. **链式调用**：jQuery对象支持链式调用，如`$("#...
4. **链式调用**：jQuery对象方法返回的都是jQuery对象，允许连续调用多个方法。 四、知识付费的价值 虽然这里提供的是jQuery 1.12.4.js的免费获取途径，但知识付费的概念值得提倡。开发者的时间和精力是宝贵的，...
13. **表单处理**: jQuery提供方便的方法来获取或设置表单元素的值，如`$('input').val()`，并可以方便地提交表单或模拟表单提交。 14. **DOM准备和文档就绪**: `$(document).ready(function() {...})`确保在DOM...
7. **工具方法**：jQuery 提供了一系列无需选择元素即可使用的工具方法，如： - `.isEmptyObject()`：检查对象是否为空。 - `.isFunction()`：判断参数是否为函数。 - `.isPlainObject()`：确认参数是否为普通...
2. **DOM操作**: jQuery提供了方便的方法来操作DOM，如`append()`, `prepend()`, `insertBefore()`, `insertAfter()`用于添加和插入元素，`remove()`, `empty()`用于删除元素，`html()`, `text()`, `val()`用于获取...
例如，可以扩展一个min()方法来返回两个数值中的最小值。 7. 支持方法的连写：为了代码的简洁和链式调用的方便，jQuery的方法支持连写，即在一个元素上连续调用多个方法。 8. 操作元素的样式：jQuery提供了简洁的...
6. **属性和方法**：jQuery对象有许多内置的方法，如`$(selector).attr('attribute')`获取属性值，`$(selector).addClass('className')`添加CSS类，`$(selector).val()`获取表单元素的值。 7. **链式操作**：jQuery...
2. **DOM操作**：jQuery提供了丰富的DOM操作方法，如`append()`用于在元素内部添加内容，`prepend()`在元素开头插入内容，`remove()`删除元素，`clone()`复制元素，以及`html()`, `text()`, `val()`等用于获取或设置...
6. **链式操作**：jQuery对象可以连续调用多个方法，这是其语法的一大特色。例如，`$("#element").css("color", "red").slideUp();`。 7. **插件生态**：jQuery拥有庞大的插件生态系统，如Bootstrap、jQuery UI等，...
5. **链式操作**：jQuery 的设计允许方法返回 jQuery 对象本身，这意味着你可以连续调用多个方法，如 `$('#element').hide().fadeIn(1000)`。 6. **插件生态系统**：jQuery 社区提供了大量的插件，如表单验证、轮播...
8. **链式调用**：jQuery的一大特性是链式调用，源码中会有很多这样的例子，通过点`.`连接多个方法调用来提高代码可读性。 9. **版本兼容性**：jQuery的版本更新可能会引入新的API或移除旧的，源码可能涵盖了不同...
结合这两个概念，如果我们想要在用户点击按钮时获取ID并执行某些操作，可以这样做： ```javascript $("#myButton").on("click", function() { var buttonId = $(this).attr("id"); // 获取按钮ID var inputVal = ...
2. **DOM操作**：jQuery提供了一系列便捷的方法来操作DOM，如`append()`、`prepend()`用于向元素内部添加内容，`remove()`用于移除元素，`html()`、`text()`和`val()`分别用于获取或设置元素的HTML内容、纯文本和...
2. **遍历与过滤**：jQuery提供了丰富的遍历和过滤方法，如`.each()`用于遍历集合中的每个元素，`.first()`和`.last()`选取第一个或最后一个元素，`.eq(index)`选取指定索引的元素，`.not(selector)`排除匹配的元素...
2. **DOM操作（DOM Manipulation）**：jQuery提供了丰富的DOM操作方法，如`append()`用于在元素内部追加内容，`prepend()`在元素内部前置内容，`remove()`删除元素，`clone()`克隆元素，`html()`, `text()`, `val()`...