分类 jquery 下的文章

2024-08-27

以下是一个使用jQuery创建简单登录表单的示例代码：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="login-container">
    <form id="login-form">
        <h2>Login</h2>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <button type="submit">Login</button>
        </div>
    </form>
</div>

<script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）:

#login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#login-container h2 {
    text-align: center;
}

#login-container div {
    margin-bottom: 20px;
}

#login-container label {
    display: block;
    margin-bottom: 5px;
}

#login-container input[type="text"], #login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#login-container button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

#login-container button:hover {
    background-color: #4cae4c;
}

JavaScript部分（script.js）:

$(document).ready(function() {
    $('#login-form').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为

        var username = $('#username').val();
        var password = $('#password').val();

        // 这里可以添加验证逻辑和AJAX请求来发送登录数据
        console.log('Login with username: ' + username);

        // 清空输入
        $('#username').val('');
        $('#password').val('');
    });
});

这个简单的例子展示了如何使用jQuery来创建一个登录表单，并处理表单的提交事件。在实际应用中，你需要添加验证逻辑以确保用户输入是有效的，并且可能需要使用AJAX来异步提交表单数据到服务器端进行验证和登录处理。

- 阅读更多 -

jQuery键盘事件keydown详解及示例代码

System

2024-08-27

所有,jquery

在jQuery中，keydown事件是用来监听键盘按键的按下动作的。当用户按下任何键时，会触发这个事件。

下面是一个使用keydown事件的简单示例：

HTML部分：

<input type="text" id="myInput" placeholder="在这里输入...">

jQuery部分：

$(document).ready(function(){
    $("#myInput").keydown(function(event){
        // 输出按下的键的ASCII码
        console.log("键的ASCII码：" + event.which);
        // 输出按下的键的字符
        console.log("按下的键：" + String.fromCharCode(event.which));
    });
});

在这个例子中，当用户在具有id为myInput的输入框内按下任何键时，keydown事件会被触发，并执行函数内的代码。函数通过event.which获取按下键的ASCII码，并使用String.fromCharCode将ASCII码转换为字符，然后输出到控制台。

System

2024-08-27

所有,jquery

// 定义一个简单的下拉刷新函数
function pullToRefresh(listViewSelector, loadingTemplate) {
    var $listView = $(listViewSelector);
    var isLoading = false;

    // 模拟加载数据的函数，需要在实际应用中被重写
    function loadData() {
        // 模拟数据加载，实际应用中应该发起网络请求
        console.log('加载数据...');
        setTimeout(function() {
            // 数据加载完毕后，更新列表，移除加载提示
            $listView.append(loadingTemplate);
            isLoading = false;
        }, 1000);
    }

    // 监听触摸开始事件
    $listView.on('touchstart', function(e) {
        var touch = e.touches[0]; // 获取第一个触点
        var startY = touch.pageY; // 获取触点的初始Y坐标
        $listView.data('startY', startY); // 保存初始Y坐标
    });

    // 监听触摸移动事件
    $listView.on('touchmove', function(e) {
        if (isLoading) return; // 如果正在加载，则不再处理移动事件
        var touch = e.touches[0];
        var currentY = touch.pageY;
        var startY = $listView.data('startY');
        var distance = currentY - startY;

        if (distance > 0) { // 向下拉动
            e.preventDefault(); // 阻止默认的滚动行为
            // 可以在这里添加下拉过程中的视觉反馈，如改变列表的样式等
        }
    });

    // 监听触摸结束事件
    $listView.on('touchend', function(e) {
        var distance = $listView.data('distance');
        if (distance > 50) { // 设定一个阈值，当下拉距离超过这个值时触发加载
            if (!isLoading) {
                isLoading = true;
                loadData(); // 触发加载数据的函数
            }
        }
    });
}

// 使用方法：
$(document).ready(function() {
    var listViewSelector = '#myListView'; // ListView的选择器
    var loadingTemplate = '<div class="loading">加载中...</div>'; // 加载提示的HTML模板
    pullToRefresh(listViewSelector, loadingTemplate);
});

这个简易的下拉刷新函数pullToRefresh可以被用在任何需要实现下拉刷新功能的场景。函数接收ListView的选择器和加载提示的HTML模板作为参数，并监听了触摸事件来处理下拉刷新的逻辑。在实际应用中，你需要替换loadData函数以实现加载数据的逻辑，并可以添加更多的用户界面反馈来增强用户体验。

- 阅读更多 -

jQuery知识点

System

2024-08-26

所有,jquery

在这个问题中，我们将讨论如何使用jQuery来选择DOM元素，并对其进行操作。

选择元素

在jQuery中，我们使用$()函数来选择DOM元素。这个函数可以接受多种类型的参数，包括字符串、DOM元素等。

// 选择id为'myId'的元素
var element = $('#myId');

// 选择所有的p元素
var elements = $('p');

// 选择class为'myClass'的元素
var elements = $('.myClass');

操作元素

一旦我们选择了元素，我们可以对其进行各种操作，例如修改其属性、内容、样式等。

