OK，首先来了解下什么是jQuery，我们可以简单的理解为jQuery是一个JavaScript函数库是一个轻量级的“写得少，做得多”的JavaScript库。
特色有以下这些方面：
·使用多浏览器开源选择器引擎 Sizzle（jQuery 项目的派生产品）进行 DOM 元素选择
·基于 CSS 选择器的 DOM 操作，使用元素的名称和属性（如 id 和 class）作为选择 DOM 中节点的条件
·事件
·特效和动画
·Ajax
·Deferred 和 Promise 对象来控制异步处理
·JSON 解析
·通过插件扩展
·工具函数，如特征检测
·现代浏览器中本地的兼容性方法，但对于旧版浏览器需要后备（fallback）方法，比如 inArray()和 each()
·多浏览器（不要与跨浏览器混淆）支持
虽然jQuery正在逐渐退出历史的舞台，但是作为一个前端初学者，花个几天时间来学习了解一下他的思想还是很有必要的。
那么，我们开始！
首先是配置jQuery环境，进入jQuery的官方网站jQuery来下载最新的jQuery文件到本地，然后再引入到项目中即可。引入代码示例：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
下面给出jQuery第一个页面的应用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个jQuery小程序</title>
<script type="text/javascript" src="C:Users59990DocumentsjQueryjquery-3.5.1.min.js"></script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#">春天</a>
<ul class="level2">
<li>春意盎然</li>
<li>春意盎然</li>
<li>春意盎然</li>
<li>春意盎然</li>
</ul>
</li>
<li class="level1">
<a href="#">夏天</a>
<ul class="level2">
<li>夏日炎炎</li>
<li>夏日炎炎</li>
<li>夏日炎炎</li>
<li>夏日炎炎</li>
</ul>
</li>
<li class="level1">
<a href="#">秋天</a>
<ul class="level2">
<li>秋高气爽</li>
<li>秋高气爽</li>
<li>秋高气爽</li>
<li>秋高气爽</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
// 等待dom元素加载完毕
$(document).ready(
function(){
$(".level1>a").click(function(){
$(this).addClass("current") // 给当前元素添加“current”样式
.next().show() // 下一个元素显示
.parent().siblings().children("a").removeClass("current") // 父元素的同辈元素的子元素a移除“current”样式
.next().hide(); // 他们的下一个元素隐藏
return false;
})
});
</script>
</body>
</html>
jQuery对象
jQuery对象就是通过包装DOM对象后产生的对象，可以使用jQuery里的方法。比如：
$("$syl").html(); // 获取id为syl的元素内的html代码，html()是jQuery中的方法
这段代码等同于：
document.getElementById("syl").innerHTML;
** 额外要注意的是 **
jQuery对象不等同于DOM对象，但是他们之间可以相互转换
*** jQuery对象转换为DOM对象 ***
var $cr = $("#cr");
var cr = $cr[0];
或者：
var $cr = $("#cr");
var cr = $cr.get(0); // DOM 对象
*** DOM对象转换为jQuery对象 ***
var cr = document.getElementById("cr");
var $cr = $(cr); // jQuery对象
解决冲突
并不是只有jQuery框架使用$符号，如果跟其他框架重复了怎么办呢，jQuery团队考虑到了这个问题，并实现了noConflict()方法。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Day03消除冲突</title>
<script type="text/javascript" src="C:Users59990DocumentsjQueryjquery-3.5.1.min.js"></script>
</head>
<body>
<p>这是一个段落</p>
<button>点我</button>
<script type="text/javascript">
/*
// 等待DOM元素加载完毕
$.noConflict(); // 释放对$的控制
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery仍在工作！");
})
});
*/
// 或者
// 等待DOM元素加载完毕
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery仍在工作！")
})
});
</script>
</body>
</html>
总结
ok 又到了总结阶段，写一点个人的小想法，这是我第一次接触jQuery，目前看起来还比较简单，前端的知识都是比较多且杂的，得慢慢学。今天了解了jQuery的一些历史，知道了怎么去在文件中引用它，也实践了几个小东西，知道了jQuery对象和DOM对象的区别，也学会了怎么解决jQuery和其他库的冲突。
总而言之，首先等待DOM元素加载完毕，也就是$(document).ready(); 这个ready里边的参数呢是一个函数function(){}，而你又可以在这个函数里去通过jQuery的选择器去对页面中的某些元素做相应的操作，学习中发现click()这个函数应用频率很高，具体使用就是jq选择器.click()，然后里边的参数就是一个函数，这个函数会在这个元素被点击的时候触发，嗯，就这样吧。