"this" vs $(this)

5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.78
List Price:  €129.90
You save:  €37.11
£79.40
List Price:  £111.16
You save:  £31.76
CA$136.11
List Price:  CA$190.56
You save:  CA$54.44
A$154.13
List Price:  A$215.78
You save:  A$61.65
S$135.08
List Price:  S$189.12
You save:  S$54.03
HK$782.28
List Price:  HK$1,095.23
You save:  HK$312.94
CHF 90.61
List Price:  CHF 126.85
You save:  CHF 36.24
NOK kr1,085.23
List Price:  NOK kr1,519.37
You save:  NOK kr434.13
DKK kr692.01
List Price:  DKK kr968.84
You save:  DKK kr276.83
NZ$167.80
List Price:  NZ$234.94
You save:  NZ$67.13
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,976.08
List Price:  ৳15,366.96
You save:  ৳4,390.87
₹8,339.52
List Price:  ₹11,675.66
You save:  ₹3,336.14
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦141,842.81
List Price:  ₦198,585.61
You save:  ₦56,742.80
₨27,810.04
List Price:  ₨38,935.18
You save:  ₨11,125.13
฿3,647.70
List Price:  ฿5,106.92
You save:  ฿1,459.22
₺3,232.12
List Price:  ₺4,525.11
You save:  ₺1,292.98
B$499.21
List Price:  B$698.91
You save:  B$199.70
R1,908.54
List Price:  R2,672.04
You save:  R763.49
Лв180.65
List Price:  Лв252.92
You save:  Лв72.26
₩135,197.71
List Price:  ₩189,282.20
You save:  ₩54,084.49
₪368.63
List Price:  ₪516.10
You save:  ₪147.47
₱5,633.91
List Price:  ₱7,887.71
You save:  ₱2,253.79
¥15,144.47
List Price:  ¥21,202.86
You save:  ¥6,058.39
MX$1,659.40
List Price:  MX$2,323.22
You save:  MX$663.82
QR364.31
List Price:  QR510.04
You save:  QR145.73
P1,370.91
List Price:  P1,919.33
You save:  P548.42
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,729.52
List Price:  E£6,621.52
You save:  E£1,892
ብር5,680.63
List Price:  ብር7,953.11
You save:  ብር2,272.48
Kz83,612.74
List Price:  Kz117,061.18
You save:  Kz33,448.44
CLP$97,978.20
List Price:  CLP$137,173.40
You save:  CLP$39,195.20
CN¥722.95
List Price:  CN¥1,012.16
You save:  CN¥289.21
RD$5,921.50
List Price:  RD$8,290.34
You save:  RD$2,368.83
DA13,490.83
List Price:  DA18,887.70
You save:  DA5,396.87
FJ$226.12
List Price:  FJ$316.58
You save:  FJ$90.46
Q779.86
List Price:  Q1,091.83
You save:  Q311.97
GY$20,923.51
List Price:  GY$29,293.76
You save:  GY$8,370.24
ISK kr13,946.60
List Price:  ISK kr19,525.80
You save:  ISK kr5,579.20
DH1,013.19
List Price:  DH1,418.51
You save:  DH405.32
L1,763.34
List Price:  L2,468.75
You save:  L705.40
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$805.89
List Price:  MOP$1,128.28
You save:  MOP$322.39
N$1,893.44
List Price:  N$2,650.90
You save:  N$757.45
C$3,681.15
List Price:  C$5,153.75
You save:  C$1,472.60
रु13,335.63
List Price:  रु18,670.42
You save:  रु5,334.78
S/370.84
List Price:  S/519.19
You save:  S/148.35
K382.72
List Price:  K535.82
You save:  K153.10
SAR375
List Price:  SAR525.01
You save:  SAR150.01
ZK2,522.76
List Price:  ZK3,531.96
You save:  ZK1,009.20
L461.43
List Price:  L646.02
You save:  L184.59
Kč2,350.75
List Price:  Kč3,291.15
You save:  Kč940.39
Ft36,729.02
List Price:  Ft51,422.10
You save:  Ft14,693.08
SEK kr1,071.30
List Price:  SEK kr1,499.86
You save:  SEK kr428.56
ARS$85,766.82
List Price:  ARS$120,076.98
You save:  ARS$34,310.16
Bs691.04
List Price:  Bs967.48
You save:  Bs276.44
COP$387,583.68
List Price:  COP$542,632.66
You save:  COP$155,048.97
₡50,832.34
List Price:  ₡71,167.31
You save:  ₡20,334.97
L2,468.78
List Price:  L3,456.40
You save:  L987.61
₲737,805.73
List Price:  ₲1,032,957.54
You save:  ₲295,151.80
$U3,781.90
List Price:  $U5,294.82
You save:  $U1,512.91
zł400.73
List Price:  zł561.05
You save:  zł160.31
Already have an account? Log In

