JQuery-程序员宅基地

技术标签：前端 jquery

是什么？

为什么需要这个技术？

下载jQuery文件

是什么？

JQuery是一个js文件。具体来说，JQuery是一个快速、小巧且功能丰富的JavaScript库。

为什么需要这个技术？

原生JavaScript操作dom元素代码量可能较大，特别是对于复杂的DOM操作，还需要手动处理跨浏览器兼容性问题。

jQuery则通过封装和扩展JavaScript的功能，提供了更简洁、更易于使用的API，操作dom元素代码简洁易读，解决了跨浏览器兼容性问题。

具体来说，jQuery相对于原生的JavaScript代码编写方面更具有易用性和可维护性吧，并消除了各种浏览器兼容性问题。

PS：另一个优点，jQuery支持链式操作，这使得开发者可以将多个操作链接在一起，形成一个流畅的操作序列。这种特性不仅使得代码更加简洁易读，而且提高了代码的可维护性和复用性。

下载jQuery文件

浏览器直接下载

https://code.jquery.com/{jquery的版本}

下载示例：

https://code.jquery.com/jquery-3.6.0.min.js

PS：访问之后直接将页面另存为后即可。

怎么用？

使用jQuery分为引入jQuery库和编写jQuery代码两步。

引入jQuery库：首先需要在HTML文档中引入jQuery库。这通常通过<script>标签的src属性来完成，指向jQuery的CDN链接或本地jQuery文件。

使用jQuery的CDN链接：

<head>  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>

使用本地jQuery（需要先下载到本地）：

<script src="path/local/jquery-3.6.0.min.js"></script>

编写jQuery代码：一旦jQuery库被加载，您就可以在<script>标签中编写jQuery代码了。通常，我们会将这些代码放在一个单独的<script>标签中，以确保它们在页面加载完成后执行。

<script>  
    $(document).ready(function(){  
        // 在这里编写您的jQuery代码  
        $("p").click(function(){  
            $(this).hide();  
        });  
    });  
</script>

操作dom元素

需要先找到要操作的元素，然后才可以对这个元素进行一系列的操作。

前置需要了解

$表示什么？

$是一个别名或简称，用于表示 jQuery 函数

$("")表示什么？

是一个基本的函数调用(实际上是调用jQuery对象的方法)，用于选择DOM（文档对象模型）元素，jQuery 选择器函数或 $ 函数。它接受一个字符串参数，该参数是CSS样式的选择器，用于指定要从DOM中获取(选择)哪些元素。

jQuery中的dom元素是什么？

指的是通过jQuery选择器从网页的文档对象模型（Document Object Model，简称DOM）中选取出来的HTML元素。这些元素被封装为jQuery对象，使得开发者可以使用jQuery提供的方法和属性来操作它们。

常用方法

选择器方法

方法名称	作用
`$()`	用于选择页面上的元素，并返回包含这些元素的jQuery对象
`.find()`	在当前jQuery对象所代表的元素集合中查找满足选择器的元素
`.eq()`	根据索引值选取匹配的元素集合中的一个元素
`.filter()`	过滤当前jQuery对象所代表的元素集合，只保留满足特定条件的元素

属性操作方法

方法名称	作用
`.attr()`	获取或设置被选元素的属性值
`.removeAttr()`	从被选元素中移除一个或多个属性
`.prop()`	获取或设置被选元素的属性（property）值
`.removeProp()`	移除被选元素的属性（property）

内容操作方法

方法名称	作用
`.text()`	获取或设置被选元素的文本内容
`.html()`	获取或设置被选元素的HTML内容
`.val()`	获取或设置被选元素的值（常用于表单元素）
`.empty()`	从被选元素中移除所有子节点

CSS操作方法

方法名称	作用
`.css()`	获取或设置被选元素的样式属性
`.addClass()`	为被选元素添加一个或多个类
`.removeClass()`	从被选元素中移除一个或多个类
`.toggleClass()`	在被选元素上切换一个或多个类（如果存在则移除，否则添加）

