一、jQuery诞生背景
JavaScript中原生的好多写法对操做页面元素来说一个词“繁琐”，虽然原生有原生的好处，但是“繁琐”在好多时候还是让人难以忍受的。
就在那个时候，有位名叫John Resig的外国工程师创立了名为jQuery的一个框架库。jQuery横空出世后，成为了DOM编程领域的霸主，极大的简化了原生JavaScript的DOM编程。
围观一下jQuery的整体架构：
jQuery整体框架.png
二、jQuery能够解决处理js原生DOM操作的几个问题及相关函数
1. 页面元素选择问题解决及$()函数
$()函数就是jQuery的核心函数，query就是选择的意思，也就是说jQuery的核心功能就是选择元素：
$("#box ul li.light span")
(“选择器”)```
选择的就是所有符合条件的元素（可以说成是一个集合，类似数组），而不是一个。
和jQuery是同一个函数：
jQuery("#box ul li.light span")
2. 页面元素样式问题解决及CSS()函数
获取页面类名为box的元素的宽度，得到样式如下：
$(".box").css("width");
通过$()函数选择出来的东西，都是jQuery对象，所有的jQuery对象，都可以继续打点调用css函数，css函数已经封装了计算后的样式。设置样式如下：
$(".box").css({
"width":700,
"height" : 300,
"opacity" : 0.4
});
3. 页面元素动画问题的解决及animate()函数
jQuery内部含有一个运动框架（牛牛牛，比原生看起来强好多！）
$(".box").animate({"left":900},4000,function(){
alert("运动完成");
});
4. 批量添加监听、节点
$(".circles ol li").mouseenter(function(){
$(this).css("background-color","red");
});
三、应用实例展示
1.文本加颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 1. 引入jQuery库-->
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
</head>
<body>
<p> p1 </p>
<p> p2 </p>
<p> p3 </p>
<p> p4 </p>
<script>
// $ 是1个函数
// $("p") 是1个函数调用
// 返回的结果 jQuery 的内部【对象】
// 所有的p元素
// css 是设置样式
// {"color": "red"} 是 css 的参数
$("p").css({color: "red"}); // 一行代码搞定
</script>
</body>
</html>
文本颜色.png
2.div元素加样式背景
<head>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
$(function() {
$(".c1").css(
{width: 100,
height: 100,
background: "red"})
$(".c2").css(
{width: 200,
height: 100,
background: "blue"})
})
</script>
</head>
<body>
<div class="c1" ></div>
<div class="c2" ></div>
</body>
div加背景.png
网友评论