jQuery目前在企业开发中已经不是首选，也就是会用vue来代替它。
现在学习的理由主要是学习它的思想和在一些老旧项目、外包企业、以及迭代较快的页面特效开发
一、jquery是什么
-
它是一个工具库
jQuery是一个库的名字，里面有很多方法，可以理解为没有学过的对象，只是该对象不是内置，而是一个团队开发出来的，都放在了这个库里面的。
-
它是一个JS文件
该团队将代码写在一个JS文件中，供我们导入到页面中使用（插件）
jQuery也是原生JS写的，好比自己写了很多好用的功能给别人用。
-
它是一个很大的函数
该函数提供了很多现成的功能给我们用。
-
jquery大大的简化了JS的开发难度，不用理会JS的复杂程度，让JS网页开发变得如此简单高效。所以在企业中做网页特效轻而易举
二、能做什么
jQ库封装了很多预定义的对象和实用函数来提高开发效率与降低开发难度，并且能兼容各大浏览器。
口号：写得更少，做得更多！
主要用来做网页特效，比如轮播图、手风琴效果、tab切换页等。
三、学些什么
学它的API（方法），相对于是学jQ这个大对象下的方法和属性。
jq不难学，相反大大的降低了简化了JS的开发难度，不用理会JS的复杂程度，让JS网页开发变得如此简单高效。
四、jQuery和JS的关系
- jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
- jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。
五、JQ文件和版本
09年诞生以来，到现在有十多年了，版本从1到目前的最新版3.6
jQuery是全球的很多开发者都在用。之前最高峰70%的网站都在使用。
现在大概50%的PC端网站在使用，移动端则没有。
jQuery有压缩版（jquery-3.5.1.min.js）和未压缩版(jquery-3.5.1.js)
在功能上没有任何区别，区别只是把正常的JS变成了压缩的了，用的是工具来压缩。其实任何JS代码都可以借助工具来压缩，压缩的目的：
-
减轻容量
-
保密代码
六、使用jquery
-
在html的
<head>或</body>结束前导入//本地 <script src="JS/jquery-3.6.0.min.js"></script> //在线 <script src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> -
入口函数（可省略）window.onload
//当JQ代码要放在HTML之前时，需要使用入口函数包裹 //作用同window.onload JS: window.onload=function(){ } JQ: DOM就绪函数 1. 完整版 $(document).read(function(){ //写你的JQ代码 }) 2. 简写版-推荐 $(function(){ //写你的JQ代码 }) -
写JQ代码
接下来要学的
七、JQ的语法
学JS没有捷径可走，但是学JQ有捷径。
基础语法是：$(selector).action()
表示选择什么标签，并对他们进行操作，是不是非常的熟悉，也就是JQ主要是对DOM进行操作。
-
$(‘css选择器’).方法();
//比如： $("div").css('color','red');//给所有的div添加样式 $("#box").addClass('on');// 给#box添加class="on" $(".p1").click();//给p1添加点击事件 -
$(‘css选择器’).方法().方法().方法().方法();
//比如： $("div").css('color','red').removeClass('on'); //等价于： $("div").css('color','red') $("div").removeClass('on'); -
$()中主要是放三类：字符串、对象、函数
//比如： 字符串：$("div"),$(".box"),$("内容") 对象：$(document),$(this) 函数：$("div").click(function(){});
八、实例：
-
基础选择器改变元素字体颜色
$(this).css("color","red") - 改变当前元素字体颜色 $("p").css("color","green")) - 改变所有p元素字体颜色 $("p.test").css("color","blue") - 改变所有class="test"元素字体颜色 $("#test").css("color","yellow") - 改变所有id="test"元素字体颜色 -
链式操作
$("h2").css("color","red").next().css("backgroundColor","green");
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
