系统学习 jQuery （一）核心

最新推荐文章于 2021-06-08 17:03:19 发布

Mir2

最新推荐文章于 2021-06-08 17:03:19 发布

阅读量382

点赞数 1

分类专栏： JavaScript 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/zaqwsx20/article/details/73610120

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

做前端页面的时候 jQuery 用的也比较多了，可从来没有仔细看过它的文档，趁着最近工作不忙来对着文档来缕一缕 jQuery 的 API 。

jQuery 通过 jQUery 函数 jQuery 对象和 jQuery 静态方法来提供功能，其核心就是 jQuery 对象的创建，查找，队列操作和扩展方法。

jQuery 函数

$(fn) 在文档加载完成后执行 fn ，等同于 $(document).ready(fn)

$(dom) 将 dom 对象转换为 jQuery 对象, dom 可以是一个包含 dom 对象的数组

$(selector, [context]) 最常用的，在页面上查找并构造 jQuery 对象，默认在整个文档下查找，如果给定 context 则只在 context 下查找

$(html) 通过 html 代码创建一个 jQuery 对象，在需要动态创建页面元素时很有用

jQuery 对象方法

selector 获得查找 jQuery 对象时用的选择器

context 获得查找 jQuery 对象时用的 context

each 遍历 jQuery 对象内的 dom 元素

get([index]) 获得 jQuery 对象内的第 index 个 dom 元素，若不传递 index 则获取所有 dom 元素

index([obj]) 获得 jQuery 对象在文档中相对其兄弟的编号，若传递 obj 则获得 obj 在 jQuery 对象中的编号

data([key], [value]) 在 dom 对象上设置或存储数据，可以是任意 js 数据

queue(fn) 为 jQuery 对象添加队列任务

dequeue() 结束 jQuery 对象的当前队列任务

clearQueue() 结束 jQuery 对象所有的队列任务

jQuery 静态方法

$.fn.extend(obj) 扩展 jQuery 对象

$.extend(obj) 扩展 jQuery静态方法

$.noConflict([ext]) 解决全局变量 $ 和 jQuery 带来的冲突，它返回 jQuery 函数，并禁用全局的 $ 。若 ext = true 则同时禁用全局的 jQuery 。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>

<!-- ################## jQuery对象操作 start ################### -->
<div id="obj">
    <p></p>
    <p></p>
    <p></p>
</div>

<script>
    $(function() {
        // $(selector, [context])
        console.log($('p', $('#obj')).length);
        console.log($('p').length);
        // $(dom)
        $(document.getElementById('obj')).text('$(dom)');
        // $(html)
        $('<p>我是动态添加的</p>').appendTo($('body'));

        // selector context
        var jq = $('p', $('#obj'));
        console.log(jq.selector); console.log(jq.context);

        // each(func)
        var num = 0;
        $('#obj>p').each(function() {
           if(++num >=  3) return false;
           this.innerHTML = '我是 each 方法修改的' + num;
        });

        // get([index])
        console.log($('p').get());
        console.log($('p').get(0));

        // index
        console.log($('div').index($('#queue')));
        console.log($('#queue').index());

        // data([key], [value])
        $('#obj').data({name: 'mcj', age: 26});
        console.log($('#obj').data('name'));
        console.log($('#obj').data());
    });
</script>
<!-- ################## jQuery对象操作 end ###################-->

<!-- ################## jQuery队列操作 start ###################-->
<div id="queue">1</div>
<script>
    // queue dequeue clearQueue
    var num = 1;
    $('#queue').queue(function() {
        $(this).html(num++);
        var that = this;
        setTimeout(function() {
            $(that).dequeue();
        }, 1000);
    });
    $('#queue').queue(function() {
        $(this).html(num++);
        var that = this;
        setTimeout(function() {
            $(that).dequeue();
        }, 1000);
    });
    $('#queue').queue(function() {
        $(this).html(num++);
        var that = this;
        setTimeout(function() {
            $(that).dequeue();
        }, 1000);
    });
    $('#queue').click(function() {
        $('#queue').clearQueue();
    });
</script>
<!-- ################## jQuery队列操作 end ###################-->

<!-- ################## jQuery扩展 start ###################-->
<div id="ext">
    <p></p>
    <p></p>
</div>
<script>
$.fn.extend({
    sayHello: function() {
        this.html('hello world!');
    }
});
$.extend({
    sayHello: function() {
        console.log('hello world!');
    }
});
$('#ext *').sayHello();
$.sayHello();
</script>
<!-- ################## jQuery扩展 end ###################-->
</body>
</html>

Mir2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
系统学习 jQuery （一）核心

做前端页面时 jQuery 用的也比较多了，但从来没有系统地看过它的文档。趁着最近工作不忙来对着文档来缕一缕 jQuery 的用法，做一个系列的总结，对于用过 jQuery 想系统了解它的 API 的同学应该有帮助。 $(function() { // $(selector, [contex
复制链接

扫一扫