学习目的
本期开始我们要学习jQuery。
1.jQuery基本概念
学习目标:学会如何使用jQuery,掌握jQuery的常用api(方法),能够使用jQuery实现常见的效果。
1.1 为什么要学习jQuery?
使用javascript开发过程中,有许多的缺点:
1. 查找元素的方法太少,麻烦。
2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果,也很麻烦
5. 代码冗余。
例子1:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 200px;
margin-bottom: 10px;
background-color: #a43035;
display: none;
}
</style>
<script>
//等待页面加载完成后才会执行。
window.onload = function () {
//不爽的地方:
//1. 代码比较麻烦,需要遍历,可能还需要嵌套。
//2. 找对象麻烦,方法少,还长
//3. 会有兼容性问题。
//4. 如果想要实现简单的动画效果 animate
//5. js注册事件,会被覆盖,addEventListener
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var divs = document.getElementsByTagName("div");
btn1.onclick = function () {
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "block";
}
};
btn2.onclick = function () {
for (var i = 0; i < divs.length; i++) {
//低版本火狐浏览器不支持innerText,支持textContent
divs[i].innerText = "我是内容";
}
};
};
</script>
</head>
<body>
<input type="button" value="展示" id="btn1">
<input type="button" value="设置内容" id="btn2">
<div></div>
<div></div>
<div></div>
</body>
</html>
1.2 什么是jQuery?
jQuery的官网 http://jquery.com/
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)
我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
1.3 jQuery的版本
官网下载地址:http://jquery.com/download/
jQuery版本有很多,分为1.xx ,2.xx, 3.xx
大版本分类
1.几版本:能够兼容IE678浏览器
2.几版本:不兼容IE678浏览器
1.几和2.几版本jquery都不再更新版本了,现在只更新3.几版本。
3.几版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
关于压缩版和未压缩版
jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。
当然,我提供的是未压缩版。
1.4 jQuery初体验
我们优化上面例子1的代码。
首先我们需要一个jQuery的文件,可以去官网下载,我这里提供一个百度网盘的1.12.4的版本(这个版本是1.0版本系列最后的版本,1.几版本已经停止更新了),为什么要百度网盘呢?因为代码太多,有1万多行代码,不方便在这里粘贴。
链接:https://pan.baidu.com/s/1DKIn2Er8gG9CSyCDVyfA-A
提取码:p6wj
我们把这个js文件放入到你的代码目录下,以便引用。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 200px;
margin-bottom: 10px;
background-color: #a43035;
display: none;
}
</style>
<!--1.需要引入jQuery文件-->
<script src="jquery-1.12.4.js"></script>
<script>
//2.入口函数的标准
$(document).ready(function () {
//注册事件,把on去掉,这是一个方法
$("#btn1").click(function () {
//隐式迭代:jQuery会自动的遍历,不需要我们遍历
$("div").show(2000);
});
$("#btn2").click(function () {
$("div").text("我是内容");
});
});
</script>
</head>
<body>
<input type="button" value="btn1" id="btn1">
<input type="button" value="设置内容" id="btn2">
<div></div>
<div></div>
<div></div>
</body>
</html>
运行你会发现,例子1的功能都实现了,而且更简单,不需要考虑兼容性,动画效果只需要一句代码,是不是特别简单。
优点总结:
1. 查找元素的方法多种多样,非常灵活
2. 拥有隐式迭代特性,因此不再需要手写for循环了。
3. 完全没有兼容性问题。
4. 实现动画非常简单,而且功能更加的强大。
5. 代码简单、粗暴。
1.5 jQuery的入口函数
使用jQuery的三个步骤:
1. 引入jQuery文件
2. 入口函数
3. 功能实现
关于jQuery的入口函数:
//第一种写法
$(document).ready(function() {
});
//第二种写法
$(function() {
});
jQuery入口函数与js入口函数的对比:
1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
1.6 jQuery对象与DOM对象的区别(重点)
1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
4. DOM对象与jQuery对象的方法不能混用。
DOM对象转换成jQuery对象:【联想记忆:花钱】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
jQuery对象转换成DOM对象:
var $li = $(“li”);
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--DOM对象就像一件件衣服,你要调用方法,就像一件一件洗衣服,麻烦繁琐,jQuery就像全自动洗衣机,只要把对象丢进去,按个按钮就完成了方法的调用-->
<ul>
<li id="cloth">衣服</li>
<li>裤子</li>
<li>裤衩子</li>
<li>袜子</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1. 什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)
//var cloth = document.getElementById("cloth");
//cloth.style.backgroundColor = "pink";
//2. 什么是jq对象:使用jq的方式获取到的元素就是jq对象
//var $li = $("li");
//console.log($li);
//$li.text("我改了内容");
//3. jq对象与js对象的区别
//js对象对象不能调用jq对象的方法
//var cloth = document.getElementById("cloth");
//cloth.text("呵呵");
//4. jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)
//jquery对象能不能调用DOM对象的方法
//var $li = $("li");
//$li.setAttribute("name","hehe");//出错
//$li[0].setAttribute("name","hehe");//正确
//DOM无法调用jQuery对象的方法:为什么:因为是两个不同对象
//DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。
var cloth = document.getElementById("cloth");
//DOM对象就变成jQuery对象
//$(cloth).text("呵呵");
//jQuery对象怎么转换成DOM对象(取出来)
var $li = $("li");
$li[1].style.backgroundColor = "red";
$li.get(2).style.backgroundColor = "yellow";
//总结:
//1. 什么是DOM对象:用js的方式获取到的对象时DOM对象
//2. jQuery对象:用jq的方式获取到的对象时jq对象
//3. 区别与联系
//4. 区别:js对象与jq对象的方法不能混着用
//5. 联系:
// DOM-->转换 jQuery的方法:$()
// jQuery-->转换 DOM $li[0] $li.get(0)
});
</script>
</body>
</html>
1.7 隔行变色案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//思考:就这么写,会不会报错,会不会有效果?
var lis=$("li");//获得所有的li
for (var i=0;i<lis.length;i++){
if (i%2==0){
//lis:jq对象
//lis[i]:DOM对象,通过下标取出来了
lis[i].style.backgroundColor="pink";
}else{
lis[i].style.backgroundColor="hotpink";
}
}
});
</script>
</body>
</html>
1.8 $符号的实质
在前面的例子中,你可以看到$
有很多功能:写入口函数,获取对象等等,那么$
到底是什么呢?
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
//$其实就是一个函数,以后用$的时候,记得跟小括号 $();
//参数不同,功能就不同
//3种用法
//1. 参数是一个function, 入口函数
$(function () {
});
console.log(typeof $);//结果是function
//2. $(domobj) 把dom对象转换成jquery对象
// $(document).ready(function () {
//
// });
//3. 参数是一个字符串,用来找对象
//$("div") $("div ul") $(".current")
</script>
</body>
</html>
2.选择器
jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。
jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。
jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
2.1 基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
注意: 交集选择器是两个标签合在一块。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="four">4</li>
<li>5</li>
<li class="green yellow">6</li>
<li class="green">7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<script src="jquery-1.12.4.js"></script>
<script>
//入口函数
$(function () {
//jquery如何设置样式
//css(name, value)
//name:样式名 value:样式值
//id选择器 $("#id")
//$("#four").css("backgroundColor", "red");
//$(".green").css("backgroundColor", "green");
//$("li").css("color", "red");
//交集 并集
//$("#four,.green").css("backgroundColor", "pink");
//$("li.green").css("backgroundColor", "red");
$(".green.yellow").css("backgroundColor", "pink");
});
</script>
</body>
</html>
2.2 jQuery的层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
跟CSS的选择器一模一样。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<div>11</div>
<div>22
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<div>33</div>
<div>44</div>
<div>55</div>
<p>66</p>
<p>77</p>
<p>88</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//$("s1,s2")// 并集选择器
//$("s1 s2")// 后代选择器
//$("s1>s2")// 子代选择器
//$("li.green")//交集选择器
//$("s1s2") //交集选择器
//$("#father>p").css("backgroundColor", "red");
$("#father p").css("backgroundColor", "red");
});
</script>
</body>
</html>
2.3 过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//下标为偶数,过滤
$("li:even").css("backgroundColor", "red");
$("li:odd").css("backgroundColor", "cyan");
$("li:lt(1)").css("fontSize", "32px");
});
</script>
</body>
</html>
2.4 筛选选择器(方法)
名称 | 用法 | 描述 |
---|---|---|
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子类选择器 |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
2.5 下拉菜单案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li {
background-image: url(imgs/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//mouseover:鼠标经过事件
//mouseout:鼠标离开事件
//mouseenter:鼠标进入事件
//mouseleave:鼠标离开事件
var $li = $(".wrap>ul>li");
//给li注册鼠标经过事件,让自己的ul显示出来
$li.mouseenter(function () {
//找到所有的儿子,并且还得是ul
$(this).children("ul").show();
});
$li.mouseleave(function () {
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
你会发现,之前我们用mouseover搭配mouseout
注册鼠标离开进入事件,但是这是有一些问题的。
查看W3Cschool官网,我们会发现有更好用的方法:
但是这里要 注意 :用了mouseenter就必须搭配mouseleave。
2.6 突出展示案例
所需图片:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(".wrap>ul>li").mouseenter(function () {
$(this).css("opacity", "1").siblings().css("opacity", "0.4");
});
$(".wrap").mouseleave(function () {
//让所有的li都变亮
//$("li");//当有很多li的时候不适合
//$(".wrap li");//又重新找wrap
//$(".wrap>ul>li")//又重新找wrap
//$(this).children().children("li"); //此时的this就是wrap,这个方法比上面的好点,但也不是最好的
$(this).find('li').css("opacity", 1);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
</html>
2.7 手风琴案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {padding: 0;margin: 0;}
ul { list-style-type: none;}
.parentWrap {
width: 200px;
text-align:center;
}
.menuGroup {
border:1px solid #999;
background-color:#e0ecff;
}
.groupTitle {
display:block;
height:20px;
line-height:20px;
font-size: 16px;
border-bottom:1px solid #ccc;
cursor:pointer;
}
.menuGroup > div {
height: 200px;
background-color:#fff;
display:none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//思路分析:
//1. 给所有的span注册点击事件,让当前span的兄弟div显示出来
$(".groupTitle").click(function () {
//下一个兄弟:nextElementSibling
//链式编程:在jQuery里面,方法可以一直调用下去。因为jQuery方法返回一个jQuery对象,jQuery对象又可以调用方法,如此反复,从而实现一直调用。
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
});
});
</script>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">标题1</span>
<div>我是弹出来的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题2</span>
<div>我是弹出来的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题3</span>
<div>我是弹出来的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>
2.8 淘宝精品案例
所需图片(图片文件名就是图片上的名字):
abg.gif
lili.jpg(下面有图片,是白色,所以看不清)
QQ截图20121215110234.jpg
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left, #center, #right {
float: left;
}
#left li, #right li {
background: url(images/lili.jpg) repeat-x;
}
#left li a, #right li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover, #right li a:hover {
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//找不到对象
$(function () {
$("#left>li").mouseenter(function () {
$("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
});
$("#right>li").mouseenter(function () {
$("#center>li").eq($(this).index() + 9).show().siblings().hide();
});
})
});
// $("#left>li").mouseenter(function () {
// //让center中对应下标的li显示,其他li隐藏
// var idx = $(this).index();
// $("#center>li:eq(" + idx + ")").show().siblings().hide();
// });
//
// $("#right>li").mouseenter(function () {
// var idx = $(this).index() + 9;
// $("#center>li").eq(idx).show().siblings().hide();
//
// //$("#center>li").eq(idx) :返回jq对象
// //$("#center>li").get(idx);:返回js对象
// });
// });
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男靴</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男包</a></li>
</ul>
</div>
</body>
</html>
2.9 jQuery调错技巧
因为jQuery代码出错一般都为找不到对象而错,但是检查代码发现是不会报错的(因为jQuery找不到对象依然会返回一个对象,所以不会报错)。所以你要按F12进入开发者工具进行调试
对代码打上断点(上图蓝色部分),一行行检查。
2.10 index方法详解
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//index()会返回当前元素在所有兄弟元素里面的索引。
$("li").click(function () {
console.log($(this).index());
});
});
</script>
</body>
</html>
总结
本期学习到此结束,我强烈大家到W3C
school官网进行前端的学习,这是一个非常好的网站。