// 改变id为'myId'的元素的文本内容
$('#myId').text('新内容');

// 改变id为'myId'的元素的HTML内容
$('#myId').html('<strong>新内容</strong>');

// 改变id为'myId'的元素的属性值
$('#myId').attr('属性名', '新属性值');

// 为id为'myId'的元素添加一个新的class
$('#myId').addClass('newClass');

// 为id为'myId'的元素移除一个class
$('#myId').removeClass('existingClass');

// 切换id为'myId'的元素的一个class
$('#myId').toggleClass('myClass');

// 改变id为'myId'的元素的CSS样式
$('#myId').css('属性名', '属性值');

事件处理

jQuery还允许我们绑定各种事件处理程序到DOM元素上。

// 为id为'myId'的元素绑定一个点击事件
$('#myId').click(function() {
    alert('元素被点击了！');
});

链式调用

jQuery还支持链式调用，这意味着我们可以在一个选择器上连续调用多个方法。

// 链式改变id为'myId'的元素的文本内容，并且添加一个class
$('#myId').text('新内容').addClass('newClass');

动画效果

jQuery还提供了一系列的动画方法，可以用来改变元素的样式和效果。

// 淡出id为'myId'的元素
$('#myId').fadeOut();

// 淡入id为'myId'的元素
$('#myId').fadeIn();

// 向下滑动id为'myId'的元素
$('#myId').slideDown();

// 向上滑动id为'myId'的元素
$('#myId').slideUp();

AJAX请求

jQuery还提供了一个简便的方法来进行AJAX请求。

$.ajax({
    url: 'your-api-endpoint',
    type: 'GET',
    success: function(data) {
        // 请求成功后的回调函数
        console.log(data);
    },
    error: function() {
        // 请求失败后的回调函数
        console.log('请求失败！');
    }
});

以上就是jQuery的基本知识点，这些内容足够让你开始使用jQuery进行基本的网页开发。

- 阅读更多 -

学生成绩管理系统实现（CSS+JQuery+PHP+MySQL）

System

2024-08-26

所有,jquery

以下是实现学生成绩管理系统的核心功能的代码示例，包括查看成绩、添加成绩和修改成绩。

// 连接数据库
$db = new mysqli('localhost', 'username', 'password', 'database');

// 检查连接
if ($db->connect_error) {
    die('连接失败: ' . $db->connect_error);
}

// 查看成绩
if (isset($_GET['action']) && $_GET['action'] == 'view') {
    $student_id = $_GET['student_id'];
    $sql = "SELECT * FROM results WHERE student_id = ?";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('i', $student_id);
    $stmt->execute();
    $result = $stmt->get_result();
    while ($row = $result->fetch_assoc()) {
        echo "学生ID: " . $row['student_id'] . " 成绩: " . $row['score'] . "<br>";
    }
    $stmt->close();
}

// 添加成绩
if (isset($_POST['action']) && $_POST['action'] == 'add') {
    $student_id = $_POST['student_id'];
    $score = $_POST['score'];
    $sql = "INSERT INTO results (student_id, score) VALUES (?, ?)";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('is', $student_id, $score);
    $stmt->execute();
    echo "成绩添加成功";
    $stmt->close();
}

// 修改成绩
if (isset($_POST['action']) && $_POST['action'] == 'edit') {
    $student_id = $_POST['student_id'];
    $score = $_POST['score'];
    $sql = "UPDATE results SET score = ? WHERE student_id = ?";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('is', $score, $student_id);
    $stmt->execute();
    echo "成绩修改成功";
    $stmt->close();
}

// 关闭数据库连接
$db->close();

这段代码展示了如何使用PHP、MySQLi和准备语句来安全地处理数据库操作。同时，也展示了如何使用JQuery和CSS来创建一个简单的用户界面，以便用户可以查看、添加和修改学生成绩。

- 阅读更多 -

thymeleaf radio 获取及回显

System

2024-08-26

所有,jquery

在Thymeleaf中，要实现单选按钮（radio）的获取及回显，你需要确保每个单选按钮都有不同的name属性值，并且其value属性与模型中的值相匹配。

以下是一个简单的例子：

Controller中设置模型数据：

@GetMapping
public String getForm(Model model) {
    model.addAttribute("selectedOption", "option2"); // 假设已选择option2
    return "form";
}

Thymeleaf模板中的radio按钮：

<form th:action="@{/submit}" th:object="${yourModel}" method="post">
    <div th:each="option : ${#{'option1' : '选项1', 'option2' : '选项2', 'option3' : '选项3'}}">
        <input type="radio" th:name="radioName" th:value="${option.key}"
               th:field="*{selectedOption}" th:checked="${option.key} == ${selectedOption} ? true : false"/>
        <label th:for="${#ids.prev('radioName')}" th:text="${option.value}">选项标签</label>
    </div>
    <button type="submit">提交</button>
</form>

在这个例子中，th:field="*{selectedOption}" 指定了模型属性与单选按钮绑定。th:checked 属性用于判断当前选项是否应该被选中。

