分类前端技术下的文章

2024-08-08

在jQuery中，元素选择器是一种基于CSS选择器语法来选择HTML元素的方法。jQuery提供了丰富的选择器，可以用来选取特定的DOM元素。

以下是一些常用的jQuery元素选择器的示例：

选择所有的元素：




$('p').doSomething();

选择id为myId的元素：




$('#myId').doSomething();

选择所有的class为myClass的元素：




$('.myClass').doSomething();

选择所有的<div>元素中的元素：




$('div p').doSomething();

选择直接子元素<ul>下的所有<li>元素：




$('ul > li').doSomething();

选择所有同级的元素：




$('p + p').doSomething();

选择所有后面的兄弟元素：




$('p ~ p').doSomething();

选择第一个元素：




$('p:first').doSomething();

选择最后一个元素：




$('p:last').doSomething();

选择索引为1的元素：




$('p:eq(1)').doSomething();

选择所有可见的元素：




$('p:visible').doSomething();

选择所有的元素，它们具有myAttr属性：




$('p[myAttr]').doSomething();

选择所有元素，它们的myAttr属性等于myValue：




$('p[myAttr="myValue"]').doSomething();

选择所有<input>元素，它们的type属性为text：




$('input[type="text"]').doSomething();

在这些示例中，.doSomething()是一个占位符，代表你想要执行的具体方法。实际使用时，你需要将.doSomething()替换为实际的方法。

- 阅读更多 -

JQuery动态加载select下拉列表添加option数据代码参考

System

2024-08-08

所有,jquery




// 假设我们有一个空的select元素
<select id="mySelect"></select>
 
// 使用jQuery动态添加option
$.ajax({
    url: 'your-data-source.php', // 数据源URL
    type: 'GET', // 请求方法
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(data) {
        // 假设返回的数据是一个对象数组，每个对象包含id和name属性
        var select = $('#mySelect');
        $.each(data, function(key, value) {
            select.append($('<option></option>').attr('value', value.id).text(value.name));
        });
    }
});

这段代码展示了如何使用jQuery和AJAX从服务器获取数据，并动态地将这些数据作为option元素添加到select元素中。这是一个常见的模式，对于需要从服务器获取数据并动态更新表单元素的场景非常有用。

- 阅读更多 -

jQuery 实现小球撞击动画

System

2024-08-08

所有,jquery

以下是一个使用jQuery实现小球碰撞动画的简单示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ball Collision</title>
<style>
  .ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    left: 50px;
  }
</style>
</head>
<body>
 
<div class="ball" id="ball1"></div>
<div class="ball" id="ball2"></div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

JavaScript (jQuery):




$(document).ready(function() {
  const BALL_RADIUS = 25;
  const BALL1_INIT_POS = { x: 50, y: 50 };
  const BALL2_INIT_POS = { x: 150, y: 50 };
  const SPEED = 5;
 
  function moveBall(ball, newPos) {
    $(ball).css({
      top: newPos.y + 'px',
      left: newPos.x + 'px'
    });
  }
 
  function checkCollision(ball1, ball2) {
    const pos1 = $(ball1).position();
    const pos2 = $(ball2).position();
    const width1 = $(ball1).width();
    const width2 = $(ball2).width();
    const distX = Math.abs(pos1.left - pos2.left);
    const distY = Math.abs(pos1.top - pos2.top);
    const radiusTotal = BALL_RADIUS + BALL_RADIUS;
 
    if (distX < (width1 + width2) / 2 && distY < (width1 + width2) / 2) {
      const angle = Math.atan2(pos2.top - pos1.top, pos2.left - pos1.left);
      const speed1 = { x: SPEED * Math.cos(angle), y: SPEED * Math.sin(angle) };
      const speed2 = { x: -SPEED * Math.cos(angle), y: -SPEED * Math.sin(angle) };
 
      moveBall(ball1, { x: pos1.left + speed1.x, y: pos1.top + speed1.y });
      moveBall(ball2, { x: pos2.left + speed2.x, y: pos2.top + speed2.y });
    }
  }
 
  function animate() {
    moveBall('#ball1', { x: BALL1_INIT_POS.x += SPEED, y: BALL1_INIT_POS.y });
    moveBall('#ball2', { x: BALL2_INIT_POS.x -= SPEED, y: BALL2_INIT_POS.y });
    checkCollision('#ball1', '#ball2');
    requestAnimationFrame(animate);
  }
 
  animate();
});

