jQuery的API文档 jquery调用api

文章目录

• 1. jQuery选择器

• 1.1 基础选择器
• 1.2 层级选择器
• 1.3 隐式迭代
• 1.4 筛选选择器
• 1.5 筛选方法
• 1.6 jQuery里面的排他思想
• 1.7 链式编程

• 2. jQuery样式操作

• 2.1 操作css方法
• 2.2 设置类样式方法

• 3. jQuery效果

• 3.1 显示隐藏效果
• 3.2 滑动效果
• 3.3 事件切换
• 3.4 动画队列及其停止排队方法
• 3.5 淡入浅出
• 3.6 自定义动画 animate

• 4. jQuery属性操作

• 4.1 设置或获取元素固有属性 prop()
• 4.2 设置或获取自定义元素属性值 attr()

• 5. jQuery文本属性值

• 5.1 普通元素内容html()
• 5.2 普通元素文本内容text()
• 5.3 表单的值 val()

• 6. jQuery元素操作

• 6.1 each遍历
• 6.2 创建元素
• 6.3 添加元素
• 6.4 删除元素

• 7. jQuery尺寸、位置操作

• 7.1 jQuery尺寸
• 7.2 jQuery位置

1. jQuery选择器

1.1 基础选择器

原生JS 获取原生方式很多，而且情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$("选择器")

1.2 层级选择器

1.3 隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

1.4 筛选选择器

1.5 筛选方法

1.6 jQuery里面的排他思想

在原生JS中，我们的排他思想是通过设置循环将所有元素的属性去掉，再给需要单独加属性的元素添加属性。

但是在jQuery中，我们是通古当前元素设置样式，其余的兄弟元素清除样式。

例如：

<script>
    $('ul li').mouseover(function () {
        var index = $(this).index();
        $('.content>div').eq(index).show();
        $('.content>div').eq(index).siblings().hide();
    })
</script>

这段代码显示了content内索引号为index的元素，其余兄弟元素隐藏

1.7 链式编程

由于1.6中实例代码对相同jQuery对象进行了操作，为了节省代码量与提高性能，我们可以通过链式编程实现，如下：

<script>
    $('ul li').mouseover(function () {
        var index = $(this).index();
        $('.content>div').eq(index).show().siblings().hide();    
    })
</script>

---

2. jQuery样式操作

2.1 操作css方法

jQuery可以使用css方法来修改简单的元素样式，也可以操作类修改多个样式。

1.参数只写属性名，则是返回属性值
语法：$(‘元素’).css(‘属性名’)

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<script>
    console.log($('div').css('width'));
    console.log($('div').css('height'));
    console.log($('div').css('backgroundColor'));
</script>

2.参数是属性名，属性值，逗号隔开，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。
语法：$(‘元素’).css(‘属性名’，‘属性值’)

<script>
    $('div').css('width', 200);
    $('div').css('height', 200);
    $('div').css('backgroundColor', 'red');
</script>

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号。
语法：语法：$(‘元素’).css({‘属性名’:‘属性值’,‘属性名’:‘属性值’})

<script>
        $('div').css({
            width: 150,
            height: 150,
            'backgroundColor': 'black',
        })
</script>

2.2 设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

1.添加类
addClass(‘类名’)

2.移除类
removeClass(‘类名’)

3.切换类
toggleClass(‘类名’)

<script>
    // 1.添加类
    $('div').addClass('current');
    // 2.移除类
    $('div').removeClass('current');
    // 3.切换类
    $('div').click(function () {
        $(this).toggleClass('current');
    })
</script>

---

3. jQuery效果

jQuery给我们封装了很多动画效果，最常见如下

3.1 显示隐藏效果

显示show
语法： show([speed,[easing],[fn]])

隐藏hide
语法： hide([speed,[easing],[fn]])

切换toggle
语法： toggle([speed,[easing],[fn]])

参数：

