用php+JQ+CSS3写出网址收藏的代码具有添加删除锁定模糊搜索网址格式为网址名url状态

以下是一个简单的实现，包含了添加、删除、锁定和模糊搜索功能。请注意，这只是一个示例，实际应用中可能需要更复杂的逻辑和安全性措施。

HTML部分：

<!DOCTYPE html>
<html>
<head>
	<title>网址收藏</title>
	<style>
		#list {
			list-style: none;
			padding: 0;
		}
		.item {
			margin: 10px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			overflow: hidden;
			position: relative;
		}
		.item.locked {
			background-color: #eee;
		}
		.item .name {
			font-weight: bold;
			margin-bottom: 5px;
		}
		.item .url {
			color: #666;
			margin-bottom: 10px;
		}
		.item .status {
			position: absolute;
			bottom: 10px;
			right: 10px;
			color: #666;
		}
		.add-form {
			margin: 10px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			display: none;
		}
		.add-form input[type="text"] {
			width: 100%;
			margin-bottom: 10px;
		}
		.add-form input[type="submit"] {
			display: block;
			margin: 10px auto;
		}
		.search-form {
			margin: 10px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
		}
		.search-form input[type="text"] {
			width: 100%;
			margin-bottom: 10px;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(function() {
			// 添加收藏夹项
			$('#add-form').submit(function(e) {
				e.preventDefault();
				var name = $('#add-name').val();
				var url = $('#add-url').val();
				if (name && url) {
					$('#list').append('<li class="item"><div class="name">' + name + '</div><div class="url"><a href="' + url + '">' + url + '</a></div><div class="status">未锁定</div><button class="lock-btn">锁定</button><button class="delete-btn">删除</button></li>');
					$('#add-form').hide();
					$('#add-name').val('');
					$('#add-url').val('');
				}
			});

			// 删除收藏夹项
			$('#list').on('click', '.delete-btn', function() {
				$(this).closest('.item').remove();
			});

			// 锁定/解锁收藏夹项
			$('#list').on('click', '.lock-btn', function() {
				var item = $(this).closest('.item');
				item.toggleClass('locked');
				var status = item.hasClass('locked') ? '已锁定' : '未锁定';
				item.find('.status').text(status);
			});

			// 显示添加收藏夹表单
			$('#show-add-form').click(function() {
				$('#add-form').show();
			});

			// 隐藏添加收藏夹表单
			$('#add-cancel').click(function() {
				$('#add-form').hide();
			});

			// 模糊搜索
			$('#search-form').submit(function(e) {
				e.preventDefault();
				var query = $('#search-query').val().toLowerCase();
				$('.item').each(function() {
					var name = $(this).find('.name').text().toLowerCase();
					var url = $(this).find('.url a').attr('href').toLowerCase();
					if (name.indexOf(query) >= 0 || url.indexOf(query) >= 0) {
						$(this).show();
					} else {
						$(this).hide();
					}
				});
			});
		});
	</script>
</head>
<body>
	<h1>网址收藏</h1>
	<button id="show-add-form">添加</button>
	<div id="add-form">
		<form id="add-form">
			<label for="add-name">名称：</label>
			<input type="text" id="add-name">
			<label for="add-url">URL：</label>
			<input type="text" id="add-url">
			<input type="submit" value="添加">
			<button id="add-cancel">取消</button>
		</form>
	</div>
	<div id="search-form">
		<form>
			<label for="search-query">搜索：</label>
			<input type="text" id="search-query">
			<input type="submit" value="搜索">
		</form>
	</div>
	<ul id="list">
		<!-- 初始收藏夹项 -->
		<li class="item">
			<div class="name">Google</div>
			<div class="url"><a href="https://www.google.com/">https://www.google.com/</a></div>
			<div class="status">未锁定</div>
			<button class="lock-btn">锁定</button>
			<button class="delete-btn">删除</button>
		</li>
		<li class="item">
			<div class="name">GitHub</div>
			<div class="url"><a href="https://github.com/">https://github.com/</a></div>
			<div class="status">未锁定</div>
			<button class="lock-btn">锁定</button>
			<button class="delete-btn">删除</button>
		</li>
	</ul>
</body>
</html>

PHP部分：

<?php
// 这里可以使用数据库或文件等持久化存储方式来保存收藏夹项

// 初始收藏夹项
$bookmarks = array(
	array('name' => 'Google', 'url' => 'https://www.google.com/', 'locked' => false),
	array('name' => 'GitHub', 'url' => 'https://github.com/', 'locked' => false),
);

// 输出JSON格式数据
echo json_encode($bookmarks);
?>

CSS3部分：

这里没有使用CSS3特性，仅使用了一些基本的CSS样式。

用php+JQ+CSS3写出网址收藏的代码具有添加删除锁定模糊搜索网址格式为网址名url状态