1、jQuery基础

青叶的全栈之路

于 2020-06-23 19:07:55 发布

阅读量234

点赞数

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/dream_AI/article/details/106930183

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JQuery基础

相关概念
JS对象和jQuery对象
入口函数

一、相关概念

1.1、什么是JQuery？

JQuery是一个快速、简洁的JavaScript框架，用于简化JavaScript的开发（Write less，Do more）。
JQuery本质就是一个JS文件，里面封装了一堆的JS方法、属性、对象，和Java中的工具类差不多。只要孰知里面的方法名及其作用，就可以将其导入项目中直接调用方法就完事了，可以大大提高JS的开发效率。

1.2、JQuery版本

JQuery目前主要有3个版本，其核心要点和区别如下：

1.x：兼容IE678，使用最为广泛，官方只做bug维护，不再进行功能新增。应付一般项目绰绰有余！
- 最终版本：1.12.4 （2016年5月20日）
2.x：不兼容IE678，很少使用，官方只做bug维护，不再进行功能新增。
- 最终版本：2.2.4 （2016年5月20日）
3.x：不兼容IE678，功能很多，但是很多老的JQuery插件都不支持该版本。
- 最新版本：3.5.0 （2020年6月15日）

1.3、JQuery引入

每个版本的JQuery都有两个文件，两个文件都是有用的。

jquery-xxx.js：JQuery源代码，有较好的缩进和注释，阅读效果很好，一般是给开发人员使用的。
jquery-xxx.min.js：也是JQuery源代码，但是没有缩进和注释，基本上无法阅读，但是体积很小，文件加载快，所以项目中一般都会引入这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script src="../js/jquery-1.12.4.js"></script><!--JQuery导入-->
</head>
<body>
</body>
</html>

二、JS对象和jQuery对象

2.1、JS对象和jQuery对象的区别

在jQuery中，对JS对象进行了二次封装。产生的结果就是jQuery对象和JS对象是两个东西，很多JS对象的方法和属性在jQuery对象中丢失，尽管jQuery中有相关替代的方法和属性。

<body>
    <div id="div1">AAAA......</div>
</body>
<script>
	var div1 = $("#div1");
    div1.innerText = "BBBB......";//jQuery中的替代方法：div1.html("BBBB.......")
    //运行结果：页面显示 AAAA......
    //原因：div1是jQuery对象，innerText是JS对象，方法和属性不互通。
</script>

2.2、JS对象和jQuery对象的转换

JS对象——>>jQuery对象：$(JS对象)

<body>
    <div id="div1">AAAA......</div>
</body>
<script>
    var div1 = document.geElementById("div1");
    $(div1).html("BBBB......");
    //运行结果：页面显示 BBBB......
</script>

jQuery对象——>>JS对象：jQuery对象[索引]

<body>
    <div id="div1">AAAA......</div>
</body>
<script>
    var div1 = $("#div1");
    div1[0].innerHTML = "BBBB......";
    //运行结果：页面显示 BBBB......
</script>

jQuery数组对象可以对数组中的每一个对象进行统一处理：$("div1").html("AAA")

三、入口函数

3.1、JS的入口函数

JS的入口函数是：window.οnlοad=fun1。window.onload是window对象的一个属性，和变量一样，一个属性只能对应一个值。所以不管window.onload定义多少个，都只会将前面的值覆盖，即只有最后一个window.onload有效。

<body>
    <div id="div1">AAAA......</div>
</body>
<script>
	function fun1(){
        console.log(111);
    };
    function fun2(){
        console.log(222);
    };
    window.onload = fun1;
    window.onload = fun2;
    //运行结果：控制台输出 222
</script>

3.2、jQuery的入口函数

jQuery的入口函数是：$(function(){})。jQuery的入口函数是可以定义多个的，且每一个都有效。最终的作用顺序取决于其在文件中的位置，从上至下依次生效。

<body>
    <div id="div1">AAAA......</div>
</body>
<script>
	$(function(){
		console.log(111); 
    })
	$(function(){
		console.log(222); 
    })
    //运行结果：控制台输出 111  222
</script>

3.3、JS和jQuery的入口函数区别

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

青叶的全栈之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1、jQuery基础

JQuery基础相关概念JS对象和jQuery对象入口函数一、相关概念1.1、什么是JQuery？ JQuery是一个快速、简洁的JavaScript框架，用于简化JavaScript的开发（Write less，Do more）。 JQuery本质就是一个JS文件，里面封装了一堆的JS方法、属性、对象，和Java中的工具类差不多。只要孰知里面的方法名及其作用，就可以将其导入项目中直接调用方法就完事了，可以大大提高JS的开发效率。1.2、JQuery版本JQuery目前主要有
复制链接

扫一扫

专栏目录