菜单 搜索
首页 前端知识 【jQuery】前端八股文面试题

【jQuery】前端八股文面试题

2024-09-01 23:09:26 前端知识 前端哥 275 734 我要收藏

jQuery

这个问的没有那么多，暂时我被问到的就这几个。
大家可以直接订阅专栏。

文章目录

  • jQuery
      • 1. jQuery 常见的方法有哪几个？
      • 2.在 jQuery 中，常见使用委托的事件有哪些？
          • 1）点击事件（click）
          • 2）鼠标悬停事件（mouseenter 和 mouseleave）
          • 3）表单提交事件（submit）
          • 4）输入框变化事件（change）
      • 3.在 jQuery 中，常见的鼠标事件方法有哪些？
          • 1）click（鼠标点击事件）
          • 2）dblclick（鼠标双击事件）
          • 3）mouseenter（鼠标进入事件）
          • 4）mouseleave（鼠标离开事件）
          • 5）mousemove（鼠标移动事件）
          • 6）hover（鼠标进入和离开的组合事件）

1. jQuery 常见的方法有哪几个？

  • $() 方法：用于选择 DOM 元素。
     <div id="myDiv">This is a div.</div>
     <p class="myParagraph">This is a paragraph.</p>

    // 选择 id 为 myDiv 的元素
     var $div = $('#myDiv');
     // 选择所有具有 class 为 myParagraph 的元素
     var $paragraphs = $('.myParagraph');
  • addClass() 方法：为匹配的元素添加指定的类名。
     <div id="myDiv">This is a div.</div>

     $('#myDiv').addClass('highlighted');
  • removeClass() 方法：移除匹配元素的指定类名。
     <div id="myDiv" class="highlighted">This is a div.</div>

     $('#myDiv').removeClass('highlighted');
或者
// 这将从 id 为myDiv的元素中移除highlighted类名，然后设置其文本颜色为黑色，并恢复其原始文本内容。
     $('#myDiv').removeClass('highlighted').css('color', 'black').text('Original text');
  • toggleClass() 方法：切换元素的类名，如果元素有指定类名则移除，如果没有则添加。
     <div id="myDiv">This is a div.</div>

// 第一次调用时，如果 id 为myDiv的元素没有highlighted类名，则添加它；如果已经有了，则移除它。后续每次调用都会在添加和移除之间切换。
     $('#myDiv').toggleClass('highlighted');
  • html() 方法：设置或获取匹配元素的 HTML 内容。
  <div id="myDiv">This is some <strong>HTML</strong> content.</div>

// 获取 HTML 内容
     var divContent = $('#myDiv').html();
     console.log(divContent); // 输出：This is some <strong>HTML</strong> content.
// 设置 HTML 内容
     $('#myDiv').html('<p>This is new HTML content.</p>');

  • text() 方法：设置或获取匹配元素的文本内容。

    <div id="myDiv">This is some text.</div>

    // 获取文本内容
var divText = $('#myDiv').text();
console.log(divText); // 输出：This is some text.
// 设置文本内容
$('#myDiv').text('This is new text.');

  • val() 方法：获取或设置表单元素的值。

    <input type="text" id="myInput" value="Initial value">

    // 获取 value 属性值
var inputValue = $('#myInput').val();
console.log(inputValue); // 输出：Initial value
 // 设置 value 属性值
$('#myInput').val('New value');

  • attr() 方法：获取或设置元素的属性值。

    <img src="image.jpg" id="myImage" alt="An image">

    // 获取属性值
var imageSrc = $('#myImage').attr('src');
console.log(imageSrc); // 输出：image.jpg
 // 设置属性值
$('#myImage').attr('src', 'newImage.jpg').attr('alt', 'A new image');

  • append() 方法：在被选元素的结尾插入内容。

    • 插入 HTML 字符串：
    <div id="myDiv"></div>

    $('#myDiv').append('<p>This is appended text.</p>');

    这将在 id 为myDiv的元素的结尾插入一个<p>标签，内容为“This is appended text.”。

    • 插入 DOM 元素：
    <div id="myDiv"></div>
<p id="myParagraph">This is a paragraph.</p>

    var paragraph = $('#myParagraph');
