标签 jquery 下的文章

一款漂亮的排班系统界面Html+jQuery「代码片段」

2024-08-08

以下是一个简单的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不可编辑

2024-08-08

在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前端学习笔记

2024-08-08




<!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的一个简单入门示例。

基于jquery的分页器插件Pagination.js

2024-08-08

Pagination.js 是一个轻量级的 jQuery 分页插件，可以用于创建简洁美观的分页控件。以下是一个使用 Pagination.js 的示例代码：

首先，确保在页面中引入了 jQuery 和 Pagination.js 的脚本文件：




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

然后，在 HTML 中添加一个用于显示分页的容器：




<div id="pagination-container"></div>

最后，使用以下 JavaScript 代码来初始化分页器：




$(function() {
    $('#pagination-container').pagination({
        dataSource: new Array(100),
        callback: function(data, pagination) {
            // 这里处理页面变化时的逻辑，比如请求数据等
            console.log('当前页:', pagination.getCurrentPage());
        }
    });
});

这段代码会在页面加载完成后初始化一个分页器，并为它设置一个数据源（这里假设有 100 项数据）。当用户点击分页控件时，会触发 callback 函数，在这个函数中你可以实现请求数据的逻辑。

这只是 Pagination.js 使用的一个基本示例，实际使用时可以根据需要配置更多选项，如分页的总数、每页显示的项目数等。

2024-08-08

在HTML中，<select>标签用于创建下拉列表。在jQuery中，我们可以使用val()方法获取或设置<select>元素的值。在Thymeleaf模板中，我们可以使用th:field属性绑定模型中的变量到<select>元素。

以下是一些示例：

使用jQuery设置<select>元素的值：

HTML:




<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

jQuery:




$('#mySelect').val('option2'); // 设置选中Option 2

使用Thymeleaf中的th:field绑定<select>元素到模型变量：

HTML (Thymeleaf模板):




<select th:field="*{selectedOption}">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

在这个例子中，*{selectedOption}是一个表达式，它表示模型中的selectedOption属性。当表单提交时，<select>元素选中的值将被绑定到selectedOption属性。

jquery实现手写签名

2024-08-08

要使用jQuery实现手写签名功能，你可以使用HTML5的<canvas>元素来创建一个绘图区域，并监听鼠标事件来实现签名。以下是一个简单的实现示例：

HTML部分：




<canvas id="signature-pad" width="300" height="150" style="border:1px solid #000000;"></canvas>

jQuery和JavaScript部分：




$(document).ready(function() {
    var canvas = $('#signature-pad')[0];
    var context = canvas.getContext('2d');
    var isDrawing = false;
    var lastX = 0;
    var lastY = 0;
 
    function draw(e) {
        if (!isDrawing) return;
        context.beginPath();
        context.moveTo(lastX, lastY);
        context.lineTo(e.offsetX, e.offsetY);
        context.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
    }
 
    $('#signature-pad')
        .on('mousedown', function(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        })
        .on('mousemove', draw)
        .on('mouseup', function() {
            isDrawing = false;
        })
        .on('mouseleave', function() {
            isDrawing = false;
        });
});

确保在你的页面中引入了jQuery库，并根据需要调整<canvas>的大小。用户在画布上按下鼠标并移动时，就会进行签名。签名完成后，可以获取画布的数据URL来保存或者发送。

第四章前端开发基础jQuery

2024-08-08

第四章事件与动画

事件处理




// 绑定点击事件
$("#btn").click(function() {
    alert("按钮被点击了！");
});
 
// 触发自定义事件
$("#myDiv").trigger("myCustomEvent");
 
// 绑定多个事件
$("#myDiv").on({
    mouseenter: function() {
        $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
        $(this).css("background-color", "");
    },
    click: function() {
        $(this).css("background-color", "green");
    }
});

动画




// 淡入淡出效果
$("#myDiv").fadeIn();
$("#myDiv").fadeOut();
$("#myDiv").fadeToggle();
 
// 滑入滑出效果
$("#myDiv").slideDown();
$("#myDiv").slideUp();
$("#myDiv").slideToggle();
 
// 自定义动画
$("#myDiv").animate({
    width: "200px",
    height: "100px",
    opacity: 0.5
}, 1000);
 
// 停止动画
$("#myDiv").stop();

链式调用




// 链式调用
$("#myDiv")
    .slideDown()
    .fadeIn()
    .animate({ width: "200px" })
    .fadeOut();

事件委托




// 事件委托
$("#myTable").on("click", ".clickableRow", function() {
    $(this).toggleClass("selected");
});

第五章 AJAX和JSON

AJAX请求




// 使用$.ajax发送GET请求
$.ajax({
    url: "get-data.php",
    type: "GET",
    data: { id: 1 },
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});
 
// 使用$.ajax发送POST请求
$.ajax({
    url: "post-data.php",
    type: "POST",
    data: { name: "John", age: 30 },
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

使用JSONP处理跨域请求




// 使用JSONP获取远程数据
$.ajax({
    url: "http://example.com/api/data?callback=?",
    dataType: "jsonp",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

使用JSON




// 解析JSON字符串
var jsonData = '{"name":"John", "age":30}';
var obj = JSON.parse(jsonData);
console.log(obj.name);
 
// 序列化JavaScript对象为JSON字符串
var jsObj = { name: "Jane", age: 25 };
var jsonString = JSON.stringify(jsObj);
console.log(jsonString);

第六章 jQuery插件开发

创建简单的jQuery插件

【jQuery详细介绍】

2024-08-08

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档 traversing, event handling, animation 和Ajax等的操作更加简单，而且它能够和现有的网站很好地兼容。

jQuery的主要特点：

快速获取文档元素，动态更改HTML元素、属性、CSS样式等。
事件处理，例如：点击、双击、鼠标移动等。
动画生成，包括普通动画和复杂动画。
AJAX交互，方便地实现与服务器的异步数据交换。
跨浏览器兼容性，jQuery可以在所有现在主流的浏览器上正常工作。
插件扩展开发，有很多第三方的jQuery插件供开发者使用。
内置的Code Splitting，可以按需加载jQuery的模块。
支持链式操作，可以使代码更加精简。

jQuery的使用方法：

引入jQuery库，可以通过CDN或者下载到本地引入。
使用jQuery选择器选择元素。
对选择的元素执行操作，如：事件绑定、修改样式、动画等。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="clickMe">点击我</button>
    <script>
        $(document).ready(function(){
            $("#clickMe").click(function(){
                alert("按钮被点击了！");
            });
        });
    </script>
</body>
</html>

在这个例子中，当页面加载完成后，jQuery会为id为"clickMe"的按钮元素绑定一个点击事件，当按钮被点击时，会弹出一个警告框。

jquery实现全选和反选

2024-08-08

以下是使用jQuery实现全选和反选的简单示例代码：

HTML部分：




<button id="selectAll">全选</button>
<button id="selectNone">反选</button>
 
<input type="checkbox" class="item"/>
<input type="checkbox" class="item"/>
<input type="checkbox" class="item"/>

jQuery部分：




$(document).ready(function(){
  // 全选
  $('#selectAll').click(function(){
    $('.item').prop('checked', true);
  });
 
  // 反选
  $('#selectNone').click(function(){
    $('.item').prop('checked', function(i, currentStatus) {
      return !currentStatus;
    });
  });
});

确保在HTML中引入了jQuery库：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

这段代码中，我们定义了两个按钮，一个用于全选，一个用于反选。每个checkbox都有相同的class名称"item"。通过点击按钮，使用jQuery的.prop()方法来改变checkbox的checked状态。