淘先锋技术网

首页 1 2 3 4 5 6 7

最近在使用jQuery进行一些页面操作时,遇到了一个奇怪的问题:无法对选中的属性赋值。


例如,HTML代码如下:
<div id="myDiv" class="box"></div>

我们想要通过jQuery来为这个div元素的class属性重新赋值:
$("#myDiv").class = "newbox";

但是,上面的代码并不能实现我们的目的。事实上,如果我们在控制台中执行类似上面代码的操作,会得到一个类似如下的错误提示:
TypeError: Cannot set property ‘class’ of undefined

为什么会出现这个问题呢?

jquery无法对选择的属性赋值

原因是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元素,应该调用相关方法来操作属性值。