这两个javascript和jquery语句有什么区别?

抱歉,我是javascript和jquery的初学者。我想让jquery工作…无法理解这两种说法之间的区别:

console.log ($("#FirstName").value);
console.log(document.getElementById('FirstName').value);

第一个返回为“未定义”,而第二个正确地在我的文本输入框中给出了名称。这是那个盒子的HTML

<input type="text" id="FirstName" class="TabInput" value="'. $ListRow[3] . '">

我已经在文件中链接到jquery,并且其他jquery函数也在工作。我正在尝试看看jquery是如何工作的,也不明白为什么它们不一样…

如果我只是使用

console.log ($("#FirstName")

它起作用,但给了我:

r.fn.init[上一个对象:r.fn.init(1)]

不管那意味着什么…