jQuery常用API总结

2022-06-19 前端学习 jQuery 评论字数统计: 2.4k(字) 阅读时长: 10(分)

jQuery入口函数

等待页面DOM加载完毕后执行代码

// 方式一
$(document).ready(function(){
	//To do
})
// 方式二
$(function(){
    // To do
})

jQuery对象和DOM对象

DOM对象： 原生JS获取的元素对象

jQuery对象： 本质是利用$对DOM对象包装后产生的对象，伪数组形式存储，数组元素为对象本身，数组最后一项属性为长度（元素个数）

jQuery对象和DOM对象相互转换

DOM对象转换为jQuery对象：通过jQuery方法将原生DOM转换为实例对象，并以伪数组形式存储，每个对象会分配一个索引号（从0开始）

jQuery对象转换为DOM对象：jQuery对象在生成时为每个DOM元素设置了索引号，根据该索引号就可以拿到相应的DOM对象

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    // DOM对象转换为jQuery对象
    $("ul") 
    
    // jQuery对象转换为DOM对象
    $("ul li")[0] // 获取第一个li元素
    $("ul li").get(0) // 获取第一个li元素
    
    // 获取当前元素在jQuery对象中的索引号
    $("ul li").click(function(){
        $(this).index() 
    })
</script>

jQuery常用API

jQuery选择器

jQuery隐式迭代：jQuery选择器选中多个元素后，会自动为所有元素执行相关操作（如添加样式）

jQuery链式编程，需要注意是对哪个对象执行的操作

基础选择器

层级选择器

筛选选择器

jQuery筛选方法

jQuery样式操作

读取样式属性

1	$(this).css('color') // 只写属性名，返回属性值

修改样式

$(this).css('color':'red') // 属性名:属性值
$(this).css('width':200) // 值为数字可以不加单位和引号

// 多组样式，用对象形式传入；
// 属性名可以不加引号；
// 属性值不为数字则必须加引号；
// 复合属性采取驼峰命名
$("div").css({
    width: 200,
    height: 200,
    color: "red",
    backgroundColor: "blue",
});

样式类操作（添加、删除、切换）

jQuery类操作只针对操作的类，不影响元素已有的类

原生JS操作中.className=’ '是直接将元素class属性重写

.class{...} // 定义类样式
...
$(this).addClass("class") // 添加类
$(this).removeClass("class") // 添加类
$(this).toggleClass("class") // 切换类

jQuery动画效果

常用动画

show([speed,[easing],[fn]])

speed：速度，可以用slow、normal、fast或自定义毫秒数
easing：切换效果
fn：回调函数

1 2	// fadeTo([speed],opacity,[easing],[fn]) $(this).fadeTo(1000, 0.5) //时间和透明度为必填项

事件切换 hover()

1
2

$(this).hover(function(){}, function(){}) // 分别为鼠标经过和离开的回调函数
$(this).hover(function(){} ) // 只写一个函数，则鼠标经过和离开均执行该回调函数，通常结合Toggle效果使用

停止动画排队 stop()

stop()方法必须写到动画前面， 每次执行该动画时，若上次还未结束，直接结束动画并开始本次动画，防止动画多次执行

1	$(this).stop().slideToggle()

自定义动画 animate()

// animate(params, [speed], [easing], [fn])
// params：要更改的样式属性，必须为对象格式
// animate动画效果只能动态改变数值型的参数
$("div").animate({ width: 100, height: 300, left: 100 })

jQuery属性操作

固有属性操作 prop()

1 2	element.prop("属性名") // 获取属性值 element.prop("属性名","属性值") // 设置属性值

自定义属性 attr()

1 2	element.attr("属性名") // 获取属性值类似原生JS：getAttribute() element.attr("属性名","属性值") // 设置属性值类似原生JS：setAttribute()

数据缓存 data()

将元素看做变量，存储键值对数据

<script>
    element.data("属性名") // 获取数据值
    element.data("属性名","属性值") // 设置（存入）数据
</script>

<div data-index="2"></div>
<script>
	$("div").data("index") // 获取H5的data-index自定义属性时，可以不加前面的data，且返回数字型
</script>

jQuery文本属性值（内容文本值）

普通元素内容 html()

相当于原生innerHTML，获取或改变元素内部所有内容（包括标签）

1 2	element.html() // 获取元素内容 element.html("XXX") // 设置元素内容，内容会以html结构进行解析

普通文本内容 text()

相当于原生innerText，获取文本内容时会忽略标签

1 2	element.text() // 获取元素内容 element.text("XXX") // 设置元素内容,内容被认为是文本，html标签不会被解析为结构

表单值 val()

相当于原生value

