分类前端技术下的文章

2024-08-19

jQuery是一个快速、简洁的JavaScript框架，主要用于简化JavaScript与DOM之间的交互。以下是一个简化的jQuery结构示例，它展示了如何使用jQuery选择器和事件处理函数：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 结构简析</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 当按钮被点击时执行的函数
            $('#myButton').click(function() {
                alert('按钮被点击了！');
            });
        });
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

这段代码的核心功能是当页面加载完成后，为ID为myButton的按钮元素添加点击事件处理程序。当按钮被点击时，会弹出一个警告框。这个示例展示了jQuery的基本用法，包括如何选择DOM元素以及如何添加事件监听器。

System

2024-08-19

所有,jquery

打地鼠游戏是一个经典的游戏，我们可以使用JavaScript和jQuery来制作。以下是一个简单的实现：

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>打地鼠游戏</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS部分（style.css）:




#game-container {
    width: 500px;
    height: 500px;
    position: relative;
    user-select: none;
}
 
#game-board {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
.mouse {
    width: 20px;
    height: 20px;
    background-color: #333;
    position: absolute;
    border-radius: 50%;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    const boardSize = 25;
    let gameBoard = $('#game-board');
    let mice = [];
 
    function createBoard() {
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                $('<div>', { class: 'mouse' }).css({
                    top: i * 20,
                    left: j * 20
                }).appendTo(gameBoard);
            }
        }
        mice = $('.mouse');
    }
 
    function initGame() {
        createBoard();
        gameBoard.on('click', '.mouse', function() {
            $(this).hide();
            mice = mice.filter(function(index, mouse) {
                return $(mouse).is(':visible');
            });
            if (mice.length === 0) {
                alert('你赢了！');
                initGame();
            }
        });
    }
 
    initGame();
});

这个游戏的实现包括了创建游戏区域和打地鼠的逻辑。每次点击鼠标，鼠标图标就会消失，如果所有鼠标都被打掉，会弹出警告框提示玩家赢得游戏，并重新初始化游戏。这个例子简单展示了如何使用jQuery来操作DOM元素，并添加事件监听器，实现游戏的交互功能。

System

2024-08-19

所有,jquery

jQuery noConflict() 方法：

jQuery 的 noConflict() 方法用于释放 $ 标识符的控制权，这样其他库就可以使用 $ 标识符。




// 使用 jQuery 的 noConflict() 方法，并将 jQuery 的控制权交给新的变量 jq
var jq = jQuery.noConflict();
 
// 使用 jq 来代替 $ 进行 jQuery 操作
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍在运行！");
    });
});

运用 JSONP：

JSONP（JSON with Padding）是一种跨域请求数据的方式，可以让你在不同域的服务器上获取数据。




// 定义一个用于接收数据的函数
function handleResponse(data) {
    console.log(data);
}
 
// 创建一个 script 元素，并设置其 src 属性为跨域请求的 URL
var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
 
// 将 script 元素添加到文档中
document.body.appendChild(script);

在这个例子中，我们假设 http://example.com/api 是一个跨域的 API 接口，它会根据传递的 callback 参数调用 handleResponse 函数，并将数据作为参数传递。这样我们就可以在不违反同源策略的情况下获取到跨域的数据。

- 阅读更多 -

html+css+jquery实现一个优雅的分页条

System

2024-08-19

所有,jquery

以下是一个使用HTML、CSS和jQuery实现的优雅分页条的示例代码：

HTML:




<div id="pagination">
  <a href="#" class="page-link prev-page">&laquo; Prev</a>
  <span class="current-page">1</span>
  <a href="#" class="page-link next-page">Next &raquo;</a>
</div>

CSS:




#pagination {
  text-align: center;
  margin-top: 20px;
}
 
.page-link {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}
 
.page-link:hover {
  background-color: #f0f0f0;
}

jQuery:




$(document).ready(function() {
  $('.next-page').click(function(e) {
    e.preventDefault();
    var currentPage = parseInt($('.current-page').text());
    var nextPage = currentPage + 1;
    $('.current-page').text(nextPage);
    // 这里可以添加更多的逻辑，比如发起AJAX请求获取数据等
  });
 
  $('.prev-page').click(function(e) {
    e.preventDefault();
    var currentPage = parseInt($('.current-page').text());
    var prevPage = currentPage - 1;
    if (prevPage > 0) {
      $('.current-page').text(prevPage);
      // 这里可以添加更多的逻辑，比如发起AJAX请求获取数据等
    }
  });
});

这个分页条支持翻页功能，点击“Prev”会后退到上一页，点击“Next”会前进到下一页。分页条的当前页面数会实时更新。这个示例只是一个基础版本，实际应用中可能需要添加更多功能，比如处理页码边界、发送AJAX请求获取数据等。

- 阅读更多 -

【1.0】jQuery引入

System

2024-08-19

所有,jquery

在HTML文件中引入jQuery库，可以通过本地文件路径或CDN链接的方式实现。以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 引入示例</title>
    <!-- 引入本地jQuery库 -->
    <!-- <script src="path/to/your/jquery.min.js"></script> -->
 
    <!-- 引入CDN jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        // 确保DOM完全加载后执行代码
        $(document).ready(function(){
            // 示例代码：点击按钮后隐藏
            $('#myButton').click(function(){
                $('#myDiv').hide();
            });
        });
    </script>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>
    <button id="myButton">点击我隐藏方框</button>
</body>
</html>

