JQuery操作HTML属性 小鱼儿 2022-01-22 22:37 248阅读 0赞 每一个HTML元素,都是一个DOM对象 每一个对象都会有其对应的属性 对于如图所示的img标签 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70][] src是图片的地址,可以是本地的,也可以是网络的 alt是图片信息 width是图片宽度 显示效果如下: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 1][] 右键,检查 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 2][] 首先获取当前元素的JQuery对象 然后调用attr方法 获取其alt属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 3][] 刚刚用到的attr函数同样可以用于设置操作 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 4][] 我们还可以用removeAttr方法移除属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 5][] 如上所示,我们通过JQuery对DOM对象的所有操作仅对当前页面有效,网页原始的对象属性不会发生改变 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70]: /images/20220123/8dfffc746df34c7a9b230a7b8a3668c3.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 1]: /images/20220123/9d8653f5761249fbb64c01340774d3d8.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 2]: /images/20220123/fc2fc28fe9614813afb356fdf24aa332.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 3]: /images/20220123/0ce5bef59ccf40d1ac6c385f1db0a1c2.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 4]: /images/20220123/a10bbd11600e4efb9cf9d69cd5493824.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTE4NTI3_size_16_color_FFFFFF_t_70 5]: /images/20220123/6302d71d7023466390b29d8c8edd459e.png
还没有评论,来说两句吧...