jQuery API

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库，$作为标识符可能会产生命名冲突。

解决方案：

1. 把$统一改成jQuery
2. var 自定义符号 = $.noConflict();

4.3 jQuery插件

jQuery通常只能实现DOM操作，因此需要引入插件。

jQuery之家

jQuery插件库

• 例子：

1. 瀑布流
2. 图片懒加载(EasyLazyLoad,在jQuery插件库中，付费)
3. 全屏滚动