1. 参数可以省略
2. speed：可选预定速度：slow、normal、fast 或直接写动画时常毫秒数：如1000
3. easing：(Optional)用来指定切换效果，默认是swing，可选‘linear’
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3.2 滑动效果

下滑slideDown
语法： slideDown([speed,[easing],[fn]])

上滑slideUp
语法： slideUp([speed,[easing],[fn]])

切换slideToggle
语法： slideToggle([speed,[easing],[fn]])

参数：

1. 参数可以省略
2. speed：可选预定速度：slow、normal、fast 或直接写动画时常毫秒数：如1000
3. easing：(Optional)用来指定切换效果，默认是swing，可选‘linear’
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3.3 事件切换

hover(over,out)

1.over:鼠标移到元素上要触发的函数（相当于mouseenter）
2.out:鼠标移出元素要触发的函数（相当于mouseleave）

如：

<script>
    $('button').hover(function () {
        $('div').slideDown(500);
    }, function () {
        $('div').slideUp(500);

    })
</script>

如果只写一个函数参数，那么鼠标悬浮离开都是调用这个函数，所以我们用来搭配切换属性想必也是极好的，如：

<script>
    $('button').hover(function () {
        $('div').slideToggle(500);
    })
</script>

3.4 动画队列及其停止排队方法

1.动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画效果排队执行。

2.停止排队

stop()

1.stop()方法用于停止动画或效果
2.注意：stop()写到动画或效果的前面，相当于停止或结束上一次的动画。

<script>
    // 1.停止动画排队
    $('ul').hover(function () {
        $(this).children('li').stop().slideToggle(500);
    })
</script>

3.5 淡入浅出

淡入fadeIn
语法： fadeIn(时间)

浅出fadeOut
语法： fadeOut(时间)

修改透明度 fadeTo
语法： fadeOut(时间)

参数时间为淡入或淡出的时间，可以不设置

3.6 自定义动画 animate

语法： animate(params,[speed],[easing],fn)

参数：

1. **params:想要更改的属性，以对象的形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。**其余参数可以省略。
2. speed：可选预定速度：slow、normal、fast 或直接写动画时常毫秒数：如1000
3. easing：(Optional)用来指定切换效果，默认是swing，可选‘linear’
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

如：

<script>
    $('button').mouseenter(function () {
        $(this).animate({
            width: 200,
            height: 100
        })
    })
</script>

---

4. jQuery属性操作

4.1 设置或获取元素固有属性 prop()

所有元素固有属性就是元素自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。

1.获取属性语法
prop(‘属性’)

2.设置属性语法

prop(‘属性’，‘属性值’)

如：

<body>
    <a href="http://www.baidu.com"></a>
    <script src="../jQuery.mini.js"></script>
    <script>
        // 1.获取属性
        console.log($('a').prop('href'));
        // 2.设置属性
        $('a').prop('href', 'https://www.taobao.com/');
        console.log($('a').prop('href'));
    </script>
</body>

4.2 设置或获取自定义元素属性值 attr()

1.获取属性语法
attr(‘属性’)

2.设置属性语法

attr(‘属性’，‘属性值’)

用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index=‘1’。
如：

<body>
    <a href="http://www.baidu.com" index='1'></a>
    <script src="../jQuery.mini.js"></script>
    <script>

        // 1.获取自定义属性
        console.log($('a').attr('index'));

        // 2.设置自定义属性
        $('a').attr('index', 2);
        console.log($('a').attr('index'));
    </script>
</body>

---

5. jQuery文本属性值

主要针对元素的内容还有表单的值操作。

5.1 普通元素内容html()

相当于原生innerHTML

html() //获取元素内容

html(“内容”)//设置元素内容

<script>
    let n = $('div').html();
    console.log(n);
    $('div').html('<span>321</span>');
    n = $('div').html();
    console.log(n);
</script>

5.2 普通元素文本内容text()

相当于原生innerText

text() //获取元素内容

text(“内容”)//设置元素内容