遍历方法

方法名称	作用
`.each()`	为每个被选元素执行一个函数
`.parent()`	获取被选元素的直接父元素
`.children()`	获取被选元素的所有直接子元素
`.siblings()`	获取被选元素的所有同胞元素

事件处理方法

方法名称	作用
`.on()`	在被选元素上绑定一个或多个事件处理函数
`.off()`	从被选元素上移除一个或多个事件处理函数
`.trigger()`	触发被选元素上绑定的事件处理函数
`.click()`	触发或绑定click事件处理函数

动画效果方法

方法名称	作用
`.show()`	显示被选元素
`.hide()`	隐藏被选元素
`.toggle()`	切换被选元素的可见状态
`.slideDown()`	通过滑动效果显示被选元素

使用层面功能描述

获取元素

通过ID获取元素

var element = $("#myId");

通过类名获取元素

var elements = $(".myClass");

PS：这个方法会返回一个包含所有匹配元素的jQuery对象。

通过元素类型获取元素

var elements = $("p"); // 获取所有的<p>元素

通过属性获取元素

var elements = $("[name='myName']"); // 获取所有name属性为'myName'的元素

组合选择器

可以组合上述选择器来获取更具体的元素。

var elements = $(".myClass p"); // 获取所有类名为'myClass'的<p>元素

获取子元素

需要在获取元素后使用空格来指定一个元素的子元素。

var elements = $("#parentId .childClass"); // 获取ID为'parentId'的元素中所有类名为'childClass'的子元素

获取父元素

需要在获取元素后使用 .parent()方法。

var parent = $("#childId").parent(); // 获取ID为'childId'的元素的父元素

获取元素的值

获取元素的值通常取决于元素的类型。对于表单元素，如输入框（input）、文本域（textarea）或选择框（select），可以使用 .val() 方法来获取或设置值。对于其他元素，如文本或链接，你可能需要使用 .text()或 .html() 方法来获取或设置其内容。

获取输入框的值

var inputValue = $('input[name="myInput"]').val();  
console.log(inputValue);

获取单选框选中的值

var radioValue = $('input[name="myRadio"]:checked').val();  
console.log(radioValue);

获取复选框选中的值

var checkboxValues = [];  
$('input[name="myCheckbox"]:checked').each(function() {  
    checkboxValues.push($(this).val());  
});  
console.log(checkboxValues);

获取下拉框选中的值

var selectValue = $('select#mySelect').val();  
console.log(selectValue);

获取元素的属性值

// 假设你有一个链接，其HTML如下：  
// <a id="myLink" href="https://example.com">点击这里</a>  
  
// 使用jQuery获取链接的href属性值  
var linkHref = $("#myLink").attr("href");  
console.log(linkHref); // 输出: https://example.com

获取多行文本的值

var textareaValue = $('textarea#myTextarea').val();  
console.log(textareaValue);

获取元素的文本内容

var textContent = $('#myElement').text();  
console.log(textContent);

获取元素的HTML内容

var htmlContent = $('#myElement').html();  
console.log(htmlContent);

设置元素的值

设置输入框的值

// 假设你有一个ID为"myTextInput"的文本输入框  
$('#myTextInput').val('新的文本值');

设置单选框选中状态

// 取消选中ID为"myRadio"的单选框  
$('#myRadio').prop('checked', false);

设置复选框选中状态

// 选中ID为"myCheckbox"的复选框  
$('#myCheckbox').prop('checked', true);

设置下拉框选中的值

// 假设你有一个ID为"mySelect"的下拉列表，并且你想选中值为"optionValue"的选项  
$('#mySelect option[value="optionValue"]').prop('selected', true);

// 假设你有一个ID为"mySelect"的下拉列表，并且你想选中文本为"Option Text"的选项  
$('#mySelect option:contains("Option Text")').prop('selected', true);

设置元素的属性值

// 假设你有一个链接，其HTML如下：  
// <a id="myLink" href="https://old-example.com">点击这里</a>  
  
