JQ01
1、使用js的缺点
innerText的兼容性问题：低版本火狐浏览器不支持
textContent：火狐支持，ie678不支持
2、JQ初体验
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>
<!--1. 需要引入jQuery文件-->
<script src="jquery-1.12.4.js"></script>
<script>
//2. 入口函数的标准
$(document).ready(function(){
//注册事件，把on去掉，是一个方法
$("#btn1").click(function () {
//隐式迭代：偷偷的遍历，jQuery会自动的遍历，不需要我们遍历。
$("div").show(1000);
});
$("#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>
2）什么是jq?
js库：把一些常用到的方法写到一个单独的js文件，使用时直接去引用就可以了。学习jq，就是学习其中封装的方法。
3）jq的版本
版本繁多。
1.x版本：能兼容ie678
2.x版本：不兼容ie678
上述版本已不再更新
3.x版本：非常精简，不兼容ie678
压缩版，适用于生产环境，文件较小，删除了注释，换行，空格等，但基本没有阅读性
未压缩版：
适用于学习与开发环境，源码清晰，方便阅读
4）jq的入口函数
入口函数的目的是等待jq文件加载完成。引入jq文件的script标签推荐写在body标签的最后面，这样可以省去入口函数，但还是建议写上入口函数。
//引入jq文件
<script src="jquery-1.12.4.js"></script>
//写入口函数
第一种写法:
$(document).ready(function(){...
});
第二种写法(jq不存在覆盖问题)：
$(function(){
//里面可以写js代码
});
js的入口函数：JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。
window.onload=function(){
};
jq与js的入口函数之间的先后关系：js的入口函数要比jq的入口函数执行得要晚一些
5）jq对象与DOM（js）对象的区别：
js对象：使用js的方式获取到的元素就是js对象
例如通过document.getElementById该方法
jq对象：使用jq的方式获取到的元素就是jq对象
例如$(“li”);//获取所有的li，可自行用美元符 标识
jq对象与js对象间的联系：
jq对象就是js对象的一个集合，是一个伪数组，里面存放了大量的js对象
jq对象与js对象间的区别：
js对象不能调用jq对象的方法
jq对象也无法调用js对象的方法
只要通过以下方式就可以把js对象转为jq对象
$(js对象名).text("hh");//用美元符即可
jq对象转为js对象
var $li=$("li");
$li[0].style.backgroundColor="red";//通过数组的方式取出
或get方法：
$li.get(0)
总结：
6）$符号的实质
在取名时，仅是为了区分这是jq对象。
$其实是一个函数，在使用它时须跟小括号
参数不同，它的功能也不同
①参数是一个函数，将被作为入口函数使用
$(function(){...});
②参数为一js对象，将会把该对象转换为jq对象
$(domObj);
③参数为一字符串，用于找对象
$("div")
$("#id")
$(".className")
3、JQ的基本选择器
1）
与css中的用法一样。
交集选择
并集选择
层级选择器
过滤选择器：jq特有，冒号打头
筛选选择器
2）mouseenter与mouseseover的区别
mouseover：鼠标经过事件
mouseout：鼠标离开事件
jq专属事件:
mouseenter:鼠标进入事件
mouseleave鼠标离开事件
案例：下拉菜单
<!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>
突出显示案例：
<!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");
//$(".wrap li");
//$(".wrap>ul>li")
//$(this).children().children("li");
$(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>
jq中对象调方法可一直调下去（链式编程）
手风琴案例：
<!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里面，方法可以一直调用下去。
$(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>
案例：淘宝精品
<!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>
双引号中不能直接写变量，要用"前半段字符串"+变量+"后半段字符串"的方式桥接
小区别：
3、JQ调错技巧
通过alert或在浏览器源代码处打断点
4、index方法详解
它是方法而不是属性
jq里几乎没有属性，都是方法
index()将返回当前元素在所有兄弟元素里面的索引
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
