jQuery Watch 项目教程

jQuery Watch 项目教程

jquery-watchA jQuery plug-in to watch CSS style and attribute changes and get notified when a change occurs项目地址:https://gitcode.com/gh_mirrors/jq/jquery-watch

1. 项目的目录结构及介绍

jquery-watch/
├── LICENSE
├── README.md
├── bower.json
├── jquery-watch.js
├── jquery-watch.min.js
├── package.json
└── test/
    ├── index.html
    └── test.js

• LICENSE: 项目的开源许可证文件。
• README.md: 项目的介绍和使用说明。
• bower.json: Bower 包管理器的配置文件。
• jquery-watch.js: 项目的源代码文件。
• jquery-watch.min.js: 项目的压缩版本。
• package.json: npm 包管理器的配置文件。
• test/: 测试文件夹，包含测试页面和测试脚本。

2. 项目的启动文件介绍

项目的启动文件是 jquery-watch.js 和 jquery-watch.min.js。这两个文件是 jQuery Watch 插件的核心代码，用于监视 DOM 元素的 CSS 样式、属性和属性的变化。

使用方法

在 HTML 页面中引入 jQuery 和 jQuery Watch 插件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/jquery-watch.min.js"></script>

然后，在 JavaScript 代码中使用 watch 方法来监视元素的变化：

// 选择要监视的元素
var el = $("#notebox");

// 设置监视器
el.watch({
  properties: "top left opacity attr_class prop_innerHTML",
  callback: function(data, i) {
    var propChanged = data.props[i];
    var newValue = data.vals[i];
    var el = this;
    var el$ = $(this);
    // 处理变化的回调函数
  }
});

3. 项目的配置文件介绍

package.json

package.json 是 npm 包管理器的配置文件，包含了项目的元数据和依赖项。

{
  "name": "jquery-watch",
  "version": "1.2.0",
  "description": "A jQuery plug-in to watch CSS style and attribute changes and get notified when a change occurs",
  "main": "jquery-watch.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/RickStrahl/jquery-watch.git"
  },
  "keywords": [
    "jquery-plugin",
    "ecosystem:jquery",
    "watch",
    "change",
    "domattrmodified",
    "propertychange",
    "polling",
    "attributes",
    "properties",
    "observer"
  ],
  "author": "Rick Strahl",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/RickStrahl/jquery-watch/issues"
  },
  "homepage": "https://github.com/RickStrahl/jquery-watch#readme"
}

bower.json

bower.json 是 Bower 包管理器的配置文件，包含了项目的元数据和依赖项。

{
  "name": "jquery-watch-dom",
  "version": "1.2.0",
  "description": "A jQuery plug-in to watch CSS style and attribute changes and get notified when a change occurs",
  "main": "jquery-watch.js",
  "keywords": [
    "jquery-plugin",
    "ecosystem:jquery",
    "watch",
    "change",
    "domattrmodified",
    "propertychange",
    "polling",
    "attributes",
    "properties",
    "observer"
  ],
  "authors": [
    "Rick Strahl"
  ],
  "license": "MIT",
  "homepage": "https://github.com/RickStrahl/jquery-watch",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": ">=1.7.0"
  }
}

这两个配置文件主要用于定义项目的元数据、依赖项和脚本命令。通过这些配置文件，开发者可以使用 npm 或 Bower 来安装和管理项目依赖。

jquery-watchA jQuery plug-in to watch CSS style and attribute changes and get notified when a change occurs项目地址:https://gitcode.com/gh_mirrors/jq/jquery-watch