id选择器

2025-11-15 20:58:35 网络作者：本站点击：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>ID选择器的实例</title>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
    $("input[type='button']").click(function(){   //为按钮绑定单击事件
      var inputValue = $("#testInput").val();   //获取文本框的值
      alert(inputValue);//输出文本框的值
    });
   });
</script>

</head>

<body background="bg.gif">
  <input type="text" id="testInput" name="test" value=""/>
  <input type="button" value="输入的值为"/>
</body>
</html>

我来为您详细讲解这段HTML代码的每一部分：

1. 文档类型和基础结构

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html> 声明这是HTML5文档
<html> 定义文档根元素，语言为英文

2. 头部信息 (head部分)

<head>
    <meta charset="UTF-8">
    <title>ID选择器的实例</title>

<meta charset="UTF-8"> 设置字符编码为UTF-8，支持中文显示
<title> 设置浏览器标签页标题为"ID选择器的实例"

3. JavaScript引入和代码

<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>

引入jQuery库，版本3.2.1，文件路径为"JS/jquery-3.2.1.min.js"

$(document).ready(function(){
    $("input[type='button']").click(function(){
        var inputValue = $("#testInput").val();
        alert(inputValue);
    });
});

‌这段jQuery代码的执行流程：‌

第一步：文档就绪检测

$(document).ready(function(){...}) 等待整个HTML文档加载完成后再执行内部代码

第二步：事件绑定

$("input[type='button']") 使用jQuery选择器选中所有type为button的input元素
.click(function(){...}) 为这些按钮绑定点击事件处理函数

第三步：获取输入值

$("#testInput") 使用ID选择器选中id为"testInput"的元素
.val() 获取该输入框的值
var inputValue = ... 将获取的值存储在inputValue变量中

第四步：显示结果

alert(inputValue) 使用浏览器弹窗显示输入框的值

4. 页面主体 (body部分)

<body background="bg.gif">

设置页面背景图片为"bg.gif"

<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="输入的值为"/>

第一个input：文本输入框，id为"testInput"，name为"test"，初始值为空
第二个input：按钮，显示文字为"输入的值为"

代码执行效果

当用户在文本框中输入内容并点击按钮时：

jQuery检测到按钮点击事件
通过ID选择器#testInput找到对应的文本框
获取文本框中的内容
使用alert弹窗显示用户输入的内容

‌核心特点：‌

使用了jQuery的ID选择器(#id)来精确选择元素
实现了简单的前端交互功能
演示了事件绑定和DOM操作的基本用法

这段代码是一个典型的前端交互示例，展示了如何使用jQuery实现基本的用户输入获取和显示功能。

<script type="text/javascript">
   $(document).ready(function(){
		$("input[type='button']").click(function(){		//为按钮绑定单击事件
			var inputValue = $("#testInput").val();  	//获取文本框的值
	 		alert(inputValue);//输出文本框的值
		});
   });
</script>

我来为您详细讲解这段jQuery代码的每一部分：

代码整体结构

$(document).ready(function(){
    // 代码内容
});

这是jQuery的文档就绪函数，确保在DOM完全加载后才执行内部代码，避免在元素未加载时进行操作。

事件绑定部分

$("input[type='button']").click(function(){
    // 事件处理逻辑
});

$("input[type='button']") - 使用jQuery选择器选中所有type属性为"button"的input元素
.click(function(){...}) - 为选中的按钮绑定点击事件监听器

事件处理函数

var inputValue = $("#testInput").val();
alert(inputValue);

$("#testInput") - 使用ID选择器选中id为"testInput"的元素
.val() - 获取该输入框的当前值
var inputValue = ... - 将获取的值存储在inputValue变量中
alert(inputValue) - 使用浏览器弹窗显示输入框的值

代码执行流程

‌等待文档加载‌：页面完全加载后触发ready函数
‌绑定事件监听‌：为所有按钮元素添加点击事件监听
‌用户交互‌：当用户点击按钮时触发事件处理函数
‌获取数据‌：通过ID选择器找到文本框并获取其内容
‌显示结果‌：使用alert弹窗显示用户输入的内容

技术特点

‌jQuery选择器‌：使用CSS选择器语法精确选择DOM元素
‌事件委托‌：通过事件绑定实现用户交互
‌链式调用‌：jQuery的典型编程风格
‌ID选择器‌：#testInput通过元素的id属性进行精确选择

这段代码展示了jQuery简化DOM操作和事件处理的能力，是前端开发中常见的基础交互模式。

标签：