<script>
    let n = $('div').text();
    console.log(n);
    $('div').text('321');
    n = $('div').text();
    console.log(n);
</script>

5.3 表单的值 val()

相当于原生value
val() //获取元素内容

val(“内容”)//设置元素内容

<body>
    <input type="text" value="123">
    <script src="../jQuery.mini.js"></script>
    <script>
        let n = $('input').val();
        console.log(n);
        $('input').val('321');
        n = $('input').val();
        console.log(n);
    </script>
</body>

---

6. jQuery元素操作

主要是遍历、创建、添加、删除元素操作

6.1 each遍历

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。
语法一：

$(‘div’).each(function (index, domEle) { })

1. 里面的回调函数有两个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象
2. 所以想要使用jquery方法，需要给这个dom元素转换为jQuery对象

<div>1</div>
<div>2</div>
<div>3</div>
<script src="../jQuery.mini.js"></script>
<script>
    $('div').each(function (index, domEle) {
        console.log(index);
        console.log(domEle);
    })
</script>

语法二：

$.each($('div'), function (index, ele) { })

<div>1</div>
<div>2</div>
<div>3</div>
<script src="../jQuery.mini.js"></script>
<script>
    $.each($('div'), function (index, ele) {
        console.log(index);
        console.log(ele);
    })
</script>

6.2 创建元素

语法：

$('html内容')；

如：

let d = $('<div></div>');

6.3 添加元素

1.内部添加

$(‘父元素’).append(添加的元素) //内部添加并放到内容的最后面

$(‘父元素’).prepend(添加的元素) //内部添加并放到内容的最前面

2.外部添加

$(‘元素’).after(添加的元素) //外部添加并放到当前元素的后面

$(‘元素’).before(添加的元素) //内部添加并放到当前元素的前面

6.4 删除元素

$(‘元素’).remove() //可以删除匹配的元素

$(‘元素’).empty() //可以删除匹配的元素里面的子节点

$(‘元素’).html(’’) //可以删除匹配的元素里面的子节点

<body>
    <div class="father" style="background-color: pink;">
        <div class="son">123</div>
    </div>

    <script src="../jQuery.mini.js"></script>
    <script>
        // 1.创建
        let d = $('<div>new1</div>');
        // 2.添加
        // 内部添加
        $('.father').append(d);//添加到内部之后
        let d2 = $('<div>new2</div>');
        $('.father').prepend(d2);//添加到内部之前

        // 外部添加
        let d3 = $('<div>new3</div>');
        $('.father').after(d3);//外部之后添加
        let d4 = $('<div>new4</div>');
        $('.father').before(d4);//外部之前添加

        // 3.删除
        $('.father .son').remove();
    </script>
</body>

---

7. jQuery尺寸、位置操作

7.1 jQuery尺寸

如下：

<style>
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid #ccc;
            margin: 10px;
        }
    </style>

<body>
    <div></div>
    <script src="../jQuery.mini.js"></script>
    <script>
        console.log($('div').width());
        console.log($('div').innerWidth());
        console.log($('div').outerWidth());
        console.log($('div').outerWidth(true));
    </script>
</body>

7.2 jQuery位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

1 offset()设置或获取元素偏移

1. offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
2. 该方法有两个属性left、top，分别用于获取距离文档头部与左侧的距离
3. 可以设置元素的偏移：offset（{top:10,left:30}）

2.position()获取元素偏移

• position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准
• 只能获取不能设置偏移

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 150px 200px;
        }
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
    <script src="../jQuery.mini.js"></script>
    <script>
        // 1.offset
        console.log($('.son').offset()); // 获取偏移
        $('.son').offset({
            top: 300,
            left: 300
        })
        console.log($('.son').offset());
        console.log($('.son').position());
    </script>
</body>
</html>

3.scollTop()、scollLeft()设置或获取元素被卷去的头部和左侧

<script>
    $(window).scroll(function () {
        console.log($(this).scrollTop());
        console.log($(this).scrollLeft());
    })
</script>