jqurey 学习笔记 传智博客佟老师附详细注释_jquery

1 、写 js 的时候用 aptana （ IDE ），有 jquery 的代码提示。

把 code assist 里面的 jqurey1.3 选上就可以了。

2 、为一个元素增加事件的时候不要在 html 里加，在 js 中加。
不要写
要写成： document.getElementById(“id”).onclick = function(){}

3 、把 js 剥离出来，做到 html 和 js 的分离。
Html 中除了引入 js 之外，不要别的 js 代码。

4 、 Jqurey 选择器：基本选择器、层级选择器、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单选择器、表单对象属性选择器
http://xiazai.jb51.net/200907/yuanma/jQuery_xuanzeqi.rar

5 、选择器中的空格问题

带空格的是子选择器，不带空格的是可见性过滤选择器

例子 1 、品牌列表 需要一张小图片，还有 jqurey1.3.1 的 js 包
下载地址： jqurey鼠标经过例子 http://xiazai.jb51.net/200907/yuanma/jquery_mouse.rar
代码：

• 佳能 (30440)


• 索尼 (27220)


• 三星 (20808)


• 尼康 (17821)


• 松下 (12289)


• 卡西欧 (8242)


• 富士 (14894)


• 柯达 (9520)


• 宾得 (2195)


• 理光 (4114)


• 奥林巴斯 (12205)


• 明基 (1466)


• 爱国者 (3091)


• 其它品牌相机 (7275)

显示全部品牌

例子 2 、超链接和图片提示效果 需要几张图片 jqurey1.3.1 的 js 包
代码

";// 创建一个 div
$("body").append(im);// 把创建的 div 追加到 body 中
// 设定追加的 div 的位置， e 是鼠标的位置，再加上距离鼠标的位置 ，就是 div 的位置
$("#tooltip").css("left", e.pageX + x + "px")
.css("top", e.pageY + y + "px")
.show("fast");// 显示 速度设为 快
}).mouseout(function(){// 鼠标移出事件的方法
this.title = this.myTitle;// 把 myTitle 还给 title
$("#tooltip").remove();// 删除新添加的 div
}).mousemove(function(e){// 鼠标在图片上移动的事件的方法
// 修正位置
$("#tooltip").css("left", e.pageX + x + "px")
.css("top", e.pageY + y + "px");
}).click(function(){return false;});// 取消 a 标记的默认方法
})

有效果：

• 


• 


• 


• 

无效果：

• 


• 


• 


•