Java研学-jQuery(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/zhlyxx/article/details/136710004

本文介绍了jQuery库，包括其快速、简洁的设计理念，主要功能如DOM操作、事件处理、动画、AJAX以及选择器的使用。文章详细讲解了jQuery文件类型、引入方式、对象转换和常用方法，以及基础选择器和过滤选择器的应用。

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

一 jQuery 简介

1 介绍

jQuery是一个快速、简洁且功能丰富的JavaScript库。它的核心理念是“写得更少，做得更多”，旨在通过封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，从而极大地简化JavaScript编程。

jQuery使用户能够方便地遍历HTML文档、操作DOM、处理事件、实现动画效果和提供Ajax交互。它兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等，并兼容CSS3.0。此外，jQuery还提供了大量的插件，进一步扩展了其功能。

具体来说，jQuery库包含以下功能：

HTML元素选取和操作：jQuery可以方便地选取和操作HTML元素，包括元素的添加、删除、修改等。
CSS操作：jQuery提供了丰富的CSS操作方法，可以方便地修改元素的样式。
HTML事件函数：jQuery封装了常见的事件处理函数，如点击、鼠标移动等，使得事件处理更加简单。
JavaScript特效和动画：jQuery内置了多种动画效果，可以轻松地为网页添加动态效果。
HTML DOM遍历和修改：jQuery提供了强大的DOM遍历和修改功能，可以方便地操作DOM结构。
AJAX：jQuery内置了AJAX功能，可以实现与服务器的异步通信，提高网页的响应速度。

总的来说，jQuery是一个功能强大且易于使用的JavaScript库，它极大地简化了JavaScript编程，提高了开发效率。同时，由于其良好的兼容性和大量的插件支持，jQuery已经成为了目前最流行的JS代码库之一。

2 jQuery 文件介绍

jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。
jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。

二引入 jQuery

1 拷贝 jQuery 文件到项目中

将从官网下载的 jQuery文件夹拷贝到项目的 webapp 下的 static 目录下
拷贝 jQuery

2 外部引用与内部引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery初体验</title>
</head>
<body>
<!--外部引入-->
<!--..的作用是从当前HTML文件所在的目录，返回到上一级目录-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    /*弹窗*/
    alert(123)
    // alert($)
    // $==jQuery 二者等价可以替换使用 表示jquery对象
    console.log($)
    console.log(jQuery)
</script>
</body>
</html>

三 jQuery 对象

1 对象引入

通过 document.getElementById() 找到的元素（获取DOM元素，js对象）和通过 $() 找到元素（jq对象）不一样，由此调用的方法也是不同的

js对象就是原生的DOM对象
通过 jQuery 方法获取的页面元素，都是 jQuery 对象
jQuery 实质为对 DOM 对象进行了包装，增强相关了方法
虽然 jQuery 对象包装了 DOM 对象但是两者不能混用，二者是两个不类型的对象，但调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM 对象

2 jQ对象与 DOM 对象之间转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象转换</title>
</head>
<body>
<button id="btn">按钮</button>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    //js获取对象按钮
    var btn = document.getElementById("btn");//dom对象
    // 为按钮设置名字
    // btn.innerHTML="js按钮";
    //jq获取按钮对象
    var btn1 = $("#btn")