jQuery 基础

1 安装

下载到本地，再引入

下载地址：https://jquery.com/download/

<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>

或者 直接使用CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>

BootCDN jQuery各个版本地址： https://www.bootcdn.cn/jquery/

根据浏览器版本加载不同版本的jQuery：

<!--IE9及以上以及其他浏览器-->
<!--[if gt IE 8]><!-->
<script src="../../dist/jquery-3.1.1.min.js"></script>
<!--<![endif]-->
<!--IE8以及以下浏览器-->
<!--[if lte IE 8]>
<script src="../../dist/jquery-1.12.4.min.js"></script>
<![endif]-->

2 jQuery对象（核心函数）

$是jQuery的别名

jQuery('.item').show()
//等同于
$('.item').show()

$对象可以用作选择器获取元素，还可以创建DOM对象

3 文档就绪事件

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

上述写法可以简写

$(function(){

   // 开始写 jQuery 代码...

});

4 连贯操作

//对象可以连贯调用
$(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()

5 jQueryDOM和jsDOM

• 通过原生js获取的dom对象，我们称之为jsDOM或者原生DOM

• 通过jQuery选择器获取的dom对象，我们称之为 jQuery DOM

• jQuery DOM本质上 是由 jsDOM组成的集合，是个类数组对象。可以通过 [索引] 获取其中的jsDOM

• $(jsDOM) 可以转为 jQuery DOM