文件：/全栈教程/04_JS/JS核心第12天jQuery第1天/代码/2018-09-17
二、今日目标
- 1、掌握常用的选择器
- 2、掌握2~3个筛选方法
- 3、掌握jQuery事件绑定方法（封装了之前学习过的dom事件，另外有新增的好多实用的事件）
- 4、掌握toggle、hover事件的使用方法
- 5、掌握常用事件的使用方法，如click、ready、mouseenter等
- 6、掌握each遍历方法的使用
- 7、掌握html()、text()、val()三个方法的用法（语法相同，用的地方不同）
- 8、熟练查询jQuery手册
三、jQuery概述
1、什么是jQuery
jQuery是一个js框架。封装了很多实用的方法，基本解决了浏览器的兼容问题。
框架类似于现实生活中的毛坯房。比如说做一个项目好比盖一座房子。
2、特点
write less, do more. 写的更少，做的更多。
1．语法简练、语义易懂、学习快速、文档丰富。
2．jQuery 是一个轻量级的脚本，其代码非常小巧。
3．jQuery 支持 CSS1~CSS3 定义的属性和选择器
4．jQuery 是兼容浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
5．能将 JavaScript (行为)脚本与 HTML (结构)源代码完全分离，便于后期编辑和维护。
6．插件丰富，除了 jQuery自身带有的一些特效外，可以通过插件实现更多功能
3、网站
官方地址为：http://jquery.com/
下载地址：http://www.jq22.com/jquery-info122 该网站内有很多插件的链接
最新版在线手册手册：http://jquery.cuishifeng.cn/
中文社区：http://jquery.org.cn/
4、发展史及版本介绍
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建，目前最新版本为 3.3.1。
jquery版本：
1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.x 1.2.6 1.3.x 1.4.x 1.5.x 1.6.x 1.7.x
1.8.x 1.9.x 1.10.x 1.11.x 2.x 3.x
2.0版本以后，对IE6/7/8支持不好。但是市面上这些浏览器基本被淘汰了，所以无差别。
jQuery有一个非常大的缺点，就是不向下兼容。
每个jQuery版本都有开发版和产品版，开发版就是带空白和注释的，便于学习；产品版是去掉空白和注释的版本，体积更下，适用于线上。
5、其他类似框架
Prototype：与面向对象的原型继承关键字prototype一致，该框架的特点是功能扩展比较容易。
YUI：该框架可以实现各种页面布局效果。
Extjs : 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
该框架可以实现效果之一：页面不同区域进行拖拽效果。由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
Mootools框架，一款短小精悍的框架，完全采用面向对象的思想进行封装，采用很多流行的技术，核心代码只有8kb，是一款非常好用的JS框架。
jQuery：使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。jQuery官方也提供了很多比较有效或有针对性的插件比如有jQueryUI、jQuery Mobile插件等。
四、快速入门
页面加载完毕，设置页面中的li标签的样式，要求字体颜色为red，背景颜色为#ccffcc。
<script src="jquery-3.3.1.js"></script>
<script>
//页面加载完毕，设置页面中的li标签的样式，要求字体颜色为red，背景颜色为#ccffcc。
/** 用之前学习过的DOM方法 **/
/*window.onload = function () {
var lis = document.getElementsByTagName('li'); //返回数组
for(var i=0; i<lis.length; i++){
lis[i].style.color = 'red';
lis[i].style.backgroundColor = '#ccffcc';
}
};*/
/** 用jQuery **/
$(); //$();是jQuery的一个函数，参数可以是一个dom对象，可以是选择器，也可以是标签。返回jQuery对象
$(document); //返回一个jQuery对象，表示整个文档
$(document).ready(); //ready() 是jQuery封装好的一个事件，表示页面加载完毕会触发的一个事件，它是参数是一个函数，表示事件处理函数
$(document).ready(function(){
//这里写你的代码
console.log($('li')); // $('li'); 返回jquery对象，类数组的对象,当做数组用即可
$('li').css('color', 'red'); //css是jQuery封装的一个方法，填一个参数，表示获取元素的css；填两个参数表示设置元素的css
$('li').css('background-color', '#ccffcc'); //样式名称和css样式名称完全一致，不用去掉下划线和字母变大写
//jQuery可以进行链式操作，对同一元素的设置可以写一行代码，如下：最终代码
$('li').css('color', 'red').css('background-color', '#ccffcc');
});
</script>
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
五、可编辑的表格
1、开发思路
思路：
创建一个表格，当点击td的时候，创建一个input，设置input的样式和td的样式一致，然后将input放到td中。
给input在绑定事件，当前按回车键的时候表示确定修改，当失去焦点的时候，表示取消修改。
用jQuery来完成它。
2、用到的知识点
1、固定格式的jQuery事件
$(选择器).事件方法(处理函数);
$(document).ready(function(){});//比如
2、强大的选择器
$('li'); //选择页面中所有的li
$('li:first-child'); //选择页面中第一个li
3、超强的文档操作方法
$(完整的标签); //表示创建元素，比如$('<input />');
td.append($('<input />')); //或
$('<input />').appendTo(td); //都表示将input放到td中
4、完美的链式操作
5、方便的事件对象
$(document).ready(function(evt){
//这个function是事件处理函数
//evt就是兼容的事件对象
});
3、创建各个文件
4、HTML和css
HTML部分：
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>曹浩</td>
</tr>
<tr>
<td>2</td>
<td>连浩</td>
</tr>
<tr>
<td>3</td>
<td>卫星</td>
</tr>
<tr>
<td>4</td>
<td>曹老板</td>
</tr>
<tr>
<td>5</td>
<td>陈冠希</td>
</tr>
</tbody>
</table>
CSS效果：
*{
padding:0;
margin:0;
border:0 none;
}
table,td,th{
border:solid 1px #041b28;
border-collapse: collapse; /*合并边框*/
}
table{
width:400px;
margin:10px auto;
}
th,td{
width:50%;
padding:3px 0;
}
页面效果：
5、选择td，绑定单击事件
6、单击事件中，设置td的内容
7、链式操作
8、给input添加键盘事件
全部源代码：
//页面加载完毕，执行...代码
$(document).ready(function(){
//alert(123);
//①、选择每个tr下面的最后一个td
//$('tr td:last-child').css('color', 'red');
//②、选择奇数个td，下标从0开始
//$('td:odd').css('color','green');
//③、找所有tr中的第2个td或2的倍数个td
//$('td:nth-child(2)').css('color','green');
//$('td:nth-child(2n)').css('color','green');
//选择好td，然后为其绑定单击事件
$('td:odd').click(function(){
//alert(234);
//将点击的td保存
var td = $(this); //如同dom中的this
//判断td中是否有一个input
if(td.children().length >= 1){
return false;
}
//保存td中原来的值
var text = td.text(); //不填参数表示获取td里面的文本值，填参数表示设置td里面的文本值
//清空td
td.html('');
//创建input
//设置input的value值
//设置input的样式
//把input放到td中 //td.append(input);
//让input获取焦点
var input = $('<input />');
input
.val(text)
.css('width', td.css('width'))
.css('height', td.css('height'))
.css('font-size', td.css('font-size'))
.css('outline', '0')
.appendTo(td)
.focus(); //获取焦点这行要放到最后
//给input绑定键盘事件
input.keyup(function(evt){
//alert(1233);
var keyCode = evt.which; //用which属性来获取keyCode
if(keyCode == 13){
//表示确定修改，把input框中的值放到td中
//$(this).val(); //表示获取input的value值
td.text($(this).val());
}
if(keyCode == 27){
//按ESC键，表示取消修改。把之前td中的值再次放回到td中
td.text(text);
}
});
});
});
9、案例总结
1、选择器
选择器一定要写到$()函数中，写法基本上和css选择器一样。
$('li'); //元素选择器，表示选择所有的li
$('td:odd'); //表示选择奇数个td，下标从0开始
$('tr td:last-child'); //表示找每个tr中的最后一个td
$('td:nth-child(2n)'); //表示找偶数个td
$(document); //把之前的dom对象，用$()函数处理后，形参jQuery对象
$(this); //把之前的dom对象，用$()函数处理后，形参jQuery对象
2、事件绑定方法
$('选择器').事件方法(function(evt){
//这就是jQuery中事件的绑定方式
});
3、css、html、text、val方法
css()：一个参数，表示获取元素的css；两个参数表示设置元素的css。
html()：0个参数，表示获取元素的html内容；1个参数表示设置元素的html内容。
text()：0个参数，表示获取元素的文本内容；1个参数表示设置元素的文本内容。
val()：0个参数，表示获取元素的value值；1个参数表示设置元素的value值，专门用于表单项。
4、筛选
筛选方法，用于对已经选择的元素的进一步筛选或过滤。
children()：筛选方法，用于查询元素的子元素。参数可以指定要查找什么样的子元素。
5、which属性
jQuery中的事件对象中的which属性，用于获取键盘的keyCode值。
四、纵向导航菜单
1、开发思路
点击页面中的顶级菜单，会下拉它的子菜单。
首先要找到顶级菜单，然后绑定单击事件，点击顶级菜单的时候，让其对应的子菜单慢慢滑动下来；再次点击顶级菜单，其对应的子菜单慢慢滑动隐藏
2、用到的知识点
1、全新的事件
toggle
单击的时候被会触发，触发之后它会自动检查选择的元素是什么状态，如果是显示状态则隐藏，如果是隐藏状态则显示。也就是它会自动判断元素的显示和隐藏。
toggle()应该算一个效果，只不过和事件有关系，它必须是单击事件才能够触发。
2、优雅的效果
show()：单纯的显示。参数是一个毫秒单位的时间，表示经过多少毫秒的变化让元素显示出来。
hide()：单纯的隐藏。参数是一个毫秒单位的时间，表示经过多少毫秒的变化让元素隐藏起来。
toggle()：是show和hide方法的一个综合体，可以自动根据元素原来的状态切换显示和隐藏。
slideDown()：向下滑动，显示。参数是一个毫秒单位的时间，表示经过多少毫秒的变化让元素滑动出来。
slideUp()：向上滑动，隐藏。参数是一个毫秒单位的时间，表示经过多少毫秒的变化让元素滑动隐藏。
slideToggle()：slide效果的一个综合体。可以根据元素的原来的状态来自动切换显示和隐藏。
3、创建目录结构
4、HTML和css
<ul>
<li>
<a href="#">顶级菜单一</a>
<ul>
<li>子菜单11</li>
<li>子菜单12</li>
<li>子菜单13</li>
</ul>
</li>
<li>
<a href="#">顶级菜单二</a>
<ul>
<li>子菜单21</li>
<li>子菜单22</li>
<li>子菜单23</li>
</ul>
</li>
<li>
<a href="#">顶级菜单三</a>
<ul>
<li>子菜单31</li>
<li>子菜单32</li>
<li>子菜单33</li>
</ul>
</li>
</ul>
*{
margin:0;
padding:0;
border:0 none;
}
ul,li{
list-style: none;
}
/*顶级菜单*/
a{
display: block;
width:120px;
height:30px;
line-height: 30px;
text-decoration: none;
background-color: black;
color:white;
}
/*子菜单*/
ul ul>li{
width:120px;
height:30px;
line-height: 30px;
background-color: darkslategrey;
color:yellow;
}
/*默认子菜单隐藏*/
ul ul{
display: none;
}
5、JS实现效果
//页面载入事件
$(document).ready(function(){
//alert(123);
//找到顶级菜单，绑定单击事件
$('a').click(function () {
//alert(46);
//实现方式一：
/*if($(this).next().css('display') == 'none'){
$(this).next('ul').show(2000);
}else{
$(this).next('ul').hide(2000);
}*/
//实现方式二：
//$(this).next().toggle(2000);
//实现方式三：
/*if($(this).next().css('display') == 'none'){
$(this).next('ul').slideDown(2000);
}else{
$(this).next('ul').slideUp(2000);
}*/
//实现方式四：
$(this).next().slideToggle(800);
});
});
6、案例总结
效果：
show()
hide()
toggle()（注意，要和click事件配合使用）
slideDown()
slideUp()
slideToggle();（注意，要和click事件配合使用）
五、横向导航菜单
1、开发思路
鼠标放到顶级菜单上，其子菜单滑动显示，鼠标移动到子菜单上，子菜单不能消失；
鼠标离开顶级菜的和子菜单之后，子菜单滑动隐藏；
鼠标必须放到顶级菜单上超过300毫秒，才显示子菜单；
2、用到的知识点
1、全新的事件
mouseover：鼠标放到元素及其子元素上，都会触发事件
mouseout：鼠标离开元素及其子元素，都会触发事件
mouseenter：鼠标放到元素上，会触发事件。移动到它的子元素上，不会再次触发事件。
mouseleave：鼠标离开元素，会触发事件。鼠标离开它的子元素，不会再次触发事件。
hover()：参数有两个，两个都是函数，第一个表示鼠标移入执行的函数，第二个表示鼠标离开执行的函数。
2、开阔的思路
3、另类的定时器
定时器还可以优化代码，当然用到的也是定时效果。
文件结构和上一个案例一样，所以赋值一份，然后修改其中的css，让菜单横向显示即可。
4、JS实现基本的效果
5、使用定时器解决BUG
目前的效果，鼠标快速的划来划去，下拉菜单不断显示隐藏。
解决办法是加入定时器，如果真的要显示下拉菜单，需要鼠标悬停300，如果真悬停了300毫秒则显示下拉菜单，如果300毫秒以内，鼠标离开，那么清除定时器，不让显示的代码执行了。
//页面载入事件
$(document).ready(function(){
//找到大的li，绑定鼠标移入事件
//第一版，有BUG，因为使用了mouseover和mouseout事件
$('body>ul>li').mouseover(function(){
//鼠标移入，其子元素中的ul显示
$(this).children('ul').slideDown(500);
});
$('body>ul>li').mouseout(function(){
//鼠标离开，其子元素中的ul显示
$(this).children('ul').slideUp(500);
});
//第二版：使用mouseenter和mouseleave事件
$('body>ul>li').mouseenter(function(){
//鼠标移入，其子元素中的ul显示
$(this).children('ul').slideDown(500);
});
$('body>ul>li').mouseleave(function(){
//鼠标离开，其子元素中的ul显示
$(this).children('ul').slideUp(500);
});
//第三版：使用一个事件---hover
var timer = null;
$('body>ul>li').hover(function(){
var li = $(this);
//鼠标移入，其子元素中的ul显示
timer = setTimeout(function(){
li.children('ul').slideDown(500);
}, 300);
}, function(){
//鼠标离开，其子元素中的ul显示
clearTimeout(timer);
$(this).children('ul').slideUp(500);
});
});
6、mouseover和mouseenter事件对比
mouseover：鼠标放到元素及其子元素上，都会触发事件。
mouseout：鼠标离开元素及其子元素，都会触发事件。
mouseenter：鼠标放到元素上，会触发事件。移动到它的子元素上，不会再次触发事件。
mouseleave：鼠标离开元素，会触发事件。鼠标离开它的子元素，不会再次触发事件。
六、标签页效果
1、开发思路
点击标签之后，让其对应的内容区显示，同时标签会有一个效果的变化；反之，另外的标签显示默认样式，另外的内容区要隐藏。
2、用到的知识点
1、人性化的遍历
2、超强的属性操作
3、便捷的筛选
4、想象不到的链式操作
3、HTML和css
4、JS实现功能
$(document).ready(function(){
//选择li，绑定单击事件，单击的时候，为其添加tab类，移除其兄弟的tab类
//但是无法找到它对应的div
/*$('li').click(function(){
$(this).addClass('tab');
$(this).siblings().removeClass('tab');
});*/
//jQuery中提供了一个遍历的方法，each
// each用法一：
/*$('li').each(function(i, val){
//i 表示li的下标
//val 每次遍历时的li
console.log(i, val);
});*/
// each用法二：
$.each($('li'), function (i, val) {
//i 表示li的下标
//val 每次遍历时的li
//console.log(i, val);
//遍历的时候，为每个li单独绑定一个单击事件，1
/*$('li').eq(i).click(function () {
console.log(i);
});*/
//遍历的时候，为每个li单独绑定一个单击事件,2
$(val).click(function(){
//console.log(i);
$('li').eq(i).addClass('tab').siblings().removeClass('tab');
$('div').eq(i).addClass('show').siblings('div').removeClass('show');
});
});
/*for(){
lis[i].a = i;
lis[i].onclick = function () {
}
}*/
});
