jQuery教程

jQuery字符串与数据操作

8,109字

34–51 分钟

概览

jQuery 提供了一系列实用函数，用于处理字符串和数据操作。这些工具函数作为 $ 命名空间下的方法，简化了常见的编程任务，如去除字符串首尾空白、解析 JSON 字符串、操作元素上的自定义数据以及序列化表单数据等。掌握这些方法能够提升代码的简洁性与效率，是 jQuery 字符串操作和 jQuery 数据操作的核心内容。本章将详细介绍这些函数的用法与特性。

jQuery.trim()

语法

jQuery.trim( string )

string：需要去除首尾空白字符的字符串。空白字符包括空格、制表符、换行符等。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery.trim 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <input id="userInput" type="text" placeholder="输入一些内容">
    <button id="processBtn">处理输入</button>
    <p id="result"></p>

    <script>
        $('#processBtn').on('click', function() {
            var rawValue = $('#userInput').val();
            var trimmedValue = $.trim(rawValue);
            $('#result').text('原始长度: ' + rawValue.length + ', 处理后长度: ' + trimmedValue.length);
        });
    </script>
</body>
</html>

jQuery.param()

语法

jQuery.param( obj [, traditional ] )

obj：一个数组、普通对象或 jQuery 对象，表示要序列化的数据。
traditional：一个布尔值，指示是否使用传统的“浅层”序列化方式。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery.param 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="serializeBtn">序列化数据</button>
    <p id="queryString"></p>

    <script>
        $('#serializeBtn').on('click', function() {
            var data = {
                name: 'John Doe',
                age: 30,
                skills: ['JavaScript', 'HTML', 'CSS']
            };
            var result = $.param(data);
            $('#queryString').text(result);
        });
    </script>
</body>
</html>

jQuery.parseJSON()

语法

jQuery.parseJSON( jsonString )

jsonString：一个格式正确的 JSON 字符串。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery.parseJSON 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="parseBtn">解析 JSON</button>
    <p id="parsedResult"></p>

    <script>
        $('#parseBtn').on('click', function() {
            var jsonString = '{"name": "张三", "age": 28, "city": "北京"}';
            try {
                var obj = $.parseJSON(jsonString);
                $('#parsedResult').text('姓名: ' + obj.name + ', 年龄: ' + obj.age);
            } catch(e) {
                $('#parsedResult').text('解析失败: ' + e.message);
            }
        });
    </script>
</body>
</html>

jQuery.parseXML()

语法

jQuery.parseXML( xmlString )

xmlString：一个格式良好的 XML 字符串。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery.parseXML 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="parseXMLBtn">解析 XML</button>
    <div id="xmlResult"></div>

    <script>
        $('#parseXMLBtn').on('click', function() {
            var xmlString = '<books><book id="1"><title>jQuery 教程</title><author>张三</author></book></books>';
            try {
                var xmlDoc = $.parseXML(xmlString);
                var $xml = $(xmlDoc);
                var title = $xml.find('title').text();
                var author = $xml.find('author').text();
                $('#xmlResult').text('书名: ' + title + ', 作者: ' + author);
            } catch(e) {
                $('#xmlResult').text('XML 解析失败: ' + e.message);
            }
        });
    </script>
</body>
</html>

.data()

语法

// 获取数据
.data( key )
.data()

// 设置数据
.data( key, value )
.data( obj )

key：要获取或设置的数据键名。
value：要设置的数据值。
obj：一个包含键值对的对象，用于批量设置数据。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>.data 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="userCard" data-user-id="12345" data-user-role="admin">用户卡片</div>
    <button id="getDataBtn">获取 data 属性</button>
    <button id="setDataBtn">设置额外数据</button>
    <p id="dataDisplay"></p>

    <script>
        $('#getDataBtn').on('click', function() {
            var userId = $('#userCard').data('userId');
            var userRole = $('#userCard').data('userRole');
            $('#dataDisplay').text('用户 ID: ' + userId + ', 角色: ' + userRole);
        });

        $('#setDataBtn').on('click', function() {
            $('#userCard').data('lastAccess', new Date().toLocaleString());
            var lastAccess = $('#userCard').data('lastAccess');
            $('#dataDisplay').text('上次访问时间: ' + lastAccess);
        });
    </script>
</body>
</html>

jQuery.data()

语法

jQuery.data( element, key, value )
jQuery.data( element, key )
jQuery.data( element )

element：一个 DOM 元素，用于关联数据。
key：数据的键名。
value：要设置的数据值。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery.data 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="targetElement">目标元素</div>
    <button id="storeBtn">存储数据</button>
    <button id="retrieveBtn">检索数据</button>
    <p id="output"></p>

    <script>
        var element = document.getElementById('targetElement');

        $('#storeBtn').on('click', function() {
            $.data(element, 'timestamp', Date.now());
            $.data(element, 'counter', ($.data(element, 'counter') || 0) + 1);
            $('#output').text('数据已存储');
        });

        $('#retrieveBtn').on('click', function() {
            var timestamp = $.data(element, 'timestamp');
            var counter = $.data(element, 'counter');
            $('#output').text('时间戳: ' + timestamp + ', 计数器: ' + counter);
        });
    </script>
</body>
</html>

jQuery.hasData()

语法

jQuery.hasData( element )

