最近在使用jQuery进行一些页面操作时,遇到了一个奇怪的问题:无法对选中的属性赋值。
例如,HTML代码如下: <div id="myDiv" class="box"></div> 我们想要通过jQuery来为这个div元素的class属性重新赋值: $("#myDiv").class = "newbox"; 但是,上面的代码并不能实现我们的目的。事实上,如果我们在控制台中执行类似上面代码的操作,会得到一个类似如下的错误提示: TypeError: Cannot set property ‘class’ of undefined 为什么会出现这个问题呢?
原因是jQuery的选择器返回的并不是DOM元素,而是一个对象,即jQuery对象。这个对象是包装了匹配的元素的,因而我们不能像操作DOM元素那样直接对它的属性进行赋值。正确的方法是使用jQuery提供的方法来操作对象或元素属性。
比如,如果我们要为上述的div元素重新设置class属性,正确的代码应该是:
$("#myDiv").attr("class", "newbox"); 或者 $("#myDiv").removeClass("box").addClass("newbox");
通过这样的方式,我们就可以很方便地使用jQuery来操作DOM元素的属性:
$("#myDiv").attr("title", "My Title"); $("#myDiv").css("background-color", "#eee"); $("#myDiv").addClass("special"); $("#myDiv").width(100); $("#myDiv").height(50);
综上,使用jQuery操作DOM元素属性时,需要注意返回的是jQuery对象,而不是DOM元素,应该调用相关方法来操作属性值。