面试造火箭入职拧螺丝

面试时以为进公司要写 Vue，结果进了公司却让我做 jQuery 的活儿，落差有点大。也只能硬着头皮上了。

一、jQuery 的核心优势

jQuery 之所以能在很长一段时间内成为前端开发者的首选工具，源于其独特的优势：

Write Less, Do More（写得少，做得多） 是 jQuery 的核心理念。它通过简洁的 API 实现了复杂的功能，让开发者能够用更少的代码完成更多的工作。例如，在原生 JavaScript 中需要多行代码才能实现的 DOM 元素选择，在 jQuery 中只需一行代码即可完成。

跨浏览器兼容性是 jQuery 的另一大亮点。早期不同浏览器对 JavaScript 的支持存在差异，给开发者带来了诸多麻烦。jQuery 内部处理了这些兼容性问题，让开发者无需再为不同浏览器的差异而烦恼，大大提高了开发效率。

丰富的插件生态系统也是 jQuery 流行的重要原因。开发者可以通过各种插件快速实现轮播图、表单验证、日期选择等功能，进一步拓展了 jQuery 的应用范围。

二、jQuery 的引入与基本语法

要使用 jQuery，首先需要引入它。引入方式主要有两种：

本地引入：从 jQuery 官网下载 jQuery 库文件，保存到本地项目中，然后通过

xml 复制代码

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

CDN 引入：使用公共的 CDN（内容分发网络）服务引入 jQuery，无需下载本地文件。

xml 复制代码

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

jQuery 的基本语法结构为：$(selector).action()

$ 符号是 jQuery 的别名，用于访问 jQuery 库。

selector 是选择器，用于选取 HTML 元素。

action() 是对选取的元素执行的操作。

例如，下面的代码会在页面加载完成后，将所有

标签的文本内容改为 "Hello jQuery!"：

javascript 复制代码

$(document).ready(function(){
  $("p").text("Hello jQuery!");
});

<math xmlns="http://www.w3.org/1998/Math/MathML"> ( d o c u m e n t ) . r e a d y ( ) 函数用于确保在 D O M 加载完成后再执行其中的代码，避免因元素未加载完成而导致的错误。它可以简写成 (document).ready() 函数用于确保在 DOM 加载完成后再执行其中的代码，避免因元素未加载完成而导致的错误。它可以简写成 </math>(document).ready()函数用于确保在DOM加载完成后再执行其中的代码，避免因元素未加载完成而导致的错误。它可以简写成(function(){})：

javascript 复制代码

$(function(){
  $("p").text("Hello jQuery!");
});

三、jQuery 选择器

jQuery 选择器是 jQuery 的核心功能之一，它允许开发者通过各种方式选取 HTML 元素，类似于 CSS 选择器，但功能更强大。

1. 基本选择器

元素选择器：通过 HTML 元素名选取元素。

javascript 复制代码

// 选取所有<p>元素
$("p").css("color", "red"); // 将所有<p>元素的文本颜色改为红色

ID 选择器：通过元素的 ID 属性选取元素，ID 选择器以#开头。

bash 复制代码

<p id="intro">这是一个段落</p>

javascript 复制代码

// 选取ID为intro的元素
$("#intro").css("font-size", "20px"); // 将ID为intro的元素字体大小改为20px

类选择器：通过元素的 class 属性选取元素，类选择器以.开头。

ini 复制代码

<p class="info">这是一条信息</p>
<p class="info">这是另一条信息</p>

javascript 复制代码

// 选取所有class为info的元素
$(".info").css("background-color", "#f0f0f0"); // 将所有class为info的元素背景色改为浅灰色

2. 层次选择器

后代选择器：选取某个元素的所有后代元素，使用空格分隔。

css 复制代码

<div class="container">
  <p>这是容器内的段落</p>
  <div>
    <p>这是容器内嵌套div中的段落</p>
  </div>
</div>

javascript 复制代码

// 选取class为container的元素内的所有<p>元素
$(".container p").css("margin", "10px"); // 为选取的元素设置外边距

子选择器：选取某个元素的直接子元素，使用>连接。

javascript 复制代码

// 选取class为container的元素的直接子元素<p>
$(".container > p").css("font-weight", "bold"); // 将字体设置为粗体

3. 过滤选择器

:first：选取第一个元素。

less 复制代码

// 选取第一个<ul>中的第一个<li>元素
$("ul:first li:first").css("color", "blue"); // 将文本颜色改为蓝色

:last：选取最后一个元素。

javascript 复制代码

// 选取最后一个<table>中的最后一行<tr>
$("table:last tr:last").css("background-color", "yellow"); // 设置背景色为黄色

:even 和 :odd：选取索引为偶数和奇数的元素（索引从 0 开始）。

css 复制代码

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

css 复制代码

// 选取索引为偶数的<li>元素
$("li:even").css("background-color", "#eee");

四、jQuery DOM 操作

