Mr.J-- jQuery学习笔记(一)--初入jQuery

最新推荐文章于 2021-02-23 15:41:31 发布

原创最新推荐文章于 2021-02-23 15:41:31 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery学习专栏收录该内容

33 篇文章

订阅专栏

本文介绍了jQuery的基础知识，包括jQuery是什么、如何下载及使用，对比了原生JS与jQuery查找DOM元素的差异，探讨了两者入口函数的加载模式和覆盖原则，并讲述了常见的jQuery冲突解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery使用

点击链接：jQuery下载

下载未解压版

解压版和未解压版区别：

解压版：

未解压版：

jQuery学习可以在菜鸟教程，w3c，jQuery中文文档等网站学习

经典的Hello　world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jQuery-HelloWorld</title>
    <script src="./jquery.js"></script>
    <script>
        // 1.原生JS的固定写法
        window.onload = function (ev) {  }

        // 2.jQuery的固定写法
        $(document).ready(function () {
            alert("Hello World!");
        });
    </script>
</head>
<body>

</body>
</html>

利用原生JS查找DOM元素

 window.onload = function (ev) {
        //利用原生JS查找DOM元素
        var div1 = document.getElementsByTagName("div")[0];
        var div2 = document.getElementsByClassName("box1")[0];
        var div3 = document.getElementById("box2");

         console.log(div1,div2,div3);

         //利用原生JS修改背景颜色
        div1.style.backgroundColor = "yellow";
        div2.style.backgroundColor = "blue";
        div3.style.backgroundColor = "green";

    }

利用jQuery查找DOM元素

$(function () {
         var $div1 = $("div")[0];
         var $div2 = $(".box1")[0];
         var $div3 = $("#box2")[0];

         console.log($div1);
         console.log($div2);
         console.log($div3);

        var $div1 = $("div");
        var $div2 = $(".box1");
        var $div3 = $("#box2");

        $div1.css({
            background:"red"
        })
        $div2.css({
            background:"yellow"
        })
        $div3.css({
            background:"green"
        })

通过比较，jQuery的操作显得简单，对于修改style样式，改写方式和css几乎一样。原生JS写的代码较多，运行速度相对很慢（代码量越少，相对速度越快）

原生JS和jQuery入口函数的区别

在HTML页面中插入一张图片，对这张图片进行操作：

<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">

加载模式

 window.onload = function (ev) {
            // 1.通过原生的JS入口函数可以拿到DOM元素
            var images = document.getElementsByTagName("images")[0];
            console.log(images);
            // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width = window.getComputedStyle(images).width;
            console.log("onload", width);
        }

原生JS和jQuery入口函数的加载模式不同

原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行

jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行

  $(document).ready(function () {
            // 1.通过jQuery入口函数可以拿到DOM元素
            var $images = $("images");
            console.log($images);
            // 2.通过jQuery入口函数不可以拿到DOM元素的宽高 !!!
            var $width = $images.width();
            console.log("ready", $width);
        });

覆盖原则

   window.onload = function (ev) {
             alert("hello lnj1");
         }
         window.onload = function (ev) {
             alert("hello lnj2");
         }

1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的

2.jQuery中编写多个入口函数,后面的不会覆盖前面的

 $(document).ready(function () {
            alert("hello lnj1");
        });
        $(document).ready(function () {
            alert("hello lnj2");
        });

入口函数的各种写法

１.　

 $(document).ready(function () {
             alert("hello lnj");
        });

２.

jQuery(document).ready(function () {
            alert("hello lnj");
        });

３.

 $(function () {
            alert("hello lnj");
        });

４.

jQuery(function () {
            alert("hello lnj");
        });

以上写法，见的最多并且使用最多的写法是第三种。

jQuery冲突问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery冲突问题</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/test.js"></script>
    <script>
       
        var test = jQuery.noConflict();
        test(function () {
            alert("hello lnj");
        });
    </script>
</head>
<body>

</body>
</html>