Introduce 5 Little Known Details About jQuery Methods

View: 333    Dowload: 0   Comment: 0   Post by: hanhga   Category: Javascript   Fields: Other

File has been tested

jQuery is the most used JavaScript library in the world, but all of us already knew that. Despite the fact that in recent months a lot of criticisms have been raised, it still attracts a lot of attention among developers. Whether you’re a jQuery beginner or a JavaScript expert (Dave Methvin and other team members are excluded), you might not know some peculiarities of jQuery. In this article we’ll discuss five of them.

Returning false in Event Binders

As we all know, jQuery’s first aim is to standardize the way different browsers behave using a unified set of methods. Where possible, jQuery enhances the features of a browser, integrating those that aren’t supported natively. Think of the selectors that you can use thanks to jQuery that aren’t natively supported by Internet Explorer 6 and 7 (the attribute selectors, :not:last-child, and so on).

Sometimes, although these are rare exceptions, jQuery slightly diverges from standard behavior. An example is that returning false in a jQuery event handler (for example one attached to on()) is the same as calling:

event.stopPropagation();
event.preventDefault();

On the contrary, returning false in native event handlers like addEventListener() is equivalent to writing:

event.preventDefault();

This behavior can be proven by taking a look at the relevant part of jQuery’s source:

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
      event.preventDefault();
      event.stopPropagation();
   }
}

Pseudo-selectors Do More Than You Think

In the jQuery documentation of many pseudo-selectors you can find the following note (in this case in relation to the :checkbox pseudo-selector):

Now, let’s take a look at the actual code in jQuery:

function createInputPseudo( type ) {
 return function( elem ) {
 var name = elem.nodeName.toLowerCase();
 return name === "input" && elem.type === type;
 };
}

As you can see from the code, the documentation is slightly incorrect. $(':checkbox') is actually equivalent to $('input[type="checkbox"]') with regards to what it searches (note thename === "input"), but tests all the elements of the page as if you called it specifying the universal selector or nothing at all.

With this in mind, you may be tempted to not prepend the element selector anymore when using filters like this and write:

var $checkboxes = $(':checkbox');

However, for performance reasons, it’s still worth it to use it so that jQuery won’t scan every element of the page. Thus, you should still write a statement like:

var $checkboxes = $('input:checkbox');

jQuery.type()

The title of this section may already be something new to you. Did you know that jQuery has a method todetermine the internal JavaScript [[Class]] of an object?

Even if you already knew this method, what you may ignore is that it’s really different from the native JavaScript typeof operator. In fact, jQuery.type() returns a more precise indication of the argument passed. Let’s see some examples:

// prints object
console.log(typeof null);

// prints object
console.log(typeof [1, 2, 3]);

// prints object
console.log(typeof new Number(3));

Using jQuery.type() to test the same arguments, we have :

// prints null
console.log($.type(null));

// prints array
console.log($.type([1, 2, 3]));

// prints number
console.log($.type(new Number(3)));

So, if you’re developing a jQuery plugin you may want to employ jQuery.type() to have a more precise idea of the type of parameters you’re dealing with.

attr() can removeAttr()

I know the title of this section may sound bizarre at least, but it asserts nothing but the truth. For those of you who don’t know the jQuery’s attr() method, it retrieves the value of an attribute for the first element in the set of matched elements, or sets one or more attributes for every matched element.

Although you might ignore this behavior, in addition to a Number or a String, the attr() method can also accept null as its second argument. When this happens, it acts as its counterpart method:removeAttr(). The latter, as the name suggests, removes an attribute from each element in the set of matched elements.

Don’t believe me? Let’s take a look at the relative part of the source code:

