初识jQuery

jQuery学习

创建时间:2020-07-08 01:50

字数:676 阅读:

评论:

初识jQuery
1. jQuery的使用

初识jQuery

jQuery的使用

jQuery是什么？

经过这段时间的学习，我了解到jQuery是一款优秀的JavaScript库，最主要的用途是用来做查询（jQuery=js+Query），如jQuery官方Logo副标题说的那样（write less, do more），使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。
jquery的版本问题
jquery-1.12.4.js：未压缩的版本，适用于学习开发环境，源码清晰，易阅读（比较官方）。

为什么要使用jQuery？

通过我对原生JS的理解，以及这段时间jQuery的学习，总结以下几点：
1、查找元素的方法多种多样，非常灵活；
2、拥有隐式迭代特性，因此不再需要手写for循环了；
3、完全没有兼容性问题；
4、实现动画很简单，功能也比较强大；
5、代码简单实用、很粗暴。

如何使用jQuery（实例）

下载jQuery库
在实际项目中，我们将这些库放到js文件夹下

引入jQuery库（第六行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jQuery-HelloWorld</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(document).ready(function () {
            alert("hello lnj");
        });
    </script>
</head>
<body>

</body>
</html>

原生JS和jQuery的加载模式的区别

jQuery中编写入口函数，后面的不会覆盖前面的

<script>
	    $(document).ready(function () {
            alert("hello lnj1");
        });
        $(document).ready(function () {
            alert("hello lnj2");
        });
</script>

这里就会先展示前一个后展示第二个，而原生JS只会展示第二个。

通过jQuery入口函数可以拿到DOM元素
通过jQuery入口函数不可以拿到DOM元素的宽高

jQuery入口函数多种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery入口函数的写法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // 1.第一种写法
        $(document).ready(function () {
            // alert("hello lnj");
        });

        // 2.第二种写法
        jQuery(document).ready(function () {
            // alert("hello lnj");
        });

        // 3.第三种写法(推荐)
        $(function () {
            // alert("hello lnj");
        });

        // 4.第四种写法
        jQuery(function () {
            alert("hello lnj");
        });
    </script>
</head>
<body>

</body>
</html>

jQuery冲突问题

释放$的使用权，自定义访问符号

<script>
        var nj = jQuery.noConflict();
        nj(function () {
            alert("hello lnj");
        });
</script>

伪数组

有0到length-1的属性，有length属性。

小结

有好久没有写博客了，由于疫情影响大二下半学期我几乎都在家，也变得懒惰了不少，但是学习还是不能停止，加油，小伙伴们！！！

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2113132982@qq.com