$('#myDiv').append(paragraph);

    这将把 id 为myParagraph的<p>元素移动到 id 为myDiv的元素的结尾。

    • 插入 jQuery 对象：
    <div id="myDiv"></div>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

    var listItems = $('li');
$('#myDiv').append(listItems);

    这将把<ul>中的<li>元素移动到 id 为myDiv的元素的结尾。

    • 使用函数插入内容：
    <div class="box"></div>
<div class="box"></div>
<div class="box"></div>

    $('.box').append(function(index) {
  return '<p>Appended content for box ' + (index + 1) + '</p>';
});

  • prepend() 方法：在被选元素的开头插入内容。

    • 插入 HTML 字符串：
    <div id="myDiv">Existing content.</div>

    $('#myDiv').prepend('<p>This is prepended text.</p>');

    这将在 id 为myDiv的元素的开头插入一个<p>标签，内容为“This is prepended text.”。

    • 插入 DOM 元素：
    <div id="myDiv">Existing content.</div>
<p id="myParagraph">This is a paragraph.</p>

    var paragraph = $('#myParagraph');
$('#myDiv').prepend(paragraph);

    这将把 id 为myParagraph的<p>元素移动到 id 为myDiv的元素的开头。

    • 插入 jQuery 对象：
    <div id="myDiv">Existing content.</div>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

    var listItems = $('li');
$('#myDiv').prepend(listItems);

    这将把<ul>中的<li>元素移动到 id 为myDiv的元素的开头。

    • 使用函数插入内容：
    <div class="box">Existing content.</div>
<div class="box">Existing content.</div>
<div class="box">Existing content.</div>

    $('.box').prepend(function(index) {
  return '<p>Prepended content for box ' + (index + 1) + '</p>';
});
// 这将为每个具有`class="box"`的元素的开头插入不同的`<p>`标签内容。

  • before() 方法：在被选元素之前插入内容。

    • 插入 HTML 字符串：

      <p id="myParagraph">Existing text.</p>

      $('#myParagraph').before('<span>This is inserted before.</span>');

      这将在 id 为myParagraph的<p>元素之前插入一个<span>标签，内容为“This is inserted before.”。

    • 插入 DOM 元素：

      <p id="myParagraph">Existing text.</p>
<div id="myDiv">This is a div.</div>

      var div = $('#myDiv');
$('#myParagraph').before(div);

      这将把 id 为myDiv的<div>元素移动到 id 为myParagraph的<p>元素之前。

    • 插入 jQuery 对象：

      <p id="myParagraph">Existing text.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

      var listItems = $('li');
$('#myParagraph').before(listItems);

      这将把<ul>中的<li>元素移动到 id 为myParagraph的<p>元素之前。

    • 使用函数插入内容：

      <p class="box">Existing text.</p>
<p class="box">Existing text.</p>
<p class="box">Existing text.</p>

      $('.box').before(function(index) {
  return '<span>Inserted before box ' + (index + 1) + '</span>';
});
//  这将为每个具有`class="box"`的`<p>`元素之前插入不同的`<span>`标签内容。

  • after() 方法：在被选元素之后插入内容。

    • 插入 HTML 字符串：
      <p id="myParagraph">Existing text.</p>

      $('#myParagraph').after('<span>This is inserted after.</span>');
//  这将在 id 为`myParagraph`的`<p>`元素之后插入一个`<span>`标签，内容为“This is inserted after.”。
    • 插入 DOM 元素：
      <p id="myParagraph">Existing text.</p>
<div id="myDiv">This is a div.</div>

      var div = $('#myDiv');
$('#myParagraph').after(div);
// 这将把 id 为`myDiv`的`<div>`元素移动到 id 为`myParagraph`的`<p>`元素之后。
    • 插入 jQuery 对象：
      <p id="myParagraph">Existing text.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

      var listItems = $('li');
$('#myParagraph').after(listItems);
//  这将把`<ul>`中的`<li>`元素移动到 id 为`myParagraph`的`<p>`元素之后。
      • 使用函数插入内容：
      <p class="box">Existing text.</p>