jQuery 提供了丰富的 DOM 操作方法，用于创建、插入、删除和修改 HTML 元素。

1. 内容操作

text() ：设置或返回元素的文本内容。

bash 复制代码

<p id="test">这是一个测试段落</p>

javascript 复制代码

// 获取文本内容
var text = $("#test").text();
console.log(text); // 输出：这是一个测试段落
// 设置文本内容
$("#test").text("这是修改后的段落");

html() ：设置或返回元素的 HTML 内容。

css 复制代码

<div id="content"><p>这是div中的段落</p></div>

css 复制代码

// 获取HTML内容
var html = $("#content").html();
console.log(html); // 输出：<p>这是div中的段落</p>
// 设置HTML内容
$("#content").html("<h2>这是修改后的标题</h2>");

val() ：设置或返回表单元素的值。

python 复制代码

<input type="text" id="username" value="张三">

javascript 复制代码

// 获取值
var username = $("#username").val();
console.log(username); // 输出：张三
// 设置值
$("#username").val("李四");

2. 属性操作

attr() ：设置或返回元素的属性值。

ini 复制代码

<img src="image.jpg" alt="示例图片" id="myImage">

javascript 复制代码

// 获取属性值
var src = $("#myImage").attr("src");
console.log(src); // 输出：image.jpg
// 设置属性值
$("#myImage").attr("src", "new_image.jpg");
// 同时设置多个属性
$("#myImage").attr({
  "src": "another_image.jpg",
  "alt": "新的示例图片"
});

removeAttr() ：删除元素的属性。

javascript 复制代码

// 删除alt属性
$("#myImage").removeAttr("alt");

3. 元素的添加与删除

append() ：在元素内部的末尾添加内容。

xml 复制代码

<ul id="myList">
  <li>项目1</li>
</ul>

go 复制代码

// 在列表末尾添加新项
$("#myList").append("<li>项目2</li>");

prepend() ：在元素内部的开头添加内容。

javascript 复制代码

// 在列表开头添加新项
$("#myList").prepend("<li>项目0</li>");

after() ：在元素外部的后面添加内容。

javascript 复制代码

// 在列表后面添加一个段落
$("#myList").after("<p>这是列表后面的段落</p>");

before() ：在元素外部的前面添加内容。

javascript 复制代码

// 在列表前面添加一个标题
$("#myList").before("<h3>列表标题</h3>");

remove() ：删除元素及其所有子元素。

csharp 复制代码

// 删除ID为myList的元素
$("#myList").remove();

empty() ：清空元素的所有子元素，但保留元素本身。

javascript 复制代码

// 清空列表中的所有项，但保留列表本身
$("#myList").empty();

五、jQuery 事件处理

事件处理是 Web 交互的核心，jQuery 提供了简洁的事件处理方法。

1. 常用事件

click() ：鼠标点击事件。

bash 复制代码

<button id="myButton">点击我</button>

javascript 复制代码

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

mouseenter() 和 mouseleave() ：鼠标进入和离开事件。

css 复制代码

<div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>

javascript 复制代码

// 鼠标进入时改变背景色
$("#myDiv").mouseenter(function(){
  $(this).css("background-color", "blue");
});
// 鼠标离开时恢复背景色
$("#myDiv").mouseleave(function(){
  $(this).css("background-color", "red");
});

keydown() 和 keyup() ：键盘按下和松开事件。

python 复制代码

<input type="text" id="myInput" placeholder="输入文本">

javascript 复制代码

// 键盘按下时
$("#myInput").keydown(function(){
  console.log("键盘按下了");
});
// 键盘松开时
$("#myInput").keyup(function(){
  console.log("键盘松开了，输入的内容是：" + $(this).val());
});

2. 事件绑定与解绑

on() ：用于绑定事件，可以绑定多个事件。

javascript 复制代码

// 绑定点击和鼠标进入事件
$("#myButton").on({
  click: function(){
    alert("点击事件触发");
  },
  mouseenter: function(){
    $(this).css("background-color", "gray");
  }
});

off() ：用于解绑事件。

javascript 复制代码

// 解绑点击事件
$("#myButton").off("click");
// 解绑所有事件
$("#myButton").off();

六、jQuery 动画效果

jQuery 提供了多种动画效果，让页面交互更加生动有趣。

1. 基本动画

show() 和 hide() ：显示和隐藏元素。

css 复制代码

<div id="animateDiv" style="width: 100px; height: 100px; background-color: green;"></div>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button>

javascript 复制代码

$("#hideBtn").click(function(){
  $("#animateDiv").hide(1000); // 1000毫秒内隐藏
});
$("#showBtn").click(function(){
  $("#animateDiv").show(1000); // 1000毫秒内显示
});

toggle() ：切换元素的显示和隐藏状态。

javascript 复制代码

// 点击按钮切换元素的显示和隐藏
$("#toggleBtn").click(function(){
  $("#animateDiv").toggle(500);
});

2. 滑动动画

