传智博客佟老师jqurey学习笔记，以及例子代码详细注释。

************本人水平有限，在学习时请用批判的态度学习，有问题给我留言************

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

传智博客佟老师jqurey学习笔记，以及例子代码详细注释。

把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、选择器中的空格问题

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

传智博客佟老师jqurey学习笔记，以及例子代码详细注释。

例子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" />

<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>(7275) </i></li>

</ul>

<divclass="showmore">

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

</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>

<ul>

</ul>

<ul>

</ul>

</body>

</html>

秒客网

传智博客佟老师jqurey学习笔记，以及例子代码详细注释。

相关文章