<p class="box">Existing text.</p>
<p class="box">Existing text.</p>

      $('.box').after(function(index) {
  return '<span>Inserted after box ' + (index + 1) + '</span>';
});
// 这将为每个具有`class="box"`的`<p>`元素之后插入不同的`<span>`标签内容。

  • fadeIn() 方法：以淡入效果显示隐藏的元素。

    <div id="myDiv" style="display:none;">This is a div.</div>

    $('#myDiv').fadeIn();
// 或
$('#myDiv').fadeIn(1000);
// 或
$('#myDiv').fadeIn('slow', function() {
  console.log('Fade in complete.');
});
// 这些代码将使 id 为`myDiv`的元素淡入显示。如果不指定速度参数，将使用默认速度。如果指定了速度参数，可以是一个字符串（如“slow”表示较慢的速度，“fast”表示较快的速度）或一个数字（表示动画的持续时间，单位为毫秒）。如果指定了回调函数，将在动画完成后执行该函数。

  • fadeOut() 方法：以淡出效果隐藏显示的元素。

    <div id="myDiv">This is a div.</div>

    $('#myDiv').fadeOut();
// 或
$('#myDiv').fadeOut(1000);
// 或
$('#myDiv').fadeOut('slow', function() {
  console.log('Fade out complete.');
});
// 这些代码将使 id 为`myDiv`的元素淡出隐藏。如果不指定速度参数，将使用默认速度。如果指定了速度参数，可以是一个字符串（如“slow”表示较慢的速度，“fast”表示较快的速度）或一个数字（表示动画的持续时间，单位为毫秒）。如果指定了回调函数，将在动画完成后执行该函数。

2.在 jQuery 中，常见使用委托的事件有哪些？

在 jQuery 中，委托是一种将事件处理程序绑定到父元素上，以处理动态添加的子元素的事件的技术。

以下是一些常见使用委托的事件：

1）点击事件（click）
  • 场景：
    • 当页面上有动态生成的元素，如通过 Ajax 加载的数据生成的列表项或按钮等，需要对这些元素的点击进行响应时，可以使用委托的点击事件。
    • 例如，一个无限滚动的页面，新的内容会不断添加到页面中，使用委托可以确保新添加的元素也能响应点击事件。
  • 示例代码：
    ` ``html
      ``` ```javascript // 假设后续会有新的列表项动态添加到 #myList 中 $('#myList').on('click', 'li', function() { console.log('列表项被点击了'); }); ```
    2）鼠标悬停事件（mouseenter 和 mouseleave）
    • 场景：
      • 对于动态生成的元素，需要在鼠标悬停时显示特定的效果或信息时，可以使用委托的鼠标悬停事件。
      • 比如，一个商品列表，当鼠标悬停在商品图片上时显示放大效果或详细信息，新添加的商品也需要有同样的效果。
    • 示例代码：
      <div id="myContainer">
</div>

      $('#myContainer').on('mouseenter', '.item', function() {
  $(this).addClass('highlighted');
});
$('#myContainer').on('mouseleave', '.item', function() {
  $(this).removeClass('highlighted');
});
    3）表单提交事件（submit）
    • 场景：
      • 当有动态生成的表单，需要在表单提交时进行处理时，可以使用委托的表单提交事件。
      • 例如，一个页面上可以动态添加新的表单，使用委托可以确保所有表单的提交都能被正确处理。
    • 示例代码：
      <form id="myForm">
</form>

      $('#myForm').on('submit', function(event) {
  event.preventDefault();
  console.log('表单被提交了');
});
    4）输入框变化事件（change）
    • 场景：
      • 对于动态生成的输入框，需要在输入值发生变化时进行响应时，可以使用委托的输入框变化事件。
      • 比如，一个用户可以动态添加新的输入框来输入数据，使用委托可以确保对新输入框的变化也能进行处理。
    • 示例代码：
      <div id="myInputContainer">
