这两个var $ test.parent（）和var test.parent之间在用法上有什么区别吗？

Question

I have two variable and the bellow code to access the elements. I have access to both variables parent element as well as its child elements. I can not see any difference. Are they same or is there an any difference?

HTML

<div>Sample text : 
    <input id='test' type='text' value='test' />
</div>

JavaScript

$(function(){
        var test = $('#test');
        var $test = $('#test');
        console.log($test.parent().text());
        console.log(test.parent().text());
});

Answer 1

I can see 3 possible aspects to this question, so I will answer all three:

The $ sign

In JavaScript the $ is just another character which can be used as part of a variable name, and is part of the name. This is unlike PHP, where the $ sign is use as a prefix, and is not part of the name.

Just like any other valid character (except numerals) the $ can be used by itself as a valid name, and jQuery has used this to name their main function (AKA jQuery ).

You can choose to name your variables anything you like, but many developers like to start some with $ sign as a reminder that it represents a jQuery object which is non-trivial object.

In other words, it makes no difference whether you decide to begin with the $ or not, as long as you remember what you've done.

Are the 2 variables the same?

Apropos the above, the two variable names are not the same. One has 4 characters, and one has 5. They don't have any relationship to each other at all.

Are the two objects the same?

Every time you run the jQuery function, you get a new object. This object contains, among other things a reference to the DOM object referred to in your argument.

Even though the two jQuery objects refer to the same DOM object, the objects themselves are not the same.

This is a trap that many new jQuery developers fall in:

$current=$('div#something');
//  some stuff
if($current==$('div#something')) …; // always false

There you are. Three answers. Take your pick :)

Answer 2

 $(function(){ var test = $('#test'); var $test = $('#test'); console.log($test.parent().text()); console.log(test.parent().text()); console.log(test[0] === $test[0]); console.log(test === $test); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Sample text : <input id='test' type='text' value='test' /> </div> 

No difference-- test is the name of one variable and $test is the name of another-- but they are both set equal to the same thing, and are otherwise handled in the same way. The $ is only significant when used as its jQuery function form $(/*some stuff*/) -- otherwise, it is just a valid character for a variable name.

Note, however, that they refer to the same element but the objects themselves are different objects, so not strictly equal . Thus why the first comparison above evaluates to "true" but the second evaluates to "false". You can also evaluate their equality with the jQuery .is() method.