强大的jQuery超级标签插件

// 引入jQuery库
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
// 引入Super Tags插件
// <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sztags/1.0.1/sz-tags.min.css">
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sztags/1.0.1/sz-tags.min.js"></script>
 
$(document).ready(function() {
    // 初始化Super Tags插件
    $('#my-tags-input').szTags({
        tags: ['JavaScript', 'jQuery', 'CSS'], // 初始标签列表
        delimiter: ',', // 分隔符，用于在输入时分割文本
        unique: true, // 是否允许重复标签
        placeholder: '添加标签...', // 输入框占位符
        maxTags: 5, // 最大标签数量
        readOnly: false, // 是否为只读模式
        removeTagByBackspace: true, // 是否允许通过退格键删除标签
        tagsContainer: 'ul', // 标签容器的HTML标签类型
        tagClass: 'tag', // 单个标签的类名
        selectedTagClass: 'selected-tag', // 选中标签的类名
        // 其他配置项...
    });
 
    // 监听添加标签事件
    $('#my-tags-input').on('szTagsAdd', function(event, tag) {
        console.log('添加了标签:', tag);
    });
 
    // 监听删除标签事件
    $('#my-tags-input').on('szTagsRemove', function(event, tag) {
        console.log('删除了标签:', tag);
    });
 
    // 获取所有标签
    $('#get-tags').click(function() {
        var tags = $('#my-tags-input').szTags('getTags');
        console.log('所有标签:', tags);
    });
 
    // 设置标签
    $('#set-tags').click(function() {
        $('#my-tags-input').szTags('setTags', ['HTML', 'CSS3', 'React']);
    });
 
    // 清空所有标签
    $('#clear-tags').click(function() {
        $('#my-tags-input').szTags('clearTags');
    });
});

这段代码展示了如何使用强大的jQuery超级标签插件szTags。首先，我们引入了必要的CSS和JavaScript文件。然后，我们在文档加载完成后初始化插件，并设置了一些自定义配置。接着，我们监听了添加和删除标签的事件，并提供了获取和设置标签的方法。最后，我们提供了清空所有标签的方法。这个示例代码简洁明了，并且注重于实际的使用场景，对于学习如何使用这个强大的jQuery插件非常有帮助。