jquery 和原生 javascript 简单的 DOM 选择器答案

【问题标题】：jquery and native javascript simple DOM selectorjquery 和原生 javascript 简单的 DOM 选择器
【发布时间】：2013-07-05 14:26:46
【问题描述】：

这是我的html代码

<div class="class_test" id="id_test">
<h2>testing</h2>
<img/>
<div class="rightBox">
<h4>test</h4>
<p>test</p>
</div>
</div>

在 javascript 代码中，我想选择 img 来设置它的 src , height , width

$("#id_test > img").src = "blablabla.jpg";
$("#id_test > img").height = "100";
$("#id_test > img").width = "100";

但它不起作用

我错过了哪里？

否则，我如何在不使用 jquery 的情况下使用本机 javascript 代码

document.getElementById("blabla")

我不想设置 img ID

【问题讨论】：

您确定在整个文档加载后设置了这些属性（src、height、width）吗？
是的，我确定！因为我成功加载了带有 ID 标签的 jquery
$("#id_test > img") 是类似对象的数组。要首先访问，您应该使用这种方式 $("#id_test > img")[0].src .. 或使用 attr 循环项目并设置属性 .. 在它后面的迭代元素
@Huei 试试这个 ..if ( $("#id_test > img").length > 0 ) { $("#id_test > img")[0].src = "blablabla.jpg" } .. 检查长度是否大于 0 .. 如果你没有通过正确的选择器查询。它的长度是0
@Huei：如果你得到那个错误，那么$ 不是指 jQuery。 jQuery永远不会返回null。如果你想使用 jQuery，请确保它已加载。

标签： javascript jquery dom jquery-selectors

【解决方案1】：

jQuery 像对象一样返回数组 .. 例如：$("#id_test > img") 返回以下数组

[<img/>,<img />, ...]

要访问它，您可以使用for、while .. 或 jQuery each 方法循环它们。

$("#id_test > img")[0] -> is Dom

改变它会反映到 Dom 中。但你应该关心 your selector 传递。如果选择器无效一个.. jQuery Object.length 是0

查看问题Properties and Attributes in HTML的属性和属性之间的区别

var imgs =  $("#id_test > img");

// set first item ..    
if ( imgs.length > 0 ) {
    imgs[0].src = 'your src';

}

// set all items
if ( imgs.length > 0 ) {

    for ( var i= 0; i < imgs.length ; i++ ){
        imgs[i].src = 'your src'; // src is property
    } 
}

最好的方法是使用jQuery prop 方法。为所有项目设置src 属性，与上面的for loop 代码相同。jQuery 在不同的浏览器上工作是安全的

imgs.prop('src','your src') // or pass json params

在 hehind 循环中每个项目，...并设置属性

【讨论】：

【解决方案2】：

FIDDLE

宽度jQuery：

$("#id_test > img").prop('src','http://jsfiddle.net/favicon.png');
$("#id_test > img").prop('height','100');
$("#id_test > img").prop('width','100');

宽度javascript

var elm = document.getElementById('id_test');
var first = elm.getElementsByTagName("img")[0];
first.src = "http://jsfiddle.net/favicon.png";
first.style.height = '100px';
first.style.width = '100px';

【讨论】：

@Huei，太好了！很高兴我能帮上忙。

【解决方案3】：

我认为这应该可行：

$('#id_test').find('img').attr({ 'src': 'blablabla.jpg', 'height': 100, 'width': 100});

【讨论】：

【解决方案4】：

试试：

$("#id_test > img").attr('src',"blablabla.jpg").attr('height',"100").attr('width',"100");

【讨论】：

no =( 它不起作用，但尝试 $("#aaa") 将成功使用 ID 标签