1. 首页
  2. 分类
  3. jquery
Jquery提供的load方法
System
2024-08-08
所有,jquery

load() 方法是 jQuery 中的一个方法，它用于从服务器加载数据并把返回的数据放入被选元素中。

以下是一些使用 load() 方法的方式：

  1. 从服务器加载数据，并把数据放入指定的元素中。



$("#div1").load("test.html");

在这个例子中，test.html 文件中的内容将被加载到 div1 元素中。

  1. 从服务器加载数据，并把数据放入指定的元素中，同时传递参数。



$("#div1").load("test.php", {name: "John", age: "25"});

在这个例子中，test.php 文件中的内容将被加载到 div1 元素中，同时传递了两个参数：name 和 age。

  1. 从服务器加载特定部分的数据，并把数据放入指定的元素中。



$("#div1").load("test.html #div2");

在这个例子中，test.html 文件中 id 为 div2 的元素的内容将被加载到 div1 元素中。

  1. 使用回调函数，在数据加载完成后执行特定的操作。



$("#div1").load("test.html", function() {
  alert("Load was performed.");
});

在这个例子中，当 test.html 文件的内容被加载到 div1 元素后，会弹出一个提示框。

注意：load() 方法不应用于从服务器 asynchronously 加载大量数据。如果你需要从服务器获取大量数据，请使用 $.ajax() 或 $.get() 方法。

- 阅读更多 -
Bootstrap前段框架（一篇到底）
System
2024-08-08
所有,jquery

Bootstrap是一个用于快速开发Web界面和应用的开源前端框架，它包含了HTML、CSS和JavaScript工具集。以下是一个简单的Bootstrap网格系统示例，展示了如何使用Bootstrap创建一个响应式网页。




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid Example</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h4>Column 1</h4>
        <p>This is some text in column 1.</p>
      </div>
      <div class="col-md-4">
        <h4>Column 2</h4>
        <p>This is some text in column 2.</p>
      </div>
      <div class="col-md-4">
        <h4>Column 3</h4>
        <p>This is some text in column 3.</p>
      </div>
    </div>
  </div>
  
  <!-- 引入Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

这个例子中，我们使用了Bootstrap的网格系统来创建一个三列的布局。.container类用于创建一个响应式的容器，而.row类定义了一行，在这一行中，我们使用.col-md-4类创建了三列，每列占据屏幕宽度的四分之一。当屏幕尺寸小于768px时，列会自动堆叠显示。

请确保在实际项目中引入正确版本的Bootstrap文件，上面的链接可能随着Bootstrap版本更新而失效。

- 阅读更多 -
jQuery.md5.js加密插件使用方法
System
2024-08-08
所有,jquery

jQuery.md5.js是一个用于MD5散列的jQuery插件。MD5是一种广泛使用的密码散列函数，可以生成一个128位的散列值（hash value），通常用一个32位的十六进制字符串表示。

以下是如何使用jQuery.md5.js进行MD5散列的简单示例：

首先，确保在页面中引入了jQuery库和jQuery.md5.js插件。




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.md5.js"></script>

然后，你可以使用jQuery.md5()函数来对字符串进行MD5加密：




$(document).ready(function() {
    var hash = $.md5('your string here');
    console.log(hash); // 输出字符串的MD5散列值
});

这段代码将会计算并输出传入字符串的MD5散列值。记得替换 'your string here' 为你需要加密的实际字符串。

- 阅读更多 -
jQuery字母消除游戏
System
2024-08-08
所有,jquery

以下是一个简单的jQuery字母消除游戏的实现示例。这个示例使用了一个简单的游戏逻辑，其中玩家需要点击连续相同字母的方块，使其消失，每消除一行或一列所有方块，玩家将得分。

HTML 部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letter Elimination Game</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
 
<div class="game-container">
    <div class="grid-container">
        <!-- 动态生成游戏方块 -->
    </div>
    <div id="score">Score: 0</div>
</div>
 
</body>
</html>

CSS 部分（style.css）:




.game-container {
    width: 500px;
    margin: auto;
    text-align: center;
}
 
.grid-container {
    width: 500px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 5px;
}
 
