源代码：
<!DOCTYPE html> <html> <head> <script src="jQuery/jquery1.7.1.js" > </script> </head> <body class="jchartfx_body"> <div> <input type="radio" disabled id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </div> <script language="javascript"> $(document).ready(function ($) { var result = $("input[type='radio']:not(:disabled)"); var result2 = $("input[type='radio']").filter(":not(:disabled)"); debugger; }); </script> </div> </div> </body> </html>
这段 HTML 文档中，包含了基本的 HTML 结构、外部引入的 jQuery 库文件、一些简单的表单输入元素，以及一段用于 DOM 操作的 jQuery 脚本。现在，我将详细解释这段代码的每个部分及其作用。
代码结构解析
文档类型声明
<!DOCTYPE html>
这行代码是 HTML5 文档类型声明，用于告诉浏览器当前页面使用 HTML5 标准。
HTML 根元素
<html>
<html> 标签定义了整个 HTML 文档的根元素。
头部区域
<head> <script src=`jQuery/jquery1.7.1.js`></script> </head>
<head> 标签内包含了文档的元数据。这里用 <script> 标签引入了 jQuery 库的版本 1.7.1。jQuery 是一个 JavaScript 库，极大简化了 JavaScript 编程，特别是 DOM 操作、事件处理等。
页面主体
<body class=`jchartfx_body`> <div> <input type="radio" disabled id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </div>
<body>标签定义了 HTML 文档的主体部分，class="jchartfx_body"是给<body>标签添加一个 CSS 类，用于可能的样式定义。<div>标签用于页面的区块划分。- 里面包含三个
<input type="radio">单选按钮和相应的<label>标签。其中第一个单选按钮因disabled属性被禁用，无法选中。 - 每个
<input>标签的id属性和对应<label>的for属性配对使用，增强了可用性和可访问性，点击标签时可以选择对应的单选按钮。
JavaScript 代码
<script language="javascript"> $(document).ready(function ($) { var result = $("input[type='radio']:not(:disabled)"); var result2 = $("input[type='radio']").filter(":not(:disabled)"); debugger; }); </script>
- 这段脚本首先通过
$(document).ready()确保 DOM 完全加载后再执行内部函数。$是 jQuery 的别名，表示 jQuery 函数。 var result = $("input[type='radio']:not(:disabled)");这行代码使用 jQuery 选择器选取所有未被禁用的单选按钮。:not(:disabled)是一个选择器，表示选取不符合:disabled状态的元素。var result2 = $("input[type='radio']").filter(":not(:disabled)");这行与上一行代码实际执行相同的功能，但通过先选择所有单选按钮然后使用.filter()方法筛选未禁用的按钮来实现。debugger;关键字用于调试 JavaScript 代码，当浏览器的开发者工具打开时，代码执行到这里会自动暂停。
综合分析
这个 HTML 示例主要展示了如何使用 HTML 和 jQuery 实现基本的页面结构和动态 DOM 查询。通过禁用和未禁用单选按钮的区分处理，演示了 jQuery 强大的选择器功能。整体代码简洁，目的明确，适用于入门学习 HTML 结构、表单元素的使用和 jQuery 的基本操作。
