<span class="showOptions btn btn-default" style="display: inline-block; position: relative; z-index: 100; margin-right: 5px;"> <img style="height:16px;" border="0" src="/snsp/base/static/images/image/image.gif"> </span> 用JQuery监听img标签的src值是否发生改变,如果改变输出“123123123”
时间: 2024-03-26 10:41:36 浏览: 18
可以使用 JQuery 的 `attr` 函数获取 img 标签的 src 属性,并使用 `setInterval` 函数定时检查是否发生变化,代码如下:
```javascript
$(function() {
let src = $('img').attr('src'); // 获取初始的 src 属性值
setInterval(function() {
let newSrc = $('img').attr('src'); // 获取最新的 src 属性值
if (newSrc !== src) { // 如果发生变化,输出“123123123”
console.log('123123123');
src = newSrc; // 更新 src 属性值
}
}, 1000);
});
```
当 img 标签的 src 属性发生变化时,会输出 "123123123"。
相关问题
<span class="showOptions btn btn-default" style="display: inline-block; position: relative; z-index: 100; margin-right: 5px;"> <img style="height:16px;" border="0" src="/snsp/base/static/images/image/image.gif"> </span> 监听img标签的src值是否发生改变,如果改变输出“123123123”
可以使用 MutationObserver 监听 img 标签的 src 属性变化,代码如下:
```javascript
const targetNode = document.querySelector('img'); // 监听的目标节点
const config = { attributes: true, attributeFilter: ['src'] }; // 监听 src 属性变化
const callback = function(mutationsList) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
console.log('123123123');
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
```
当 img 标签的 src 属性发生变化时,会输出 "123123123"。
解释一下这段代码<div class="sidebar-shortcuts" id="sidebar-shortcuts" style="display: none"> <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> <button class="btn btn-success"> <i class="ace-icon fa fa-signal"></i> </button> <button class="btn btn-info"> <i class="ace-icon fa fa-pencil"></i> </button> <!-- #section:basics/sidebar.layout.shortcuts --> <button class="btn btn-warning"> <i class="ace-icon fa fa-users"></i> </button> <button class="btn btn-danger"> <i class="ace-icon fa fa-cogs"></i> </button> <!-- /section:basics/sidebar.layout.shortcuts --> </div>
这段代码是一个 HTML 页面中的一部分,用于创建一个侧边栏的快捷方式菜单。
```html
<div class="sidebar-shortcuts" id="sidebar-shortcuts" style="display: none">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
</div>
```
首先,`<div>` 标签定义了一个具有 class 属性为 "sidebar-shortcuts" 的 `<div>` 元素,并设置了 id 属性为 "sidebar-shortcuts",并通过 style 属性将其初始状态设置为不可见(display: none)。
在这个 `<div>` 元素的内部,又嵌套了一个具有 class 属性为 "sidebar-shortcuts-large" 的 `<div>` 元素,并设置了 id 属性为 "sidebar-shortcuts-large"。这个内层的 `<div>` 元素用于包含多个按钮,表示快捷方式菜单的大尺寸样式。
在内层的 `<div>` 元素中,有四个 `<button>` 元素,每个按钮都有不同的 class 属性和 `<i>` 元素作为图标。具体解释如下:
- 第一个 `<button>` 元素具有 class 属性为 "btn btn-success",表示一个成功操作的按钮,内部使用了一个带有 class 属性为 "ace-icon fa fa-signal" 的 `<i>` 元素作为图标。
- 第二个 `<button>` 元素具有 class 属性为 "btn btn-info",表示一个信息操作的按钮,内部使用了一个带有 class 属性为 "ace-icon fa fa-pencil" 的 `<i>` 元素作为图标。
- 第三个和第四个 `<button>` 元素类似,分别表示警告操作和危险操作的按钮,内部使用了对应的图标。
注释部分的代码是 HTML 注释,用于标记特定的代码段,在这里用于区分快捷方式菜单的布局部分。
总体来说,这段代码的作用是创建了一个侧边栏的快捷方式菜单,包含了不同样式的按钮和对应的图标。初始状态下,快捷方式菜单是隐藏的。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)