爱站程序员基地1. 基本使用
引入jQuery
<script src=\"js/jquery3.5.1.min.js\"></script>
1.1 jQuery的入口函数
$(function () {// 此处是页面DOM加载完成的入口，类比于DomContentLoaded});$(document).ready(function() {// 和上面的一样，但是不推荐使用});
1.2 jQuery的顶级对象$
$相当于jQuery，相当于原生js中的window
1.3 DOM对象与jQuery对象
| jQuery对象 | DOM对象 |
|---|---|
| $(‘div’) | document.querySelector(‘div’) |
- DOM对象转化为jQuery对象：
$(DOM对象)
- jQuery对象转化为DOM对象：
$(\'video\')[0]$(\'video\').get(0)
2. 常用API
1. jQuery选择器
- 隐式迭代：jQuery内部对匹配的元素内部进行迭代。
2. jQuery样式操作
2.1 返回样式
$(function() {$(this).css(\"color\");})
2.2 修改一组样式
$(function() {$(this).css(\"color\",\"pink\");})
2.3 以对象的形式修改多组样式
$(function() {$(this).css({color: \"white\",fontSize: 20});})
2.4 设置类样式的方法
$(function() {$(this).addClass(\"current\"); // current为css类名$(this).removeClass(\"current\"); // 删除类$(this).toggleClass(\"current\"); // 切换类})
3. jQuery效果
3.1 显示隐藏
$(\"div\").show([时长],[切换效果],[回调函数]);$(\"div\").hide([时长],[切换效果],[回调函数]);$(\"div\").toggle([时长],[切换效果],[回调函数]); // 切换，即显示时隐藏，隐藏时显示
3.2 滑动
$(\"div\").slideDown([时长],[切换效果],[回调函数]);$(\"div\").slideUp([时长],[切换效果],[回调函数]);$(\"div\").sildeToggle([时长],[切换效果],[回调函数]);
3.3 事件切换
$(\"div\").hover(function() {$(\"div\").stop().slideDown([时长],[切换效果],[回调函数]);},function() {$(\"div\").stop().slideUp([时长],[切换效果],[回调函数]);});$(\"div\").hover(function() {$(\"div\").stop().sildeToggle([时长],[切换效果],[回调函数]);}); // 简洁版,stop()函数停止排队
3.4 淡入淡出
$(\"div\").stop().fadeIn([时长],[切换效果],[回调函数]);$(\"div\").stop().fadeOut([时长],[切换效果],[回调函数]);$(\"div\").stop().fadeToggle([时长],[切换效果],[回调函数]);$(\"div\").stop().fadeTo([时长],透明度,[切换效果],[回调函数]);
3.5 自定义动画
$(\"div\").stop().animate({// 目标样式left: 500,top: 300,opacity: .4,width: 200}, 500);
4. jQuery属性操作
// prop操作元素固有属性$(\"a\").prop(\"herf\");$(\"a\").prop(\"title\",\"我们都挺好\");// attr操作元素自定义属性$(\"a\").attr(\"data-index\");$(\"a\").attr(\"data-index\",\"123\"); // 返回值是字符串// data操作的数据在元素的缓存里$(\"a\").data(\"uname\");$(\"a\").data(\"uname\",\"SeekWind\");$(\"a\").data(\"index\") // 获取H5自定义属性，返回值直接就可以是数字
5. jQuery内容文本值
// 操作元素内容html()$(\"div\").html(); // 返回元素内容，含标签$(\"div\").html(\"<span>123</span>\");// 操作元素文本text()$(\"div\").text(); // 只获得文本$(\"div\").text(\"123\");// 操作表单$(\"input\").val();$(\"input\").val(\"123\");
6. jQuery元素操作
6.1 遍历元素
// 遍历元素，用于遍历元素$(\"div\").each(funnction(index, domElement) {// 注意是dom Element, 需要$(domElement)转换为jQuery对象});// 用于遍历数组，也可以遍历元素$.each(arr, function(index, domElement) {})
6.2 创建添加删除元素
// 创建var li = $(\"<li>我是后来创建的li</li>\")；$(\"ul\").prepend(li); // 内部前面添加$(\"ul\").append(li); // 内部最后追加$(\"li\").before(li); // 外部前面添加$(\"li\").after(li); // 外部后面添加// 删除$(\"ul\").remove(); // 自杀$(\"ul\").empty(); // 清空子节点，等效于$(\"ul\").html(\"\")
7. jQuery尺寸、位置操作
7.1 尺寸
width()、height()括号内写数字代表修改，单位默认为px。
7.2 位置
| 位置函数 | 效果 |
|---|---|
| offset() | 相对于文档的偏移坐标，有left和top两个属性。可以获取，也可以设置 |
| position() | 返回相对于带有定位的父级的偏移坐标，只能获取，不能设置 |
| scrollLeft()/scrollTop() | 被卷去的长度，可以获取，也可以设置 |
3. jQuery事件
1. jQuery事件注册
$(\"div\").click(function() {// 执行});
2. 事件处理
2.1 on()事件绑定
$(\"div\").on({mouseenter: function() {// 鼠标进入执行},click: function() {// 鼠标点击执行}});$(\"div\").on(\"mouseenter, click\", function() {$(this).toggleClass(\"current\");});// on也可以实现事件委托$(\"div\").on(\"click\", \"li\", function() {// 绑定在div上，li触发});// 同时可以对动态创建的元素绑定事件
2.2 off()事件解绑
$(\"div\").off(); // 解绑所有事件$(\"div\").off(\"click\"); // 解绑点击事件$(\"ul\").off(\"click\", \"li\"); // 事件委托的解绑$(\"div\").one(); // 使用方法和on完全一致，但是事件只会触发一次
2.3 tigger()自动触发事件
$(\"div\").tigger(\"click\"); // 自动触发事件一次$(\"div\").tiggerHandler(\"click\"); // 自动触发事件一次，但是元素不会触发默认行为，比如说Input的光标不会一闪一闪
3. jQuery事件对象
$(\"div\").on(\"click\", function(event) {event.stopPropagation(); // 停止事件冒泡});
4. jQuery其他方法
4.1 jQuery拷贝对象
var targetObj = {};var obj = {id: 1,name: \"Andy\"}$.extend([是否深拷贝], targetObj, obj)
4.2 多库共存
使用了多个js库，$作为标识符可能会产生命名冲突。
解决方案：
- 把$统一改成jQuery
- var 自定义符号 = $.noConflict();
4.3 jQuery插件
jQuery通常只能实现DOM操作，因此需要引入插件。
jQuery之家
jQuery插件库
- 例子：
- 瀑布流
- 图片懒加载(EasyLazyLoad,在jQuery插件库中，付费)
- 全屏滚动
