<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 表单事件与遍历示例</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1, h2 {
color: #333;
}
form {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #e9e9e9;
border-radius: 4px;
}
.user-item {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.user-item:nth-child(odd) {
background-color: #f2f2f2;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 表单事件与遍历示例</h1>
<h2>1. 表单事件处理</h2>
<form id="userForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入您的邮箱">
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select>
<label for="newsletter">订阅新闻:</label>
<input type="checkbox" id="newsletter" name="newsletter" value="1">
<label for="comments">意见反馈:</label>
<textarea id="comments" name="comments" placeholder="请输入您的意见或建议"></textarea>
<button type="submit">提交</button>
<button type="button" id="resetBtn">重置</button>
</form>
<div class="result" id="formResult">
<h3>表单提交结果将显示在这里</h3>
</div>
<h2>2. 遍历示例</h2>
<div id="userList">
<div class="user-item" data-id="1">
<span class="user-name">张三</span> - <span class="user-email">zhangsan@example.com</span>
</div>
<div class="user-item" data-id="2">
<span class="user-name">李四</span> - <span class="user-email">lisi@example.com</span>
</div>
<div class="user-item" data-id="3">
<span class="user-name">王五</span> - <span class="user-email">wangwu@example.com</span>
</div>
<div class="user-item" data-id="4">
<span class="user-name">赵六</span> - <span class="user-email">zhaoliu@example.com</span>
</div>
</div>
<button id="highlightBtn">高亮所有用户</button>
<button id="oddBtn">高亮奇数行</button>
<button id="evenBtn">高亮偶数行</button>
<div class="result" id="traversalResult">
<h3>遍历操作结果将显示在这里</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 表单事件处理
// 输入框获取焦点事件
$('input, textarea, select').focus(function() {
$(this).css('border-color', '#4CAF50');
});
// 输入框失去焦点事件
$('input, textarea, select').blur(function() {
$(this).css('border-color', '#ddd');
});
// 输入框值改变事件
$('#name').change(function() {
console.log('姓名已更改为: ' + $(this).val());
});
// 复选框改变事件
$('#newsletter').change(function() {
if($(this).is(':checked')) {
console.log('用户选择订阅新闻');
} else {
console.log('用户取消订阅新闻');
}
});
// 表单提交事件
$('#userForm').submit(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 收集表单数据
var formData = {
name: $('#name').val(),
email: $('#email').val(),
gender: $('#gender').val(),
newsletter: $('#newsletter').is(':checked') ? '是' : '否',
comments: $('#comments').val()
};
// 显示表单数据
var resultHtml = '<h3>表单提交成功!</h3><ul>';
$.each(formData, function(key, value) {
resultHtml += '<li><strong>' + key + ':</strong> ' + value + '</li>';
});
resultHtml += '</ul>';
$('#formResult').html(resultHtml);
// 添加到用户列表
if(formData.name && formData.email) {
var newUser = '<div class="user-item" data-id="' + ($('#userList .user-item').length + 1) + '">' +
'<span class="user-name">' + formData.name + '</span> - ' +
'<span class="user-email">' + formData.email + '</span></div>';
$('#userList').append(newUser);
}
});
// 重置按钮点击事件
$('#resetBtn').click(function() {
$('#userForm')[0].reset();
$('#formResult').html('<h3>表单已重置</h3>');
});
// 遍历示例
// 高亮所有用户
$('#highlightBtn').click(function() {
$('#userList .user-item').each(function(index) {
$(this).toggleClass('highlight');
});
$('#traversalResult').html('<p>已切换所有用户的高亮状态</p>');
});
// 高亮奇数行
$('#oddBtn').click(function() {
$('#userList .user-item').removeClass('highlight');
$('#userList .user-item:odd').addClass('highlight');
$('#traversalResult').html('<p>已高亮奇数行用户</p>');
});
// 高亮偶数行
$('#evenBtn').click(function() {
$('#userList .user-item').removeClass('highlight');
$('#userList .user-item:even').addClass('highlight');
$('#traversalResult').html('<p>已高亮偶数行用户</p>');
});
// 用户项点击事件
$('#userList').on('click', '.user-item', function() {
var userId = $(this).data('id');
var userName = $(this).find('.user-name').text();
var userEmail = $(this).find('.user-email').text();
$('#traversalResult').html(
'<p>点击的用户ID: ' + userId + '</p>' +
'<p>姓名: ' + userName + '</p>' +
'<p>邮箱: ' + userEmail + '</p>'
);
});
// 使用.children()和.find()遍历
console.log('用户列表的直接子元素数量:', $('#userList').children().length);
console.log('用户列表中的所有span元素数量:', $('#userList').find('span').length);
});
</script>
</body>
</html>
扫一扫
19
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