slideDown() 和 slideUp() ：向下滑动和向上滑动显示元素。

css 复制代码

<div id="slideDiv" style="display: none; width: 200px; height: 100px; background-color: pink;"></div>
<button id="slideDownBtn">向下滑动</button>
<button id="slideUpBtn">向上滑动</button>

javascript 复制代码

$("#slideDownBtn").click(function(){
  $("#slideDiv").slideDown(500);
});
$("#slideUpBtn").click(function(){
  $("#slideDiv").slideUp(500);
});

slideToggle() ：切换元素的滑动状态。

javascript 复制代码

$("#slideToggleBtn").click(function(){
  $("#slideDiv").slideToggle(500);
});

3. 淡入淡出动画

fadeIn() 和 fadeOut() ：淡入和淡出元素。

css 复制代码

<div id="fadeDiv" style="display: none; width: 100px; height: 100px; background-color: purple;"></div>
<button id="fadeInBtn">淡入</button>
<button id="fadeOutBtn">淡出</button>

javascript 复制代码

$("#fadeInBtn").click(function(){
  $("#fadeDiv").fadeIn(1000);
});
$("#fadeOutBtn").click(function(){
  $("#fadeDiv").fadeOut(1000);
});

fadeTo() ：将元素的透明度淡化为指定值。

javascript 复制代码

// 将元素的透明度淡化为0.5
$("#fadeToBtn").click(function(){
  $("#fadeDiv").fadeTo(500, 0.5);
});

4. 自定义动画

animate() 方法允许开发者创建自定义动画，通过改变元素的 CSS 属性值来实现。

css 复制代码

<div id="customDiv" style="position: relative; width: 100px; height: 100px; background-color: orange;"></div>
<button id="customAnimateBtn">自定义动画</button>

less 复制代码

$("#customAnimateBtn").click(function(){
  $("#customDiv").animate({
    left: "250px", // 向右移动250px
    opacity: "0.5", // 透明度变为0.5
    height: "200px", // 高度变为200px
    width: "200px" // 宽度变为200px
  }, 1000); // 动画持续1000毫秒
});

七、jQuery Ajax

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。jQuery 封装了 Ajax 操作，使其更加简单易用。

1. 基本的 Ajax 请求

$.ajax() 是 jQuery 中最核心的 Ajax 方法，它可以配置各种参数来发送请求。

javascript 复制代码

$.ajax({
  url: "data.json", // 请求的URL地址
  type: "GET", // 请求方法，GET或POST
  dataType: "json", // 预期的服务器响应的数据类型
  success: function(data){ // 请求成功时执行的回调函数
    console.log("请求成功", data);
    // 处理返回的数据
  },
  error: function(xhr, status, error){ // 请求失败时执行的回调函数
    console.log("请求失败", status, error);
  }
});

2. 简化的 Ajax 方法

为了简化常见的 Ajax 操作，jQuery 提供了一些简化方法：

$.get() ：用于发送 GET 请求。

javascript 复制代码

// 发送GET请求获取数据
$.get("data.json", function(data){
  console.log("GET请求成功", data);
}, "json");

$.post() ：用于发送 POST 请求。

javascript 复制代码

// 发送POST请求提交数据
var data = {name: "张三", age: 20};
$.post("submit.php", data, function(response){
  console.log("POST请求成功", response);
}, "json");

(.getJSON() ：用于获取JSON格式的数据，是\).get () 的简化版，专门用于 JSON 数据。

javascript 复制代码

// 获取JSON数据
$.getJSON("data.json", function(data){
  console.log("JSON数据获取成功", data);
});

八、jQuery 的实际应用示例

下面通过一个简单的待办事项列表示例，展示 jQuery 的综合应用：

xml 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>jQuery待办事项列表</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <style>
    .todo-list { list-style: none; padding: 0; }
    .todo-item { padding: 10px; margin: 5px 0; background-color: #f5f5f5; display: flex; justify-content: space-between; }
    .todo-item .delete { color: red; cursor: pointer; }
    .completed { text-decoration: line-through; color: #888; }
  </style>
</head>
<body>
  <h1>待办事项列表</h1>
  <input type="text" id="todoInput" placeholder="请输入待办事项">
  <button id="add</doubaocanvas>

jym有在用jQuery的吗？

面试造火箭 入职拧螺丝

一、jQuery 的核心优势

二、jQuery 的引入与基本语法

三、jQuery 选择器

1. 基本选择器

2. 层次选择器

3. 过滤选择器

四、jQuery DOM 操作

1. 内容操作

2. 属性操作

3. 元素的添加与删除

五、jQuery 事件处理

1. 常用事件

2. 事件绑定与解绑

六、jQuery 动画效果

1. 基本动画

2. 滑动动画

3. 淡入淡出动画

4. 自定义动画

七、jQuery Ajax

1. 基本的 Ajax 请求

2. 简化的 Ajax 方法

八、jQuery 的实际应用示例

面试造火箭入职拧螺丝