分类前端技术下的文章

2024-08-22




$(document).ready(function() {
    // 当按钮被点击时，使用blockUI显示加载提示，并在2秒后取消
    $('#myButton').click(function() {
        $.blockUI({ message: '<h1>正在处理...</h1>' });
        setTimeout(function() {
            $.unblockUI();
        }, 2000);
    });
});

这段代码使用jQuery的blockUI插件来显示一个自定义的加载提示，并在2秒后使用unblockUI方法将其关闭。这是一个简单的示例，展示了如何在处理异步操作时临时显示加载提示，增强用户体验。

- 阅读更多 -

jQuery 性能优化，最新前端开发面试解答，前端码农是如何进入腾讯的

System

2024-08-22

所有,jquery

在前端开发中，jQuery 是一个非常流行的库，但随着现代框架（如React, Vue, Angular）的发展和普及，其使用频率已经有所下降。以下是一些关于如何优化jQuery代码的建议：

避免使用全局选择器：避免使用 $("*") 或 $(".class")，除非绝对必要。
缓存选择器结果：经常被访问的元素可以被缓存在一个变量中，以避免重复查询。




var $myElement = $("#myElement");

使用 .on() 绑定事件监听器：如果可能，使用 .on() 替代 .bind(), .live(), .delegate(), .click() 等方法。
避免使用 .each()：如果可能，尽量使用原生JavaScript的方法，比如 forEach 或 for 循环。
使用 .data() 存储数据：避免在DOM元素上存储大量数据，使用 .data() 方法可以更有效地管理数据。
使用 .off() 移除事件监听器：当不再需要事件监听器时，使用 .off() 来移除它们。
优化选择器：尽可能精确地指定选择器，以减少搜索时间。
使用 .prop() 和 .attr()：在处理属性时，使用 .prop() 来获取属性的值，使用 .attr() 来获取或设置属性的值。
使用 .stop() 阻止事件冒泡：在触发事件监听器时，使用 .stop() 来避免不必要的事件冒泡。
使用 .end() 方法：在链式调用中，使用 .end() 来返回前一个jQuery对象，以减少不必要的查询。

示例代码优化：




// 不推荐
$(".myButton").click(function() {
  $(".myList li").each(function() {
    $(this).css("color", "red");
  });
});
 
// 推荐
var $myList = $(".myList li");
$(".myButton").click(function() {
  $myList.css("color", "red");
});

这些是一些基本的jQuery性能优化技巧。在实际开发中，可能还需要考虑其他方面，如使用事件委托、减少DOM操作、使用变量缓存等。

- 阅读更多 -

html+css+jquery实现轮播图自动切换、左右切换、点击切换

System

2024-08-22

所有,jquery

以下是一个简单的HTML、CSS和jQuery实现的轮播图示例，包含自动切换、左右切换以及点击切换功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
  }
  .slider img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .slider img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  let currentIndex = 0;
  const items = $('.slider img');
  const itemCount = items.length;
 
  // 自动切换
  function autoSlide() {
    let nextIndex = (currentIndex + 1) % itemCount;
    items.eq(nextIndex).fadeIn(500).addClass('active');
    items.eq(currentIndex).fadeOut(500).removeClass('active');
    currentIndex = nextIndex;
  }
 
  // 设置自动切换间隔（例如：2000毫秒）
  setInterval(autoSlide, 2000);
 
  // 左右切换
  $('.slider').on('click', function() {
    let nextIndex;
    if (event.offsetX < $(this).width() / 2) {
      nextIndex = (currentIndex - 1 + itemCount) % itemCount;
    } else {
      nextIndex = (currentIndex + 1) % itemCount;
    }
    items.eq(nextIndex).fadeIn(500).addClass('active');
    items.eq(currentIndex).fadeOut(500).removeClass('active');
    currentIndex = nextIndex;
  });
});
</script>
 
</body>
</html>

在这个示例中，轮播图包括三张图片，并且默认显示第一张。CSS用于设置轮播图的基本样式，其中.active类用于显示当前的图片。jQuery用于处理自动切换、左右切换以及点击切换的逻辑。setInterval函数用于每隔一定时间自动切换图片，$(document).on('click', function() {...})用于处理点击切换的逻辑，通过检查点击事件的offsetX属性判断用户是想要切换到左边的图片还是右边的图片。

- 阅读更多 -

原生JS/JQuery封装请求工具类

System

2024-08-22

所有,jquery

以下是一个使用原生JavaScript封装的简单AJAX请求工具类示例：




class AjaxRequest {
  static get(url, callback) {
    this.request('GET', url, callback);
  }
 
  static post(url, data, callback) {
    this.request('POST', url, callback, data);
  }
 
