Whats the meaning of $('element',this.el)[0]? - javascript

Now I learning Backbone and Marionette, I read some tutorial and I found a code whom I haven't understand. Here's the code:
$('element',this.el)[0]
I know jQuery little bit. I know this keyword, i know the $('element') keyword, but not understand that code, please everybody tell me about that.

This $('element',this.el) says select all <element> contained within this.el. this.el must be another "object" but what it is depends on what is building this higher up. I cover this in more detail in this answer to a similar question.
The [0] simply unwraps the jquery object returning a vanilla DOM object. So:
$('element',this.el).first(); //works
$('element',this.el)[0].first(); //will error
The second errors becuase it is no longer a jquery object so it is not wrapped in the jquery functions.

In Backbone context, your code is probably found inside a view and this.el refers to the view's element
$('element',this.el) find the element nodes inside the scope defined by this.el
$('element',this.el)[0] refers to the first element node found
Note that in a Backbone view, you can simplify to
this.$('element')[0]

This is the jquery selector context syntax:
'element' is to a selector and this.el is a context and using bracket notation to get the first element [0] which also converts jquery element to javascript object.
Alternatively you can use like this instead of jquery selector context syntax:
$(this.el).find('element')[0] // hope you understand this syntax

Related

jQuery / JavaScript, why do I need to wrap variables in $() to use them?

Say I have a map on an array of elements. The callback function takes the index and the value at that position in the array.
If I wrap the array element that the callback receives in $(), it behaves as I expect. If I use it without wrapping it in $(), it gives an error.
var nonHiddenElements = $( "form :input" ).not(':hidden');
nonHiddenElements.map(function(index, element){
input_id = $(element).attr('id'); // this works
input_id = element.attr('id') ; // this gives an error
})
Can someone explain how this works.
Is this a jQuery quirk, or a JavScript thing?
What type of objects does my nonHiddenElements array contain exactly?
What is element that gets passed to the callback?
And mainly what is the $() doing?
You need to understand how jQuery actually works. I will try to explain it briefly.
$ is nothing but a normal javascript function. jQuery === $, is just a function with a fancy name. This function does a lot of different things, depending on what you pass in it. For example if you pass a string it will be treated as CSS selector and jQuery internals will try to find corresponding DOM elements. Or if you pass a string starting with < and ending with > jQuery will create a new DOM element by provided HTML string.
Now if you pass a DOM element or NodeCollection of DOM elements, it/they will be wrapped into jQuery instances so that they can have a jQuery prototype methods. There are many prototype methods jQuery offers. For example text, css, append, attr - those are all methods of jQuery prototype. They are defined basically like this (simplified):
jQuery.prototype.text = function() { ... }
Normal DOM elements don't have those convenient methods jQuery provides. And inside of methods like map or each if you check this value or element parameter like you do, you will see that they are actually not jQuery instances:
element instanceof jQuery // => false
and of course you can't use instance methods with not an instance.
So in order to use jQuery prototype methods you need have a jQuery instance, which you can obtain if you call jQuery function with DOM element passed in it:
$(element) instanceof jQuery // true
Javascript is a programming language.
jQuery is a JavaScript Library.
With jQuery:
$("some element")
In native JavaScript you would have to do something like this.
getElementById('elementByID')
Explained in detail here: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
MDN is a great resource for beginners. https://developer.mozilla.org/en-US/docs/Web/JavaScript

What's the difference between: $(this.el).html and this.$el.html

What's the difference between:
$(this.el).html
and
this.$el.html
Reading a few backbone examples and some do it one way and other another way.
$(this.el) wraps an element with jQuery (or Zepto). So, if your view HTML was this:
<div id="myViewElement"></div>
...and this.el referenced that div, then $(this.el) would be the equivalent of retrieving it directly via jQuery: $('#myViewElement').
this.$el is a cached reference to the jQuery (or Zepto) object, so a copy of what you would get from calling $(this.el). The intent is to save you the need to call $(this.el), which may have some overhead and therefor performance concerns.
Please note: the two are NOT equivalent. this.el alone is a reference to a host object HTMLElement -- no libraries involved. This is the return of document.getElementById. $(this.el) creates a new instance of the jQuery/Zepto object. this.$el references a single instance of the former object. It is not "wrong" to use any of them, as long as you understand the costs of multiple calls to $(this.el).
In code:
this.ele = document.getElementById('myViewElement');
this.$ele = $('#myViewElement');
$('#myViewElement') == $(this.ele);
Also, it is worth mentioning that jQuery and Zepto have partial internal caches, so extra calls to $(this.el) might end up returning a cached result anyway, and that's why I say "may have performance concerns". It also may not.
Documentation
view.$el - http://backbonejs.org/#View-$el
$ in backbone - http://backbonejs.org/#View-dollar
jQuery base object - http://api.jquery.com/jQuery/
Zepto base object - http://zeptojs.com/#$()
The two are essentially* equivalent, with $el being a cached version of the jQuery or Zepto objects el, the reason why you see examples using $(this.el) is because it was only added in a later release of backbone.js (0.9.0).
*Technically as Chris Baker points out $(this.el) will (probably) create a new jQuery/Zepto object each time you call it while this.$el will reference the same one each time.
If $el exists on this and is a jQuery object, you shouldn't use $(this.el) because it would be initializing a new jQuery object when one already exists.
They yield exactly the same thing; that is, a reference to a view's element. $el is simply a jquery wrapper for $(this.el). Look at this reference: http://documentcloud.github.com/backbone/#View-$el
I usually see this:
var markup = $(this).html();
$(this).html('<strong>whoo hoo</strong>');
I agree with Raminon. Your examples you've seen look wrong.
This code is typically seen within a jquery loop, such as each(), or an event handler. Inside the loop, the 'el' variable will point to the pure element, not a jQuery object. The same holds true for 'this' inside an event handler.
When you see the following: $(el) or $(this), the author is getting a jQuery reference to the dom object.
Here's an example I just used to convert numbers to roman numerials:
(Note, I always use jQuery instead of $ -- too many collisions with mootools...)
jQuery(document).ready(function(){
jQuery('.rom_num').each(function(idx,el){
var span = jQuery(el);
span.html(toRoman(span.text()));
});
});
Wrapping an element in $() appends the jQuery extensions to the object prototype. Once that's done it doesn't need to be done again, although there's no harm other than performance in doing it multiple times.

