03.JavaWeb-JQuery框架

LB_bei

已于 2023-06-03 15:01:16 修改

阅读量667

点赞数

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

于 2023-06-01 18:34:12 首次发布

本文链接：https://blog.youkuaiyun.com/LB_bei/article/details/130984847

版权

JavaEE 同时被 2 个专栏收录

34 篇文章

订阅专栏

前端

9 篇文章

订阅专栏

这篇文章介绍了JQuery的基本概念，包括它的特点、对象、使用步骤和语法。JQuery简化了JavaScript编程，提供了丰富的选择器和DOM操作方法，如元素的添加、删除、替换和包裹。此外，还讲解了JQuery的事件处理，如页面载入和on()方法的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JQuery概述

JQuery 是一个快速、简洁且功能丰富的 JavaScript 库，旨在简化 JavaScript 编程。它提供了一系列易于使用的功能和方法，用于处理 HTML 文档遍历、事件处理、动画效果、异步请求等常见的 Web 开发任务。

1.1 JQuery特点

1.选择器丰富

2.对原生异步请求进行封装

3.dom操作简单方便

1.2 JQuery对象

只有JQuery对象才能调用JQuery对象的方法和属性，但是JQuery与原生JS代码可以相互嵌套出现

语法：

将其他对象转换为JQuery对象的方法：$(其他对象)、JQuery(其他对象)

$("#id") 获取唯一的一个对象

$("标签名") 获取所有对应标签名的对象

$(".class属性值") 获取所有对应属性名的元素

1.3 使用步骤

引入 jQuery 库：在 HTML 页面中通过 <script> 标签引入 jQuery 库，可以使用本地文件或使用 CDN（内容分发网络）提供的 jQuery 文件。
编写 jQuery 代码：使用 $ 符号作为 jQuery 的入口，通过选择器选取元素，并使用提供的方法和功能进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Example</title>
  <!-- 引入 jQuery 库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1 id="myHeading">Hello, World!</h1>

  <script>
    // 使用 jQuery 选取元素并修改内容
    $(document).ready(function() {
      $("#myHeading").text("Hello, jQuery!");
    });
  </script>
</body>
</html>

1.4语法

$(selector).action()	美元符号定义JQuery
	选择符(selector) 查询和查找HTML元素
	action()是对元素的操作

1.5JQuery常用方法

方法/属性	描述	实例
val()	获取或设置对象的值	$("#input1").val()
html()	获取元素内容，如果有子元素，保留子元素标签	$("#div1").html()
text()	获取元素内容，即使有子元素，也不保留标签	$("#d1").text()

2.JQuery的操作

2.1 JQuery的DOM节点操作（文档处理）

2.1.1 三种创建标签方式

$("<标签名/>")
$("<标签名>文本值</标签名>")
$("<标签名 属性值='属性值'>文本值</标签名>")

2.1.2 内部插入

1.append()与appendto()

$("#bt2").click(function(){
    $("div").append("<p>第一行</p>");
    $("<p>第一行</p>").appendTo($("div"));
});

2.prepend()与prependto()

// 在 id 为 "targetElement" 的元素内部开头插入新内容
$('#targetElement').prepend('<div>New Content</div>');

// 在 id 为 "targetElement" 的元素内部开头插入新内容
$('<div>New Content</div>').prependTo('#targetElement');

2.1.3 外部插入

1.after()与insertAfter()

// 在 id 为 "targetElement" 的元素之后插入新内容
$('#targetElement').after('<div>New Content</div>');

// 在 id 为 "targetElement" 的元素之后插入新内容
$('<div>New Content</div>').insertAfter('#targetElement');

2.before()与insertBefore()

// 在 id 为 "targetElement" 的元素之前插入新内容
$('#targetElement').before('<div>New Content</div>');

// 在 id 为 "targetElement" 的元素之前插入新内容
$('<div>New Content</div>').insertBefore('#targetElement');

2.1.4 替换

1.replaceWith() 与replaceAll()

// 替换 id 为 "oldElement" 的元素为新的内容
$('#oldElement').replaceWith('<div id="newElement">New Content</div>');

// 将所有 class 为 "oldClass" 的元素替换为新的内容
$('<div>New Content</div>').replaceAll('.oldClass');

2.1.5 删除

1.empty 删除匹配的元素集合中所有的子节点

$("#bt5").click(function(){
    $("#ol1").empty();
});

2.remove 从DOM中删除所有匹配的元素

$("#bt6").click(function(){
    $("ol").remove();
});

2.1.6 克隆

1.clone 克隆匹配的DOM元素并且选中这些克隆的副本

$("#bt7").click(function(){
    $("li").clone().appendTo("ol");
});

2.1.7 包裹

1.wrap 把每个匹配的元素用指定的HTML结构包裹起来

$("#bt8").click(function(){
    $("li").wrap("<a href='http://www.baidu.com'></a>")
});

2.unwrap 删掉元素的父元素(删掉一层)

$("#bt9").click(function(){
    $("li").unwrap();
});

3.wrapAll() 将所有匹配的元素看成一个整体包裹到指定的HTML结构中

4.wrapInner() 将匹配的每一个元素的内容包裹到指定的HTML结构中

2.2 JQuery的事件

2.2.1 页面载入

使用文档准备函数是一种良好的实践，它确保在执行 jQuery 代码之前，文档已经完全加载和解析，从而避免了潜在的错误和不一致的行为。它提供了一种可靠的方式来确保代码在正确的时机执行，并且可以安全地操作 DOM 元素。

下面两个写法效果一样

$(function(){

});


$(document).ready(function(){

});

2.2.2 on()方法

语法: selector是要绑定事件的元素选择器, eventName是事件的名称, handler是事件处理函数

$(selector).on(eventName, handler);

特点: on()方法可以处理动态添加的元素，通过指定选择器作为第二个参数，将事件绑定到指定的后代元素上

$(staticAncestorSelector).on(eventName, dynamicDescendantSelector, handler);

实例：

$("#student").on("click",".bt1",function(){
    $(this).closest("tr").remove();
})