说明:本人正在学习JQuery知识,以下内容来自于我对B站李南江老师的视频教程《李南江亲授-jQuery+Ajax从放弃到知根知底》的总结,以当作自己的学习笔记。(顺便推荐一下这个教程,语速合我口味!)
1.JQuery是什么?
JQuery是一个JavaScript库。
Jquery=js+query:可以看出JQuery主要是用来做查询的。
write less ,do more:JQuery能让我们对HTML文档的遍历和操作,事件处理,动画以及Ajax更加简单。
2.为什么要使用JQuery?
用一个例子来说明:用原生JS和JQuery为三个div设置颜色
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<body>
<div></div>
<div class="box1">
</div>
<div id="box2">
</div>
</body>
1.原生JS的写法:
<script>
//原生js设置div背景颜色
window.onload=function(){
var div1=document.getElementsByTagName("div")[0];
var div2=document.getElementsByClassName("box1")[0];
var div3=document.getElementById("box2");
div1.style.backgroundColor="red";
div2.style.backgroundColor="blue";
div3.style.backgroundColor="yellow";
};
</script>
2.用JQuery:
<script>
//用JQuery修改
$(function(){
var $div1=$("div").eq(0);
var $div2=$(".box1");
var $div3=$("#box2");
$div1.css({
background:"red"
});
$div2.css({
background:"blue"
});
$div3.css({
background:"yellow"
});
});
</script>
通过对比明显可以看出JQuery写法比原生JS写法更简单
3.如何使用JQuery?
1.下载JQuery库
右键要下载的版本,点击打开新标签,再ctrl+s保存到本地即可
2.引入JQuery库
在HTML文件中使用script标签引入即可:
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
3.编写JQuery代码
为了确保函数在DOM(docume object model 文档对象模型)元素都加载完成之后执行,所有JQuery代码都应写在JQuery入口函数中:
<script>
$(document).ready(function(){
//JQuery代码...
});
</script>
思考:
JQuery每个版本都有uncompressed(未压缩),minified(压缩)两个版本。该怎么选择呢?
让我们看一下未压缩版和压缩版的源码:
1.未压缩版:看起来很美观,注释很多,参数名称完整,因此文件体积略大
2.压缩版:看起来很杂乱,换行?注释?不存在的!,而且参数尽量简短,因此文件体积相比略小
所以我们可以得出结论,我们在进行开发使一般使用的是未压缩版,而项目发布上线时则使用压缩版。