`

jquery methods

阅读更多
.bind() method
This method allows us to specify any JavaScript event, and to attach a behavior to it. In this case, the event is called click,   and the behavior is a function consisting of our one-liner above:
$(document).ready(function() {
 $('#switcher-normal').bind('click', function() {
   $('body').removeClass('narrow').removeClass('large');
 });
 $('#switcher-narrow').bind('click', function() {
    $('body').addClass('narrow').removeClass('large');
  });
  $('#switcher-large').bind('click', function() {
    $('body').removeClass('narrow').addClass('large');
  });
  $('#switcher .button').bind('click', function() {
    $('#switcher .button').removeClass('selected');
    $(this).addClass('selected');
  });
});

This optimization takes advantage of the three jQuery features we have discussed. First, implicit iteration is once again useful where we bind the same click handler to each button with a single call to .bind(). Second, behavior queueing allows us to bind two functions to the same click event, without the second overwriting the first. Lastly, we're using jQuery's chaining capabilities to collapse the adding and removing of classes into a single line of code each time.
removeClass() 
The .removeClass() method's parameter is optional; when omitted, it removes all classes from the element.              
Since the context keyword this gives us a DOM element rather than a
jQuery object, we can use native DOM properties to determine the ID of the element that was clicked.

$(document).ready(function() {
  $('#switcher .button').bind('click', function() {
    $('body').removeClass();
    if (this.id == 'switcher-narrow') {
      $('body').addClass('narrow');
    }
    else if (this.id == 'switcher-large') {
      $('body').addClass('large');
    }
    $('#switcher .button').removeClass('selected');
    $(this).addClass('selected');
  });
});

click()

Binding a handler for an event (like a simple click event) is such a common task that
jQuery provides an even terser way to accomplish it; shorthand event methods work
in the same way as their .bind() counterparts with a couple fewer keystrokes.
For example, our style switcher could be written using .click() instead of .bind()
as follows:
  
 $(document).ready(function() {
       $('#switcher .button').click(function() {
         $('body').removeClass();
         if (this.id == 'switcher-narrow') {
            $('body').addClass('narrow');
         }
         else if (this.id == 'switcher-large') {
            $('body').addClass('large');
         }
         $('#switcher .button').removeClass('selected');
         $(this).addClass('selected');
       });
    });


toggle()
The .toggle() method takes two arguments, both of which are functions. The first
click on the element causes the first function to execute; the second click triggers the
second function. The two functions continue to alternate every other click thereafter.
With .toggle(), we can implement our collapsible style switcher quite easily:
   $(document).ready(function() {
       $('#switcher h3').toggle(function() {
         $('#switcher .button').addClass('hidden');
       }, function() {
         $('#switcher .button').removeClass('hidden');
       });
    });

toggleClass()
For this specific case, jQuery provides another mechanism for the collapsing we are
performing. We can use the .toggleClass() method to automatically check for the
presence of the class before applying or removing it:
    
$(document).ready(function() {
       $('#switcher h3').click(function() {
          $('#switcher .button').toggleClass('hidden');
       });
     });

In this case, .toggleClass() is probably the more elegant solution, but .toggle()
is a more versatile way to perform two different actions in alternation.

   
$(document).ready(function() {
       var toggleStyleSwitcher = function() {
          $('#switcher .button').toggleClass('hidden');
       };
       $('#switcher').click(toggleStyleSwitcher);
       $('#switcher-normal').click(function() {
          $('#switcher').click(toggleStyleSwitcher);
       });
       $('#switcher-narrow, #switcher-large').click(function() {
          $('#switcher').unbind('click', toggleStyleSwitcher);
       });
    });

Now the toggle behavior is bound when the document is loaded, unbound when
Narrow Column or Large Print is clicked, and rebound when Normal is clicked
after that.


分享到:
评论

相关推荐

    JQuery Methods' Wallpaper

    这是一张有JQuery所有方法的壁纸,可以随时随地查看所有方法

    jQuery in Action 2008

    pages are an excellent way for you to see the nuances of the jQuery methods in action without the need to write a slew of code yourself. All example code and lab pages are available for download at ...

    jquery.validate.methods.js

    jquery.validate.methods.js

    jquery.validate.methods.js下载

    jquery.validate.methods.js jquery.validate.methods.js

    Django 1.0 Website Development.pdf

    jQuery methods 100 Hiding and showing elements 101 Accessing CSS properties and HTML attributes 102 Manipulating HTML documents 103 Traversing the document tree 103 Handling events 104 Sending ...

    jquery api 3.3.1中文文档

    8. **实用工具方法(Utility Methods)**:例如`$.each()`, `$.trim()`, `$.inArray()`等,提供了一组通用的辅助函数。 9. **版本更新(Version Updates)**:jQuery 3.3.1相对于早期版本,可能包含了一些性能优化...

    jdk api 1.8、jQuery3.1-api、jQuery3.3.1-api、jqueryapi2.2

    1.8版本是一个重要的里程碑,引入了许多新特性,如Lambda表达式、Stream API、默认方法(default methods)以及新的日期/时间API。Lambda表达式简化了匿名函数的编写,而Stream API则提供了处理集合数据的新方式。...

    jQuery表单验证大全

    `additional-methods.js`文件包含了jQuery Validate的扩展验证方法,例如`creditcard`(信用卡号验证)、`date`(日期格式验证)等。引入此文件后,开发者可以使用更多预定义的验证规则。 6. **日志和版本控制** `...

    JQuery In Action.PDF

    Developers can add new methods to the JQuery prototype, creating custom functionalities that can be reused throughout their applications. - **Example:** `$.fn.myPlugin = function(options) { /* Your ...

    jquery1.7.2中文手册

    9. **实用工具方法(Utility Methods)** - `$.each()`用于遍历对象和数组。 - `$.extend()`合并两个或多个对象。 - `$.trim()`去除字符串两端的空白字符。 在开发过程中,熟练掌握jQuery 1.7.2的手册,能帮助...

    jQuery 1.7.2 参考文档

    十、工具方法(Utility Methods) jQuery还包含一些实用的工具方法,如`$.each()`用于遍历数组或对象,`$.inArray()`检查元素是否存在于数组中,`$.trim()`去除字符串两端的空白字符等。 综上所述,《jQuery 1.7.2 ...

    jquery 插件jquery 插件jquery 插件jquery 插件

    - `public methods`:插件可以定义一些公开方法,供外部调用来改变插件的状态或执行特定操作。 3. **示例:创建一个简单的图片轮播插件** - 首先,定义插件的基本结构,包括初始化方法、选项和公共方法: ```...

    JQuery_1.4_API.CHM JQuery_1.4_API.CHM

    六、实用工具方法(Utility Methods) 1. **$.each()**:遍历数组或对象,执行回调函数。 2. **$.trim()**:去除字符串两端的空白字符。 3. **$.inArray()**:检查元素是否在数组中。 综上所述,《jQuery 1.4 ...

    jQueryUI API文档资料

    6. **API文档**:对于每个组件和功能,jQuery UI的API文档都提供了详细的使用说明,包括选项(options)、方法(methods)和事件(events)。开发者可以通过查阅文档了解如何配置组件,何时调用方法,以及响应哪些...

    jquery-validation插件

    接着,下载或通过CDN引入`jquery.validate.js`和(可选)`additional-methods.js`,后者包含了更多预定义的验证规则。例如: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...

    jquery-validate-中文提示.rar

    总的来说,jQuery Validate插件通过`jquery.validate.min.js`和`additional-methods.min.js`提供了丰富的验证功能,`messages_zh.min.js`解决了中文提示的需求,而`readme.txt`则是理解并使用这些文件的重要指南。...

    jQuery动画下拉菜单Smart Menu

    通过选择器(Selectors)定位菜单元素,使用事件绑定(Event Binding)监听用户行为,结合CSS样式控制菜单显示,最后利用动画方法(Animation Methods)实现平滑的展开和收缩效果。Smart Menu正是基于这些核心概念,...

Global site tag (gtag.js) - Google Analytics