在上述代码中，我们通过<script>标签引入了jQuery库。可以通过本地路径引入（注释掉的行），或者使用CDN方式引入。在<script>内部编写的代码将在页面加载时执行，并使用jQuery库来处理事件。

- 阅读更多 -

elementui 弹窗展示自动校验表单项bug

System

2024-08-19

所有,elementui

在使用Element UI库时，如果你遇到弹窗展示后自动触发表单验证的问题，这通常是因为表单验证规则被提前应用了。Element UI的表单验证通常在el-form的rules属性中定义，并且在el-form-item的prop属性中指定需要验证的字段。

解决这个问题的关键是确保表单验证只在适当的时机触发，例如在用户实际进行交互（如输入数据）时，而不是在弹窗显示之初。

以下是一个简化的示例代码，展示了如何在用户触发输入时进行表单验证，而不是在弹窗显示时：




<template>
  <el-dialog :visible.sync="dialogVisible">
    <el-form :model="form" :rules="rules" ref="myForm">
      <el-form-item prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
      <el-button @click="validateForm">提交</el-button>
    </el-form>
  </el-dialog>
</template>
 
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        form: {
          name: '',
          // 其他表单数据
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
            // 其他验证规则
          ],
          // 其他字段的规则
        },
      };
    },
    methods: {
      validateForm() {
        this.$refs.myForm.validate((valid) => {
          if (valid) {
            // 验证成功，提交表单等操作
          } else {
            // 验证失败，处理错误
          }
        });
      },
    },
  };
</script>

在这个示例中，表单验证是在用户点击提交按钮时触发的，而不是在弹窗显示时自动触发。这样就可以避免在弹窗初次展示时触发验证的问题。如果你的情况不同，请根据具体的场景调整trigger属性值，或者在合适的时机手动调用this.$refs.myForm.validate()方法。

- 阅读更多 -

TypeScript和Pinia：为你的Vue应用注入灵魂

System

2024-08-19

所有,typescript




import { defineStore } from 'pinia'
 
// 定义一个名为'counter'的store
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})
 
// 在Vue组件中使用store
import { useCounterStore } from './counterStore'
 
export default {
  setup() {
    // 创建store实例
    const counterStore = useCounterStore()
 
    // 使用store中的action
    function incrementCounter() {
      counterStore.increment()
    }
 
    return {
      counterStore,
      incrementCounter,
    }
  },
}

这个例子展示了如何在Vue应用中使用TypeScript和Pinia创建一个简单的计数器store，并在Vue组件中使用它。首先定义了一个名为counter的store，包含一个状态count和一个操作increment。然后在Vue组件的setup函数中，通过调用useCounterStore来创建store的实例，并使用incrementCounter函数来触发increment操作。

System

2024-08-19

所有,typescript

这个警告通常出现在使用TypeScript和React时，你可能在JSX中使用了一个字符串表达式，而TypeScript无法推断出这个表达式的类型。

例如，当你在JSX中直接写一个字符串作为元素的属性时，TypeScript可能会认为这个属性的类型应该是string，而不是更加具体的类型，如React.ReactNode或React.ReactElement。




// 示例代码
const MyComponent = () => {
  return <div className="myClass">Hello, World!</div>;
};

在这个例子中，"Hello, World!"被认为是string类型，而不是React元素。

解决这个警告的方法是显式地将字符串转换为React元素。你可以使用React.createElement或者简单地用{}包裹你的字符串，并给它一个jsx类型注解。




// 解决方法
const MyComponent = () => {
  return <div className="myClass">{/* @ts-ignore */ "Hello, World!" as any}</div>;
};

或者，如果你使用了新的JSX转换特性，你可以直接用{}包裹你的字符串，TypeScript将会自动将其视为ReactNode。




// 解决方法
const MyComponent = () => {
  return <div className="myClass">{/* @ts-ignore */ "Hello, World!"}</div>;
};

请注意，/* @ts-ignore */是一个TypeScript指令，用于告诉TypeScript忽略后面的错误。在实际代码中，你不应该使用这个指令，除非你确信忽略它是安全的。上面的as any是为了告诉TypeScript忽略类型检查，这不是推荐的做法，应当避免使用。

- 阅读更多 -

Vue 3.0 TypeScript支持

System

2024-08-19

所有,typescript




<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue 3!');
    return { message };
  }
});
</script>

这个例子展示了如何在Vue 3.0中使用TypeScript并定义一个简单的组件，该组件在模板中显示一条欢迎信息。它使用了Vue 3.0的Composition API中的ref函数来创建响应式数据。这个例子简单明了地展示了如何将TypeScript引入Vue 3.0项目中。

- 阅读更多 -

JS数组中filter方法的使用实例

System

2024-08-19

所有,typescript




// 定义一个数组，包含一些整数
const numbers = [4, 2, 7, 8, 32, 6, 12, 7, 9];
 
// 使用filter方法筛选出数组中的偶数
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // 输出: [2, 8, 6, 12]
 
// 使用filter方法结合箭头函数筛选出数组中大于10的数字
const greaterThanTen = numbers.filter(number => number > 10);
 
console.log(greaterThanTen); // 输出: [32, 12, 9]

这段代码首先定义了一个包含整数的数组numbers。使用filter方法两次筛选出数组中的偶数和大于10的数字，并分别将结果输出到控制台。这是一个简单的使用filter方法的例子，展示了如何利用这个方法来筛选数组中满足特定条件的元素。

- 阅读更多 -