// 使用jQuery设置链接的href属性值  
$("#myLink").attr("href", "https://new-example.com");  
  
// 现在链接的href属性已被更新为https://new-example.com

设置多行文本的值

// 假设你有一个ID为"myTextarea"的多行文本框  
$('#myTextarea').val('新的文本内容');

设置元素的文本内容

// 假设你有一个ID为"myText"的文本框  
$('#myText').text('新的文本内容');

设置元素的HTML内容

// 假设你有一个ID为"myHtml"的文本框  
$('#myHtml').html('<p>新的HTML内容</p>');

添加元素

往指定元素的内部末尾插入内容

// 假设你有div标签并且这个标签的ID为"parentElement"
$('#parentElement').append('<p>这是一个新段落。</p>');
$('<p>这是一个新段落。</p>').appendTo('#parentElement');

往指定元素之后插入内容

$("#targetElement").after("<p>这是目标元素之后的新段落。</p>");
$("<p>这是目标元素之后的新段落。</p>").insertAfter("#targetElement");

往指定元素之前插入内容

$("#targetElement").before("<p>这是目标元素之前的新段落。</p>");
$("<p>这是目标元素之前的新段落。</p>").insertBefore("#targetElement");

删除元素

删除被选元素及其子元素

$("p").remove(); // 删除所有的 <p> 元素  
$("#myElement").remove(); // 删除ID为myElement的元素

删除被选元素的子元素

$("div").empty(); // 清空所有的 <div> 元素的内容

包装元素

wrap() 将每个被选元素分别用指定的HTML内容或元素包裹。
wrapAll() 将所有被选元素用指定的HTML内容或元素包裹起来。
wrapInner() 将每个被选元素的内部内容用指定的HTML内容或元素包裹。

// 使用 wrap() 方法  
$("#myElement").wrap("<div class='wrapper'></div>");  
  
// 使用 wrapAll() 方法  
$("p").wrapAll("<div class='all-wrappers'></div>");  
  
// 使用 wrapInner() 方法  
$("#myElement").wrapInner("<div class='inner-wrapper'></div>");

对元素样式的操作

获取元素的样式

/ 假设你有一个元素，其HTML如下：  
// <div id="myDiv" style="color: red; font-size: 16px;"></div>  
  
// 使用jQuery获取该元素的color样式属性值  
var color = $("#myDiv").css("color");  
console.log(color); // 输出: rgb(255, 0, 0) 或者 #ff0000，取决于浏览器实现

设置元素的样式

ID为myElement的标签之前有样式则为设置。

// 设置单个样式属性  
$("#myElement").css("color", "red"); // 将ID为myElement的元素的文本颜色设置为红色  
  
// 设置多个样式属性  
$("#myElement").css({  
  "color": "red",  
  "background-color": "yellow",  
  "font-size": "20px"  
}); // 同时设置多个样式属性

添加元素的样式

ID为myElement的标签之前没有样式则为添加。

// 添加单个样式属性  
$("#myElement").css("color", "red"); // 将ID为myElement的元素的文本颜色设置为红色  
  
// 添加多个样式属性  
$("#myElement").css({  
  "color": "red",  
  "background-color": "yellow",  
  "font-size": "20px"  
}); // 同时添加多个样式属性

删除元素的样式

将ID为myElement的标签的样式设为空则为删除。

$("#myElement").css("color", ""); // 将颜色样式重置为默认值或继承值

使用样式类修改元素样式

使用场景：当你有一组预定义的CSS类，并希望根据条件动态地添加或删除或切换这些类时。

//添加样式
$("#myElement").addClass("highlight"); // 为ID为myElement的元素添加highlight类
//删除样式
$("#myElement").removeClass("highlight"); // 移除ID为myElement的元素上的highlight类
//切换样式类（如果类存在则删除，如果不存在则添加）
$("#myElement").toggleClass("highlight");

//根据条件添加或删除样式类
// 假设有一个条件变量condition，如果为true则添加类，如果为false则移除类  
var condition = true; // 或者 false  
$("#myElement").toggleClass("highlight", condition);

