JQ01
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="data:images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="data: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="data:images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data: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()将返回当前元素在所有兄弟元素里面的索引
JQ01的更多相关文章
- 《2013传智播客视频》-wmv,avi,mp4.目录
\!--14俄罗斯方块\视频\.复习.avi; \!--14俄罗斯方块\视频\ 复习.avi; \!--14俄罗斯方块\视频\ 形状旋转.avi; \!--14俄罗斯方块\视频\ 判断形状能否变形.a ...
- 2013传智播客视频--.ppt,.pptx,.doc,.docx.目录
\!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.docx; \!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.pp ...
- Webpack 配置示例
Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...
随机推荐
- selenium相关：通过location 和 size 获取元素所在像素位置和尺寸，截取图片ROI
1.实验 #https://captcha.luosimao.com/demo/ chrome default: location 不滚动,直接返回相对整个html的坐标 {'x': 15.0, 'y ...
- C语言整理——文件系统和文件访问
标准C中规定了文件系统的访问和对文件本身的访问.不管是windows系统或者是泛unix系统,都实现了这些接口.在了解这些知识后,跨平台编程也将非常容易. 对文件系统的访问接口有: chdrive() ...
- day10.函数进阶
函数的命名空间 从python解释器开始执行之后,就在内存中开辟了一个空间,每当遇到一个变量的时候,就把变量名和值之间的对应关系记录下来. 但是当遇到函数定义的时候解释器只是象征性的将函数名读入内存, ...
- OSPF协议之详细图解
OSPF是一种基于SPF算法的链路状态路由协议. 上图是在一个OSPF区域里面添入一台新的路由器的时候,OSPF协议的工作过程,如果你能非常详细的叙述出这张图的话,基本上OSPF协议的工作过程你就掌握 ...
- 修改input 的 placeholder
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666!important; } inp ...
- 环形链表(给定一个链表，返回链表开始入环的第一个节点。 如果链表无环，则返回 null)
思想: 思想:用快慢指针先判断是否有环,有环则 假设头结点到环入口距离为n,环入口到快慢指针相遇结点距离为m,则慢指针走的路程 为m+n,而快指针走的路程为m+n+k*l (k*l表示绕环走的路程), ...
- GIT结合android studio使用总结
使用GIT前请阅读(有git基础可略过) git指引 :http://www.bootcss.com/p/git-guide/ 一. 下载git http://git-scm.com/downloa ...
- JavaEE-Servlet的部署和配置
1.:配置好相应环境和检查tomcat8.5能否运行,详见https://www.cnblogs.com/LJHAHA/p/10461697.html 2.将tomcat8.5下的webapps目录中 ...
- HDU1029 Ignatius and the Princess IV (水题)
<题目链接> 题目大意:给你一段序列,问你在这个序列中出现次数至少为 (n+1)/2 的数是哪个. 解题分析: 本题是一道水题,如果用map来做的话,就非常简单,但是另一个做法还比较巧妙. ...
- Ubuntu ssh-keygen 生成公钥并添加到远程服务器上
1. 在本地生成公钥, ssh-keygen -t RSA -b 800 2. cd /root/.ssh 3. ssh-copy-id -i id_rsa.pub 远程服务器IP 这一步需要输入远 ...