这段代码会创建两个小球，并且使它们在碰撞时进行碰撞动画。每次调用animate函数时，小球的位置会更新，并且调用checkCollision函数检查小球之间是否有碰撞。如果有碰撞，小球会反弹并继续移动。这个示例假设了没有其他物体与小球碰撞，并且没有考虑重力或其他物理效果。

- 阅读更多 -

jQuery 实现显示与隐藏效果，吊打面试官系列

System

2024-08-08

所有,jquery




// 引入jQuery库
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
// 显示和隐藏效果函数
function toggleEffect(selector, effect, duration) {
    $(selector).toggle(function() {
        $(this).show(effect, {}, duration);
    }, function() {
        $(this).hide(effect, {}, duration);
    });
}
 
// 使用示例
$(document).ready(function() {
    // 为id为"myDiv"的元素添加点击事件
    $("#myDiv").click(function() {
        // 使用"slide"效果，持续时间为500毫秒来切换显示和隐藏
        toggleEffect("#myDiv", "slide", 500);
    });
});

这段代码定义了一个toggleEffect函数，它接受目标元素的选择器、显示或隐藏时使用的效果以及动画的持续时间作为参数。函数内部使用了jQuery的toggle方法来在显示和隐藏之间切换。当用户点击目标元素时，效果会被触发。这是一个简单的例子，展示了如何使用jQuery实现显示和隐藏效果的函数。

- 阅读更多 -

基于jquery的web分页实现

System

2024-08-08

所有,jquery




$(document).ready(function() {
    var currentPage = 1; // 当前页面
    var pageSize = 10; // 每页显示数量
    var totalRecords = 0; // 总记录数
    var totalPages = 0; // 总页数
 
    // 获取数据
    function fetch_data(page) {
        $.ajax({
            url: "server.php", // 服务器端脚本
            method: "GET", // 请求方法
            data: { page: page, size: pageSize }, // 发送到服务器的数据
            dataType: "json", // 服务器响应的数据类型
            success: function(response) {
                // 更新页面上的数据
                $('#table_data').html(response.data); // 假设response.data是服务器返回的HTML数据
 
                // 更新分页信息
                totalRecords = response.totalRecords; // 更新总记录数
                totalPages = Math.ceil(totalRecords / pageSize); // 计算总页数
                buildPagination(page); // 重新构建分页
            }
        });
    }
 
    // 构建分页
    function buildPagination(currentPage) {
        var html = '';
        for (var i = 1; i <= totalPages; i++) {
            html += '<a href="#" class="pagination-link" data-page="' + i + '">' + i + '</a>';
        }
        $('#pagination').html(html);
        $('#pagination .pagination-link[data-page="' + currentPage + '"]').addClass('active');
    }
 
    // 分页点击事件
    $('#pagination').on('click', '.pagination-link', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        currentPage = page;
        fetch_data(page);
    });
 
    // 初始加载第一页数据
    fetch_data(currentPage);
});

这段代码示例展示了如何使用jQuery来实现Web分页功能。它首先定义了一些变量来跟踪当前页面、每页显示的记录数、总记录数和总页数。然后，它实现了一个fetch_data函数，该函数通过Ajax请求从服务器获取数据，并在成功获取后更新页面上的数据和分页信息。最后，它绑定了分页点击事件，当用户点击分页链接时，会加载相应页面的数据。

- 阅读更多 -

Web建站之jQuery进阶篇 jQuery自定义插件应用开发

System

2024-08-08

所有,jquery




// 定义一个简单的jQuery插件，用于为元素添加一个点击事件，并在控制台打印消息
(function($){
    $.fn.extend({
        // 插件名称
        logClick: function(){
            // 遍历匹配的元素，并为它们添加点击事件处理程序
            return this.each(function(){
                $(this).click(function(){
                    console.log('元素被点击了！');
                    // 如果需要，可以在这里添加其他的点击行为
                });
            });
        }
    });
})(jQuery);
 
// 使用插件的例子
$(document).ready(function(){
    // 为所有的button元素添加logClick插件
    $('button').logClick();
});

这个jQuery插件定义了一个logClick方法，当按钮被点击时，在控制台打印一条消息。这是一个很好的入门级插件示例，展示了如何创建一个简单的jQuery插件并使用它。

- 阅读更多 -

vite线上和线下环境的配置

System

2024-08-08

所有,typescript

在Vite中，你可以通过不同的环境变量来区分线上和线下环境的配置。以下是一个基于Vite的项目中如何配置不同环境的示例：

在项目根目录下创建 .env 文件，用于所有的环境变量。
创建 .env.production 文件，用于生产环境的特定变量覆盖。
在 vite.config.js 中使用 import.meta.env 来访问环境变量。

.env 文件（所有环境共享）:




