【jQuery】前端八股文面试题

jQuery

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

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>HTMLstrong> content.div>

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

• 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('
  This is appended text.
  ');
  

  这将在 id 为myDiv的元素的结尾插入一个

  标签，内容为“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的

  元素移动到 id 为myDiv的元素的结尾。

  • 插入 jQuery 对象：

  <div id="myDiv">div>
  <ul>
    <li>Item 1li>
    <li>Item 2li>
  ul>
  

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

  这将把

  中的
  • 元素移动到 id 为myDiv的元素的结尾。
    • 使用函数插入内容：

    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    

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

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

    • 插入 HTML 字符串：

    <div id="myDiv">Existing content.div>
    

    $('#myDiv').prepend('
    This is prepended text.
    ');
    

    这将在 id 为myDiv的元素的开头插入一个

    标签，内容为“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的

    元素移动到 id 为myDiv的元素的开头。

    • 插入 jQuery 对象：

    <div id="myDiv">Existing content.div>
    <ul>
      <li>Item 1li>
      <li>Item 2li>
    ul>
    

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

    这将把

    中的
    • 元素移动到 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 '
      Prepended content for box ' + (index + 1) + '
      ';
      });
      // 这将为每个具有`class="box"`的元素的开头插入不同的`
      `标签内容。
      

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

      • 插入 HTML 字符串：

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

        $('#myParagraph').before('This is inserted before.');
        

        这将在 id 为myParagraph的

        元素之前插入一个标签，内容为“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的

        元素移动到 id 为myParagraph的

        元素之前。

      • 插入 jQuery 对象：

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

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

        这将把

        中的
        • 元素移动到 id 为myParagraph的

          元素之前。

        • 使用函数插入内容：

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

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

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

        • 插入 HTML 字符串：

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

          $('#myParagraph').after('This is inserted after.');
          //  这将在 id 为`myParagraph`的`
          `元素之后插入一个``标签，内容为“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`的`
          `元素移动到 id 为`myParagraph`的`
          `元素之后。
          

        • 插入 jQuery 对象：

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

          var listItems = $('li');
          $('#myParagraph').after(listItems);
          //  这将把`
          `中的`
          `元素移动到 id 为`myParagraph`的`
          `元素之后。
          

          • 使用函数插入内容：

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

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

      • 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');
      });