使用步骤如下：
创新互联建站主要从事成都网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务苏尼特左,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
1.jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。
2.然后我们来开始编辑HTML界面代码。
3.使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的jQuery路径名称。
4.接着再书写一个script标签对,里面写上jQuery入口函数,这样,当我们的HTML加载完成之后就会执行我们的jQuery代码
jQuery插件 要使用它的话 通常插件中都有demo或者api可以查阅\x0d\x0a通常jQuery插件为了减小体积 会发布两个版本 XXX.js和XXX.min.js\x0d\x0a\x0d\x0a如果你要修改插件需要使用XXX.js文件\x0d\x0a\x0d\x0a首先 你要知道它怎么用,先有一个可用的demo(没有demo就自己写一个),然后用webkit内核或firefox进行断点查看,这主要是为了找插件入口点,当然 你也可以直接查看js代码 这需要一定的底子\x0d\x0a最后 就是慢慢查看他的代码的实现功能了,先得看懂他是怎么实现的,然后你才会知道怎么改.\x0d\x0a\x0d\x0ajQuery插件我也写的不少 像 模拟alert/confirm/prompt 错误信息提示框 模拟弹出窗体 无缝marquee滚动 分页控件 拖拽控件等等\x0d\x0a\x0d\x0ajQuery插件的框架写法通常是\x0d\x0a\x0d\x0a(function($){\x0d\x0a $.fn.extend({\x0d\x0a fnKey:function(){}\x0d\x0a })\x0d\x0a //或者\x0d\x0a $.fn.fnKey=function(){}\x0d\x0a})(jQuery)\x0d\x0a\x0d\x0a上面的两种写法的调用 方式 是\x0d\x0a\x0d\x0a$("XXX").fnKey()进行调用的\x0d\x0a\x0d\x0a还有一种写法:\x0d\x0avar fnClass = function(){\x0d\x0a this.fnKey=function(){\x0d\x0a }\x0d\x0a this.props="";\x0d\x0a}\x0d\x0a\x0d\x0a这种写法是的调用 方式是\x0d\x0afnClass obj = new fnClass();\x0d\x0aobj.fnKey();\x0d\x0a\x0d\x0a第二种写法是js的面向对象编程 得自己慢慢的理解哈
关于jquery插件jTimer(jquery定时器)使用方法
复制代码 代码如下:
(function ($) {
$.extend({
timer: function (action,context,time) {
var _timer;
if ($.isFunction(action)) {
(function () {
_timer = setInterval(function () {
if (!action(context)) {
clearInterval(_timer);
}
}, time);
})();
}
}
});
})(jQuery);
复制代码 代码如下:
#wrap
{
display: table;
margin: 0 auto;
}
#cvs
{
display: table-cell;
vertical-align: middle;
}
function drawRound(context) {
if (context.counterclockwise) {
draw(context.x, context.y, context.r, context.start, context.start - Math.PI / 50, context.counterclockwise);
context.start -= Math.PI / 50;
return context.start 0.5 * Math.PI;
}
else {
draw(context.x, context.y, context.r, context.start, context.start + Math.PI / 50, context.counterclockwise);
context.start += Math.PI / 50;
return context.start Math.PI;
}
}
function draw(x, y, r, sAngle, eAngle, counterclockwise) {
var cvs = document.getElementById("cvs");
ctx = cvs.getContext("2d");
ctx.strokeStyle = "#f00";
ctx.beginPath();
ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
ctx.stroke();
}
$(function () {
$.timer(drawRound, { x: 100, y: 100, r: 50, start: 1.5 * Math.PI, counterclockwise: true }, 200);
$.timer(drawRound, { x: 100, y: 100, r: 60, start: 0, counterclockwise: false }, 200);
}); ;
