jQuery 根据 DOM 元素 attribute 进行过滤的语法

简介: jQuery 根据 DOM 元素 attribute 进行过滤的语法

源代码:

<!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 的基本操作。

相关文章
|
18小时前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
2天前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
|
2天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
|
5天前
|
前端开发 JavaScript
jQuery改变元素
jQuery改变元素
|
27天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
16 2
|
28天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
30 1
|
1月前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
24 0
|
1月前
|
JavaScript
jQuery创建、删除、添加元素
jQuery创建、删除、添加元素
|
1月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
32 1
N..
|
1月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
19 1