jQuery基础入门介绍

最新推荐文章于 2024-04-29 10:40:41 发布

CamphorBloom

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量749

点赞数

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

本文链接：https://blog.csdn.net/weixin_45719444/article/details/122012783

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

（jQuery官网logo）

什么是 jQuery ？

顾名思义，就是“js”+“query”组合词。它是一个 JavaScript 函数库，正如官方所说是一个轻量级的"写的少，做的多"的 JavaScript 库。

为什么使用 jQuery ？

网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的，而且提供了大量的扩展。

安装

有两个版本的 jQuery 可供下载：

Production version（compressed） - 用于实际的网站中，已被精简和压缩。
Development version （uncompressed）- 用于测试和开发（未压缩，是可读的代码）。

使用

您可以使用以下方法在网页中添加 jQuery：

从 jquery.com 下载 jQuery 库。
从 CDN 中载入 jQuery（如https://www.bootcdn.cn/jquery/）。

在 HTML5 中，JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

因此 <script> 标签中不必显式使用 type="text/javascript"。

示例：

代码中出现的连续的通过 ‘.’调出属性，这个特性叫做链式编程。

简洁形式的入口函数写法（$与jQuery可相互替换）：

 $(function () {
    // ...
   });

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery和原生JS入口函数的区别</title>    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
     
        window.onload = function (ev) {
            // 1.通过原生的JS入口函数可以拿到DOM元素
            var images = document.getElementsByTagName("img")[0];
            console.log(images);
            // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width = window.getComputedStyle(images).width;
            console.log("onload: ", width);
        }
      
        $(document).ready(function () {
            // 1.通过jQuery入口函数可以拿到DOM元素
            var $images = $("images");
            console.log($images);
            // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
            var $width = $images.width();
            console.log("ready: ", $width);
        });
    </script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">
</body>
</html>

原生JS的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待dom文档树加载完成就开始执行，并不会等待图片、文件的加载。

另外如果有多个入口函数，原生JS会覆盖前面的，只执行一次；而jQuery每个入口函数都会执行一次。

jQuery冲突问题

比如在项目中，其它框架包恰好也使用了$符这么一个全局对象，那么jQuery的$可能会被覆盖，写好的程序将不起作用了。解决办法有下面几种：

1、释放$的使用权（释放操作必须在其它jQuery代码之前），改为使用jQuery。

2、调用jQuery.noConflict()方法，自定义访问符号。

jQuery核心函数

其实$()就代表调用jQuery的核心函数，里面可传递的参数有这些：

   <script>
            // 1.接收一个函数
        $(function () {
            alert("hello world！");
            // 2.接收一个字符串（选择器）
            // 返回一个jQuery对象, 对象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);
            // 3.接收一个字符串代码片段
            // 返回一个jQuery对象, 对象中保存了创建的DOM元素
            var $p = $("<p>我是段落P</p>");
            console.log($p);
            $box1.append($p);
            // 3.接收一个DOM元素
            // 返回一个被包装的jQuery对象
            var span = document.getElementsByTagName("span")[0];
            console.log(span);
            var $span = $(span);
            console.log($span);
        });
    </script>

参考：jQuery 简介 | 菜鸟教程 | jQuery基础入门入口函数

CamphorBloom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础入门介绍

（jQuery官网logo）什么是 jQuery ？顾名思义，就是“js”+“query”组合词。它是一个 JavaScript 函数库，正如官方所说是一个轻量级的"写的少，做的多"的 JavaScript 库。为什么使用 jQuery ？网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的，而且提供了大量的扩展。安装有两个版本的 jQuery 可供下载：Production version（compressed） - 用于实际的网站中，已被精简和压缩。 D.
复制链接

扫一扫