1jQuery介绍
1.1 JavaScript库
JavaScript库，即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就在这个库中封装了很多预先定义好的函数在里面。比如动画animate、hide、show，比如获取元素等。
常见的JavaScript库：jQuery、prototype、YUI、Dojo、移动端的zepto等都是对原生JavaScript的封装，内部都是用JavaScript实现的，主要学习jQuery。
1.2jQuery的概念
是一个快速、简洁的JavaScript库，提倡写更少的代码，做更多的事情。
j是JavaScript，Query查询，就是查询JavaScript，把js的DOM操作做了封装，可以快速查询使用里面的功能。
jQuery封装了JavaScript常用功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
学习本质：学习调用这些函数（方法）
jQuery出现的目的是加快前段人员的开发速度，我们可以非常方便的调用和使用他，从而提高开发效率。
1.3jQuery的优点
1、轻量级。核心文件才几十Kb，不会影响页面加载速度
2、跨浏览器兼容，基本兼容了现在主流的浏览器
3、链式编程，隐式迭代
4、对事件、样式、动画支持，大大简化了DOM操作。
5、之处插件扩展开发，有丰富的第三方插件
6、免费、开源
2jQuery的基本使用
2.1jQuery的下载
jQuery的官网地址：https://jquery.com/
各个版本下载：https://code.jquery.com/
版本介绍
1X：兼容IE678等低版本浏览器，官网不再更新
2X：不兼容IE678等低版本浏览器，官网不再更新
3X：不兼容IE678等低版本浏览器，是官方主要更新维护的版本。
2.2体验jQuery
引入jQuery文件
在文档最末尾插入script标签，书写体验代码
$(‘div’).hide()可以隐藏盒子
2.3jQuery的入口函数
第一种简单易用
$(function(){
...
});
第二种：繁琐，但也可以实现
$(document).ready(function(){
...
});
总结：
1、等DOM结构渲染完毕即可执行内部代码，不必等所有外部资源加载完成，jQuery帮我们完成了封装
2、相当于原生js中的DOMContentLoaded
3、不同于原生JS中的Load事件时等页面文档，外部的Js文件，CSS文件，图片加载完毕才执行内部代码。
4、更推荐第一种。
2.4jQuery中的顶级对象$
1、$是jQuery的别称，在代码中可以使用jQuery代替，一般为了方便，通常都直接使用 $
2、 $ 是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用 $ 包装成jQuery对象，就可以调用jQuery的方法。
2.5jQuery对象和DOM对象
1、用原生js获取来的对象就是DOM对象
2、用jQuery方法获取的元素就是jQuery对象。
3、jQuery对象本质是：利用 $ 对DOM对象包装后产生的对象（伪数组形式存储）。
2.6jQuery对象和DOM对象转换
<div></div>
<span></span>
<script>
//dom对象-->jQuery对象
let div = document.querySelector('div')
$(div).hide()
//jQuery对象-->dom对象
//第一种方式
$('div')[0].style.display = 'none'
console.log($('div')[0])
// 第二种方式
$('div').get(0).style.display = 'none'
</script>
3jQuery选择器
jQuery给元素做了封装，是获取元素统一标准：
3.1基础选择器
3.2层级选择器
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function(){
console.log($('.nav'))
console.log($('body > li'))
console.log($('body li'))
})
</script>
3.3筛选选择器
另：jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。
3.4知识铺垫
jQuery设置样式
$('div').css('属性', '值')
jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
-隐式迭代
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
链式编程
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
4jQuery样式操作
jQuery常用两种样式操作：CSS（）和设置类样式方法
4.1方法一：操作CSS
// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"})
4.2方法二：设置类样式方法
作用等同与以前的classList，可以操作类样式。注意操作类里面的参数不要加点。
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