事件处理

页面加载完成后事件

// 当页面加载完成后执行  
$(document).ready(function() {  
    alert('页面加载完成！');  
});

//可简写为
$(function() {  
    // 这里的代码同样会在DOM加载完成后执行  
    console.log('DOM加载完成');  
});

添加事件

on方法用于绑定一个或多个事件处理函数到选定的元素上。

// 当按钮被点击时，执行函数  
$("#myButton").on("click", function() {  
    alert("按钮被点击了！");  
});

删除事件

off方法用于移除一个或多个事件处理函数。

// 先绑定一个点击事件处理函数  
$("#myButton").on("click", function() {  
    alert("按钮被点击了！");  
});  
  
// 然后移除它  
$("#myButton").off("click");

提交事件

用于绑定表单提交时的事件处理函数，或者提交表单。

//绑定事件处理函数
$("#myForm").submit(function(event) {  
    // 阻止表单的默认提交行为（即不跳转到新页面）  
    event.preventDefault();  
    alert("表单已提交，但页面不会跳转。");  
});

//触发事件
// 假设有一个表单，当某个按钮被点击时自动提交表单  
$("#mySubmitButton").click(function() {  
    $("#myForm").submit();  
});

点击事件

// 绑定事件处理函数
$("#myButton").click(function() {  
    alert("按钮被点击了！");  
});

// 触发事件
// 假设有一个按钮，当页面加载完成后自动触发点击事件  
$(document).ready(function() {  
    $("#myButton").click();  
});

悬停事件

$("#myElement").hover(  
    function() {  
        // 鼠标指针进入元素时执行的函数  
        $(this).css("background-color", "yellow");  
    }, function() {  
        // 鼠标指针离开元素时执行的函数  
        $(this).css("background-color", "white");  
    }  
);

键盘按键事件

绑定键盘按键按下时的事件。

$(document).keydown(function(event) {  
    if (event.keyCode == 13) { // 如果按下的是回车键（键码为13）  
        alert("你按下了回车键！");  
    }  
});

动画效果

// 隐藏一个元素，带有滑动效果  
$('#myElement').slideUp();  
  
// 显示一个元素，带有淡入效果  
$('#myElement').fadeIn();  
  
// 自定义动画  
$('#myElement').animate({  
    opacity: 0.5,  
    left: '+=50',  
    height: 'toggle'  
}, 5000, function() {  
    alert('动画完成！');  
});

Ajax

是什么?

Ajax（Asynchronous JavaScript and XML）是一种用于创建异步 web 请求的技术，它允许在不重新加载整个页面的情况下，从服务器加载数据，并在网页上更新部分内容。

jQuery中的Ajax

jQuery中的Ajax方法是封装后的。jQuery对原生的JavaScript Ajax功能进行了封装，提供了简单易用的 Ajax 方法，使得开发者能够轻松实现复杂的 web 应用。

ajax方法

$.ajax({  
    url: 'example.com/api/data', // 请求的 URL  
    type: 'GET', // 请求类型：GET、POST 等  
    dataType: 'json', // 预期服务器返回的数据类型  
    success: function(data, textStatus, jqXHR) {  
        // 请求成功时调用的函数  
        console.log(data);  
    },  
    error: function(jqXHR, textStatus, errorThrown) {  
        // 请求失败时调用的函数  
        console.error("请求失败: " + textStatus);  
    }  
});

get和post方法

$.get() 和 $.post() 是 $.ajax() 的简化版本，分别用于发送 GET 和 POST 请求。

// 使用$.get发送GET请求  
$.get('example.com/api/data', function(data) {  
    console.log(data);  
});  
  
// 使用$.post发送POST请求  
$.post('example.com/api/submit', { key: 'value' }, function(response) {  
    console.log(response);  
});

getJSON方法

加载 JSON 格式的数据。

$.getJSON('example.com/api/data', function(data) {  
    console.log(data);  
});

getScript方法

