jQuery常用知识点总结以及平时封装常用函数

jQuery常用知识点总结

为什么需要jQuery

JavaScript 语言是用来制作交互式网页效果的，但是在使用原生JS来处理DOM对象时会出现很多繁琐的操作，并且不兼容性很高。jQuery的出现正是为了解决这些问题，在JS基础上封装了一套API，使得开发者处理DOM元素、事件、Ajax等的代码更加简洁高效，并且兼容性也很好。

jQuery基础知识点

1. jQuery的引入

jQuery可以通过CDN引入，也可以下载后引入：

<!-- 通过CDN的引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 或者下载后引入，如下： -->
<script src="/path/to/jquery.min.js"></script>

2. 等待DOM加载完毕

为了确保代码能够正确运行，我们需要在DOM结构构建完毕后才开始执行代码。这一般通过 jQuery.ready() 或 $(document).ready() 来实现。

$(document).ready(function () {
  // 在DOM结构构建完成后执行的代码
});

3. jQuery选择器

jQuery的选择器可以很方便地基于CSS选择器来查找元素。这里列出了一些常见的选择器：

选择器	说明
#id	通过id查找元素
.class	通过class查找元素
tag	通过标签名查找元素
*	匹配所有元素
:eq()	选取带有指定 index 值的元素

// 选取ID为wrapper的元素
$('#wrapper')

// 选取class为list的元素
$('.list')

// 选取所有的a标签
$('a')

// 选取第2个li标签
$('li:eq(1)')

4. DOM操作

通过jQuery可以方便地操作DOM元素，下面是一些常用的DOM操作方法：

• text()：获取或设置元素的文本内容。
• html()：获取或设置元素的HTML内容。
• val()：获取或设置表单元素的值。
• attr()：获取或设置元素的属性。
• css()：获取或设置元素的样式属性。
• addClass()：为元素添加一个CSS类。
• removeClass()：移除元素的一个CSS类。

// 设置h1元素的文本内容
$('h1').text('Hello jQuery!')

// 添加一个class到div元素上
$('div').addClass('my-class')

// 获取一个input元素的值
$('input').val()

// 获取或设置img元素的src属性
$('img').attr('src', '/path/to/image.jpg')

// 移除一个p元素的CSS类
$('p').removeClass('active')

5. 事件处理

jQuery支持各种DOM事件，包括鼠标事件、键盘事件、表单事件等，事件的处理函数可以通过 on() 方法来定义：

// 执行一段代码以响应点击事件
$('button').on('click', function () {
  // 处理点击事件的代码
});

// 响应键盘事件
$(document).on('keyup', function () {
  // 处理键盘事件的代码
});

6. Ajax请求

jQuery封装了Ajax请求，可以很方便地向服务器端发送HTTP请求并处理响应。下面是一个简单的例子，发起一个GET请求并在响应成功后处理响应数据：

$.get('/api/some-data', function (data) {
  // 处理响应数据的代码
});

平时封装常用函数

下面是两个简单的例子，封装了一些常用的功能函数：

1. 分页

function pagination(total, current, pageSize) {
  let pageCount = Math.ceil(total / pageSize);
  let prev = current - 1;
  let next = current + 1;
  let pages = [];

  if (prev > 0) {
    pages.push(prev > pageCount ? pageCount : prev);
  }

  for (let i = 1; i <= pageCount; i++) {
    if (Math.abs(i - current) <= 2) {
      pages.push(i);
    }
  }

  if (next <= pageCount) {
    pages.push(next);
  }

  return pages;
}

2. 模态框

function modal(options) {
  let template = `
    <div class="modal fade" id="${options.id}">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="${options.id}-title">${options.title}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ${options.content}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">${options.confirmText}</button>
          </div>
        </div>
      </div>
    </div>
  `;

  $('body').append(template);

  $(`#${options.id}`).modal('show');

  $(`#${options.id} .btn-primary`).on('click', function () {
    if (typeof options.onConfirm === 'function') {
      options.onConfirm();
    }
    $(`#${options.id}`).modal('hide');
  });

  $(`#${options.id}`).on('hidden.bs.modal', function () {
    $(this).remove();
  });
}

上面这两个例子只是其中的一些常见的功能函数，实际上在开发中可以根据需求封装更加灵活的函数。