.grid-item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}
 
#score {
    margin-top: 20px;
}

jQuery 部分（script.js）:




$(document).ready(function() {
    var score = 0;
    var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
 
    function generateGrid() {
        var gridHtml = '';
        for (var i = 0; i < 10; i++) {
            gridHtml += '<div class="grid-row">';
            for (var j = 0; j < 7; j++) {
                var randomLetter = letters[Math.floor(Math.random() * letters.length)];
                gridHtml += '<div class="grid-item" data-letter="' + randomLetter + '">' + randomLetter + '</div>';
            }
            gridHtml += '</div>';
        }
        $('.grid-container').html(gridHtml);
    }
 
    generateGrid();
 
    $('.grid-item').on('click', function() {
        var $this = $(this);
        var letter = $this.data('letter');
        var $row = $this.parent();
        var $column = $this.siblings();
        var clearedRow = true;
        var clearedColumn = true;
 
        // 检查行
        $row.find('.grid-item').each(function() {
            if ($(this).data('letter') !== letter) {
                clearedRow = false;
                return false; // 停止循环
            }
        });
 
        // 检查列
        $('.grid-container').find('.grid-item').each(function() {
            if ($(this).data('letter') !== letter) {
                clearedColumn = false;
                return false; // 停止循环
            }
        });
 
        // 如果是连续相同的字母，则清除
        if (clearedRow || clearedColumn) {
            $row.
- 阅读更多 -
JS 实现form表单登录验证并使用MD5加密
System
2024-08-08
所有,jquery



// 引入MD5加密库
const CryptoJS = require("crypto-js");
 
// 登录验证函数
function validateLogin(req, res) {
    // 获取表单数据
    const { username, password } = req.body;
 
    // 假设这是从数据库获取的用户数据
    const user = {
        username: 'admin',
        password: '202cb962ac59075b964b07152d234b70' // 预先存储的密码需要是MD5加密格式
    };
 
    // 对用户输入的密码进行MD5加密
    const encryptedPassword = CryptoJS.MD5(password).toString();
 
    // 验证用户名和密码
    if (username === user.username && encryptedPassword === user.password) {
        // 登录成功
        res.redirect('/dashboard'); // 重定向到dashboard
    } else {
        // 登录失败
        res.redirect('/login'); // 重定向回登录页面
    }
}
 
// 导出函数
module.exports = validateLogin;

这段代码展示了如何在一个简单的登录验证场景中使用MD5加密来确保密码的安全性。在实际应用中，密码应该存储为加密后的字符串，并在用户登录时进行加密验证。

- 阅读更多 -
推荐开源库：MTControl - 如jQuery般优雅控制UIControl对象
System
2024-08-08
所有,jquery

MTControl是一个开源库，旨在提供一种简单而优雅的方式来控制iOS应用中的UIControl对象。它提供了一种类似于jQuery的链式语法，可以轻松地为UI控件添加事件处理程序和配置属性。

以下是一个使用MTControl库的示例代码：




// 导入MTControl头文件
#import "MTControl.h"
 
// 假设有一个UIButton叫button
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
 
// 使用MTControl为button添加事件处理和配置
[MTControl controlWithObject:button]
    // 设置button的标题
    .setTitle(@"点击我", forState:UIControlStateNormal)
    // 设置button的标题颜色
    .setTitleColor([UIColor blueColor], forState:UIControlStateNormal)
    // 添加点击事件
    .onControlEvent(UIControlEventTouchUpInside, ^{
        NSLog(@"按钮被点击了！");
    });
 
// 将button添加到视图上
[self.view addSubview:button];

在这个例子中，我们首先导入了MTControl.h头文件，然后创建了一个UIButton对象。接着，我们使用MTControl来包装这个button对象，并链式调用了一系列方法来配置button的属性和添加事件处理程序。最后，我们将button添加到当前视图中。

这个示例展示了如何使用MTControl库来简化iOS开发中UIControl对象的操作，提高代码的可读性和可维护性。

- 阅读更多 -
JQuery中属性选择器
System
2024-08-08
所有,jquery

在jQuery中，属性选择器可以用来选择具有特定属性的元素，或者属性值符合某种模式的元素。属性选择器的语法是：$('element[attribute="value"]')。

例如，如果你想选择所有具有data-type属性的元素，你可以使用以下代码：




$('[data-type]')

如果你想选择data-type属性值为text的所有元素，你可以使用以下代码：




$('[data-type="text"]')

如果你想选择data-type属性值包含image的所有元素，你可以使用以下代码：




$('[data-type*="image"]')

这些例子展示了如何使用属性选择器来选择具有特定属性或特定属性值的元素。

- 阅读更多 -
一款漂亮的排班系统界面Html+jQuery「代码片段」
System
2024-08-08
所有,jquery

以下是一个简单的HTML和jQuery代码示例，用于创建一个排班系统的用户界面。这个例子提供了一个基本的界面布局和交互功能，但具体的后端逻辑和数据库设计需要根据实际需求来实现。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排班系统界面</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="schedule-container">
        <h1>排班系统</h1>
        <table id="schedule-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>时间段</th>
                    <th>教师</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 排班数据动态生成 -->
            </tbody>
        </table>
        <button id="add-shift">添加排班</button>
    </div>
 
    <script>
        $(document).ready(function() {
            // 假设的数据
            var shifts = [
                // ...
            ];
 
            // 初始化表格
            function initTable(shifts) {
                var rows = '';
                for (var i = 0; i < shifts.length; i++) {
                    rows += '<tr>' +
                                '<td>' + shifts[i].date + '</td>' +
                                '<td>' + shifts[i].time + '</td>' +
                                '<td>' + shifts[i].teacher + '</td>' +
                                '<td><button class="delete-shift">删除</button></td>' +
                            '</tr>';
                }
                $('#schedule-table tbody').html(rows);
            }
 
            // 添加排班
            $('#add-shift').click(function() {
                // 打开一个模态框或者直接跳转到添加页面
                alert('添加排班');
            });
 
            // 删除排班
            $('#schedule-table').on('click', '.delete-shift', function() {
                var shift = $(this).closest('tr').find('td').map(function() {
                    return $(this).text();
                }).get();
                // 模拟删除操作
                alert('删除排班: ' + shift);
                // 实际应用中，这里应该发送请求到后端删除数据
            });
 
            initTable(shifts); // 初始化表格数据
        });
    </script>
</body>
</html>

这段代码提供了一个基本的排班系统界面，并且展示了如何使用jQuery来处理事件。在实际应用中，你需要根据具体需求来扩展和完善这个界面，比如添加模态框来输入排班详情、删除确认对话框、分页功能、搜索排班功能等。同时，你还需要编写后端逻辑来处理数据的添加、删除和展示。

- 阅读更多 -
jquery 设置input不可编辑
System
2024-08-08
所有,jquery

在jQuery中，可以使用attr方法或prop方法来设置input元素为不可编辑。使用attr方法时，可以直接将disabled属性设置为disabled，或者设置readonly属性为readonly。使用prop方法时，应将disabled属性设置为true。

以下是设置input元素不可编辑的示例代码：

使用attr方法设置为不可编辑：




// 设置为禁用
$('input').attr('disabled', 'disabled');
 
// 或者设置为只读
$('input').attr('readonly', 'readonly');

使用prop方法设置为不可编辑：




// 设置为禁用
$('input').prop('disabled', true);

请注意，如果你使用attr方法来设置disabled或readonly属性，这将会在HTML标签上显示为disabled="disabled"或readonly="readonly"。而使用prop方法时，这些属性不会出现在HTML标签中。

- 阅读更多 -
Html + Jquery + Vue前端学习笔记
System
2024-08-08
所有,jquery



<!DOCTYPE html>
<html>
<head>
  <title>Vue学习示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转消息</button>
  </div>
 
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        reverseMessage: function() {
          this.message = this.message.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>

这个示例展示了如何在一个基本的HTML页面中嵌入Vue.js，并创建一个Vue实例来处理页面上的数据和事件。当用户点击按钮时，reverseMessage 方法会被调用，这会反转message数据属性中的字符串，并更新页面上显示的文本。这是学习Vue.js的一个简单入门示例。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号