1.什么是JQuery？
JQuery:一款伟大的，用原生js封装的，操作“DOM”的类库：它里面疯转了大量的方法（在原先的版本中V1.XXX，这些方法兼容所有浏览器），基于这些方法我们可以快速的进行DOM的操作和项目开发
2.如何学习JQ
- 1.看API文档：jquery.cuishifeng.cn
- 2.看书籍：《锋利的JQuery第二版》
- 3.大量的做案例：案例可以用原生js做一遍，再用jQ做一遍
3.JQ的三大版本
- 1.v1.xxx第一代版本(jquer-1.11.3.min.js)最常用。第一代版本特点：大而全，方法是兼容所有浏览器的包括（IE6）主要应用于需要考虑兼容的pc端项目中
- 2.第二代版本特点：主要是为移动端的开发准备的，不在兼容低版本的浏览器(例如：IE8以及以下)配合出现的还有JQuery mobile 等UI库，但是第二代版本在移动端的处理不如Zepto.js
- 3.第三代版本特点：也不再兼容IE低版本浏览器了，它从性能等方面都要比之前的强，但是此时正好是angular、vue、react这种框架崛起的时代，大家已经不再基于操作DOM的思想开发了，jq也就慢慢退出舞台了
4.插件 组件 框架
- 1.插件/UI组件:针对于某一业务需求或者功能的具体封装。例如选项卡插件、轮播图插件、日历插件、bootstrap这种UI组件等
- 2.框架（vue/react）:一个庞大宏观的代码管理方案，具备自己的思想，我们用框架需要严格按照规定的思想（MVVM/MVC）去构建项目，框架中也会提供更多公共方法，也有配套的UI组件和插件
- 3.辅助工具：git/webpack/postman...
5.JQ的API使用
- 1.获取DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<!-- 1.获取标签或者id -->
<div>我是JQ</div>
<div id='app'>div元素我的id是app</div>
<div class='box'></div>
<script src="jquery-3.3.1.js"></script>
<script>
/* 1.获取DOM元素
*/
//原生的方式获取
let div1=document.querySelector('div');
console.log(div1);
//JQ的方式获取
let $div2=$('div');
console.log('$div');//=>$div
let $app=$('#app');
console.log('$app');//=>$app
</script>
</body>
</html>
- 2.JQ获取DOM元素 $('css选择器',上下文) 获取的结果 都是一个集合 一组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<!-- 2.获取box -->
<ul class="ul_box">
<li class="box">我是第一个li</li>
<li class="box">我是第二个li</li>
<li class="box">我是第三个li</li>
<li class="box">我是第四个li</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
//=>页面中所有的.box元素
var $box=$('.box');
console.log($box);
//=>只获取ul下面的.box
var $box2=$('ul .box');
console.log($box2);
</script>
</body>
</html>
- 3.获取所有后代和子代 find children
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<!-- 3. -->
<div id='app'>
<span>我是span标签</span>
<a href="http://baidu.com">我是百度</a>
<ul>
<li><span>我是li里面的span</span></li>
<li><a href="http://baidu.com">我是li里面的百度</a></li>
</ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
//获取app下面所有的a
var $a=$('#app a');
console.log($a);
//获取app后代中的所有a
var $a=$('#app').find('a');
console.log($a);
//获取app子代标签a
var $a1=$("#app>a");
console.log($a1);
//获取子代中的a标签
var $a2=$('#app').children('a');
console.log($a2);
</script>
</body>
</html>
- 4.筛选出有指定属性(line)的哪个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
//从这些获取到的li中筛选出 有line属性的那个元素
var $lis=$('ul li');
var $li=$lis.filter('[line]');
console.log($li);
</script>
</body>
</html>
- 5.prev 获取某个元素(line)的上一个元素标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
var $lis=$('ul li');
var $li=$lis.filter('[line]');
var $li1=$li.prev();
console.log($li1);
</script>
</body>
</html>
- 6.prevAll 获取某个元素(line)的上面所有的元素标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
var $lis=$('ul li');
var $li=$lis.filter('[line]');
var $li1=$li.prevAll();
console.log($li1);
</script>
</body>
</html>
- 7.next 获取某个元素(line)的上一个元素标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
var $lis=$('ul li');
var $li=$lis.filter('[line]');
var $li1=$li.next();
console.log($li1);
</script>
</body>
</html>
- 8.nextAll 获取某个元素(line)的上一个元素标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
var $lis=$('ul li');
var $li=$lis.filter('[line]');
var $li1=$li.nextAll();
console.log($li1);
</script>
</body>
</html>
- 9.siblings 获取所有的兄弟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
var $lis=$('ul li');
var $li=$lis.filter('[line]');
var $li1=$li.siblings();
console.log($li1);
</script>
</body>
</html>
- 10.parent获取所有的兄弟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
var $lis=$('ul li');
var $li=$lis.filter('[line]');
var $li1=$li.parent();
console.log($li1);
</script>
</body>
</html>
- 11.index获取当前元素的索引
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
<style>
[line]{
border:2px solid pink;
}
</style>
</head>
<body>
<h2 class="box">我是h2</h2>
<ul class="ul_box">
<li class="box"></li>
<li class="box"></li>
<li class="box" line='0' ></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
var $lis=$('ul li');
var $li=$lis.filter('[line]');
var $li1=$li.index();
console.log($li1);
</script>
</body>
</html>
- 12.通过$获取的元素都是JQ对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<div>我是JQ</div>
<div id='app'>div元素我的id是app</div>
<div class='box'></div>
<script src="jquery-3.3.1.js"></script>
<script>
//JQ对象转换成原生对象 通过索引的方式 $app[0]
$app=$('#app');
$app[0].style.color='red';
console.log(app);
//原生对象转换成JQ对象 $(原生DOM对象) $( $app[0]);
$app=$('#app');
$app[0].style.color='red';//转成原生
console.log($($app[0]));//=>在转成JQ
</script>
</body>
</html>
- 13.往标签插入内容元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<div>我是JQ</div>
<div id='app'>div元素我的id是app</div>
<div class='box'></div>
<script src="jquery-3.3.1.js"></script>
<script>
//原生的写法
// var str=`<h2>我要插入</h2>`;
// $app=$('#app');
// $app[0].innerHTML=str;
//JQ的写法
var str=`<h2>我要插入</h2>`;
$app=$('#app');
$app.html(str);
//append 添加一行插入
$app.append(str);
</script>
</body>
</html>
- 14.主要用于表单元素:$inp.val()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<input type="text">
<script src="jquery-3.3.1.js"></script>
<script>
//=>$inp.val() 不传参数 就是获取input对应的内容
$inp=$('input');//=>获取input框
console.log($inp);
console.log($inp.val());
//=> $inp.val() 传参数 就是设置input框的内容
$inp=$('input');//=>获取input框
console.log($inp.val('我要给input框传参数'));
</script>
</body>
</html>
- 15.操作行内属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<input type="text">
<script src="jquery-3.3.1.js"></script>
<script>
//=>$().attr 一个参数的时候，是获取对应数姓名的属性值
$inp=$('input');
console.log($inp.attr("type"))
//=>两个参数的时候,是设置对应属性
$inp=$('input');
console.log($inp.attr("class",'我是设置的'))
//=>如果需要设置多个属性的时候，我们可传递一个对象
$inp=$('input');
console.log($inp.attr({
class:'我是设置的对象里面的class',
id:"我是设置的对象里面的id",
}))
//=>removeAttr移除对应的行内属性
$inp=$('input');
console.log($inp.attr({
class:'我是设置的对象里面的class',
id:"我是设置的对象里面的id",
}))
$inp.removeAttr('id');
</script>
</body>
</html>
- 16.JQ操作css 有对应的css方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<input type="text" placeholder="这里输入默认内容">
<script src="jquery-3.3.1.js"></script>
<script>
$inp=$('input');
// 一个参数的时候，是用来获取属性名对应的属性值
$inp.css('type');
//两个参数是设置
$inp.css('width',200);
//多个传递一个对象
$inp.css({
height:40,
fontSize:16,
paddingLeft:10
});
</script>
</body>
</html>
- 17.JQ操作类名的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<input type="text" placeholder="这里输入默认内容">
<script src="jquery-3.3.1.js"></script>
<script>
$inp=$('input');
//=>判断对应的元素有没有对应的类名，有就返回true，没有就返回false
console.log($inp.hasClass('我是设置的对象里面的class'));
//添加类名的
$inp.addClass('box box2 box2');
//移除对应的类名
$inp.removeClass('box2');
//如果 元素有这个类名，就吧这个类名删除，如果没有，就给添加上
$inp.toggleClass('box3');
</script>
</body>
</html>
- 18.hide：让元素隐藏，在行内属性上加了display：none
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<button>我是show</button>
<h1>我是H1.测试show</h1>
<script src='jquery-3.3.1.js'></script>
<script>
/* 1.hide：让元素隐藏，在行内属性上加了display：none
*/
$('button').on('click',function(){
$('h1').hide();
})
</script>
</body>
</html>
- 19.show：让元素显示，去掉行内属性的display：none
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<button>我是show</button>
<h1>我是H1.测试show</h1>
<script src='jquery-3.3.1.js'></script>
<script>
$('button').on('click',function(){
// $('h1').hide();
$('h1').show();
})
</script>
</body>
</html>
- 20.toggle: 如果元素是显示状态，让元素隐藏；如果元素是隐藏状态，让元素显示
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<button>我是show</button>
<h1>我是H1.测试show</h1>
<script src='jquery-3.3.1.js'></script>
<script>
$('button').on('click',function(){
$('h1').toggle();
})
</script>
</body>
</html>
- 21.$.fn.extend:扩展的属性会放到jq的原型上
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<button>我是show</button>
<h1>我是H1.测试show</h1>
<script src='jquery-3.3.1.js'></script>
<script>
//$.fn.extend:扩展的属性会放到jq的原型上
//控制台输出：$.fn.func()
$.fn.extend({
func(){
console.log('func');
}
});
</script>
</body>
</html>
- 22..extend 放在自己身上
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<button>我是show</button>
<h1>我是H1.测试show</h1>
<script src='jquery-3.3.1.js'></script>
<script>
//控制台输出：$.fun()
$.extend({
fun(){
console.log('fun');
}
});
$('h1').func();
$.fun();
</script>
</body>
</html>
6.JQ版开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关灯</title>
<style>
body{
background:#fff;
color:#333;
}
.body_box{
background:#333;
color:#fff;
}
</style>
</head>
<body class="body_box">
<button>按钮</button>
<script src="jquery-3.3.1.js"></script>
<script>
/* $().on(事件类型,回调函数)：绑定事件
* $().off(事件类型,回调函数)：移除
*/
$('button').on('click',function(){
$('body').toggleClass('body_box');
});
</script>
</body>
</html>
7.Jq版ajax请求方式
//请求数据
[{
"id": 1,
"pic": "https://zhouxiaotian.github.io/flowapi/images/1.jpg",
"width": 300,
"height": 534,
"title": "泰勒斯威夫特于1989年12月13日出生，童年在一个11英亩的圣诞树农场度过。于是，乡村音乐影响了她的童年。懂的人都明白，美国的乡村音乐欢快而直爽，悠然中带着强烈的节奏感",
"link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"
}, {
"id": 2,
"pic": "https://zhouxiaotian.github.io/flowapi/images/2.jpg",
"width": 300,
"height": 300,
"title": "泰勒斯威夫特于1989年12月13日出生，童年在一个11英亩的圣诞树农场度过。于是，乡村音乐影响了她的童年。懂的人都明白，美国的乡村音乐欢快而直爽，悠然中带着强烈的节奏感",
"link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"
}, {
"id": 3,
"pic": "https://zhouxiaotian.github.io/flowapi/images/11.jpg",
"width": 300,
"height": 408,
"title": "泰勒斯威夫特于1989年12月13日出生，童年在一个11英亩的圣诞树农场度过。于是，乡村音乐影响了她的童年。懂的人都明白，美国的乡村音乐欢快而直爽，悠然中带着强烈的节奏感",
"link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"
}]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求</title>
</head>
<body>
</body>
</html>
<script src="jquery-3.3.1.js"></script>
<script>
/* 1.ajax的请求方式 */
$.ajax({
// j接口地址，路径（地址）
url:'./json/data.json',
//请求方式
method:'get',
//请求成功的回调函数
success(data){
console.log(data);//=>f12控制台查看数据的数组
}
});
//2.ajax请求的简写
$.get('./json/data.json',function(data){
console.log(data);//=>f12控制台查看数据的数组
});
</script>
8.案例（隐藏显示,extend扩展 和extend原型上扩展）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求</title>
</head>
<body>
<button>按钮</button>
<h1>我是第一个h1</h1>
<h1>我是第二个h1</h1>
<h1>我是第三个h1</h1>
<h1>我是第四个h1</h1>
</body>
</html>
<script src="jquery-3.3.1.js"></script>
<script>
//1.显示或者隐藏
$('button').on('click',function(){
// $('h1').hide(); // 让标签隐藏
// $('h1').show(); // 让标签显示
$('h1').toggle();// 若元素是再显示状态 就让元素隐藏； 若是隐藏状态就让元素显示
});
// 2.extend 我们称为 JQ 扩展（JQ插件）
// fn.extend扩展的属性 会放到JQ的原型上
$.fn.extend({
prototype(){
console.log('prototype')
}
});
$('h1').prototype()；//=>f12控制台显示prototype
// 3.直接通过extend 扩展的属性 会放到JQ自己身上；
$.extend({
My(){
console.log('My')
}
});
$.My();//=>f12控制台显示My
</script>
9.jq版选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<!-- IMPORT CSS -->
<link rel="stylesheet" href="css/reset.min.css">
<style>
.tabBox {
margin: 20px auto;
width: 500px;
}
.tabBox .tab {
position: relative;
top: 1px;
}
.tabBox .tab li {
float: left;
margin-right: 10px;
padding: 0 10px;
height: 35px;
line-height: 35px;
font-size: 14px;
border: 1px solid #AAA;
background: #f6f7fb;
cursor: pointer;
}
.tabBox .tab li.active {
background: #FFF;
border-bottom-color: #FFF;
}
.tabBox div {
display: none;
padding: 10px;
height: 100px;
border: 1px solid #AAA;
background: #FFF;
}
.tabBox div.active {
display: block;
}
</style>
</head>
<body>
<section class="tabBox" id="tabBox">
<ul class="tab clearfix">
<li class="active">编程</li>
<li>读书</li>
<li>运动</li>
</ul>
<div class="active">编程可以使我“赚取高薪”</div>
<div>读书可以使我“修身养性”</div>
<div>运动可以使我“身体健康”</div>
</section>
<section class="tabBox tabBox2" id="tabBox">
<ul class="tab clearfix">
<li class="active">编程</li>
<li>读书</li>
<li>运动</li>
</ul>
<div class="active">编程可以使我“赚取高薪”</div>
<div>读书可以使我“修身养性”</div>
<div>运动可以使我“身体健康”</div>
</section>
<section class="tabBox tabBox3" id="tabBox">
<ul class="tab clearfix">
<li class="active">编程</li>
<li>读书</li>
<li>运动</li>
</ul>
<div class="active">编程可以使我“赚取高薪”</div>
<div>读书可以使我“修身养性”</div>
<div>运动可以使我“身体健康”</div>
</section>
</body>
</html>
<script src="jquery-3.3.1.js"></script>
<script>
//1.方案一
$('li').on('click',function(){
//1.给每个li绑定了点击事件
// console.log(this);//this是原生的
$(this).addClass('active').siblings().removeClass('active');
let n=$(this).index();
// console.log(n);
// console.log($('div')[n]);//点击li对应的那个div
//$('div')[n]当前点击的哪个li对应的div(原生DOM) 给他添加active类名，让他的兄弟们移除active类名
$($('div')[n]).addClass('active').siblings().removeClass('active');
})
//2.方案二：
$('li').on('click',function(){
//1.给每个li绑定了点击事件
// console.log(this);//this是原生的
$(this).addClass('active').siblings().removeClass('active');
let n=$(this).index();
// console.log(n);
// console.log($('div')[n]);//点击li对应的那个div
//$('div')[n]当前点击的哪个li对应的div(原生DOM) 给他添加active类名，让他的兄弟们移除active类名
$($('div')[n]).addClass('active').siblings().removeClass('active');
})
// 3.选项卡插件封装
$.fn.extend({
tab:function(){
console.log(this)
//因为事件对应的回调函数中的this不是当前这个函数中this，所以用一个变量去存储this
let _this=this;
$("li", _this).on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
let curIndex=$(this).index();
$("div",_this).eq(curIndex).addClass("active").siblings().removeClass("active");
})
}
})
$("#tabBox").tab();
$("#tabBox2").tab();
$("#tabBox3").tab();
</script>
