javascript - js 原生 .value 与 jQuery .val() 的区别

Question

我有一个关于 JavaScript 原生 element.value 与 jQuery 的 $(element).val(); 之间差异的快速问题

我在 AngularJS 中创建了一个 BB 编辑器，这就是我的问题的来源。

这是我的指令的代码:

bbApp.directive('bbEdit', function() {
return {
    restrict: 'A',
    templateUrl: 'tpl/editor.html',
    link: function(scope) {
            scope.tagType = '';
            var el = document.querySelector('#bbeditor');

            scope.wrap = function(type) {
                scope.tagType = type;

                var str = el.value.toString();
                var selection = str.slice(el.selectionStart, el.selectionEnd);

                if( scope.noWrapTags.indexOf(scope.tagType) == -1 && selection == "" ) {
                    alert('Please select text to format');
                    return false;
                }

                if( scope.allowedTags.indexOf(scope.tagType) == -1 ) {
                    alert('Sorry, that formatting option is not available');
                    return false;
                }

                var strArr = str.split("");

                if( scope.noWrapTags.indexOf(scope.tagType) != -1 ) {
                    strArr.splice(el.selectionStart,selection.length, "["+ scope.tagType +"]");
                } else {
                    strArr.splice(el.selectionStart,selection.length, "["+ scope.tagType +"]"+selection+"[/"+ scope.tagType +"]");
                }


                el.value = strArr.join("");

            }

          }

}});

我正在像这样访问元素:var el = document.querySelector('#bbeditor');

然后获取值:var str = el.value.toString();

但是当我尝试使用 jQuery 的 .val() 执行此操作时，它无法正常工作。

按照当前的编写方式，应用程序会将任何突出显示的文本包装在适当的自定义 bb 标记中。

但是当我像这样访问文本区域的值时:

var el = angular.element(element).find('textarea');
var str = el.val().toString();

我得到了文本值，但我的字符串操作只是用 bb 标签包装了文本区域的整个值，而不是仅包装了用户突出显示的文本。

为此使用 jQuery 是否值得？我使用 document.QuerySelector() 可以吗？

我只是想使用 Angular 中可用的功能，显然在我的指令中我可以访问元素。但 jQuery .val() 的工作方式与 native .value 不同。

任何解释/建议将不胜感激。我是 Angular 新手。

我的应用程序正在运行，但我只是想知道是否应该采用不同的方式来执行此操作。

Answer 1

document.querySelector 返回第一个匹配的元素。 jQuery 的 .find 方法返回匹配元素的数组。

除此之外，.value 不会返回选定的文本，您正在使用 var Selection = str.slice(el.selectionStart, el.selectionEnd) 来获取所选文本。

如果你的代码可以在 JavaScript 中运行，我会保留它。没有令人信服的理由将其转换为 jQuery(恕我直言)。在这种情况下，您不会找到任何能让事情变得极其容易的东西。