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


Posted in Javascript onSeptember 12, 2020

1 、写 js 的时候用 aptana ( IDE ),有 jquery 的代码提示。
jquery 学习笔记 传智博客佟老师附详细注释 
把 code assist 里面的 jqurey1.3 选上就可以了。

2 、为一个元素增加事件的时候不要在 html 里加,在 js 中加。
不要写 <input type=”button” onclick=”xxx” id=”id”>
要写成: document.getElementById(“id”).onclick = function(){}

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

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

5 、选择器中的空格问题

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title></title> 

<style type="text/css"> 

*{ margin:0; padding:0;} 

body {font-size:12px;text-align:center;} 

a { color:#04D; text-decoration:none;} 

a:hover { color:#F50; text-decoration:underline;} 

.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} 

.SubCategoryBox ul { list-style:none;} 

.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} 

.showmore { clear:both; text-align:center;padding-top:10px;} 

.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} 

.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} 

.promoted a { color:#F50;} 

</style> 

<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){//dom 加载完毕时执行 

// 得到 class 是 SubCategoryBox 的 div 中的 ul 中的 li ,索引大于 5 ,不选最后一个 

// 即后两行 

var $hideBandes = $("div.SubCategoryBox ul li:gt(5):not(:last)"); 

$hideBandes.hide();//dom 加载完毕先隐藏 

// 给 class 为 showmore 的 div 中的所有 a 标记增加 click 方法 

$("div.showmore>a").click(function(){ 

$hideBandes.toggle();// 点击是循环隐藏和显示 

if($hideBandes.is(":visible")){// 如果是显示的 

// 给几个特定的元素增加样式, div 中的 ul 中的 li 内容过滤 包含 佳能等几个内容时 

$("div ul li").filter(":contains(' 佳能 '), :contains(' 尼康 '), :contains(' 奥林巴斯 ')") 

.addClass("promoted"); 

$(".showmore>a>span").css("background", "url(img/up.gif) no-repeat 0 0");// 改变小箭头图片 

$(".showmore>a>span").text(" 显示精简品牌 ");// 改变文字 

}else{// 如果是隐藏的 

// 去除加上去的样式 

$("div ul li").filter(":contains(' 佳能 '), :contains(' 尼康 '), :contains(' 奥林巴斯 ')") 

.removeClass("promoted"); 

$(".showmore>a>span").css("background", "url(img/down.gif) no-repeat 0 0");// 改变小箭头图片 

$(".showmore>a>span").text(" 显示全部品牌 ^^");// 改变文字 

} 

return false; 

}); 

}); 

</script> 

</head> 

<body> 

<div class="SubCategoryBox"> 

<ul> 

<li ><a href="#"> 佳能 </a><i>(30440) </i></li> 

<li ><a href="#"> 索尼 </a><i>(27220) </i></li> 

<li ><a href="#"> 三星 </a><i>(20808) </i></li> 

<li ><a href="#"> 尼康 </a><i>(17821) </i></li> 

<li ><a href="#"> 松下 </a><i>(12289) </i></li> 

<li ><a href="#"> 卡西欧 </a><i>(8242) </i></li> 

<li ><a href="#"> 富士 </a><i>(14894) </i></li> 

<li ><a href="#"> 柯达 </a><i>(9520) </i></li> 

<li ><a href="#"> 宾得 </a><i>(2195) </i></li> 

<li ><a href="#"> 理光 </a><i>(4114) </i></li> 

<li ><a href="#"> 奥林巴斯 </a><i>(12205) </i></li> 

<li ><a href="#"> 明基 </a><i>(1466) </i></li> 

<li ><a href="#"> 爱国者 </a><i>(3091) </i></li> 

<li ><a href="#"> 其它品牌相机 </a><i>(7275) </i></li> 

</ul> 

<div class="showmore"> 

<a href="more.html"><span> 显示全部品牌 </span></a> 

</div> 

</div> 

</body> 

</html>