Transcript

Let's take a moment to discuss the difference between this versus this wrapped with jQuery. Now, if you have no interest in jQuery, you can feel free to skip this lecture. But I think most front end web developers have worked with jQuery to some extent and probably work with it on a regular basis. It's definitely worth taking a minute to discuss the difference between these two scenarios and some of the problems that you can run into, in your examples folder, open up the context sub folder, and then open the file context this versus this one. So here, I'm iterating over each of the salespeople DOM elements or the list items. And on each iteration of the each method, I'm creating a click event handler.

And in that click event handler, I'm saying this dot hide. So let's first run the code and see what we get. So we're going to show examples and context this versus this one. So now I've run the code. And click the Select button and I get an error. This dot hide is not a function.

All right? What's the problem, we'll see if we can figure it out. So the first thing I want to do is I want to disable or comment on line number five. Since that's throwing an error, it's not really going to help us. And then I'll paste in to console or statements. The first one is I'm expecting the JavaScript, this keyword.

And the second one is I'm expecting the JavaScript this keyword wrapped with jQuery. So let's save that file. And then we'll just refresh the page and click the Select button and I go to console there's statements. Let's look at the first one. The first one is a DOM element. It's a raw JavaScript DOM element.

And the second one is a DOM element wrapped with jQuery. So the difference is the second one is the first one wrapped with jQuery. hope that makes sense. But for the first one, it let's scroll down a little bit and we can see there's a style property and that style property has a display Property display is currently set to an empty string. Okay, so we're going to talk about that in a second. So the short answer is, this is the raw DOM element that's currently being iterated over that was in this case was clicked.

Where is this represents that DOM element wrapped with jQuery. So it's, it's like taking yourself and putting yourself in a coat. It's still you but you're wrapped with a coat. So let's look at it. If you look at the file context, this versus this to, what I'm going to do is say this dot style dot display equals none so if you run context, this versus this too, and then click the Select button you can see the button disappears and if I click other buttons, they used to disappear. Why is that?

Oh if you remember that, we did the console doctor this. We saw that This, this JavaScript keyword, which is a DOM element has a style property and a style property has a display property. And we're just setting it to none. So the point I'm making here is just to illustrate that the JavaScript, this keyword inside of this click event handler, is just a raw DOM element. It's not has nothing to do with jQuery. If we go to contact this versus this three.

Something a little bit different is we're saying this wrapped with jQuery dot style dot display equals none. So let's see how that works. So if we go to show code examples, context, this versus three, and then we click the Select button, we get an error cannot set property display of undefined. And that's because this wrapper jQuery does not have a style property. Remember, it's the JavaScript this keyword or it's the raw DOM element, but it's wrapped with jQuery. So it has different properties and methods.

If you open up context, this versus four The differences now we're seeing this dot height. So if you run context, this versus four, and then select the button, it disappears, and there's no error. And that's because jQuery or this wrapper, jQuery does have a hide method. So the main thing to keep in mind is that the JavaScript, this key word by itself, and kind of inside of a click event handler, is just the raw JavaScript DOM element. And it has a certain set of properties and methods. Where is it this wrapped with jQuery that is a jQuery object.

And it's basically taking this object and wrapping it inside of jQuery, which gives it different properties and methods. So you might be thinking, well, I use jQuery and I use this crap with jQuery. That's fine. Well, there's some situations When jQuery will return this and you think it's going to be this wrapped with jQuery, like when you're creating a jQuery plug in. There's some tricky scenarios. So 99.9% of the time, you'll be dealing with this route with jQuery, and that's all fine.

But two things. One, it's really good to understand the difference and to, it's going to come up, there's going to be a time when you think you're getting one and you're getting the other or you want to convert one to the other. And that's all fine. But you can only go down that road if you really understand the tooth. The difference between these two things

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.