  static request(method, url, callback, data) {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
 
    if (method === 'POST') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
 
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          callback(null, xhr.responseText);
        } else {
          callback(new Error('Error: ' + xhr.status), xhr.responseText);
        }
      }
    };
 
    if (method === 'GET') {
      xhr.send();
    } else if (method === 'POST') {
      xhr.send(data);
    }
  }
}
 
// 使用示例
AjaxRequest.get('https://api.example.com/data', (err, response) => {
  if (err) {
    console.error(err);
  } else {
    console.log(response);
  }
});
 
AjaxRequest.post('https://api.example.com/data', 'key1=value1&key2=value2', (err, response) => {
  if (err) {
    console.error(err);
  } else {
    console.log(response);
  }
});

这个AjaxRequest类提供了get和post方法来发送AJAX请求。request方法是基础方法，用于执行实际的请求，并处理响应。这个类可以被扩展以添加额外的HTTP方法或功能，但它提供了一个简单的封装示例。

- 阅读更多 -

jQuery超详细总结，web前端开发初级

System

2024-08-22

所有,jquery

jQuery是一种快速、简洁的JavaScript库，它使得HTML文档的遍历和操作、事件处理、动画和Ajax交互等操作更加简单和易于使用。

选择器

jQuery提供了强大的选择器，可以快速定位到DOM元素。




$('p') // 选取所有的p元素
$('#myId') // 选取ID为myId的元素
$('.myClass') // 选取所有class为myClass的元素
$('ancestor descendant') // 选取ancestor元素里的所有descendant元素
$('parent > child') // 选取parent元素的直接子元素child
$('prev + next') // 选取紧跟prev元素的next元素
$('prev ~ siblings') // 选取prev元素之后的所有siblings元素

事件

jQuery提供了一套丰富的事件处理方法。




$('button').click(function() {
    // 处理函数
})
 
$('button').hover(function() {
    // 鼠标悬停时的处理函数
}, function() {
    // 鼠标离开时的处理函数
})

样式

jQuery可以方便地操作元素的样式。




$('p').css('color', 'red'); // 设置p元素的文字颜色为红色
$('p').css({'color': 'red', 'font-size': '20px'}); // 设置p元素的文字颜色和字号

动画

jQuery提供了一系列的动画方法。




$('p').hide(); // 隐藏p元素
$('p').show(); // 显示p元素
$('p').fadeIn(); // 淡入p元素
$('p').fadeOut(); // 淡出p元素
$('p').slideUp(); // 向上滑动p元素
$('p').slideDown(); // 向下滑动p元素

AJAX

jQuery简化了AJAX操作。




$.ajax({
    url: 'some.php',
    type: 'GET',
    data: {id: 1},
    success: function(response) {
        // 处理响应数据
    }
})
 
$('form').serialize(); // 将表单数据序列化为字符串

链式操作

jQuery允许你在一个选择器上连续进行多个操作。




$('p')
    .css('color', 'red')
    .slideUp()
    .show();

插件

jQuery有大量的插件，可以用来扩展jQuery的功能。




$('p').pluginName({option1: 'value1', option2: 'value2'});

数据缓存

jQuery可以将数据与元素关联起来，方便进行数据缓存。




$('p').data('key', 'value'); // 设置数据
var data = $('p').data('key'); // 获取数据

兼容性

jQuery关注跨浏览器的兼容性，确保代码能在不同的浏览器上正常工作。

性能

jQuery在性能上也做了优化，比如在添加大量元素时使用$('<p>')而不是直接在HTML中写<p>标签。

以上是jQuery的一些基本用法和特性，实际开发中可以根据需要选择合适的方法和插件。

- 阅读更多 -

监听多个＜select＞元素的 jQuery 实现

System

2024-08-22

所有,jquery




$(document).ready(function() {
    // 假设有两个select元素，id分别为select1和select2
    $('#select1, #select2').on('change', function() {
        var $this = $(this);
        var selectedValue = $this.val();
        // 根据选择的值进行相应的操作
        if(selectedValue === 'option1') {
            // 执行某些操作
        } else if(selectedValue === 'option2') {
            // 执行其他操作
        }
    });
});

这段代码使用了jQuery的 .on() 方法来绑定 change 事件到多个select元素上。当任一select元素的选中项发生变化时，会执行回调函数，在回调函数中可以根据选中的值进行相应的逻辑处理。

System

2024-08-22

所有,elementui

Element UI的el-select组件在使用时，如果页面发生滚动，可能会出现el-option的下拉选项超出元素的区域。这个问题通常是由于计算位置不准确或是定位方式不正确导致的。

解决这个问题，可以尝试以下方法：

确保el-select的父元素有适当的定位属性，比如position: relative;。
检查是否有全局样式或者Element UI变体影响了下拉菜单的定位。
如果使用了自定义滚动容器，确保el-select组件能够正确地处理滚动事件。