jquery multiple selector with a this

I see, from to time, this kind of jquery selector, which I don't really understand. What does this do in it:
$('.myClass', this).someFn();
Can someone explain to me, please?
Thanks
That searches for child elements with a class of myClass in the context of whatever this is and then calls someFn();
It would give you the same results as writing $(this).find(".myClass").someFn(); but is not as efficient.
This means that you are trying to select .myClass inside just this
The "this" keyword is something that is only meaningful inside a method of an object. It will mean something different -- or nothing at all -- depending on where you're calling this code from.
If you're calling it from inside an object (usually an HTML element), the object will be added to the selector that is passed to jQuery.

A few questions about JavaScript basics - $, "is not a function"

Being fully self-taught without actually reading up on JavaScript (It's my job now, believe it or not) there are a few things I accept but don't understand.
The first one is the dollar sign.
As far as I use understand it, it's a shortcut to document.getElementById(),
but if I log $ and document.getElementById() to console - Only $ returns a value. This value however is always function(), shouldn't it be. The element? What gives?
The second issue I have is something that keeps coming up in my code and I go out of my way to change the code to eliminate it. It's the "... is not a function" error.
For example:
if ($.inArray($(div_id).val(), arr) >= 0);
Will give the error .val() is not a function. Why? And how do I use the value of div_id to see if it's in array?
Hiya. When you're using Jquery (which I assume you are), then $ will return the jquery object. This can contain an array of matched HTML elements depending on the selector you used. For example $("#foo") will return the jquery object containing the element with id foo. You can get the actual HTML DOM element out using $("#foo")[0] - using the array-style notation.
Can you give us some more info on what you're trying to achieve with the $.inArray example?
$ is a valid variable name.
So if you try to use $ without setting it, it will not work.
A lot of people/frameworks however use $ as a shortcut to document.getElementById, they would declare it at the top of the script as:
function $(id) { return document.getElementById(id); }
$ and document.getElementById is not one of the same thing. $ gives you a function in console only when you are using some library like jquery which mapes $ to a function.
.val id primarly used to get value of the form elements and that is a jquery function. I think you need to learn more around javascript and jQuery
Neither Javascript nor the DOM define $, which (as other answerers said) is often defined in general-purpose DOM libraries like jQuery, Prototype or Mootools. Based on the particular code you included, I suspect you've been coding against the jQuery API (because you use $.inArray, see http://api.jquery.com/jQuery.inArray/; though your claim that $ aliases document.getElementById confuses matters, as jQuery expects CSS selectors rather than element IDs).
When $ is expected but undefined, that usually means you'll need to include the library whose API you're using in the HTML document.

How does $(this) work in jQuery

How does the jQuery tag $(this) exactly work? I know how to use it, but how does jQuery know which element is 'active'? And what is the original Javascript tag for getting the current item, or is it jQuery only?
The this is a simple javascript (DOM) object,
$(this) will turn the object into a jQuery object.
jQuery doesn't need to 'know' what this is, it doesn't treat this in a special way, no other than myHeaderDiv in
var myHeaderDiv = document.getElementById('header');
$myHeaderDiv = $(myheaderDiv); //just a variable transformed into jQuery object, as with this.
this is context-dependent in jQuery (and JavaScript in general). It usually represents the current DOM element in a event handler, but is not a jQuery object.
$(this) is a jQuery object containing the current DOM element.
The expression $(this) is just a regular Javascript function call, equivalent to jQuery(this). The this value is defined by Javascript itself, and is not a jQuery invention.
Perhaps you should read about scope in JavaScript
http://www.digital-web.com/articles/scope_in_javascript/

Categories