JQuery专题(一)-JQuery基础

Jerry_350

已于 2022-10-09 10:46:47 修改

阅读量289

点赞数

文章标签： jquery javascript 前端

于 2022-10-03 13:22:44 首次发布

本文链接：https://blog.csdn.net/weixin_43139024/article/details/127151412

版权

文章目录

1.开始jQuery的学习之旅

1.1.jQuery简介

JQuery是继Prototype之后又一款非常优秀的JavaScript框架，由John Resig创建于2006年1月。jQuery体积小，运行速度快，它独有的极为强大的选择器，使得页面元素的查找变得非常简单，其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点。

Jquery本身也是JS，只不过是对原生的JS进行封装，形成了一个JS的开发库!

JQuery官方介绍：
在这里插入图片描述

1.2.jQuery简介

JQuery的核心理念是：“write less, do more”，即：写得少，做得多!
在这里插入图片描述
jQuery独特的选择器、链式的DOM操作、可靠的事件处理机制和封装完善的Ajax都是其他JavaScript框架望尘莫及的。

2.jQuery快速入门

2.1.第1个jQuery程序

需求：当页面加载完成之后，alert弹出"Hello World!"。
准备：新建Web工程：jquery，新建测试目录和html文件
在这里插入图片描述

2.1.1.window.onload加载

在这里插入图片描述
部署到tomcat，测试
http://127.0.0.1:8080/jquery/a_quickstart/01_helloworld.jsp

2.1.2.jQuery的ready加载

1.引入jQuery
a.在项目中加入jQuery的js文件
在这里插入图片描述
b.将文件引入到页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入JQuery的开发库-->
    <script src="js/jquery-3.6.0.js"></script>

    <script type="text/javascript">

        //页面加载的时候执行
        //window.οnlοad=function () {
            //alert("Hello,JavaScript!!!");
        //}

        /**
         * 01- 页面加载的时候执行
         */
        jQuery(window).ready(function () {
            alert("标准的页面加载事件写法1！");
        });

        /**
         * 02- 页面加载的时候执行
         */
        jQuery(document).ready(function () {
            alert("标准的页面加载事件写法2！");
        });

        /**
         * 03-简化写法
         */
        $(document).ready(function () {
            alert("标准的页面加载事件写法3！");
        });

        /**
         * 04-终极简化写法
         */
        $(function () {
            alert("标准的页面加载事件写法4！");
        });

    </script>

</head>
<body>

</body>
</html>

2.1.3.window.onload和jQuery的ready区别

在这里插入图片描述
代码示例：

<script type="text/javascript">
	// 页面加载完成之后执行
	window.onload = function() {
		alert("Hello World！---------传统js方式");
	};
	// 赋值操作，会覆盖之前的onload
	window.onload = function() {
		alert("Hello World！---------传统js方式2");
	};
	
	/*
		代码解析：
		
		jQuery()
			这是jQuery的核心函数，可以把这个函数理解为一个工厂，生产出来的是一个jQuery对象
		
		jQuery(document)
			把document转换为jQuery对象
		
		jQuery(document).ready(回调函数);
			既然是jQuery对象，就可以调用jQuery对象中的方法！
			ready(回调函数)，这个方法的作用是：DOM载入就绪后，执行回调函数中的代码
	 */
	
	// 不会覆盖windown.onload
	jQuery(document).ready(function() {
		alert("Hello World！---------jquery方式");
	});
	
	// 不会覆盖之前的ready
	jQuery(document).ready(function() {
		alert("Hello World！---------jquery方式2");
	});
</script>

运行结果：

alert("Hello World！---------jquery方式111");
alert("Hello World！---------jquery方式222");
alert("Hello World！---------传统js方式222");

结论：先按顺序执行jQuery的每一个ready事件，最后执行最后一次绑定的window.onload事件

2.1.4.jQuery的别名$

为了简化代码，jQuery定义了一个全局的变量 $作为别名来代替 j Q u ery ，即$ =jQuery，$是jQuery的别名
例如，jQuery(document).ready(回调函数); 可以简写为 $(document).ready(回调函数);
在这里插入图片描述

2.2.jQuery的核心函数

jQuery(callback) //页面onload函数，相当于jQuery(document).ready(callback)

jQuery(html[, prop]) //将html片段转换为jQuery对象$(“

”)

    <script type="text/javascript">

        //JS DOM标签转换化 Jquert中的对象
        var t=jQuery("<input type='button' value='哈哈'/>");
        alert(t.val());

        //简写
        var t=$("<input type='button' value='哈哈'/>");
        alert(t.val());

    </script>

   注意： JS和Jquery不能混用！可以把JS对象转为Jquery对象！

jQuery(selector [, context]) //根据选择器查找页面元素，默认查找整个文档document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.js"></script>

    <script type="text/javascript">

        //JS DOM标签转换化 Jquert中的对象
        //var t=jQuery("<input type='button' value='哈哈'/>");
        //alert(t.val());

        //简写
        var t=$("<input type='button' value='哈哈'/>");
        //alert(t.val());

        //页面加载的时候执行
        $(function () {
            //标签选择器
            $("h1").css("color","red").css("background","green");
            //ID选择器
            $("#h").css("color","red");
        });

    </script>

</head>
<body>

   <h1>哈哈</h1>
   <h2 id="h">呵呵</h2>
   <h2>呵呵</h2>

</body>
</html>

2.2.1.$(callback)：页面加载完成事件

用法：
在这里插入图片描述
简化过程：

jQuery(document).ready(callback) ——>  $(document).ready(callback)  ——>  $(callback)

2.2.2.$(html代码)：将html转换为jQuery对象

用法：
在这里插入图片描述

3.2.3.$(selector)：根据选择器查找页面元素

用法：
在这里插入图片描述

3.3.jQuery对象和DOM对象

3.3.1.jQuery对象和DOM对象的区别

什么是jQuery对象？
jQuery对象是jQuery框架独有的，通过jQuery的核心函数$(selector)获取。
selector也可以是一个DOM对象，jquery会把DOM对象转换为jQuery对象

什么是DOM对象？
DOM的全称是"Document Object Model"，即文档对象模型，而DOM对象指的是
某个或某些具体的节点对象，通过document.getElementXXX()获取。

两者之间的区别？
jQuery对象只能使用jQuery对象的属性和方法，不能直接使用DOM对象的属性和方法；
同样，DOM对象只能使用DOM对象的属性和方法，不能直接使用jQuery对象的属性和方法。
两种对象的属性和方法不通用！

jQuery对象在使用其属性和方法的时候，实际上底层使用的依然是DOM对象中的属性和方法。

那么，在页面中如何区分jQuery对象和DOM对象呢？在开发中有个约定：在jQuery对象的前面加$，例如：

var $mydiv = $(“#mydiv”); // $mydiv是jQuery对象
var mydiv = document.getElementById(“mydiv”); // mydiv是DOM对象