传智博客佟老师jqurey学习笔记，以及例子代码详细注释。_传智博客学院档案代码怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/chpublish1012/article/details/4342995

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

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

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

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

2 、为一个元素增加事件的时候不要在 html 里加，在 js 中加。

不要写 <input type=”button” οnclick=”xxx” id=”id”>

要写成： document.getElementById(“id”).onclick = function(){}

3 、把 js 剥离出来，做到 html 和 js 的分离。

Html 中除了引入 js 之外，不要别的 js 代码。

4 、 Jqurey 选择器：基本选择器、层级选择器、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单选择器、表单对象属性选择器

选择器练习下载： http://download.youkuaiyun.com/source/1484406

5 、选择器中的空格问题

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

例子 1 、品牌列表需要一张小图片，还有 jqurey1.3.1 的 js 包

下载地址： http://download.youkuaiyun.com/source/1484474

代码：

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

<head>

*{ 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>

$(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>

<ul>

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

</ul>

<a href="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>

<title>Untitled Document</title>

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>

$(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>

<ul>

</ul>

<ul>

</ul>

</body>

</html>