01-jquery的介绍
JS在做项目或者是实现功能的时候，用JS去操作DOM元素非常复杂，代码量大，重复性代码也多
多个元素使用for循环遍历也是非常麻烦的，对于JS使用来说加大了难度
jQuery框架是用来查询JS的，write less do more！
特点
1.容量小，轻量级框加，目前只有30KB
2.支持CSS3的选择器
3.兼容各种浏览器
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
使用jQuery需要改变JS写法，原理还是用的JS，但是语法和写法是完全不同的
02-jquery文件引入和加载的区别
jQuery和JS的区别
- Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
- jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
- jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法
DOM文档加载的步骤
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。
- 加载图片等外部文件。
- 页面加载完毕
全局引用
<script type="text/javascript">
// 如果不写window.onload(),代码的执行顺序是从上到下
window.onload = function () {
var oDiv = document.getElementById('box');
console.log(oDiv);
};
</script>
</head>
<body>
<!--jQuay的版本有压缩版本和非压缩版本的-->
<!--非压缩版本的一般用于开发过程，非压缩版本的是有各种方法和函数的说明供程序员调用-->
<!--压缩版本的是文件名带min的，实际就是压缩所有的文件的代码，-->
<!--这些function的变量都是变成了字母，这样的方式叫重构化，用在生产环境中-->
<div id="box"></div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// jQuary是js的一个库，既然是库文件，那么就会抛出来一个构造函数或者对象
// 全局引用了jQuery
// 引用jQuery的时候一定要把文件先引入，再写JS代码
// 书写jQuery的方式 入口函数
// $(document).ready(function () {
// // 等待文档加载完成之后就执行函数
// alert(11);
// });
$(function () {
alert('等价于加载DOM后就直接执行')
})
</script>
03-jquery的基础选择器
jQuery的选择器和css基本类似，书写方式有些不同，但是基本原理类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery基础选择器</title>
</head>
<body>
<ul>
<li id="1">pandaboy0</li>
<li id="2">pandaboy1</li>
<li><a href="https://www.baidu.com">pandaboy2</a></li>
<li class="li4">pandaboy3</li>
<li>pandaboy4</li>
<li>pandaboy5</li>
<li>pandaboy6</li>
</ul>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 回调函数
$(document).ready(function () {
//基本选择器
// 1.id选择器
// console.log($('#1'));
$('#1').css('color','red');
// 2.标签选择器
// $('a').css('color','yellow');
// 设置多个值->字典形式，设置多个值的时候使用key value的形式
$('a').css({'color':'yellow','font-size':'24px'});
// 3.类选择器
$('.li4').css('background','yellow');
// 4.通配符选择器 用的很少，使用不是很频繁
// $('*').css('background','black');
});
</script>
</html>
04-jquery的层级选择器
//:first 获取第一个元素
$('li:first').text('真的吗？')
//:last 获取最后一个元素
$('li:last').html('我是最后一个元素？')
//:odd 匹配所有索引值为奇数的元素，从0开始计数
$('li:odd').css('color','green');
//:even 匹配所有索引值为偶数的元素，从0开始计数
$('li:even').css('color','red')
//:eq(index) 获取给定索引值的元素 从0开始计数
$('li:eq(1)').css('font-size','30px')
//:gt(index)匹配所有大于给定索引值的元素
$('li:gt(1)').css('font-size','40px')
//:lt(index) 匹配所有小于给定索引值的元素
$('li:lt(1)').css('font-size','40px')
//一个给定索引值的元素
console.log($('p:eq(3)').text())
05-jquery的基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>110</li>
</ul>
</body>
<script src=" jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//获取第一个 ：first
//获取最后一个元素：last
//获取奇数的
$('li:odd').css('color','red');
//获取偶数
$('li:even').css('color','yellow');
$('li').css('list-style-type','none');
//选中索引值为0的元素
$('li:eq(0)').css('font-size','25px');
//选中索引值大于1的元素
$('li:gt(1)').css('font-size','30px');
//选中索引值小于1的元素
$('li:lt(1)').css({'display':'block','border':'1px solid red'})
})
</script>
</html>
06-jquery的属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<p class="p1">我是一个段落</p>
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//标签[属性名]，查找所有含有id的该标签的元素
$('li[id]').css('color','red');
//标签[class = className]
$('li[class = what]').css({'display':'block','border':'1px red solid'});
$('li[class != what]').css('font-size','26px');
//按标签的名称开头
$('input[name ^= u]').css('background','grey');
$('input[name $= 22]').css('background','red');
$('button[class ^= btn]').css('background','red');
})
</script>
</html>
07-jquery的筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选</title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
//获取第n个元素，数值从0开始
$('span').eq(1).css('color','red');
//获取第一个元素：first last
//.语法就是get方法和set方法
$('span').first().css('color','yellow');
$('span').last().css('color','grey');
$('span').parent('.p1').css({'width':'300px','height':'150px'});
//查找后代元素
$('div').find('button').css('background','red');
</script>
</html>
08-jquery对象和DOM对象的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery和DOM对象的转换</title>
<style type="text/css">
#box{
100px;
height: 100px;
color: #FFFFFF;
text-align: center;
}
</style>
</head>
<body>
<!--以后的工作中一定会用jQuery框架，对于前端，很容易用JS去操作-->
<!--所以要考虑如何更好的兼容我们的DOM元素和jQuery-->
<div id="box">123</div>
<button>隐藏</button>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// DOM对象转换为jQuery对象
var box = document.getElementById('box');
console.log($(box));
// jQuery对象转换为DOM对象
// 第一种方式
console.log($('button')[0]);
// 第二种方式
// $('button').get(0)
var isShow = true;
$('button').get(0).onclick = function () {
if(isShow){
$('#box').hide();
$(this).text('显示');
isShow = false;
}else{
$('#box').show();
$(this).text('隐藏');
isShow = true;
}
}
</script>
</html>
09-jquery效果-显示和隐藏
show
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
callback:在动画完成时执行的函数，每个元素执行一次
hide
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show（）和hide（）方法，来动态控制元素的显示隐藏
toggle
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideDown
概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
用法和参数跟上面类似
slideUp
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
用法和参数跟上面类似
slideToggle
概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
跟toggle用法类似
fadeIn
概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
fadeOut
概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo
概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeToggle
概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法
animate
概念：用于创建自定义动画的函数
语法：animate(params,[speed],[fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
stop
概念：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
delay
概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
600px;
height: 600px;
margin: 0 auto;
font-size: 60px;
text-align: center;
}
#btn{
display: block;
60px;
height: 60px;
margin: 0 auto;
color: #FFFFFF;
/*margin-left: 300px;*/
}
</style>
</head>
<body>
<div id="box">一个div</div>
<button id="btn">点我</button>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('#btn').get(0).onclick = function(){
$('#box').toggle(1000);
}
</script>
</html>
10-jquery的效果-slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide</title>
<style type="text/css">
#box{
300px;
height: 300px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="box">life is short</div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$('#box').get(0).onclick = function () {
// $('#box').slideUp(3000);
$('#box').fadeOut(1000);
}
</script>
</html>
11-jquery的效果-fade
淡入和淡出效果
12-jquery的效果-animate
13-右下角弹出小广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小广告</title>
</head>
<body>
<div id="box" style=" 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none">
<img src="../img/safe-1.jpg" style=" 100%;height: 100%"/>
</div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
//队列式的调用，排队做事
$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
$(this).fadeOut(1000);
});
})
</script>
</html>
14-jquery的属性操作-attr和prop
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
15-jquery的属性操作-class和值操作
attr
概念：设置属性值或者 返回被选元素的属性值
//获取值：attr()设置一个属性值的时候 只是获取值
var id = $('div').attr('id')
console.log(id)
var cla = $('div').attr('class')
console.log(cla)
//设置值
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})
removeAttr
从每一个匹配的元素中删除一个属性
prop
prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。
removeProp
用来删除由.prop()方法设置的属性集
addClass（添加多个类名）
为每个匹配的元素添加指定的类名。
$('div').addClass("box"):添加一个类名
$('div').addClass("box box2"):添加多个类名
removeClass
从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')移除指定的类
$('div').removeClass()移除全部的类
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
toggleClass
如果存在（不存在）就删除（添加）一个类。
语法：toggleClass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
html
获取值：
html() 是获取选中标签元素中所有的内容
设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('ul').html('<a href="#">百度一下</a>')
//可以使用函数来设置所有匹配元素的内容
$('ul').html(function(){
return '哈哈哈'
})
text
获取值：
text() 获取匹配元素包含的文本内容
设置值：
设置该所有的文本内容
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val
获取值：
val()用于表单控件中获取值，比如input textarea select等等
设置值：
$('input').val('设置了表单控件中的值')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<style type="text/css">
span.active{
font-size: 30px;
}
</style>
</head>
<body>
<div id="box">
<p>路飞学城</p>
</div>
<button>获取</button>
<ul>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
</ul>
<span class = 'span1'>飞吧！！！！</span>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
// attr()方法操作HTML属性
// attr()如果有有一个参数，表示获取值
$(function () {
$('button').click(function () {
$('#box p').text($('#box').attr('id'));
})
});
// attr设置两个值，那么久表示设置两个属性，设置多个值的话就设置成key value的形式
$('#box').attr('class', 'foo');
$('#box').removeAttr('class');
//获取的是第一个元素的class值
var i = $('li').prop('class');
// 设置值
$('li').first().prop('name','pop');
console.log( $('li').first());
// addClass() removeClss()
$('span').addClass('span2 span 3');
$('span').removeClass('span1');
var isBig = true;
$('span').click(function () {
if (isBig){
$(this).addClass('active');
isBig = false;
}else{
$(this).removeClass('active');
isBig = true;
}
//值属性的操作
})
</script>
</html>
16-操作input中的value值
17-jquery文档操作-插入节点
18-jquery文档操作-复制,替换,删除
19-jquery的位置属性
20-仿淘宝导航栏案例
21-jquery的筛选方法
22-选项卡嵌套
23-小米官网部分案例
24-焦点式轮播图
25-动态实现轮播图
26-事件流
27-jquery的事件对象和事件冒泡
28-jquery事件的绑定和移除
29-自定义事件和事件代理
30-jquery的鼠标事件一
31-jquery的鼠标事件二
32-jquery的表单事件
33-jquery的ajax技术
34-Bootstrap介绍和引入
35-响应式原理
36-Bootstrap的栅格系统介绍
37-Bootstrap的栅格系统使用
38-Bootstrap的css全局样式一
39-Bootstrap的css全局样式二
40-bootstrap组件使用一
41-bootstrap组件使用二
42-bootstrap插件介绍