如何更快的学习JQuery基础

wbw五十度灰

于 2020-12-16 17:20:32 发布

阅读量2.1k

点赞数 5

分类专栏： JQuery基础文章标签： JavaScript框架 JQuery DOM操作插件对象转换

本文链接：https://blog.csdn.net/m0_51095089/article/details/111294149

版权

JQuery基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.1 JS框架概述

框架（Framework）是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法。框架是完成某种功能的半成品，框架是将我们日常的繁琐的代码进行抽取，并提供出更加简洁，功能更加强大的语法实现，我们可以对底层的API进行封装，对外提供更加简单的语法来实现最终的功能，从而提高开发效率。

1.2 JQuery框架介绍

1.2.1 JQuery概述

JQuery是一个优秀的JavaScript的轻量级框架之一，兼容CSS3和各大浏览器，提供了DOM、events、animate、ajax等简易操作。并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。jquery的宗旨是write less do more。
JQuery插件，就是利用JQuery技术实现具有特定功能的JS效果。

1.2.2 JQuery的作用

JQuery最主要的是简化JS的DOM树的操作。
DOM树：
在介绍 DOM 树之前，首先要清楚，DOM 规范中，对于文档的表示方法并没有任何限制，因此，DOM 树只是多种文档结构中的一种较为普遍的实现方式。

DOM 结构构成的基本要素是 “节点“，而文档的结构就是由层次化的节点组成。在 DOM 模型中，节点的概念很宽泛，整个文档（Document）就是一个节点，称为文档节点。除此之外还有元素（Element）节点、属性节点、Entity节点、注释（Comment）节点等。

了解了 DOM 的结构是由各种的子节点组成的，那么以 HTMLDocument 为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是 DOM树。

1.2.3 JQuery框架的下载与引入

Query的官方下载地址：http://www.jquery.com
JQuery的版本：

1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本
开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。
在需要使用jQuery的html中使用js的引入方式进行引入，如下：

<script type="text/javascript" src="jquery-x.x.x.js></script>

1.2.4 JQuery对象与JS对象之间的转换

JQuery与JS的区别：
a.加载事件不同，JS加载完成事件一个HTML页面只能有一个，后面的会覆盖前面的。JQ加载完成事件一个HTML页面可以有多个。
b.对象也不同，JS对象与JQ对象不同，不能互相直接调用对方成员，需要互相转换后才能调用。建议：将JS对象转换为JQ对象进行调用。
JQuery本质上虽然也是JS，但如果使用JQuery的属性和方法那么必须保证对象是JQuery对象而不是JS方式获取的DOM对象。
使用JS方式获取的对象是JS的DOM对象，使用JQuery方式获取的对象是JQuery对象，两者的转换关系如下：
JS的DOM对象转换为JQuery对象语法：$(JS对象)
JQuery对象转换为JS对象语法：jQuery对象【索引】或者jQuery对象.get(索引)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象与JS对象之间的转换</title>
    <style type="text/css"></style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //js的加载完成事件
        window.onload=function () {
            alert("js加载完成事件1");
        }
 
        window.onload=function () {
            alert("js加载完成事件2");
        }
 
        //Jquery加载完成事件
        $(function () {
           alert("Jquery加载事件1");
        });
 
        $(function () {
            alert("Jquery加载事件2");
        });
    </script>
</head>
<body>
 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象与JS对象之间的转换</title>
    <style type="text/css"></style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取标签对象弹出标签体内容
            //获取js对象
            var jsObj = document.getElementById("myDiv");
            //使用js对象弹出标签体内容
            alert("使用js对象弹出标签体内容"+jsObj.innerHTML);
 
            //获取jq对象，使用$f符号获取的对象都是jq对象
            var jqObj = $("#myDiv");
            alert("使用jq对象弹出标签体内容:"+jqObj.html());
 
            //使用js对象转换为jq对象调用成员弹出标签体内容
            alert("使用js对象转换为jq对象调用成员弹出标签体内容:"+$(jsObj).html());
 
            //使用jq对象转换为js对象调用成员弹出标签体内容
            alert("使用jq对象转换为js对象调用成员弹出标签体内容:"+jqObj[0].innerHTML);
        });
    </script>
</head>
<body>
<div id="myDiv">Hello World</div>
</body>
</html>

wbw五十度灰

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
如何更快的学习JQuery基础

1.1 JS框架概述框架（Framework）是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法。框架是完成某种功能的半成品，框架是将我们日常的繁琐的代码进行抽取，并提供出更加简洁，功能更加强大的语法实现，我们可以对底层的API进行封装，对外提供更加简单的语法来实现最终的功能，从而提高开发效率。1.2 JQuery框架介绍1.2.1 JQuery概述JQuery是一个优秀的JavaScript的轻量级框架之一，兼容CSS3和各大浏览器，提供了DOM、events、animate、
复制链接

扫一扫