+ [2. 多库共存](#2__314)
+ [3. jquery插件](#3_jquery_317)
一、jQuery的概述
JS库
常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto
二、jQuery的基本使用
jQuery的下载：jquery.com/
引入jQuery代码
jQuery的入口函数
<script>
//jquery的入口函数 等待dom结构渲染完毕即可执行内部代码 不必等到所有外部资源加载完成
//相当于原生js中的DOMContentLoaded 而不是load（等待页面文档、外部js、css、图片加载完）
//第一种
$(document).ready(function () {
$('div').hide();
})
//第二种（推荐）
$(function () {
$('div').hide();
})
</script>
jQuery顶级对象
包装成jQuery对象，就可以调用jQuery的方法
jQuery对象和DOM对象
- dom对象：使用原生js获取
- jQuery对象：使用jQuery方式获取，本质：通过$把dom对象进行了包装，以伪数组的形式存储
var myDiv = document.querySelector('div'); //dom对象
$('div'); //jQuery对象
- dom对象只能使用原生js属性和方法，jQuery对象只能使用jQuery方法
myDiv.style.display = 'none'; //使用原生方法
$('div').hide(); //使用jQuery方法
- jQuery对象和dom对象的相互转换
三、jQuery常用API使用
1. 选择器
$('选择器')
层级选择器 和css的写法一样
隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程
也就是说，把匹配到的所有元素进行循环遍历，执行相应的方法，不用再像原生一样使用for循环
$("div").css("background", "pink"); //可以一次性修改
jQuery的筛选选择器
jQuery筛选方法（重点）
重点掌握：parent()、children()、find()、siblings()、eq()
补充：返回指定祖先元素：$(".four").parents(".one");
//选择ul中的第三个li
//法一：使用选择器的方法
$("ul li:eq(2)").css("color", "pink");
//法二：使用筛选方法（更推荐，方便传入变量）
$("ul li").eq(2).css("color", "blue");
案例：下拉菜单
<script>
$(function () {
// 鼠标经过 对于每个li都隐式绑定了事件
$(".nav>li").mouseover(function () {
//$(this)表示当前元素
//show()显示元素 hide()隐藏元素
$(this).children("ul").show();
})
// 鼠标离开
$(".nav>li").mouseout(function () {
$(this).children("ul").hide();
})
})
</script>
补充知识点：事件切换
$("div").hover(function(){}, function(){}); 前面是mouseover的回调，后面是mouseout的回调，写法更加简单
$("div").hover(function(){}); 只有一个函数时，mouseover和mouseout都是这个回调函数
案例：排他思想的应用
<script>
$(function () {
//隐式迭代 所有的按钮都绑定了点击事件
$("button").click(function () {
//当前元素背景颜色变化
$(this).css("background", "pink");
//其余兄弟去掉背景颜色 （排他） 隐式迭代
$(this).siblings("button").css("background", "");
})
})
</script>
其他知识：
$(this).index();可以获得当前索引
2. 样式操作 css
<script>
$(function () {
console.log($('div').css("width")); //200px
$('div').css("width", "300px"); //或者$('div').css("width", 300);
$('div').css({ //属性名和数字属性值可以不加引号（也可以加）
width: 300,
height: 300,
// 驼峰命名法
backgroundColor: "red"
})
})
</script>
链式编程操作
$(this).addClass("current").siblings().removeClass("current");
$(".tab_con .item").eq(index).show().siblings().hide();
注意：原生js的className会覆盖原来的类名，但是addClass是增加，不会影响原来的类名。
3. 效果
显示隐藏
显示：show([speed], [easing], [fn])
隐藏：hide([speed], [easing], [fn])
切换：toggle([speed], [easing], [fn])
一般情况我们都不加参数，动画效果挺丑的
滑动
下拉滑动：slideDown([speed], [easing], [fn])
上拉滑动：slideUp([speed], [easing], [fn])
切换滑动：slideToggle([speed], [easing], [fn])
一般使用也不加参数
重点：如果添加了很多动画效果可能会出现动画队列的现象，因此我们往往先停止动画stop()，再写动画效果
例如：$(this).children("ul").stop().slideToggle();
淡入淡出
淡入：fadeIn([speed], [easing], [fn])
淡出：fadeOut([speed], [easing], [fn])
淡入淡出切换：fadeToggle([speed], [easing], [fn])
修改透明度：fadeTo(speed, opacity, [easing], [fn]) speed和opacity必须写，opacity取值为0-1之间
自定义动画
语法：animate(params, [speed], [easing], [fn])
params：想要修改的样式属性，以对象的形式传递，必须写，属性名可以不用带引号，复合属性采用驼峰命名法
例子：
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
4. 属性操作
获取元素固有属性：$("div").prop("属性")
修改固有属性：$("div").prop("属性", "属性值")
获取元素自定义属性：$("div").attr("属性")
修改元素自定义属性：$("div").attr("属性", "属性值")
数据缓存data() 数据存放在元素的内存里面，不显示在dom中
设置：$("span").data("uname", "vivian");
获取：$("span").data("uname");
获取自定义属性的方法：
<span index=1 data-index=1></span>
index是自定义属性，data-index是H5自定义属性
可以通过$("span").attr("index")获取index属性
可以通过$("span").attr("data-index")（返回字符串1）、$("span").data("index")（返回数字1）获取data-index属性
其他知识点：
change事件，当表单状态发生变化时触发：$("input").change(function(){});
:checked 获得当前复选框被选中的：$("input:checked").length 输出个数
5. 文本属性值
获取元素内容：$("div").html();
修改元素内容：$("div").html("123");
获取元素文本内容：$("div").text();
修改元素文本内容：$("div").text("123");
获取表单值：$("input").val();
修改表单值：$("input").val("123");
6. 元素操作
隐式迭代是对同一类元素做了同样的操作，如果想给同一类元素做不同操作，就要用到遍历
隐式迭代：$("div").css("color", "red");
（1）遍历
语法一：$("div").each(function(index, domEle){}); 更适合用来遍历元素
$("div").each(function(index, domEle) {
//index 为当前元素的索引
//domEle是当前dom对象，要使用jquery方法 必须先转成jquery对象
$(domEle).css("color", arr[index]); //给不同的div赋值不同的颜色
})
语法二：$.each(object, function(index, element){}); 更适合用来遍历数组、对象
$.each(arr, function(index, element){
})
（2）创建
var li = $("<li>新创建的li</li>");
（3）添加
$("ul").append(li); 在元素的内部添加，放到最后，父子关系
$("ul").prepend(li); 在元素的内部添加，放到最前，父子关系
$("ul").after(li); 在元素的外部添加，放到后面，兄弟关系
$("ul").before(li); 在元素的外部添加，放到前面，兄弟关系
（4）删除
$("ul").remove(); 移除自己
$("ul").empty(); 移除所有子节点
$("ul").html(""); 移除所有子节点
四、jQuery事件
1. jQuery事件注册
$("div").click(function(){});
还有事件：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll
2. jQuery事件处理on/off
可以处理多个事件
$("div").on({
click: function() {
$(this).css("background", "purple");
},
mouseover: function() {
$(this).css("background", "red");
}
})
### 文末
技术是没有终点的，也是学不完的，最重要的是活着、不秃。
零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。
最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。
高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。
技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。
拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
