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 来安装和管理项目依赖。