如果上述方法都不能解决问题，可以考虑使用Element UI的popper-class属性自定义下拉菜单的样式，并通过CSS调整定位。

示例代码：




<template>
  <el-select v-model="value" popper-class="custom-popper">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }, ...]
    };
  }
};
</script>
 
<style>
.custom-popper {
  /* 在这里添加定位相关的CSS样式 */
}
</style>

在custom-popper类中，你可以使用position, top, left, transform等CSS属性来调整下拉菜单的定位，确保它能够在滚动时正确地显示在el-select的下方。如果问题依然存在，可能需要更详细地调查页面布局和滚动事件处理的情况。

System

2024-08-22

所有,typescript

为了创建一个使用了所提及技术的Vue 3项目，你可以使用Vite官方提供的Vue CLI插件，通过如下步骤快速搭建一个基础项目：

确保你已经安装了Node.js和npm。
安装或升级到最新版本的Vue CLI：




npm install -g @vue/cli

创建一个新的Vue 3项目，并使用Element Plus、Pinia、Vue Router和Tailwind CSS：




vue create my-vite-app
cd my-vite-app

在创建过程中，选择需要的配置，确保选中了Vue 3、Vite、TypeScript、Router、Vuex（选择Pinia）、CSS Pre-processors（选择Tailwind CSS）和Linter / Formatter。
安装Element Plus和Axios：




npm install element-plus pinia axios

配置Tailwind CSS。你可以使用官方推荐的Tailwind CSS插件，例如postcss-import、tailwindcss和autoprefixer。
在vite.config.ts中配置Tailwind CSS：




// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "${path.resolve(__dirname, 'src/styles/tailwind.scss')}";`,
      },
    },
  },
})

在src/styles/tailwind.scss中引入Tailwind CSS：




// src/styles/tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

在main.ts中配置Element Plus和Pinia：




// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.use(createPinia())
 
app.mount('#app')

在src/router/index.ts中配置Vue Router：




// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  // 定义路由
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})
 
export default router

在src/store/index.ts中配置Pinia：




// src/store/index.ts
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => {
    return { counter: 0 }
  },
  actions: {
    increment() {
      this.counter++
    },
  },
})

在src/main.js中使用Vue Router和Pinia：




// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { useMainStore } from './store'
 
const app = createApp(App)
 
app.use(rou

System

2024-08-22

所有,typescript




// 假设我们有一个React组件库，并且我们想要创建一个新的按钮组件
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
 
// 使用styled-components来定义按钮样式
const StyledButton = styled.button`
  background-color: ${({ primary }) => (primary ? '#007bff' : '#00ff00')};
  color: ${({ primary }) => (primary ? '#fff' : '#000')};
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
 
  &:hover {
    background-color: ${({ primary }) => (primary ? '#0056b3' : '#008000')};
  }
`;
 
// 按钮组件
const Button = ({ primary, onClick, label }) => {
  return <StyledButton primary={primary} onClick={onClick}>{label}</StyledButton>;
};
 
Button.propTypes = {
  primary: PropTypes.bool,
  onClick: PropTypes.func,
  label: PropTypes.string
};
 
Button.defaultProps = {
  primary: false,
  onClick: () => {},
  label: 'Click me'
};
 
export default Button;

这个代码实例展示了如何创建一个React组件，使用了styled-components来定义组件样式，并且使用prop-types来确保属性类型的正确性。这个组件可以被其他React应用导入并使用，提高了用户界面的一致性和可维护性。

- 阅读更多 -

Typescript 中根据某个字段判断其他字段是否必传

System

2024-08-22

所有,typescript

在TypeScript中，你可以使用条件类型来基于一个字段决定另一个字段是否必传。下面是一个简单的例子，其中我们定义了一个RequiredIf类型，它会检查Condition字段是否为true，如果是，则DependentField就是必需的。




type RequiredIf<Condition extends boolean, DependentField> = Condition extends true ? DependentField : {};
 
interface MyForm {
  hasAddress: boolean;
  address: string;
}
 
// 如果 hasAddress 是 true，则 address 是必需的
type MyFormWithRequiredAddress = RequiredIf<true, { address: string }>;
 
// 实际使用时，你可以将 MyFormWithRequiredAddress 作为 MyForm 的子类型
const formData: MyForm & MyFormWithRequiredAddress = {
  hasAddress: true,
  address: "123 Main St", // 这里的 address 是必需的，因为 hasAddress 是 true
};

在这个例子中，MyFormWithRequiredAddress 类型会根据第一个参数 true 是否扩展为 DependentField 类型来决定 address 字段是否是必需的。如果 hasAddress 是 false 或者其它条件不满足，address 就不是必需的。

- 阅读更多 -