当表单提交时，selectedOption 的值将会被提交到服务器。如果需要回显，只需确保在服务器端设置的值与提交上来的值相匹配，或者在获取表单数据时设置到模型中。

- 阅读更多 -

jQuery操作select

System

2024-08-26

所有,jquery

在jQuery中，操作select元素可以通过以下方法：

获取选中项的值：

var selectedValue = $('#mySelect').val();

获取选中项的文本：

var selectedText = $('#mySelect option:selected').text();

设置选中项：

$('#mySelect').val('要选中的值');

添加选项：

$('#mySelect').append($('<option>', {
    value: '新值',
    text: '新文本'
}));

删除选项：

$('#mySelect option[value="要删除的值"]').remove();

禁用/启用select元素：

$('#mySelect').prop('disabled', true); // 禁用
$('#mySelect').prop('disabled', false); // 启用

清空select中所有选项：

$('#mySelect').empty();

这里的#mySelect是select元素的ID，如果需要通过其他属性或者元素关系来选择元素，请相应修改选择器。

- 阅读更多 -

jQuery实现框里画面的展开、收起和停止

System

2024-08-26

所有,jquery

以下是一个简单的示例，展示了如何使用jQuery来控制一个简单的画面(面板)的展开、收起和停止。这里的“画面”是一个<div>元素，可以通过CSS来设计样式。

HTML:

<button id="expand">展开</button>
<button id="collapse">收起</button>
<button id="stop">停止</button>
<div id="panel">画面内容</div>

CSS:

#panel {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  transition: height 1s;
  overflow: hidden;
}

.collapsed {
  height: 0;
}

jQuery:

$(document).ready(function() {
  var $panel = $('#panel');

  $('#expand').click(function() {
    $panel.removeClass('collapsed');
  });

  $('#collapse').click(function() {
    $panel.addClass('collapsed');
  });

  $('#stop').click(function() {
    $panel.css('transition', 'none');
    $panel.addClass('collapsed');
    setTimeout(function() {
      $panel.css('transition', 'height 1s');
    }, 0);
  });
});

这段代码中，#panel是要展开和收起的画面。.collapsed类定义了当画面处于收起状态时的样式，即height设为0。transition属性用于平滑地过渡画面的尺寸变化。

点击“展开”按钮会移除.collapsed类，使画面展开；点击“收起”按钮会添加.collapsed类，使画面收起；点击“停止”按钮会临时取消过渡效果，使画面立即收起，然后重新启用过渡效果。

- 阅读更多 -

jquery简介与解析

System

2024-08-26

所有,jquery

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档 traversing, event handling, animation 和Ajax等一系列的操作变得更加简单，而且它还支持跨平台的操作。

jQuery的核心特性可以概括为：

快速获取文档元素
动态改变页面样式
事件处理
动画操作
AJAX交互
插件扩展
跨浏览器兼容

下面是一个简单的jQuery代码示例，它展示了如何在文档加载完成后，通过jQuery选择器选取一个元素，并改变其CSS样式：

$(document).ready(function(){
  $("#myDiv").css("color", "blue");
});

在这个例子中，$(document).ready是一个函数，它确保在执行代码前，文档已经完全加载。$("#myDiv")是一个jQuery选择器，它选取了ID为myDiv的元素。.css("color", "blue")是一个方法，它将该元素的文字颜色改为蓝色。

jQuery的解析过程通常是指它是如何在浏览器中工作的，它主要包括以下步骤：

载入jQuery库
使用jQuery语法编写代码
在页面加载完毕后执行jQuery代码

这些步骤都是通过JavaScript代码实现的，通常如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv">Hello, World!</div>

<script>
$(document).ready(function(){
  $("#myDiv").css("color", "blue");
});
</script>

</body>
</html>

在这个HTML文件中，我们通过<script src="..."></script>标签引入了jQuery库，然后在<script>标签内编写了jQuery代码。这段代码在页面加载完成后执行，将ID为myDiv的元素的文字颜色改为蓝色。

- 阅读更多 -

Vue3.0中如何引入jQuery并使用

System

2024-08-26

所有,jquery

在Vue 3.0中引入jQuery并使用，首先需要安装jQuery：

npm install jquery

然后，在Vue组件中使用jQuery，可以在<script setup>标签中或者在<script>标签中使用import引入：

// 在<script setup>中使用jQuery
import $ from 'jquery';

// 示例：在Vue组件的onMounted生命周期钩子中使用jQuery
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // jQuery代码
      $('selector').somePlugin();
    });
  }
};

或者在普通的<script>标签中：

import $ from 'jquery';

export default {
  mounted() {
    // jQuery代码
    $('selector').somePlugin();
  }
};

请注意，在Vue 3中，建议尽可能避免使用jQuery，因为Vue 3推荐使用组合式API（如ref、reactive、onMounted等）来编写响应式和组件逻辑，而不是操作DOM。如果需要操作DOM，可以使用Vue提供的ref属性或者$el属性。

- 阅读更多 -