************本人水平有限,在学习时请用批判的态度学习,有问题给我留言************
传智博客佟老师jqurey学习笔记,以及例子代码详细注释。
1、写js的时候用aptana(IDE),有jquery的代码提示。
把code assist里面的jqurey1.3选上就可以了。
2、为一个元素增加事件的时候不要在html里加,在js中加。
不要写<inputtype=”button” onclick=”xxx” id=”id”>
要写成:document.getElementById(“id”).onclick= function(){}
3、把js剥离出来,做到html和js的分离。
Html中除了引入js之外,不要别的js代码。
4、Jqurey选择器:基本选择器、层级选择器、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单选择器、表单对象属性选择器
选择器练习下载:http://download.csdn.net/source/1484406
5、选择器中的空格问题
带空格的是子选择器,不带空格的是可见性过滤选择器
例子1、品牌列表 需要一张小图片,还有jqurey1.3.1的js包
下载地址:http://download.csdn.net/source/1484474
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<styletype="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;}
.SubCategoryBoxul { list-style:none;}
.SubCategoryBoxul li { display:block; float:left; width:200px; line-height:20px;}
.showmore{ clear:both; text-align:center;padding-top:10px;}
.showmorea { display:block; width:120px; margin:0 auto; line-height:24px; border:1pxsolid #AAA;}
.showmorea span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoteda { color:#F50;}
</style>
<scripttype="text/javascript" src="scripts/jquery-1.3.1.js"></script>
<scripttype="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 内容过滤 包含 佳能等几个内容时
$("divul 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{//如果是隐藏的
//去除加上去的样式
$("divul li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')")
.removeClass("promoted");
$(".showmore>a>span").css("background","url(img/down.gif) no-repeat 0 0");//改变小箭头图片
$(".showmore>a>span").text("显示全部品牌^^");//改变文字
}
returnfalse;
});
});
</script>
</head>
<body>
<divclass="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>
<divclass="showmore">
<ahref="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>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>UntitledDocument</title>
<styletype="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>
<scripttype="text/javascript" src="scripts/jquery-1.3.1.js"></script>
<scripttype="text/javascript">
$(function(){//dom加载完执行
//设定图片层距离鼠标的位置
varx = 10;
vary = 20;
$("a.tooltip").mouseover(function(e){//选择class为tooltip的a标记,添加鼠标经过事件的方法
this.myTitle= this.title;//得到a标记的title属性
this.title= "";//把原来的title属性设为空字符串
varimageTitle = this.myTitle ? ("<br>" + this.myTitle) :"";//判断myTitle是否为空,不为空给它前面加 br
varim = "<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(){returnfalse;});//取消a标记的默认方法
})
</script>
</head>
<body>
<h3>有效果:</h3>
<ul>
<li><ahref="images/apple_1_bigger.jpg" class="tooltip"title="苹果iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li>
<li><ahref="images/apple_2_bigger.jpg" class="tooltip"title="苹果 iPodnano"><img src="images/apple_2.jpg" alt="苹果 iPodnano"/></a></li>
<li><ahref="images/apple_3_bigger.jpg" class="tooltip"title="苹果iPhone"><img src="images/apple_3.jpg" alt="苹果iPhone"/></a></li>
<li><ahref="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><ahref="images/apple_1_bigger.jpg" title="苹果 iPod"><imgsrc="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><ahref="images/apple_2_bigger.jpg" title="苹果 iPod nano"><imgsrc="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><ahref="images/apple_3_bigger.jpg" title="苹果 iPhone"><imgsrc="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><ahref="images/apple_4_bigger.jpg" title="苹果 Mac"><imgsrc="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
</body>
</html>