例子 2 、超链接和图片提示效果 需要几张图片 jqurey1.3.1 的 js 包
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>Untitled Document</title> 

<style type="text/css"> 

body{ 

margin: 0; 

padding: 40px; 

background: #fff; 

font: 80% Arial, Helvetica, sans-serif; 

color: #555; 

line-height: 180% 

} 

img{ 

border: none; 

} 

li{ 

list-style: none; 

float: left; 

display: inline; 

margin-right: 10px; 

border: 1px solid #AAAAAA; 

} 

#tooltip{ 

position: absolute; 

border: 1px solid #ccc; 

background: #333; 

padding: 2px; 

display: none; 

color: #fff; 

} 

</style> 

<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> 

<script type="text/javascript"> 

$(function(){//dom 加载完执行 

// 设定图片层距离鼠标的位置 

var x = 10; 

var y = 20; 

$("a.tooltip").mouseover(function(e){// 选择 class 为 tooltip 的 a 标记,添加鼠标经过事件的方法 

this.myTitle = this.title;// 得到 a 标记的 title 属性 

this.title = "";// 把原来的 title 属性设为空字符串 

var imageTitle = this.myTitle ? ("<br>" + this.myTitle) : "";// 判断 myTitle 是否为空,不为空给它前面加 br 

var im = "<div id='tooltip'><img src='" + this.href + "' alt=' 产品预览图 '/>" + imageTitle + "</div>";// 创建一个 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 标记的默认方法 

}) 

</script> 

</head> 

<body> 

<h3> 有效果: </h3> 

<ul> 

<li><a href="images/apple_1_bigger.jpg" class="tooltip" title=" 苹果 iPod"><img src="images/apple_1.jpg" alt=" 苹果 iPod" /></a></li> 

<li><a href="images/apple_2_bigger.jpg" class="tooltip" title=" 苹果 iPod nano"><img src="images/apple_2.jpg" alt=" 苹果 iPod nano"/></a></li> 

<li><a href="images/apple_3_bigger.jpg" class="tooltip" title=" 苹果 iPhone"><img src="images/apple_3.jpg" alt=" 苹果 iPhone"/></a></li> 

<li><a href="images/apple_4_bigger.jpg" class="tooltip" title=" 苹果 Mac"><img src="images/apple_4.jpg" alt=" 苹果 Mac"/></a></li> 

</ul> 

<br/><br/><br/><br/> 

<br/><br/><br/><br/> 

<h3> 无效果: </h3> 

<ul> 

<li><a href="images/apple_1_bigger.jpg" title=" 苹果 iPod"><img src="images/apple_1.jpg" alt=" 苹果 iPod" /></a></li> 

<li><a href="images/apple_2_bigger.jpg" title=" 苹果 iPod nano"><img src="images/apple_2.jpg" alt=" 苹果 iPod nano"/></a></li> 

<li><a href="images/apple_3_bigger.jpg" title=" 苹果 iPhone"><img src="images/apple_3.jpg" alt=" 苹果 iPhone"/></a></li> 

<li><a href="images/apple_4_bigger.jpg" title=" 苹果 Mac"><img src="images/apple_4.jpg" alt=" 苹果 Mac"/></a></li> 

</ul> 

</body> 

</html>
Javascript 相关文章推荐
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
js 自动播放的实例代码
Nov 19 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
在node中如何使用 ES6
Apr 22 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
JavaScript 事件查询综合
Jul 13 #Javascript
JavaScript 事件对象的实现
Jul 13 #Javascript
Prototype Date对象 学习
Jul 12 #Javascript
Prototype Function对象 学习
Jul 12 #Javascript
Prototype Object对象 学习
Jul 12 #Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 #Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 #Javascript
You might like
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php 定义404页面的实现代码
2012/11/19 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python 存取npy格式数据实例
2020/07/01 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
企业治理工作自我评价
2013/09/26 职场文书
商场端午节活动方案
2014/01/29 职场文书
文艺晚会主持词
2014/03/24 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
个人工作年终总结
2015/03/09 职场文书