1.jquery
◆很强大，但是很臃肿，需要自己封装一个jquery，要用到jqery中哪些方法，就把原来jquery中的方法拿出来。
◆jquery有两大特点：链式编程、隐式迭代（遍历）。
2.原生js的入口函数与jquery的入口函数
◆原生js的入口函数：
window.onload = function () {}是页面文档和页面资源都加载完毕之后开始执行函数里面的代码，
document.onready =function () {}是页面文档加载完毕之后开始执行函数里面的代码(但是这个原生的js的入口函数是jquery脚本库扩展出来的事件，只有在引入了jquery脚本库的时候才能够使用document.onready，没有引入脚本库的时候document对象是没有这个事件的)，document.onready 比 window.onload要快一点，因为图片资源还没有显示，document.onready里的代码就执行了，window.onload是页面所有资源都加载完毕才执行的，window对象没有onready。
◆jquery的入口函数：
$(document).ready(function () {});
$(function () {});
$(window).ready(function () {});这三种方式都和document.onready一样，都是页面文档加载完毕之后 就进入JQuery的入口函数开始执行函数里面的代码，
$(window).load(function () {});这种方式和
window.οnlοad=function(){}一样，都是页面文档和页面资源都加载完毕之后开始执行函数里面的代码。
★
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的入口函数与原生js的入口函数</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<script>
//原生js的入口函数 ：页面文档加载完毕之后，
// 页面需要加载的资源也加载完毕之后，就进入原生js的入口函数
window.onload = function () {
alert("原生js的入口函数 window.onload")
}
//window对象没有onready事件 只有document对象有 ready要比load快
// window.onready=function(){
// alert("原生js的入口函数 window.onready")
//
// }
//原生js的入口函数 ：页面文档加载完毕之后，就进入原生js的入口函数
//效果与下面的$(document).ready(function(){});差不多 //但是这个document对象的事件是jquery脚本库扩展出来的，
//所以在没有引入jquery脚本库时，
//document对象没有这个事件
document.onready = function () {
alert("原生js的入口函数 document.onready")
}
//JQuery的入口函数 第一种方式 ：页面文档加载完毕之后 就进入JQuery的入口函数
$(document).ready(function () {
alert("JQuery的入口函数 第一种方式 $(document).ready")
});
//JQuery的入口函数 第二种方式：页面文档加载完毕之后 就进入JQuery的入口函数
$(function () {
alert("JQuery的入口函数 第二种方式 $(function () ")
});
//JQuery的入口函数 第三种方式：页面文档加载完毕之后 就进入JQuery的入口函数
$(window).ready(function () {
alert("JQuery的入口函数 第三种方式 $(window).ready")
})
//这种jquery的入口函数 效果与window.onload差不多
$(window).load(function () {
alert("JQuery的入口函数 第四种方式 $(window).load")
});
</script>
</body>
</html>3.Query与$的区别：其实它们是一样的，都是一个函数名，并且它们完全相等，jQuery===$。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery与$的区别（其实他们是一样的）</title>
<script src="jquery-1.11.1.js"></script>
<script>
console.log(console);
console.log($);//$其实是一个函数名
console.log(jQuery);//jQuery其实是一个函数名
console.log($===jQuery);//他们是用一个函数
</script>
</head>
<body>
</body>
</html>4.jQuery中的dom对象与原生js中的dom对象的区别
◆jQuery的dom对象是对js的dom对象的封装
◆jQuery无论是通过什么方式获取的dom对象都是伪数组，伪数组中装的成员就是原生js的dom对象。
◆不光是将原生js的dom对象封装到数组中，并且还给这个数组增加了很多功能方法，也就是给原来的js的dom对象穿上了一层带有功能的皮肤，虽然原生的js的dom对象也可以自己封装这些功能方法，但是兼容性没有jQuery的那么好。
★模拟jQuery对象操作css样式的功能方法
Object.prototype.css = function (json) {
var cssArr = [];
for (var key in json) {
cssArr.push(key + ":" + json[key]);
}
this.style.cssText = cssArr.join(";");
}
box.css({width: "200px", height: "200px", "background-color": "#f00"});★jquery与js操作样式的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery与js操作样式的方式</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script>
var box1 = document.getElementById("box1");
var box2 = $("#box2");
//原生js一次性设置所有的样式 可以使用 cssText属性
box1.style.cssText = "width:200px;height:200px;background-color:#0f0";
//jquery一次性设置所有的样式 可以使用css();
box2.css({width: "200px", height: "200px", "background-color": "#f00"});
//jquery获取的dom对象是对js获取的dom对象进行了封装,
// 给js的dom对象穿上了一层带有功能的皮肤
// //自己给原生js封装一下并且也穿上一层功能皮肤
Object.prototype.css = function (json) {
var cssArr = [];
for (var key in json) {
cssArr.push(key + ":" + json[key]);
}
this.style.cssText = cssArr.join(";");
}
box1.css({width: "200px", height: "200px", "background-color": "#f00"});
</script>
</body>
</html>◆jQuery中的Dom对象与js中的Dom对象的区别和联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的Dom对象与js中的Dom对象的区别和联系</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="box" class="cbox"></div>
<script>
// js和jquery通过id获取dom对象\\
var box = document.getElementById("box");
var jbox = $("#box");
//<div id="box" class="cbox"></div>
console.log(box);
//jQuery.fn.init [div#box.cbox, context: document, selector: "#box"]
console.log(jbox);
console.log("-----------------------------------");
// js和jquery通过class获取dom对象\\
var cbox = document.getElementsByClassName('cbox');
var jcbox = $(".cbox");
//HTMLCollection [div#box.cbox, box: div#box.cbox]
console.log(cbox);
//jQuery.fn.init [div#box.cbox, prevObject: jQuery.fn.init(1), context: document, selector: ".cbox"]
console.log(jcbox);
console.log("-----------------------------------");
// js和jquery通过tagName获取dom对象\\
var div = document.getElementsByTagName("div");
var jdiv = $('div');
//HTMLCollection [div#box.cbox, box: div#box.cbox]
console.log(div);
//jQuery.fn.init [div#box.cbox, prevObject: jQuery.fn.init(1), context: document, selector: "div"]
console.log(jdiv);
console.log("-----------------------------------");
//js通过id获取的是一个dom对象 而jquery通过id获取的是个数组，
//js通过tagName与class获取的是一个数组 jquery通过tagName与class获取的也是一个数组
//通过结构可以看出，jquery获取的dom对象是对js获取的dom对象进行了封装。
</script>
</body>
</html>5.原生的js的dom对象可以和jQuery的dom对象相互转换
◆js的dom对象转换为jQuery的dom对象：$(js的dom对象)或jQuery(js的dom对象)。
◆jQuery的dom对象转换为js的dom对象：jQuery的dom对象[index]或jQuery的dom对象.get(index)，就可以获取jQuery的dom对象的伪数组中的一个dom对象，但是如果get方法中不写索引就可以获取jQuery的dom对象的伪数组中的所有的dom对象，jQuery的dom对象.get()获取一个正常的原生js的dom对象的数组，不再是伪装数组。
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的dom对象与js的dom对象之间相互转换</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div></div>
<div class="boxc"></div>
<div id="boxi"></div>
<div></div>
<div></div>
<script>
//js的dom对象
var boxtag = document.getElementsByTagName("div");
var boxc = document.getElementsByClassName("boxc");
var boxi = document.getElementById("boxi");
//jquery的dom对象
var jqboxtag = $("div");
var jqboxc = $(".boxc");
var jqboxi = $("#boxi");
//使用jquery的dom对象 改变css样式
jqboxtag.css({width: 100, height: 100, border: "1px solid #0f0"});
//将js 的dom对象 转换为jquery的dom对象
boxi = $(boxi);
//使用转换为jquery的dom对象 改变css样式
// boxi.css({"background-color": "#f00"});//可以传json 设置多个属性
boxi.css("background-color", "#f00");//可以传字符串 设置一个属性
//将jquery的dom对象 转换为js的dom对象
jqboxc = jqboxc[0];
jqboxc.style["background-color"] = "#ff0";
console.log(jqboxtag);
console.log(jqboxtag.get());
// 再将jquery的dom对象 转换为js的dom对象
jqboxi = jqboxi.get(0);//这个方法如果不传参数 则会返回一个数组
jqboxi.innerHTML = "将jquery的dom对象 转换为js的dom对象成功";
//jquery的dom对象都是数组，将原生的js对象封装到了一个数组中，
// 所以你才能够通过[]来获取原生的js的dom对象，
// get方法是给这个数组新增的，传递索引时就返回dom对象，
// 不传索引时就返回装着dom对象的正常数组。
</script>
</body>
</html>6.jQuery中的伪数组是怎么实现的，清空原本数组中的原型（所有功能方法），添加自己新增的功能方法，添加索引为字符串的成员context
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery对象是这样的伪数组</title>
</head>
<body>
<script>
//模拟jquery的dom对象的封装 ，jquery的dom对象就是这样的伪数组
var arr = [];
arr[0] = 0;
arr[1] = 1;
arr[2] = 2;
arr[3] = 3;
arr[4] = 4;
arr["5"] = 5;
//js的数组[]里面不光是索引 还可以是字符串
arr["context"] = document;
//清空数组的原型 没有数组的方法了
arr["__proto__"] = null;
console.log(arr);//打印伪数组
//这样只能遍历索引为数字的 或者索引为字符串的数字的
for (var i = 0; i < arr.length; i++) {
console.log(i + " " + arr[i]);
}
//这样既可以遍历索引为数字的也可以遍历索引为字符串的
for (var key in arr) {
console.log(key + " " + arr[key]);
}
</script>
</body>
</html>7.简单使用jQuery：隔行变色、页面开关灯
◆隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery进行隔行变色</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
var liArr = $("li");
//因为jquery的dom对象是伪数组 所以可以直接使用for循环
for (var i = 0; i < liArr.length; i++) {
if (i % 2 == 0) {
liArr.get(i).style.backgroundColor = "#f00";
} else {
liArr[i].style.backgroundColor = "#0f0";
}
}
});
</script>
</head>
<body>
<ul>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
<li>使用jQuery进行隔行变色</li>
</ul>
</body>
</html>◆页面开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery进行页面开关灯</title>
<style type="text/css">
img {
display: block;
margin: 100px auto;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
var btns = document.getElementsByTagName("button");
var body = $("body");
$(btns[0]).click(function () {//开灯
body[0].style.backgroundColor = "white";
})
$(btns[1]).click(function () {//关灯
body.get(0).style.backgroundColor = "black";
})
});
</script>
</head>
<body>
<button>开灯</button>
<button>关灯</button>
<img src="images/jQuery对象和DOM对象.png" width="500" alt="">
</body>
</html>
8.jQuery的基本选择器：
◆无论什么选择器，返回的都是封装着原生的dom对象的伪数组。
◆$(id选择器)，$(element选择器)，$(class选择器)，$(*通配符选择器)，$(选择器1，选择器2，选择器3，选择器4)....$(css选择器)，其实在css中使用的选择器，都可以放到$()中作为选择器
$("li")
$(".li")
$("*")
$("li,.li,#li,*")◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<ul>
<li></li>
<li class="li"></li>
<li id="li"></li>
<li class="li"></li>
<li></li>
</ul>
<script>
//元素选择器
var element=$("li");
element.css({width:"100px",height:"100px","margin-top":"5px","background-color":"#501"});
//类选择器
var class1=$(".li");
class1.css("background-color","#091");
//id选择器
var id1=$("#li");
id1.css({"border":"1px solid #009","background-color":"#ff0"});
//*通配符选择器
var all0=$("*");
//并集选择器
var bj=$("li,.li,#li,*");
</script>
</body>
</html>9.jQuery的层级选择器：
◆$(祖 子)后代选择器，$(父>子)子代选择器，$(前+紧接着的后)后兄弟选择器，$(前~所有的后)后同辈选择器，其实在css中使用的选择器，都可以放到$()中作为选择器
$("ul li")
$("ul>li")
$("#prv+ol")
$("#prv~li")◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//后代选择器
var li1 = $("ul li");
li1.css({"background-color":"#0f0","margin":"5px"});
//子代选择器
var li2 = $("ul>li");
li2.css({"border":"1px solid #f00"});
//后兄弟选择器
var next = $("#prv+ol");
next.css("border","2px solid #00f");
//后同辈选择器
var nextall = $("#prv~li");
nextall.css("border","5px solid #000");
});
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="prv"></li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<li></li>
<li></li>
</ul>
</body>
</html>10.jQuery的基本过滤选择器
◆在基本选择器的基础上进行过滤操作：如$("li:first");，找到所有li后直接找到第一个li。
:first过滤第一个、
:not(selector)过滤不包含selector的、
:even过滤索引为偶数的、
:odd过滤索引为奇数的、
:eq(index)过滤索引等于index的、
:gt(index)过滤索引大于index的、
:last过滤最后一个、
:lt(index)过滤索引小于index的、
:header过滤h1-h6、
:animated过滤正在执行动画的、
:focus过滤已经获取焦点。11.jQuery的筛选选择器
◆ 筛选过滤选择器操作：如$("li").eq(0);和$("li:even").eq(0);，前者表示找到所有li后过滤第一个li，后者表示找到所有索引为偶数的li后过滤第一个。
// eq(index | -index) //等于索引的元素
// first() //第一个元素
// last() //最后一个元素
// hasClass(class) //是否包含类
// filter(expr | obj | ele | fn)
// is(expr | obj | ele | fn)
// map(callback)
// has(expr | ele)
// not(expr | ele | fn) 是否不包含
// slice(start, [end])◆筛选查找选择器操作：如$("li").eq(0).next();或者$("li:first").next();，都是找到第一个li然后在此基础上查找下一个。
// children([expr]) //找子代
// closest(e | o | e)1.7 *
// find(e | o | e)//从jquery对象的后代中查找必须制定参数，如果不指定获取不到元素
// next([expr])//下一个
// nextall([expr])//下面的全部
// nextUntil([e | e][, f])
// offsetParent() //带有定位的父节点
// parent([expr]) //父节点
// parents([expr])
// parentsUntil([e | e][, f])
// prev([expr]) //上一个
// prevall([expr]) //上面的全部
// prevUntil([e | e][, f])
// siblings([expr]) //所有兄弟 除了自己
12.使用JQuery的选择器来DIY动画效果：下拉菜单、隔行变色、高亮显示戏曲牌、手风琴折叠面板、服饰广告
◆下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery的选择器制作下拉菜单</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(images/bg.jpg);
}
.wrap li {
background-image: url(images/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 type="text/javascript" src="jquery-1.11.1.js"></script>
<script>
//需求：当移入到一级菜单时，显示对应的二级菜单，移出时隐藏对应的二级菜单
//思路：所有一级菜单的鼠标移入事件，
// 然后show当前一级菜单下的ul，
// 移出时hide当前一级菜单下的ul
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
$(document).ready(function () {
//1.获取事件源及相关元素对象
var wrap = $(".wrap");
var liArr = wrap.children("ul").children("li");
// console.log(wrap)
// console.log(liArr)
//2.绑定事件
liArr.mouseenter(function () {
$(this).children("ul").show();
});
liArr.mouseleave(function () {
$(this).children("ul").hide();
});
//3.书写事件驱动程序
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>◆隔行变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery的选择器制作-隔行变色</title>
</head>
<body>
<ul>
<li>使用jQuery的选择器制作-隔行变色</li>
<li>使用jQuery的选择器制作-隔行变色</li>
<li>使用jQuery的选择器制作-隔行变色</li>
<li>使用jQuery的选择器制作-隔行变色</li>
<li>使用jQuery的选择器制作-隔行变色</li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
//需求：
// 首先 让ul中的li 索引为偶数就变绿，索引为奇数就变红，
// 然后让鼠标移入时颜色变蓝，移除就恢复原样
//思路：
//使用:even和:odd基本过滤器来找到对应的li改变其颜色
//设置li的鼠标移入事件和移出事件，并且设置一个计数器
//鼠标移入时记录颜色，鼠标移出时把记录的颜色赋值回去
//步骤：
//获取事件源及相关元素对象
//绑定事件
//书写事件驱动程序
//获取事件源及相关元素对象
var evenLi = $("li:even");//偶数索引的li
var oddLi = $("li:odd");//奇数索引的li
var allLi = $("li");//全部li
//设置隔行变色
evenLi.css("background", "#0f0");
oddLi.css("background", "#f00");
//绑定事件
var color = "";
allLi.mouseenter(function () {
color = $(this).css("background");
$(this).css("background", "#00f");
});
allLi.mouseleave(function () {
$(this).css("background", color);
});
//书写事件驱动程序
</script>
</body>
</html>◆高亮显示戏曲牌
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery的选择器制作-高亮显示戏曲牌</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.11.1.js"></script>
<script>
//防止图片加载不出来
$(window).load(function () {
//需求：首先让所有图片透明度变为0.4，当鼠标移入到某一张图片上时透明度变为1.0
//思路：改变透明度而已，设置opacity属性即可
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var liArr = $(".wrap>ul>li");
liArr.css("opacity", "0.4");
//2.绑定事件
liArr.mouseenter(function () {
$(this).css("opacity", "1.0");
});
liArr.mouseleave(function () {
$(this).css("opacity", "0.4");
});
//3.书写事件驱动程序
});
</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>◆手风琴折叠面板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用jQuery的选择器制作-手风琴折叠面板</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.11.1.js"></script>
<script>
$(function () {
//需求：当点击手风琴的某个面板的标题时，
// 展开当前面板中的内容
// 隐藏其它面板中的内容
//思路：设置每一个标题的单击事件
// 当点击时让内容的显示
// 让其它面板的内容隐藏
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var span = $(".parentWrap>.menuGroup>.groupTitle");
//2.绑定事件
span.click(function () {
//链式书写，显示自己 隐藏其它
$(this).next("div").show().parent("li").siblings("li").children("div").hide();
});
//3.书写事件驱动程序
});
</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>
◆服饰广告
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用jQuery的选择器制作-淘宝精品服饰广告</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.11.1.js"></script>
<script>
$(function () {
//需求：当鼠标移入到对应的栏目时显示对应的商品
//思路：先给左边的栏目设置鼠标移入事件 对应的li索引展示对应的商品
// 再给右边的栏目设置鼠标移入事件 在对应的索引上加9
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var liLeft = $("#left>li");
var liRight = $("#right>li");
var liCenter = $("#center>li");
//2.绑定事件
liLeft.mouseenter(function () {
liCenter.eq($(this).index()).show().siblings().hide();
});
liRight.mouseenter(function () {
console.log(liCenter.eq($(this).index() + 9));
liCenter.eq($(this).index() + 9).show().siblings().hide();
});
//3.书写事件驱动程序
})
</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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