加载并执行 JavaScript 文件。

$.getScript('path/to/script.js', function() {  
    console.log('脚本已加载并执行');  
});

load方法

用于将服务器响应直接加载到选定的元素中。

$('#result').load('example.com/api/content #someElement');
/*说明：
#result 是要填充内容的元素
'example.com/api/content #someElement' 是请求的 URL
只加载 #someElement 的内容。*/

PS：当你需要发送表单数据时，可以使用 $.param()来序列化表单数据，或者 serialize() 方法来序列化表单元素本身。

//$.param() 序列化 JavaScript 对象
var data = { key1: 'value1', key2: 'value2' };  
var paramString = $.param(data);  
$.post('example.com/api/submit', paramString, function(response) {  
    // 处理响应  
});

//serialize() 方法来序列化表单元素
var formData = $('#myForm').serialize();  
$.post('example.com/api/submit', formData, function(response) {  
    // 处理响应  
});

与原生JavaScript在功能、性能、易用性等方面的差异

一、功能

JavaScript是一种编程语言，用于在浏览器中实现交互效果，包括动态更新页面内容、响应用户操作等。它提供了丰富的API，可以操作DOM、处理事件、发送网络请求等。

jQuery是一个快速、小巧且功能丰富的JavaScript库。它封装了JavaScript常用的功能和代码，使得开发者可以更方便地操作DOM、处理事件、发送Ajax请求等。此外，jQuery还提供了一些JavaScript没有的高级功能，比如动画效果和链式操作等。

示例：

假设我们有一个id为"myButton"的按钮，当点击这个按钮时，我们想要改变一个id为"myText"的元素的文本内容。

使用原生JavaScript，代码可能如下：

document.getElementById('myButton').addEventListener('click', function() { 
    document.getElementById('myText').innerHTML = 'Hello, jQuery!'; 
});

而使用jQuery，代码可以简化为：

$('#myButton').click(function() { 
    $('#myText').text('Hello, jQuery!'); 
});

从这个例子中可以看出，jQuery通过简洁的语法和强大的选择器，使得开发者可以更方便地操作DOM和处理事件。

二、性能

在性能方面，原生JavaScript通常会比jQuery更快，因为它直接操作浏览器提供的API，没有额外的封装和抽象。而jQuery虽然提供了很多方便的功能，但也因此增加了一些额外的开销。

然而，这种性能差异在大多数情况下并不明显，除非是在处理大量DOM元素或进行复杂的计算时。在大多数情况下，开发者更关注的是代码的易用性和可维护性，而不是微小的性能差异。

三、易用性

在易用性方面，jQuery无疑优于原生JavaScript。jQuery的语法简洁明了，易于学习和使用。它还提供了一套完整的API和文档，使得开发者可以快速地查找和使用需要的功能。

此外，jQuery还具有良好的兼容性，可以在不同的浏览器上运行。开发者能够更专注于实现功能，而不是处理浏览器差异。

PS：jQuery和JavaScript各有其优势和适用场景。对于简单的页面交互和效果，原生JavaScript可能就足够了。而对于更复杂的Web应用和开发任务，使用jQuery可能会更加高效和便捷。

本文链接：https://blog.csdn.net/weixin_46485886/article/details/137399213

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

FTP命令字和返回码_ftp 登录返回230-程序员宅基地

文章浏览阅读3.5k次，点赞2次，收藏13次。为了从FTP服务器下载文件，需要要实现一个简单的FTP客户端。FTP（文件传输协议）是 TCP/IP 协议组中的应用层协议。FTP协议使用字符串格式命令字，每条命令都是一行字符串，以“\r\n”结尾。客户端发送格式是：命令+空格+参数+"\r\n"的格式服务器返回格式是以：状态码+空格+提示字符串+"\r\n"的格式，代码只要解析状态码就可以了。读写文件需要登陆服务器，特殊用..._ftp 登录返回230

centos7安装rabbitmq3.6.5_centos7 安装rabbitmq3.6.5-程序员宅基地

