jQuery介绍

阅读目录

• 1.1 什么是jQuery
• 1.2 什么事JS类库
• 1.3 常见JS类库
• 1.4 jQuery的优势
• 1.5 jQuery的版本
• 1.6 jQuery 相关网站
• 2.1 安装
• 2.2 jQuery对象
• 2.3 文档就绪事件
• 2.4 连贯操作
• 2.5 jQueryDOM和jsDOM

1. 了解jQuery

回到顶部

1.1 什么是jQuery

• jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库
• jQuery极大的简化了JavaScript 编程

回到顶部

1.2 什么事JS类库

• 它就是一些函数的集合，就是把特定效果的代码写好，你只需要在用的时候要用很少的代码去调用。
• 起主导作用的是你的代码，由你来决定何时使用类库。

回到顶部

1.3 常见JS类库

• jQuery
• ExtJS
• prototype.js
• zepto.js

回到顶部

1.4 jQuery的优势

• 开源 免费
• 便捷的选择器
• 方便的DOM操作
• 方便的动画特效
• 易用的ajax操作
• 丰富的插件扩展
• 解决浏览器兼容性效果

回到顶部

1.5 jQuery的版本

1.x.x的版本是可以 支持 IE6~IE8的
2.x.x到3.x.x 的版本，不在兼容IE8以及以下浏览器

回到顶部

1.6 jQuery 相关网站

• 官网 https://jquery.com/
• 文档API： http://jquery.cuishifeng.cn/index.html

2 jQuery 基本使用

回到顶部

2.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/

回到顶部

2.2 jQuery对象

$是jQuery的别名

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

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

回到顶部

2.3 文档就绪事件

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

上述写法可以简写

$(function(){

   // 开始写 jQuery 代码...

});

回到顶部

2.4 连贯操作

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

回到顶部

2.5 jQueryDOM和jsDOM

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

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

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

• $(jsDOM) 可以转为 jQuery DOM