为什么jQuery选择器无法工作但getElementById在这种情况下有效？
[英]Why jQuery selector can't work but getElementById works in this scenario?
问题描述
Here is the HTML: 
这是HTML：
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="access.js"></script>
</head>
<body>
<button id="trigger"></button>
<img id= "testElement" style= "position: absolute; border-color: white; top:340px; left:615px;" width="34px" height= "34px" />
</body>
</html>
And the access.js file is: access.js文件是：
$(document).ready( function(){
$('#trigger').click(function(){
$('#testElement').src="success.png";
//THIS WON'T WORK.
document.getElementById('testElement').src= "success.png";
//BUT THIS WORKS.
});
});
I know that if I use $ , the return object is a jQuery object. 我知道如果我使用$ ，则返回对象是一个jQuery对象。 It's not the same as getElementById. 它与getElementById不同。 But why the jQuery selector can't work here? 但为什么jQuery选择器不能在这里工作？
I need the jQuery object to make more operations like "append/style"... 我需要jQuery对象来做更多的操作，比如“append / style”......
Thanks. 谢谢。
UPDATE Too many correct answers appeared at almost the same time... Please give more explanation to let me decide who I should give the credit, thanks! 更新太多正确答案几乎同时出现...请给出更多解释让我决定谁应该给予信用，谢谢！
Sorry for my poor understanding of your correct answers... I just want more details. 很抱歉我对你的正确答案了解不多......我只想了解更多细节。
Are all the attribute nodes (src/width/height...) not the property of jQuery object? 所有属性节点（src / width / height ...）都不是jQuery对象的属性吗？ So does the jQuery selector only select DOM Element Node like img/p/li/div node ? 那么jQuery选择器只选择像img / p / li / div节点那样的DOM元素节点吗？ (<> causes some error.) （<>导致一些错误。）
PLEASE TAKE A LOOK AT THE UPDATED INFORMATION... Thank you! 请看一下更新的信息......谢谢！
7 个解决方案
解决方案1
9 已采纳 2012-11-25 04:50:10
A jQuery element is a DOM element wrapped in an array-like jQuery object so you have access to all the jQuery methods, but that means you "lose" access to the original DOM methods and properties. jQuery元素是一个包含在类似数组的 jQuery对象中的DOM元素，因此您可以访问所有jQuery方法，但这意味着您“失去”对原始DOM方法和属性的访问权限。 You can either use a jQuery method or grab the original DOM element to be able to use the vanilla properties. 您可以使用jQuery方法或抓取原始DOM元素以使用vanilla属性。
$('#testElement').attr('src', 'success.png');
$('#testElement')[0].src = 'success.png';
--^-- get DOM element
解决方案2
8 2012-11-25 04:47:16
因为您需要在jQuery对象上使用.attr() jQuery方法：
$('#testElement').attr("src", "success.png");
解决方案3
4 2012-11-25 04:48:40
Should be 应该
$('#testElement').prop("src","success.png"); //1.6 and above
OR 要么
$('#testElement').attr("src","success.png"); //before 1.6
The way you access property in JavaScript and JQuery is different 您在JavaScript和JQuery中访问属性的方式是不同的
document.getElementById('testElement').src= "success.png";
can also be achieved with 也可以实现
$('#testElement')[0].src = "success.png";
解决方案4
3 2012-11-25 04:47:27
src is not a property of a jQuery object. src不是jQuery对象的属性。 You need to do 你需要这样做
$('#testElement').attr('src', 'success.png')
解决方案5
3 2012-11-25 04:47:41
Use this instead : 请改用：
$('#testElement').attr("src","success.png");
Or if you are using latest version of jquery than you could use: 或者，如果您使用的是最新版本的jquery，则可以使用：
$('#testElement').prop("src","success.png");
解决方案6
3 2012-11-25 04:49:39
jQuery object has no src property thats a DOM object property which is why getElementById works, use .attr() or .prop() to set matched elements attributes or properties jQuery对象没有src属性，这是一个DOM对象属性，这就是getElementById工作的原因，使用.attr()或.prop()来设置匹配的元素属性或属性
$('#testElement').attr('src',"success.png");
$('#testElement').prop('src',"success.png");
解决方案7
2 2012-11-25 05:25:11
>$('#testElement');
[<img id="testElement" style="position: absolute; border-color: white; top:340px; left:615px;" width="34px" height="34px">]
As you can see $ returns an array of DOM elements. 如您所见，$返回一个DOM元素数组。 Similar to document.getElementsBy(Class|Tag)Name , if you want a DOM comparison. 与document.getElementsBy(Class|Tag)Name类似，如果您想要DOM比较。
When dealing with an ID (#testElement), you're about sure there's only one element like this, so you can access it directly with $('#testElement')[0] (ie, the first element in the array). 在处理ID（#testElement）时，您确定只有一个这样的元素，因此您可以使用$('#testElement')[0] （即数组中的第一个元素$('#testElement')[0]直接访问它。 After that, you're good to go and treat it just the way you'd do it in plain JS. 在那之后，你很高兴去按照你在普通JS中的方式来对待它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.