element：要检查的 DOM 元素。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery.hasData 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="dataElement">数据元素</div>
    <div id="emptyElement">空元素</div>
    <button id="checkDataBtn">检查数据</button>
    <p id="checkResult"></p>

    <script>
        $.data(document.getElementById('dataElement'), 'key', 'value');

        $('#checkDataBtn').on('click', function() {
            var hasDataOnFirst = $.hasData(document.getElementById('dataElement'));
            var hasDataOnSecond = $.hasData(document.getElementById('emptyElement'));
            $('#checkResult').text('dataElement 有数据: ' + hasDataOnFirst + ', emptyElement 有数据: ' + hasDataOnSecond);
        });
    </script>
</body>
</html>

jQuery.removeData()

语法

jQuery.removeData( element [, name ] )

element：要移除数据的 DOM 元素。
name：要移除的数据键名。如果不指定，则移除该元素上所有通过 jQuery.data() 存储的数据。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery.removeData 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="cleanElement">待清理元素</div>
    <button id="addDataBtn">添加数据</button>
    <button id="removeDataBtn">移除数据</button>
    <button id="checkAgainBtn">再次检查</button>
    <p id="status"></p>

    <script>
        var el = document.getElementById('cleanElement');

        $('#addDataBtn').on('click', function() {
            $.data(el, 'testData', '一些重要信息');
            $('#status').text('数据已添加');
        });

        $('#removeDataBtn').on('click', function() {
            $.removeData(el, 'testData');
            $('#status').text('数据已移除');
        });

        $('#checkAgainBtn').on('click', function() {
            var hasData = $.hasData(el);
            $('#status').text('当前元素是否有数据: ' + hasData);
        });
    </script>
</body>
</html>

.serialize()

语法

.serialize()

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>.serialize 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" value="张三">
        <input type="email" name="email" value="zhangsan@example.com">
        <select name="country">
            <option value="CN" selected>中国</option>
            <option value="US">美国</option>
        </select>
        <input type="checkbox" name="hobby" value="reading" checked> 阅读
        <input type="checkbox" name="hobby" value="music"> 音乐
    </form>
    <button id="serializeFormBtn">序列化表单</button>
    <p id="serializedResult"></p>

    <script>
        $('#serializeFormBtn').on('click', function() {
            var queryString = $('#myForm').serialize();
            $('#serializedResult').text(queryString);
        });
    </script>
</body>
</html>

.serializeArray()

语法

.serializeArray()

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>.serializeArray 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="anotherForm">
        <input type="text" name="fullname" value="李四">
        <input type="number" name="age" value="25">
        <label><input type="radio" name="gender" value="male" checked> 男</label>
        <label><input type="radio" name="gender" value="female"> 女</label>
    </form>
    <button id="serializeArrayBtn">序列化为数组</button>
    <pre id="arrayResult"></pre>

    <script>
        $('#serializeArrayBtn').on('click', function() {
            var dataArray = $('#anotherForm').serializeArray();
            var output = '';
            $.each(dataArray, function(index, field) {
                output += '名称: ' + field.name + ', 值: ' + field.value + 'n';
            });
            $('#arrayResult').text(output);
        });
    </script>
</body>
</html>

版本变更记录

版本	变更说明
1.0	引入了核心的 `jQuery.trim`、`jQuery.param`、`jQuery.parseJSON` 和 `.data()` 方法。
1.4.3	`.data()` 方法现在能够自动获取并转换 HTML5 `data-` 属性中的值，例如 `data-foo="42"` 会被作为数字 42 处理。
1.9	`jQuery.parseJSON` 在传入空字符串或 `null` 时会返回 `null` 而不是抛出错误，以符合 JSON 规范。
3.0	`jQuery.parseJSON` 被标记为已弃用，推荐使用原生的 `JSON.parse`。但为兼容性考虑，该方法在 3.x 版本中仍保留。
4.0	正式移除了 `jQuery.trim`、`jQuery.parseJSON` 等工具函数。开发者应使用原生 JavaScript 替代方法。`.data()` 和 `.serializeArray()` 等实例方法仍保留。

浏览器兼容性

基于 jQuery 3.x 或 4.x 版本，本章介绍的 jQuery 字符串操作和 jQuery 数据操作相关方法的兼容性如下。对于 4.x 版本，已移除对 IE 10 及以下版本的支持。

浏览器类型	最低兼容版本（基于 jQuery 3.x/4.x）
PC 端
Chrome	60+ (当前及先前主要版本)
Edge	15+ (基于 Chromium)
Firefox	55+ (当前及先前主要版本)
Opera	47+ (当前及先前主要版本)
Safari	10+ (当前及先前主要版本)
移动端
Chrome Android	100+ (当前版本)
Firefox for Android	100+ (当前版本)
Opera Android	64+ (当前版本)
Safari on iOS	10+
Samsung Internet	6.2+
WebView Android	100+ (当前版本)
WebView on iOS	10+

掌握这些 jQuery 字符串操作和 jQuery 数据操作的工具与技巧，能够有效简化日常开发任务。无论是处理用户输入、准备 Ajax 数据，还是在元素上存储状态，这些方法都提供了清晰且跨浏览器的解决方案。理解它们的用法，尤其是在 jQuery 版本演进中的变化，有助于编写更健壮和易于维护的代码。