目录
jQuery类库
jQuery介绍
jQuery类库类似python中的模块。
IE浏览器:前端针对iE有时候需要单独写一份代码
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
jQuery优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。(加载速度快)
- 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。(选择器更多)
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。(一行代码走天下)
- 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。(重点)
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
jQuery内容
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax
下载链接:jQuery官网
中文文档:jQuery AP中文文档
jQuery版本
1.x 兼容IE678 最终版本:1.12.4 (2016年5月20日)
2.x 不兼容IE678 最终版本:2.2.4 (2016年5月20日)
3.x 不兼容IE678 目前该版本是官方主要更新维护的版本
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。
知识补充
准备工作
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用)
前端免费的cdn网站: https://www.bootcdn.cn/
下载>>官网>>下载>>>min.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js //没有压缩
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js //压缩
下载推荐看:https://www.cnblogs.com/goOJBK/p/15890687.html
什么是CDN
CDN是内容分发网络
前端免费的cdn网站: https://www.bootcdn.cn/
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输可以用 $ 替换
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快(原因要下加载jQuery再加载js代码)
js代码与jQuery代码对比
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')
下面是将jQuery添加到默认环境配置里
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]