</div>

      $('#myInputContainer').on('change', 'input[type="text"]', function() {
  console.log('输入框的值发生了变化');
});

    3.在 jQuery 中，常见的鼠标事件方法有哪些？

    1）click（鼠标点击事件）
    • 用法：
      • $(selector).click(function)：当用户在匹配的元素上点击时，会触发指定的函数。
    • 示例：
      <button id="myButton">点击我</button>

      $('#myButton').click(function() {
  alert('按钮被点击了！');
});
    2）dblclick（鼠标双击事件）
    • 用法：
      • $(selector).dblclick(function)：当用户在匹配的元素上双击时，会触发指定的函数。
    • 示例：
      <div id="myDiv">双击这里</div>

      $('#myDiv').dblclick(function() {
  $(this).css('background-color', 'yellow');
});
    3）mouseenter（鼠标进入事件）
    • 用法：
      • $(selector).mouseenter(function)：当鼠标指针进入匹配的元素时，会触发指定的函数。
    • 示例：
      <div id="myDiv">鼠标进入这里</div>

      $('#myDiv').mouseenter(function() {
  $(this).css('font-size', '20px');
});
    4）mouseleave（鼠标离开事件）
    • 用法：
      • $(selector).mouseleave(function)：当鼠标指针离开匹配的元素时，会触发指定的函数。
    • 示例：
      <div id="myDiv">鼠标离开这里</div>

      $('#myDiv').mouseleave(function() {
  $(this).css('font-size', '16px');
});
    5）mousemove（鼠标移动事件）
    • 用法：
      • $(selector).mousemove(function)：当鼠标指针在匹配的元素上移动时，会不断触发指定的函数。
    • 示例：
      <div id="myDiv">移动鼠标这里</div>

      $('#myDiv').mousemove(function(event) {
  $(this).text('X: ' + event.pageX + ', Y: ' + event.pageY);
});
    6）hover（鼠标进入和离开的组合事件）
    • 用法：
      • $(selector).hover(inFunction, outFunction)：当鼠标指针进入匹配的元素时，会触发第一个函数（inFunction）；当鼠标指针离开匹配的元素时，会触发第二个函数（outFunction）。
    • 示例：
    <div id="myDiv">鼠标悬停这里</div>

    $('#myDiv').hover(function() {
  $(this).css('background-color', 'lightblue');
}, function() {
  $(this).css('background-color', 'white');
});
    转载请注明出处或者链接地址：https://www.qianduange.cn//article/17433.html
    标签
    上一篇：HTML基本结构及基本标签
    评论
    相关文章

    前端哥

    前端哥

    发布的文章

    Docker下使用llama.cpp部署带Function calling和Json Mode功能的Mistral 7B模型

    2024-09-12 23:09:44

    JSON解析异常: A JSONObject text must begin with ‘{‘ at 1 [character 2 line 1]

    2024-09-12 23:09:42

    Vue-Json-Editor：一款高效的JSON编辑器组件

    2024-09-12 23:09:28

    Spring MVC-JSON

    2024-06-02 09:06:53

    如何读取springboot项目中json文件

    2024-09-12 23:09:26

    Fastjson2 ＜== 2.0.26反序列漏洞

    2024-09-12 23:09:24

    【Python系列】JSON和JSONL简介

    2024-09-12 23:09:19

    VSCode 终端显示“npm : 无法加载文件 ，因为在此系统上禁止运行脚本

    2024-09-12 23:09:16

    npm 清缓存（重新安装node-modules）

    2024-09-12 23:09:14

    npm救赎之道：探索--save与--save--dev的神秘力量！

    2024-09-12 23:09:13

    大家推荐的文章
    1

    【Echarts系列】—— 实现电池图、3D立体圆形柱状图

    2024-03-03 11:03:011001
    2

    CSS写代码使页面划分为左右两个区域

    2024-09-09 00:09:071000
    3

    vue使用datav echarts

    2024-09-06 00:09:381000
    4

    使用TweenMax.js和CSS3创建冰球运动员动画效果教程

    2024-09-04 23:09:411000
    5

    使用CDN提高jQuery加载速度

    2024-08-24 23:08:211000
    6

    小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

    2024-08-19 22:08:161000
    7

    《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

    2024-08-19 22:08:121000
    8

    npm的使用

    2024-08-18 00:08:131000
    9

    JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

    2024-07-30 22:07:311000
    10

    在HTML和CSS当中运用显示隐藏

    2024-06-17 09:06:541000

    rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

    Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

    讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

    前端技术交流源码工具分享网站

    会员中心 联系我 留言建议 回顶部
    复制成功！