jQuery基础教程：DOM与CSS操作详解

.cc</em>'); //设置文本内容，不会解析html标签，而是显示原始文本 三．元素属性操作 在jQuery中，我们可以通过attr()方法来处理元素的属性。这包括获取、设置或者删除属性值。 attr(name) 获取指定属性名称的属性值 attr(name, value) 设置指定属性名称的属性值为value attr(attributes) 批量设置多个属性，attributes是一个包含键值对的对象 attr(name, function(index, oldAttr)) 使用函数动态设置属性值，index是元素索引，oldAttr是旧的属性值 例如，要获取或设置一个元素的id属性： $("#myElement").attr("id"); //获取id属性值 $("#myElement").attr("id", "newId"); //设置id属性值为newId 四．元素样式操作 jQuery提供了css()方法来处理元素的样式。这包括设置内联样式，查询样式值，甚至可以同时处理多个样式。 css(name) 获取第一个匹配元素的样式属性name的值 css(name, value) 设置所有匹配元素的样式属性name为value css(properties) 设置多个样式属性，properties是一个包含样式名称与值的对象 css(name, function(index, currentValue)) 使用函数动态设置样式，index是元素索引，currentValue是当前的样式值 例如，改变元素的背景颜色和字体大小： $("#myElement").css("background-color", "red"); //设置背景颜色为红色 $("#myElement").css({"font-size": "18px", "color": "blue"}); //同时设置字体大小和颜色 五．CSS方法 jQuery还提供了一些额外的CSS操作方法，如width(), height(), addClass(), removeClass(), toggleClass()等，用于方便地获取元素尺寸、添加/移除/切换CSS类。 width() 获取元素的宽度，包括内边距和边框 height() 获取元素的高度，包括内边距和边框 addClass(class) 向所有匹配的元素添加指定的类 removeClass(class) 从所有匹配的元素中移除指定的类 toggleClass(class) 根据当前元素是否有指定类，添加或移除该类 总结： DOM和CSS操作是JavaScript和jQuery中不可或缺的部分。DOM让我们能够以结构化的方式访问和修改HTML文档，而jQuery通过封装的方法简化了这一过程，使其更加高效且兼容性更强。通过熟悉和掌握上述的基本操作，开发者可以更便捷地实现网页动态效果和交互功能。在实际开发中，结合jQuery的其他特性，如事件处理、动画效果等，可以大大提高代码的可读性和维护性。