Justin-刘清政的博客

python/前端/14-JQuery基础

2020-11-03

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
2
1.x.x的版本是可以 支持 IE6~IE8的
2.x.x到3.x.x 的版本,不在兼容IE8以及以下浏览器

1.6 jQuery 相关网站

2 jQuery 基本使用

2.1 安装

下载到本地,再引入

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

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

或者 直接使用CDN

1
2
3
4
<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的别名

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

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

2.3 文档就绪事件

1
2
3
4
5
$(document).ready(function(){

// 开始写 jQuery 代码...

});

上述写法可以简写

1
2
3
4
5
$(function(){

// 开始写 jQuery 代码...

});

2.4 连贯操作

1
2
//对象可以连贯调用
$(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
使用支付宝打赏
使用微信打赏

点击上方按钮,请我喝杯咖啡!

扫描二维码,分享此文章