为什么当尝试在以前初始化的 html 元素变量上使用 JQuery 时，它会返回 undefined?

Question

我在 JQuery 文档 ( https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element/( 上读到，您可以通过编写变量名称来使用以前初始化的元素，就像使用选择器一样：

$(element)

但是每当我尝试从按下按钮调用的函数执行此操作时，它都会返回"未定义"。

这是我在更可控的环境中进行测试的示例代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<button class="btn btn-block btn-primary" onclick="jquery(this)">JQuery</button>
</div>
<div class="col-md-6">
<button class="btn btn-block btn-info" onclick="normaljs(this)">normalJs</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-block btn-danger" onclick="basicTest()">basicTest</button>
</div>
<div class="col-md-6">
<button class="btn btn-block btn-info" id="empty">dynamicTest</button>
</div>
</div>
</div>
<script>
function jquery(caller){
var element = $(caller).parent();
alert("Tag name: " + element.tagName);
}
function normaljs(caller){
var element = caller.parentElement;
alert("Tag name: "+ element.tagName);
}
function basicTest(){
alert("This is a basic test");
}
$("#empty").click(function(){
alert("Tag name: " + $(this).tagName);
alert("Tag name: " + this.tagName);
});
</script>

我做错了什么吗？

Answer 1

通过$(caller)，你只是将 DOM 元素"转换"为 jQuery 对象，因此，DOM 属性和方法将不再以正常方式在其上工作，但如果你想使用 jQuery 获取 tagName，那么prop()会这样做：

function jquery(caller){
var element = $(caller).parent();
alert("Tag name: " + element.prop("tagName"));
}

Answer 2

>$(caller).parent()返回一个jQuery对象，但tagName是一个DOM属性，而不是jQuery属性(jQuery很少使用数据属性，几乎所有东西都是函数(。要获取 jQuery 对象中包含的 DOM 元素，可以使用get()函数或数组索引。

function jquery(caller) {
var element = $(caller).parent()[0];
alert("Tag name: " + element.tagName);
}
function normaljs(caller) {
var element = caller.parentElement;
alert("Tag name: " + element.tagName);
}
function basicTest() {
alert("This is a basic test");
}
$("#empty").click(function() {
alert("Tag name: " + $(this).get(0).tagName);
alert("Tag name: " + this.tagName);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<button class="btn btn-block btn-primary" onclick="jquery(this)">JQuery</button>
</div>
<div class="col-md-6">
<button class="btn btn-block btn-info" onclick="normaljs(this)">normalJs</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-block btn-danger" onclick="basicTest()">basicTest</button>
</div>
<div class="col-md-6">
<button class="btn btn-block btn-info" id="empty">dynamicTest</button>
</div>
</div>
</div>