JavaWeb开发-jQuery技术

最新推荐文章于 2024-08-08 05:12:48 发布

釣餌锒鐺

最新推荐文章于 2024-08-08 05:12:48 发布

阅读量532

点赞数 1

分类专栏： JavaWeb 文章标签： java java-ee idea jquery

本文链接：https://blog.csdn.net/qq_57452280/article/details/119701455

版权

本文详细介绍了jQuery的入门，包括jQuery的简介、核心函数、选择器和DOM操作。从jQuery的选择器分类如基本选择器、层次选择器、过滤选择器，到DOM操作如属性操作、CSS样式修改、节点的添加、删除和替换，深入探讨了jQuery的使用方法和技巧。通过实例展示了如何利用jQuery实现动态表格的增删、全选/全不选功能和下拉框选项的移动。

摘要由CSDN通过智能技术生成

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 e r y ，即$ =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对象

3.jQuery选择器

3.1.概述

我们学习jQuery，主要是学习jQuery中的方法，来简化js开发。因此，学习jQuery主要是学习jQuery对象的各种方法，但前提是要先获取jQuery对象，即操作必先选中（获取），一切从选择器开始！
如何选中元素？

语法：$(selector)

在这里插入图片描述
补充：context可选的，如果指定，就会在指定的元素下查找。默认值：document.

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM、Ajax等各种操作都依赖于选择器。
选择器的语法可参考官方手册的选择器章节，如下图所示
在这里插入图片描述

jQuery内部提供了三大类共9种选择器

基本选择器
层级选择器
过滤选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器

过滤选择器一般用于对其他选择器的补充（缩小选择范围）

3.2.基本选择器：第1大类

基本选择器，是jQuery所有选择器的基础，通过元素的id属性、class属性、标签名称进行选择。

基本选择器的语法和用法：
在这里插入图片描述

#id（id选择器）根据id属性查找一个元素例如：$("#mydiv")
element（标签选择器）根据元素标签名称查找所有元素，例如： $(“div”);
.class（类选择器）根据class属性查找元素，例如：$(".myclass");原理是遍历所有的DOM节点，然后逐个判断是否使用了
指定的类选择器，可以想象，如果页面上节点很多的情况下，效率很低，因此类选择器通常和标签选择器同时使用，
例如：$("div.myclass")，意思是获取所有使用了.myclass类的div元素，这样，jQuery会先找页面中的所有div，然后再遍历判断，大大减少了循环次数，从而提高了查询效率！
selector1,selector2,selectorN（组合选择，多选，混用选择器）将每一个选择器匹配到的元素合并后一起返回
例如：$("#myinput,div,p.pClass"); 意思是获取页面中ID为myinput的元素和所有的div元素和使用了.pClass的p元素
此种方式获取的是所有匹配元素的并集
* 匹配所有元素例如 $("*"); 意义不大！

【示例】

<div>DIVAAAA</div>
<div class="demo">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="demo">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="demo">PBBBB</p>
<p>PCCCC</p>

需求：
获取页面中ID为foo的元素的内容
通过each()遍历所有div，在每个div元素前加入"hello"
通过size() 或 length 打印页面中 class属性为 demo 的元素数量
获取class属性为demo的div的个数
相关函数参考文档：一定要自己点进去看看，里面有例子
在这里插入图片描述

脚本代码：

<script type="text/javascript">
	jQuery(function($) {
   
		//获取页面中ID为foo的元素的内容
		//alert( $("#foo").html() );
		//通过each()遍历所有div，在每个div元素前 加入"hello"
		// each中的函数中的i表示div的索引，o表示当前div对象：DOM对象！DOM对象！DOM对象！
		/* $("div").each(function(i, o) {
			// this === o  表示当前DOM对象 
			var newHTML = "hello" + $(this).html();
			$(this).html(newHTML);
		}); */
		//$("div").prepend("hello");
		//$("div").append("world");
		
		//通过size() 或 length 打印页面中 class属性为 demo 的元素数量
		alert( $(".demo").size() );
		alert( $(".demo").length );
		
		//获取class属性为demo的div的个数
		alert( $("div.demo").length );
	});
</script>

交集和并集选择器：

<!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">

        $(function () {
   
            // 小标为0的li 双击事件
            $("li:eq(0)").dblclick(function () {
   
                //并集选择
                //$("#xx,.ff,li:eq(5)").css("color","green").css("font-family","楷体");

                //交集选择器
                $("li.ff").css("color","green").css("font-family","楷体");
            });
        });

    </script>

</head>
<body>
<ul>
    <li>貂蝉</li>
    <li id="xx">西施</li>
    <li >王昭君</li>
    <li>杨玉环</li>
    <li class="ff">凤姐</li>
    <li>芙蓉姐</li>
    <p class="ff">哈哈</p>
</ul>
</body>
</html>

3.3.层次选择器：第2大类

层次选择器是根据DOM元素的层级关系进行选择。
参考文档：
在这里插入图片描述
DOM元素层级的位置关系：

ancestor 祖先元素（父亲、爷爷、。。。。）
descendant 后代元素（儿子、孙子。。。。）
parent 父元素
child 子元素
prev 上一个元素
next 下一个元素
siblings 兄弟（平级的）元素

注意：每个单词都代表任意选择器！

例如，有如下html代码：

<form id="myform">
<label>Name:</label>
<div>

最低0.47元/天解锁文章

釣餌锒鐺

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录