JS的问题?

onload 事件，只能绑定一个函数，会产生事件覆盖。
问题1：容错性差, 如果一行代码报错，则会影响到后续代码的执行。
问题2：api比较繁杂，同样的是选择DOM节点，但是需要根据tagName, 或者ID, 或者className，来使用不同的函数才能获取。
问题3：代码的兼容性差，有时候，需要适配很多浏览器。
问题4：一个特别简单的小功能，比如说缓动动画，都必须使用很多代码实现，使得更多的精力无法专注在业务实现上。
问题5：操作多个节点对象，必须使用循环语句，逐一设置
问题6：如果给某个dom对象设置属性值，必须一个一个设置。

jQuery 概念

jQuery 是一款优秀的 javaScript 函数库，
jQuery 已经集成了 JavaScript、CSS、DOM 和 Ajax 于一体的强大功能
jQuery 的主旨：write less, do more。以更少的代码，实现更多的功能。

jQuery 特点

1.轻量级
2.强大的选择器
3.出色的Dom封装
4.可靠的事件处理
5.浏览器兼容性强
6.链式操作方式
7.隐式迭代
8.插件丰富

jQuery 功能

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery 集成方式

本地集成

1-下载 jQuery 库
http://jquery.com/download/#Download_jQuery

2-本地引入地址
首先将 jQery 库放到项目工程中，然后本地引入地址。

<script type="text/javascript" src="jquery.js"></script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01-jQuery简介&集成</title>
</head>
<body><p>xxxxxxx</p><script src="js/jquery-3.5.1.min.js"></script><script>$(document).ready(function () {$('p').html('hello world!!');})/* js的写法 window.onload = function () {$('p').html('hello world!');}*/</script>
</body>
</html>

远程集成

远程集成的优点是加载速度比较快，优先加载本地缓存，其次加载临时网络资源。并且可以自动获取最新版本。

方法一：使用 Google 的 CDN（需要科学上网）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果从版本字符串的末尾删除一个数字，谷歌会返回版本系列中最新的可用版本

例如 1.1.1 修改成1.1，则根据最新版返回 1.1.0 - 1.1.9。

如果只剩第一个数字，那么谷歌会返回 1 系列中最新的可用

例如 1.1.1 修改成1，根据最新版返回 1.1.0 - 1.9.9。

方法二：使用 Microsoft 的 CDN（无需科学上网）

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p> xxxxxxxxx</p><!--远程集成--><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script><script>/* 将p标签中的字符串替换 */$(document).ready(function () {$('p').html('itLike，撩课！');})/* js 中的写法window.onload = function () {}*/</script>
</body>
</html>

替换前：

替换后：

【jQuery笔记Part1】01-jQuery简介集成相关推荐

【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换概念为什么要转换转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象原理图 jQuery笔记目录概念 jQuery对象是通 ...
【jQuery笔记Part1】11-jQuery选择器
jQuery选择器基本选择器层级选择器属性选择器筛选选择器 siblings 案例 jQuery笔记目录基本选择器初始 html 页面: <!DOCTYPE html> < ...
【jQuery笔记Part1】02-jQuery代码风格
jQuery代码风格 1. 代码风格 2. 基本语法格式示例 jQuery笔记目录 1. 代码风格在 jQuery 程序中,不管是页面元素的选择.内置的功能函数的调用,都是美元符号 $ 来起始的. ...
【jQuery笔记Part1】10-jQuery操作html-获取设置
jQuery操作html-获取&设置获取内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表 ...
【jQuery笔记Part1】09-jQuery操作css-尺寸
jQuery操作css-尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight() outerWidth(tru ...
【jQuery笔记Part1】08-jQuery操作css-获取设置样式
jQuery操作css-css() 通过 css() 方法获取样式通过 css() 方法设置样式方法一:单一属性设置方法二:链式调用方法三:多个属性设置(最常用) 完整案例 jQuery笔记目 ...
【jQuery笔记Part1】07-jQuery操作css-添加删除切换类、开关灯泡案例
jQuery操作css-添加&删除&切换类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() ...
【jQuery笔记Part1】05-jQuery解决冲突
jQuery解决冲突当 jQuery 内部的 $ 被其他函数库覆盖解决方案一:将所有 $ 替换为 jQuery 解决方案二:借助匿名函数包裹执行当其他函数库的 $ 被 jQuery 覆盖解决方 ...
【jQuery笔记Part1】12-jQuery元素的角标
jQuery元素的角标常见的鼠标事件 mouseenter 鼠标指针穿过被选元素时 mouseleave 鼠标移出被选元素内部时 mouseover 鼠标指针穿过被选元素或其子元素时 mouseou ...

【jQuery笔记Part1】01-jQuery简介集成

jQuery简介&集成