JQuery从头学起第三讲

preview
需积分: 0 0 下载量 192 浏览量 更新于2020-12-11 收藏 39KB PDF 举报
代码如下: <%@ 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”> 在本篇"JQuery从头学起第三讲"中,我们将深入探讨如何使用jQuery来获取网页中不同类型的表单元素的值。看到代码片段,这是一个基于ASP.NET的网页,其中包含了一些基本的HTML元素,如文本框、密码框、复选框、隐藏字段、单选按钮以及下拉列表,所有这些都是为了演示jQuery的选择器和取值功能。 1. **jQuery选择器**:jQuery选择器是用于定位和选择HTML元素的关键部分。在示例中,我们看到了以下几种选择器: - `$("#txt1")`:通过ID选择器选取ID为"txt1"的文本框。 - `input[name=’ck’]:checked`:通过属性选择器选取名称为"ck"且被选中的复选框。 - `#h1`:同样通过ID选择器选取ID为"h1"的隐藏字段。 - `input[name=’rdo’]:checked`:选取名称为"rdo"且被选中的单选按钮。 - `#ss`:通过ID选择器选取ID为"ss"的下拉列表。 - `select[name=’s1′] option[value=' + v6 + ']` 和 `select[id=’ss’] option[value=' + v6 + ']`:使用复合属性选择器选取与特定值匹配的下拉列表选项。 2. **获取表单元素的值**: - `val()` 方法用于获取元素的值,例如 `$(“#txt1”).val()` 获取文本框的输入值。 - `attr("value")` 也可以获取文本框的值,对于大部分元素,它与 `val()` 效果相同。 - `$(“input[name=’ck’]:checked”).val()` 获取选中的复选框的值。 - `$(“#h1”).val()` 获取隐藏字段的值。 - `$(“input[name=’rdo’]:checked”).val()` 获取选中的单选按钮的值。 - `$(“#ss”).val()` 获取下拉列表选中的选项的值。 - `$(“select[name=’s1′] option[value='” + v6 + “‘]”).text()` 和 `$(“select[id=’ss’] option[value='” + v6 + “‘]”).text()` 分别通过name和ID获取下拉列表选中项的文本。 3. **复合属性选择器**:当需要根据多个属性条件来选取元素时,可以使用复合属性选择器。例如,`input[name=’ck’]:checked` 选取了名称为"ck"且被选中的复选框。 4. **事件处理**:在示例中,`onclick=”Get()”` 绑定了一个点击事件,当用户点击按钮时会执行 `Get` 函数,该函数通过jQuery获取并显示所有表单元素的值。 5. **使用场景**:这些操作在网页开发中非常常见,特别是在页面初始化或响应用户交互时,我们需要获取用户的输入数据,或者根据特定条件改变元素的值。 在接下来的讲解中,我们将探讨如何使用jQuery为这些常见的表单控件赋值,这在构建动态网页时是非常重要的,因为它允许我们根据需要更新界面状态,为用户提供反馈,或进行数据验证。理解这些基础操作对于熟练掌握jQuery至关重要,因为它们构成了更复杂交互和动画效果的基础。