jquery去掉空格-jquerytrim方式

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

jQuery的trim方法用于去除字符串开头和结尾的空格。 该方法需要在jQuery库中使用jquery去掉空格，不需要传递参数。 这是一个非常实用的方法，因为在实际开发中，我们经常需要去掉用户输入的空格。

var str = " hello ";
console.log(str); // " hello "
var trimmed = $.trim(str);
console.log(trimmed); // "hello"

注意：trim方法不会去除字符串中间的空格，而只去除字符串首尾的空格。 如果需要去掉字符串中间的空格，可以使用replace方法。

var str = " hello world ";
var removedSpaces = str.replace(/s+/g, '');
console.log(removedSpaces); // "helloworld"

使用trim方法时需要注意的是jquery去掉空格，如果传入的值不是字符串，则会抛出TypeError异常。

var num = 123;
console.log($.trim(num)); // throws TypeError

其实jQuery的trim方法是一种很常见的字符串操作方法，在实际开发中使用得非常频繁。 它可以帮助我们轻松去除字符串中的空格，降低代码复杂度，提升开发效率。

点击“天码营”内部加入我们，快速成长~

本文介绍了各种 jQuery 风暴绑定方法：on、bind、delegate、live、unbind、trigger。同时总结一下常用的jQuery风浪技术：如何阻止风浪泡，阻止浏览器的默认行为，解绑风波处理函数，自定义事件。

最近在 AngularJS 的开发中，我们遇到了一件神奇的事情：我们使用 livebox 预览注释列表中的图像，该列表由 Angular Resource 动态加载。令人难以置信的是，单击此动态加载的图像仍将触发Lightbox的图像预览。难道灯箱使用了先进的MutationObserver技术来窃听DOM的变化？查看灯箱源代码，我意识到它只是jQuery的.on（）方法：

$('body').on('click', 'a[rel^=lightbox], ...', function(event){});

本文将解释各种 jQuery 风暴绑定方法：on、bind、delegate、live、unbind、trigger。同时总结一下常用的jQuery风浪技术：如何阻止风浪泡，阻止浏览器的默认行为，解绑风波处理函数，自定义事件。

什么是 jQuery 事件

？

jQuery Storm是DOM Storm的包装器，支持自定义扩展。在编程中，事件和代理具有类似的目的：它们提供了一种机制，用于将行为的实现方法与其调用时间分开。

撇开JQuery不谈，DOM本身提供了一系列JavaScript风暴，如click，keyup，submit。如果没有实现相关的业务逻辑，通常会为那些风暴定义一系列处理函数，处理函数定义业务的实现方法，浏览器知道何时调用这个业务。Javascript 风暴就是这样一种机制，它允许动态绑定行为的实现方法和调用时序。

jQuery storm 是通过封装 JavaScript 风暴来实现的，例如 .keyup（） 是 onkeyup 的封装：

.keyup（）：将事件处理程序绑定到 “keyup” JavaScript 事件，或在元素上触发该事件。

除了封装大多数 JavaScript 风暴之外，jQuery 还提供了统一的风暴绑定和触发机制：

事件绑定：绑定

使用 JavaScript 绑定风暴就像在 HTML 中设置 onxxx 属性并在 JavaScript 中定义相关处理程序一样简单。

function func(){
    console.log('clicked!');
}

这是基本的JavaScript风暴处理方法，而jQuery提供了一个更方便的方法：.bind（）函数。

.bind（）：将处理程序附加到元素的事件。

$('#foo').click(function(){
    console.log('clicked!');
});

.click（） 等效于 .bind（'click'， ）。此外，您还可以通过解绑来解绑风暴：

$('#foo').unbind('click');

如果取消绑定

参数为空jquery 解绑，则取消绑定匹配元素的所有风波处理程序。在我的理解中，我们不要离开，解绑，死。即使撇开效率不谈，它们也会使软件更难理解。如果你觉得有需要，下面的 .on（） 应该会满足你~

.bind 会将所有匹配的元素绑定到风暴中，当元素很多时，性能会下降。以后动态添加的元素将不会被绑定。

具有默认行为的事件冒泡

默认情况下，事件正在冒泡，即沿着 DOM 树逐步触发相同的风暴。有时，这是一种不希望的行为，可以在风暴处理程序中停止。

// 事件处理函数的第一个参数是一个事件对象
$('#foo').click(function(event){
    event.stopPropagation();
    // do sth.
});

浏览器对用户混乱的默认行为是另一件需要考虑的事情，尤其是标签点击事件。当用户单击选项卡时，首先调用所有风暴处理程序，然后执行默认行为：页面跳转或定位。同样，我们可以阻止它：

$('a').click(function(event){
    event.preventDefault();
    // do sth.
});

在实践中，我们经常让事件处理程序返回 false 停止冒泡和默认行为，我们可以认为返回 false 做了三件事：

stopPropagation（）;

防止默认（）;

立即结束当前函数并返回。

$('a').click(function(event){
    // do sth.
    return false;
});

自定义事件

jQuery 风暴基于 DOM 风暴，但 jQuery 提供了一种越来越常见的风暴机制。这使我们能够通过为事件指定一个尚不存在的名称来轻松自定义事件：

$('#foo').bind('fucked', function(){
    console.log("I'm fucked.");
});
$('#foo').trigger('fucked');

在这里，您定义一个名为 fucked 的风暴，绑定处理程序，然后使用 trigger 触发风暴。在实际场景中jquery 解绑，自定义事件通常由其他风暴触发：

var he = 'man';
$('#foo').click(function(){
    if(he === 'man') $(this).trigger('fucked');
});

委托

.delegate 是另一种形式的绑定风暴。它将风波处理程序绑定到指定的根元素，并且由于风波会冒泡，因此它使用它来处理指定子元素上的风波。

.delegate（）：根据一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

  Alice
  Bob


$('#root').delegate('a', 'click', function(){
    console.log('clicked');
});

使用起来比绑定复杂一些，但它非常强大

自动绑定动态添加的元素。由于事件处理程序绑定到 #root，因此新添加的子元素 storm 也将冒泡到 #root。

性能比 .bind（） 更好。只绑定了一个事件处理程序，绑定速度相当快。

如果你使用像 AngularJS 这样的工具来动态操作 DOM，.delegate（） 对于手动绑定新的 DOM 元素很有用。

上

事实上，.on（） 是 jQuery 风暴的提供者。其他风波绑定方法通过 .on（） 实现，请参见 jQuery 1.8.2 的源代码

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
},

自 .on

是最常见的 jQuery storm 机制，以上所有示例都可以用 .on（） 实现。

// bind 
$( "#foo" ).bind( "click", function( e ) {} );
$( "#foo" ).on( "click", function( e ) {} ); 
// delegate 
$( "#root" ).delegate( "a", "click", function( e ) {} );
$( "#root" ).on( "click", "a", function( e ) {} );

我们可以看到还有一个 .live（） 方法，它类似于委托，但它强制 root 成为文档（即 this.context），这使得性能略差。 jQuery 1.7 自 1.7 起已被弃用。另请参阅：

也发表在：