# 所有环境共有的变量
VITE_API_URL=https://api.example.com/

.env.production 文件（生产环境）:




# 只在生产环境中覆盖的变量
VITE_API_URL=https://production-api.example.com/

vite.config.js 文件中的配置:




import { defineConfig } from 'vite';
 
export default defineConfig(({ mode }) => {
  // 根据 mode 判断是否是生产环境
  const isProduction = mode === 'production';
 
  return {
    // 其他配置...
    server: {
      // 服务器配置...
    },
    build: {
      // 构建配置...
    },
    // 环境变量配置
    define: {
      'process.env': {
        // 将环境变量注入到应用中
        VITE_API_URL: isProduction ? JSON.stringify(process.env.VITE_API_URL_PROD)
                                  : JSON.stringify(process.env.VITE_API_URL)
      }
    }
  };
});

在开发过程中，你可以通过启动 Vite 服务器时指定的 mode 参数来区分不同的环境。例如，使用 npm 脚本来分别启动开发和生产模式的服务器：




// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

运行 npm run dev 将以默认的开发环境模式启动，而 npm run build 和 npm run preview 将会以生产环境模式运行。Vite 会自动加载项目根目录下的 .env 和与 mode 对应的 .env.production 文件中的变量。

- 阅读更多 -

egg-后端权限控制（限制接口访问）

System

2024-08-08

所有,typescript

在Egg.js中实现后端权限控制，通常可以通过中间件来限制接口访问。以下是一个简单的示例，展示了如何使用Egg.js中间件来限制接口访问：




// app/middleware/permission.js
module.exports = (options) => {
  return async function permission(ctx, next) {
    // 获取用户身份验证信息，例如token或session
    const userInfo = ctx.state.userInfo || {};
    const { role } = userInfo;
 
    // 根据角色或权限判断是否允许访问接口
    if (role === 'admin' || ctx.path === '/public-endpoint') {
      // 如果是管理员或访问的是公开端点，则允许访问
      await next();
    } else {
      // 如果不是管理员且不是公开端点，则拒绝访问
      ctx.status = 403;
      ctx.body = 'Forbidden';
    }
  };
};
 
// app/config/config.default.js
exports.middleware = ['permission']; // 加入权限控制中间件

在上述代码中，permission 中间件会检查当前用户的角色，并根据角色或权限决定是否允许访问接口。如果用户不是管理员且不是访问的是公开端点，则中间件会返回403 Forbidden错误。

要使用这个中间件，你需要在Egg.js的配置文件中配置它，如上述配置文件所示。这样，每个请求都会先通过这个permission中间件，然后才会到达对应的控制器方法。

- 阅读更多 -

css中div超出自动换行

System

2024-08-08

所有,typescript

在CSS中，要使得div超出自动换行，可以使用word-wrap属性或者overflow-wrap属性。通常，可以将这些属性设置为break-word值，以确保当单词或内容超出其容器宽度时，它们会自动换行。

以下是实现这一功能的CSS代码示例：




.div-wrap {
  word-wrap: break-word; /* 旧版浏览器支持 */
  overflow-wrap: break-word; /* 标准属性 */
}

接下来，将这个类应用到需要自动换行的div元素上：




<div class="div-wrap">
  这是一段很长的文本内容，当内容超出div容器的宽度时，应该自动换行显示。
</div>

这样，当div中的内容超出其宽度时，它会自动在断词处换行，保证内容的可读性和布局的整洁性。

System

2024-08-08

所有,typescript

以下是一个简化的代码实例，展示了如何将一个组件的TypeScript版本升级到最新版本：




// 引入旧版本的 TypeScript 类型定义
import OldComponent, { IProps, IState } from 'old-component';
 
// 定义新版本的组件
class NewComponent extends OldComponent {
  // 重写方法以使用新的 TypeScript 特性
  public render(): JSX.Element {
    // 使用新的类型定义和特性
    return <div>Hello, World!</div>;
  }
}
 
// 使用新的组件，传递符合新版本类型定义的属性
const App = () => {
  const props: IProps = {
    // ...
  };
  return <NewComponent {...props} />;
};
 
export default App;

在这个例子中，我们假设old-component是一个旧的组件库，它使用了旧版本的TypeScript。我们创建了一个新的组件NewComponent，它继承自OldComponent，并重写了render方法，使用了新版本的JSX类型定义。然后，我们创建了一个使用新组件的React应用程序，传递了符合新版本类型定义的属性。这个过程展示了如何将一个旧组件升级到新版本的TypeScript，同时保持对现有API的向后兼容性。

- 阅读更多 -