文章浏览阅读648次。前提：systemctl stop firewalld 关闭防火墙关闭selinux查看getenforce临时关闭setenforce 0永久关闭sed-i'/SELINUX/s/enforcing/disabled/'/etc/selinux/configselinux的三种模式enforcing：强制模式，SELinux 运作中，且已经正确的开始限制..._centos7 安装rabbitmq3.6.5

idea导入android工程,idea怎样导入Android studio 项目？-程序员宅基地

文章浏览阅读5.8k次。满意答案s55f2avsx2017.09.05采纳率：46%等级：12已帮助：5646人新版Android Studio/IntelliJ IDEA可以直接导入eclipse项目,不再推荐使用eclipse导出gradle的方式2启动Android Studio/IntelliJ IDEA，选择 import project3选择eclipse 项目4选择 create project f..._android studio 项目导入idea 看不懂安卓项目

浅谈AI大模型技术：概念、发展和应用_ai大模型应用开发-程序员宅基地

文章浏览阅读860次，点赞2次，收藏6次。AI大模型技术已经在自然语言处理、计算机视觉、多模态交互等领域取得了显著的进展和成果，同时也引发了一系列新的挑战和问题，如数据质量、计算效率、知识可解释性、安全可靠性等。城市运维涉及到多个方面，如交通管理、环境监测、公共安全、社会治理等，它们需要处理和分析大量的多模态数据，如图像、视频、语音、文本等，并根据不同的场景和需求，提供合适的决策和响应。知识搜索有多种形式，如语义搜索、对话搜索、图像搜索、视频搜索等，它们可以根据用户的输入和意图，从海量的数据源中检索出最相关的信息，并以友好的方式呈现给用户。_ai大模型应用开发

非常详细的阻抗测试基础知识_阻抗实部和虚部-程序员宅基地

文章浏览阅读8.2k次，点赞12次，收藏121次。为什么要测量阻抗呢？阻抗能代表什么？阻抗测量的注意事项... ...很多人可能会带着一系列的问题来阅读本文。不管是数字电路工程师还是射频工程师，都在关注各类器件的阻抗，本文非常值得一读。全文13000多字，认真读完大概需要2小时。一、阻抗测试基本概念阻抗定义：阻抗是元器件或电路对周期的交流信号的总的反作用。AC 交流测试信号 (幅度和频率)。包括实部和虚部。图1 阻抗的定义阻抗是评测电路、元件以及制作元件材料的重要参数。那么什么是阻抗呢？让我们先来看一下阻抗的定义。首先阻抗是一个矢量。通常，阻抗是_阻抗实部和虚部

小学生python游戏编程arcade----基本知识1_arcade语言 like-程序员宅基地

文章浏览阅读955次。前面章节分享试用了pyzero,pygame但随着想增加更丰富的游戏内容，好多还要进行自己编写类，从今天开始解绍一个新的python游戏库arcade模块。通过此次的《连连看》游戏实现，让我对swing的相关知识有了进一步的了解，对java这门语言也有了比以前更深刻的认识。java的一些基本语法，比如数据类型、运算符、程序流程控制和数组等，理解更加透彻。java最核心的核心就是面向对象思想，对于这一个概念，终于悟到了一些。_arcade语言 like

随便推点

【增强版短视频去水印源码】去水印微信小程序+去水印软件源码_去水印机要增强版-程序员宅基地

文章浏览阅读1.1k次。源码简介与安装说明：2021增强版短视频去水印源码去水印微信小程序源码网站去水印软件源码安装环境（需要材料）：备案域名–服务器安装宝塔-安装 Nginx 或者 Apachephp5.6 以上-安装 sg11 插件小程序已自带解析接口，支持全网主流短视频平台，搭建好了就能用注：接口是公益的，那么多人用解析慢是肯定的，前段和后端源码已经打包，上传服务器之后在配置文件修改数据库密码。然后输入自己的域名，进入后台，创建小程序，输入自己的小程序配置即可安装说明：上传源码，修改data/_去水印机要增强版