<input type="text" value="请输入内容" />
<script>
    $("input").val() // 获取表单内容 --> 请输入内容
    $("input").val("test") // 设置表单内容 --> 输入框内容变为test
</script>

jQuery元素操作

遍历元素 each()、$.each()

<!-- 
$("div").each(function (index,domEle) {XXX; }) 
// 主要用于DOM处理
// index是每个元素的索引号
// domEle是每个 DOM元素对象，不是jQuery对象
// 想要使用jQuery方法，需要 $(domEle)
-->
<script>
    const color = ["red", "green", "blue"];
    $(function () {
        $("div").each((i, domEle) => {
            $(domEle).css("color", color[i]);
        });
    });
</script>

<!-- 
$.each(object, function (index, element) {XXX; }) // 主要用于数据处理，遍历对象或数组
-->
<script>
    const color = ["red", "green", "blue"];
    const user = {name:"zhangsan", age:18}
    $(function () {
        $.each(color, (i, ele) => { // 遍历数组，分别为索引、值
            console.log(i, ele);
        });
        $.each(user, (key, val) => { // 遍历对象，分别为键、值
            console.log(key, val);
        });
    });
</script>

创建

1	$("<li>新创建的li元素</li>") // 直接用$()包裹元素结构即可创建元素

添加

内部添加：添加元素与目标元素为父子关系

<ul>
    <li>1</li>
</ul>

<script>
const li = $("<li>新创建的li元素</li>"); // 直接用$()包裹元素结构即可创建元素
$("ul").append(li) // 把内容放入元素内部最后面，类似原生 appendChild
$("ul").prepend(li) // 把内容放入元素内部最前面
</script>

外部添加：添加元素与目标元素为兄弟关系

<ul>
    <li>1</li>
</ul>

<script>
const li = $("<li>新创建的li元素</li>"); // 直接用$()包裹元素结构即可创建元素
$("ul").after(li) // 把内容放入目标元素后面
$("ul").before(li) // 把内容放入目标元素前面
</script>

删除

1
2
3

element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配元素的内容，功能同上

jQuery尺寸、位置操作

尺寸

参数为空，获取相应值，返回的是数字型
参数为数字，修改相应值，参数可以不写单位

位置

scrollTop结合animate动画可以设置滚动到顶部的动画

$(".back").click(function () {
    $("body,html").stop().animate({ // 此处必须为body，html 不能用document
        scrollTop: 0,
    });
});

jQuery事件处理

普通单事件绑定

1	$("div").click()

on() 绑定事件

$("div").on(events,[selector],fn) // 语法

// 例子1 绑定1个事件
$("div").on("click",function(){...})

// 例子2 绑定多个事件
$("div").on({
	click:function(){...},
	keydown:function(){...}
})

// 例子3 为多个事件绑定同一处理函数
$("div").on("mouseenter mouseleave", function(){...})

// 例子4 实现事件委托（委派）
$("ul").on("click","li",function(){...}) // 为ul绑定事件，触发条件是li（通过事件冒泡）

// 例子5 给未来动态创建的元素绑定事件
$("ol").on("click","li",function(){alert(11)}) // 即使li是后来创建的，也能出发绑定事件
const li = $("<li>后来创建的</li>");
$("ol").append(li);

off() 解绑事件

1
2
3

$("div").off() // 解绑div所有事件
$("div").off("click") // 解绑特定事件
$("ul").off("click","li") // 解除事件委托

one() 触发一次事件

1	$("div").one("click", function(){...})

自动触发事件

$("div").on("click", function(){alert(1)}) // 绑定事件

// 方式1
$("div").click()
// 方式2 trigger
$("div").triggrt("click")
// 方式3 triggerHandler
$("div").triggerHandler("click") // 不会触发元素的默认行为（如input获取焦点时默认光标开始闪烁）

jQuery对象拷贝

$.extend([deep], target, object, [objectN])
// deep 默认false 浅拷贝 设为true则深拷贝
// target 要拷贝的目标对象（copy的东西加到谁身上）
// object 待拷贝对象（从谁那copy东西）

拷贝过程中发现同名对象，会覆盖掉原来的对象值

浅拷贝指的是把拷贝对象的复杂数据类型的地址拷贝给目标对象，两者指向同一块地址

浅拷贝中发现同名复杂数据类型，会用拷贝对象地址覆盖掉原来的地址

深拷贝对于复杂数据类型直接clone并新开辟空间存放

jQuery多库共存

$符号或jQuery关键字与其他库相冲突的解决方案

方法一：如果$符号冲突，使用jQuery

方法二：$.noConflict()

1 2	var selfConfig = $.noConflict(); selfConfig("div").show();

本文链接： https://tianbiao.top/35-jQuery常用API总结/