attr: function( elem, name, value ) {
    ...
    if ( value !== undefined ) {

        if ( value === null ) {
     jQuery.removeAttr( elem, name );
    ...
}

As you can see, the method tests if the given value is defined (if ( value !== undefined )) and then explicitly check if it’s null, in which case calls the removeAttr() method.

This can be convenient when you have to set or remove an attribute based on a condition and you don’t want to branch your code. So, for example you can write:

$(selector).attr(anAttr, condition ? value : null);

instead of :

condition ? $(selector).attr(anAttr, value) : $(selector).removeAttr(anAttr);

Should you really use this trick in your code or not? The decision it’s up to you but if I were you, I would not use it for clarity of the code. Currently this behavior is not documented and there is a discussion about it, in case you’re interested.

Turning Array-like Objects Into Arrays

As you may know JavaScript has types, like nodeList or the arguments variable within a function, that are similar to arrays, but not arrays. This means that we can access their elements using an array-like notations (for example arguments[0]) but we can’t use array methods such as forEach() andjoin().

Let’s say we have a nodeList of DOM elements retrieved as follows:

var list = document.getElementsByClassName('book');

We want to iterate over this array-like object using the forEach() method. If we call forEach() directly on the variable (list.forEach(...)) we obtain the error: “Uncaught TypeError: undefined is not a function”. To avoid this issue, one of the most used techniques is to use the prototype property and thecall() method as shown below:

Array.prototype.forEach.call(list, function() {...});
Alternatively, you can write:
[].forEach.call(list, function() {...});

Whichever solution you choose, it’s not very elegant to read or write. Fortunately for us, jQuery comes to our rescue. Thanks to the jQuery.makeArray() method we can simply write:

$.makeArray(list).forEach(function() {...});

Much better, isn’t it?

 

Introduce 5 Little Known Details About jQuery Methods

jQuery is the most used JavaScript library in the world, but all of us already knew that. Despite the fact that in recent months a lot of criticisms have been raised, it still attracts a lot of attention among developers.

Posted on 28-03-2016 

Comment:

To comment you must be logged in members.

Files with category

  • AngularJS and REST API

    AngularJS and REST API

    View: 105    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    This is a tutorial for those interested in a quick introduction to AngularJS and REST API. We will build the familiar Periodic Table of the Elements found in every chemistry textbook, and allow the user to select a Chemical Element by clicking on...

  • Collective Intelligence, Recommending Items Based on Similar Users' Taste

    Collective Intelligence, Recommending Items Based on Similar Users' Taste

    View: 117    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Using Collaborative Filtering to find people who share tastes, and for making automatic recommendations based on things that other people like.

  • Think Like a Bird for Better Parallel Programming

    Think Like a Bird for Better Parallel Programming

    View: 97    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Coding an application to run in parallel is hard, right? I mean, it must be hard or we’d see parallel programs everywhere. All we'd see are slick parallel apps that use every available core effortlessly. Instead multi-threaded apps are the exception...

  • Getting Started with the Bing Search APIs

    Getting Started with the Bing Search APIs

    View: 104    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Bing Search API is a set of REST interfaces that find web pages, news, images, videos, entities, related searches, spelling corrections, and more in response to queries from any programming language that can generate a web request. Applications that...

  • Brief Introduction of SocketPro High Performance and Scalable Persistent Message Queue

    Brief Introduction of SocketPro High Performance and Scalable Persistent Message Queue

    View: 318    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Continuous in-line request/result batching, real-time stream sending/processing, asynchronous data transferring and parallel computation for best performance and scalability

  • Iteration Over Java Collections with High Performance

    Iteration Over Java Collections with High Performance

    View: 90    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Java developers usually deal with Collections such as ArrayList, HashSet, Java 8 come with lambda and streaming API helps us to easily work with Collections. In most cases, we work with few thousands of items and performance isn't a concern. But in...

  • SR2JLIB - A Symbolic Regression Library for Java

    SR2JLIB - A Symbolic Regression Library for Java

    View: 90    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Grammar-Guided Genetic Programming library featuring: multi-threading, just-in-time compilation of individuals, dynamic class loading, and JNI interfacing with C/C++ code

  • Yet Another Fluent JDBC Wrapper in 200 Lines of Code

    Yet Another Fluent JDBC Wrapper in 200 Lines of Code

    View: 110    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Those who are not convinced to use Hibernate to manage persistence are forced to use plain old JDBC API. Though powerful, it requires lot of typing to get it right. For example, retrieving user data from database often requires such code snippet:

 
File suggestion for you
File top downloads
Codetitle.net - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.net Develope by Vinagon .Ltd