jquery和本地javascript简单DOM选择器

这是我的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

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';

尝试：

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

我认为这应该有效：

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

jQuery返回类似数组的对象。。例如：$("#id_test > img")返回以下数组

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

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

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

更改它将反映到Dom中。。但你应该关心your selector的通过。如果选择器无效，则为。。jQuery Object.length是0

查看问题属性和属性属性之间的区别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道具方法。为所有项目设置src属性，与上面的for loop代码相同。jQuery在不同的浏览器上工作是安全的

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

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

相关内容

最新更新

热门标签：