标签 jquery 下的文章

2024-08-11




// 前端jQuery代码
$(document).ready(function() {
    $('#changePasswordForm').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/user/changePassword',
            data: $(this).serialize(),
            success: function(data) {
                if (data.status === 'success') {
                    alert('密码修改成功！');
                    $('#currentPassword').val('');
                    $('#newPassword').val('');
                    $('#confirmNewPassword').val('');
                } else {
                    alert('密码修改失败：' + data.message);
                }
            },
            error: function() {
                alert('发生未知错误，密码修改失败。');
            }
        });
    });
});
 
// Spring MVC Controller部分
@Controller
@RequestMapping("/user")
public class UserController {
 
    @PostMapping("/changePassword")
    @ResponseBody
    public Map<String, String> changePassword(
            @RequestParam("currentPassword") String currentPassword,
            @RequestParam("newPassword") String newPassword,
            @RequestParam("confirmNewPassword") String confirmNewPassword,
            Principal principal) {
        Map<String, String> response = new HashMap<>();
        if (!newPassword.equals(confirmNewPassword)) {
            response.put("status", "error");
            response.put("message", "新密码与确认密码不一致。");
        } else if (currentPassword.equals(newPassword)) {
            response.put("status", "error");
            response.put("message", "新密码不能与旧密码相同。");
        } else {
            // 假设有一个UserService用于密码修改
            boolean isPasswordChanged = userService.changePassword(principal.getName(), newPassword);
            if (isPasswordChanged) {
                response.put("status", "success");
            } else {
                response.put("status", "error");
                response.put("message", "密码修改失败，请确认旧密码正确。");
            }
        }
        return response;
    }
}

这段代码展示了如何使用jQuery和Spring MVC来实现一个简单的密码修改功能。前端使用jQuery捕获表单提交事件，并通过AJAX异步向后端发送POST请求，后端接收请求，验证数据，并根据结果返回JSON格式的响应。

- 阅读更多 -

jQuery 响应式 Web 设计

System

2024-08-11

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 响应式设计示例</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { margin: 20px; }
        .box { width: 100px; height: 100px; }
    </style>
</head>
<body>
 
<div class="container">
    <div class="box" style="background-color: blue;"></div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(window).on('resize', function() {
        if ($('.container').width() > 300) {
            $('.box').css('background-color', 'green');
        } else {
            $('.box').css('background-color', 'red');
        }
    }).resize(); // 触发resize事件以初始化颜色设置
</script>
 
</body>
</html>

这个代码示例展示了如何使用jQuery来进行响应式设计。当.container的宽度大于300px时，.box的背景颜色变为绿色，否则变为红色。代码中的.resize()在文档加载完成后立即触发，以确保颜色的初始设置。

- 阅读更多 -

基于Java+springmvc+mysql+jquery实现企业员工管理系统

System

2024-08-11

所有,jquery

以下是一个简化的员工管理系统的核心功能实现，包括员工列表展示和添加员工的基本过程。

数据库设计（MySQL）:




CREATE TABLE `employee` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

实体类（Java）:




public class Employee {
    private int id;
    private String name;
    private String email;
    // 省略getter和setter方法
}

Mapper接口（Java）:




public interface EmployeeMapper {
    void insert(Employee employee);
    List<Employee> findAll();
}

Service层（Java）:




@Service
public class EmployeeService {
    @Autowired
    private EmployeeMapper employeeMapper;
 
    public void addEmployee(Employee employee) {
        employeeMapper.insert(employee);
    }
 
    public List<Employee> getAllEmployees() {
        return employeeMapper.findAll();
    }
}

控制器（Java）:




@Controller
@RequestMapping("/employee")
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;
 
    @RequestMapping(value = "/list", method = RequestMethod.GET)
    public ModelAndView list() {
        ModelAndView mav = new ModelAndView("employeeList");
        mav.addObject("employees", employeeService.getAllEmployees());
        return mav;
    }
 
    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public String addEmployee(@ModelAttribute Employee employee) {
        employeeService.addEmployee(employee);
        return "redirect:/employee/list";
    }
}

JSP页面（employeeList.jsp）:




<html>
<head>
    <title>员工列表</title>
</head>
<body>
    <h1>员工列表</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
        </tr>
        <c:forEach var="employee" items="${employees}">
            <tr>
                <td>${employee.id}</td>
                <td>${employee.name}</td>
                <td>${employee.email}</td>
            </tr>
        </c:forEach>
    </table>
    <form action="add" method="post">
        姓名: <input type="text" name="name"/>
        邮箱: <input type="text" name="email"/>
        <input type="submit" value="添加员工"/>
    </form>
</body>
</html>

Spring配置（XML）:




<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/sc

- 阅读更多 -

JQuery简介与解析

System

2024-08-11

所有,jquery

JQuery是一个快速、简洁的JavaScript库，它使得HTML文档的遍历和操作、事件处理、动画和Ajax交互等操作更加简单和易于使用。

引入JQuery库

在HTML文件中，我们需要通过<script>标签引入JQuery库。




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

JQuery选择器

JQuery的核心就是提供各种方便的选择器，让我们可以方便地选择DOM元素。




$(document).ready(function(){
    $("h1").click(function(){
        $(this).hide();
    });
});

在上述代码中，$(document).ready(function(){...})用于确保DOM完全加载后才执行函数内的代码，$("h1")选择所有的<h1>元素，click()方法用于绑定点击事件，$(this)代表当前被点击的元素。

JQuery事件处理

JQuery提供了丰富的事件处理方法，例如click()、hover()、focus()等。




$("button").click(function(){
    $("p").slideToggle();
});

在上述代码中，$("button").click()绑定了点击事件，当点击按钮时，$("p").slideToggle()会使<p>元素上下滑动。

JQuery效果

JQuery提供了一系列的动画效果方法，如fadeIn()、fadeOut()、slideDown()、slideUp()等。




$("button").click(function(){
    $("p").fadeOut();
});

在上述代码中，当点击按钮时，$("p").fadeOut()会使<p>元素淡出视图。

JQuery AJAX

JQuery提供了$.ajax()方法，用于执行异步HTTP请求，实现AJAX交互。




$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).append(" 已载入 test.html");
});

在上述代码中，$.ajax()发送请求到"test.html"，并在成功载入后追加文本到document.body。

JQuery链式调用

JQuery允许我们将多个操作链式调用在一起，每一步的返回结果都是下一步的输入。




$("p").find("span").hover(function(){
    $(this).addClass("hilight");
}, function(){
    $(this).removeClass("hilight");
});

在上述代码中，$("p").find("span")先找到所有<p>元素中的<span>元素，然后hover()方法用于绑定悬停事件，当鼠标悬停时添加hilight类，当鼠标离开时移除hilight类。

以上就是JQuery的基本概念和使用示例。

- 阅读更多 -

jQuery实战指南：解锁网页设计新维度，构建互动体验升级版

System

2024-08-11

所有,jquery




// 引入jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
// 页面加载完成后执行
$(document).ready(function() {
    // 监听导航栏的点击事件
    $('.navigation').on('click', 'a', function(event) {
        event.preventDefault(); // 阻止a标签默认行为
        var target = $(this).attr('href'); // 获取目标元素的选择器
 
        // 平滑滚动到目标位置
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 500);
    });
 
    // 监听滚动事件
    $(window).scroll(function() {
        // 获取当前视窗的滚动位置
        var scrollDistance = $(window).scrollTop();
 
        // 如果用户滚动到主内容区域，则更改导航栏的样式
        if (scrollDistance > 500) {
            $('.navigation').fadeIn(); // 显示导航栏
        } else {
            $('.navigation').fadeOut(); // 隐藏导航栏
        }
    });
});

这段代码使用jQuery实现了导航栏的交互，包括点击导航链接时平滑滚动到页面的相应位置，以及监听滚动事件来控制导航栏的显示和隐藏。平滑滚动效果通过animate方法实现，而导航栏的显示隐藏则通过fadeIn和fadeOut方法控制。

- 阅读更多 -

推荐一个非常实用的 jQuery 插件：jquery-textrange

System

2024-08-11

所有,jquery

jQuery-textrange 是一个 jQuery 插件，用于处理文本范围和选区。它允许开发者获取、设置和操作页面上的文本选区。

以下是如何使用 jQuery-textrange 的一个简单示例：

首先，确保你的页面已经加载了 jQuery 库。
引入 jquery.textrange 插件。
使用插件提供的方法来操作文本选区。

HTML 示例:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Textrange Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.textrange.js"></script>
</head>
<body>
    <textarea id="myTextarea">这是一个示例文本。</textarea>
    <script>
        $(document).ready(function() {
            var $textarea = $('#myTextarea');
 
            // 选中文本区域的部分文本
            $textarea.textRange('selectFrom', { start: 0, end: 5 });
 
            // 获取选中的文本
            var selectedText = $textarea.textRange('get');
            console.log(selectedText); // 输出: 这是一
 
            // 设置文本区域的选区
            $textarea.textRange('set', { start: 6, end: 10 });
 
            // 清除选区
            $textarea.textRange('collapse');
        });
    </script>
</body>
</html>

在这个例子中，我们首先通过 ID 选中了一个 <textarea> 元素，然后使用 selectFrom 方法选中了从索引 0 到 5 的文本。接着，我们使用 get 方法获取了选中的文本。然后我们用 set 方法设置了一个新的选区，并再次使用 collapse 方法清除了选区。这个插件提供了丰富的方法来操作文本选区，非常适合开发需要处理文本选区的 web 应用程序。

- 阅读更多 -

jQuery 知识总结

System

2024-08-11

所有,ajax

在jQuery中，选择器是用于选择DOM元素的字符串。jQuery提供了多种选择器，包括基本选择器、层次选择器、过滤选择器和表单选择器等。

基本选择器：
- $("#element")：选择ID为element的元素。
- $(".class")：选择所有class包含class的元素。
- $("element")：选择所有element标签的元素。
- $("*")：选择所有元素。
层次选择器：
- $("parent child")：选择parent的所有child元素。
- $("parent > child")：选择parent的直接child元素。
- $("prev + next")：选择紧跟在prev元素后的next元素。
- $("prev ~ siblings")：选择prev元素之后的所有siblings元素。
过滤选择器：
- $("element:first")：选择第一个element。
- $("element:last")：选择最后一个element。
- $("element:even")：选择索引为偶数的element。
- $("element:odd")：选择索引为奇数的element。
- $("element:eq(index)")：选择指定索引index的element（从0开始）。
- $("element:gt(index)")：选择索引大于index的element。
- $("element:lt(index)")：选择索引小于index的element。
表单选择器：
- $(":input")：选择所有<input>、<textarea>、<select>和<button>元素。
- $(":text")：选择所有文本框。
- $(":password")：选择所有密码框。
- $(":radio")：选择所有单选按钮。
- $(":checkbox")：选择所有复选框。
- $(":submit")：选择所有提交按钮。
- $(":reset")：选择所有重置按钮。
事件绑定：
- $("#element").click(function() { ... })：为ID为element的元素绑定点击事件。
AJAX请求：
- $().ajax({ url: "url", success: function(data) { ... } })：发送AJAX GET请求。
- $().ajax({ type: "POST", url: "url", data: { key: "value" }, success: function(data) { ... } })：发送AJAX POST请求。
属性操作：
- $("#element").attr("attribute")：获取ID为element的元素的attribute属性值。
- $("#element").attr("attribute", "value")：设置ID为element的元素的attribute属性值为value。
CSS操作：
- $("#element").css("property")：获取ID为element的元素的property样式值。
- $("#element").css("property", "value")：设置ID为element的元素的property样式值为value。
内容文本操作：
- $("#element").html()：获取ID为element的元素的HTML内容。
- $("#element").html("content")：设置ID为element的元素的HTML内容为content。
- $("#element").text()：获取ID为element的元素的文本内容。
- $("#element").text("content")：设置ID为element的元素的文本内容为content。
元素操作：
- $("#element").append(content)：

System

2024-08-11

所有,ajax

由于篇幅限制，这里只提供原生Ajax和jQuery的示例代码。其他库（axios、fetch）和跨域技术（CORS、SONP）的详细解释和示例将在专题文章中给出。

原生Ajax




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'api/some.json', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求响应的数据
      console.log(xhr.responseText);
    } else {
      // 处理错误情况
      console.log('请求失败');
    }
  }
};
 
// 发送请求
xhr.send();

jQuery Ajax




$.ajax({
  url: 'api/some.json',
  type: 'GET',
  dataType: 'json',
  success: function (data) {
    console.log(data);
  },
  error: function () {
    console.log('请求失败');
  }
});

这些示例展示了如何使用原生的XMLHttpRequest对象和jQuery的$.ajax方法来发送GET请求，并在成功获取响应时处理数据。在实际应用中，你可能需要根据具体需求调整HTTP方法、数据类型以及发送的数据。

- 阅读更多 -

推荐开源项目：jQuery Ajax Queue —— 简化你的异步请求处理

System

2024-08-11

所有,ajax




// 引入jQuery和jQuery.Ajax.Queue插件
 
// 初始化队列
$.ajaxQ.queue();
 
// 添加请求到队列中
$.ajaxQ.queue({
    url: 'path/to/your/api',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log('请求成功处理:', response);
    },
    error: function(xhr, status, error) {
        console.error('请求失败:', status, error);
    }
});
 
// 在需要的时候，处理队列中的请求
$.ajaxQ.process();

这段代码展示了如何使用jQuery Ajax Queue插件来管理和处理异步请求队列。首先，我们初始化队列，然后将请求通过$.ajaxQ.queue()方法加入到队列中。最后，通过调用$.ajaxQ.process()方法来处理队列中的请求。这种方式对于需要顺序处理的请求非常有帮助，可以避免异步请求导致的问题，保持良好的用户体验。

- 阅读更多 -

第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）

System

2024-08-11

所有,ajax

以下是使用jQuery和AJAX实现增删改查及分页显示功能的示例代码：

HTML部分：




<div id="content">
  <!-- 用于显示数据的表格 -->
  <table id="data-table">
    <!-- 表头 -->
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Action</th>
      </tr>
    </thead>
    <!-- 表身，动态插入数据行 -->
    <tbody>
      <!-- 数据行将被插入此处 -->
    </tbody>
  </table>
  <!-- 分页控件 -->
  <div id="pagination"></div>
</div>

JavaScript部分 (jQuery + AJAX)：




$(document).ready(function() {
  // 初始加载数据和分页
  loadData(1);
 
  // 分页点击事件
  $('#pagination').on('click', 'a', function(e) {
    e.preventDefault();
    loadData($(this).data('page'));
  });
 
  // 添加数据
  $('#add-form').on('submit', function(e) {
    e.preventDefault();
    addData($(this).serialize());
  });
 
  // 删除数据
  $('#data-table').on('click', '.delete', function() {
    deleteData($(this).data('id'));
  });
 
  // 更新数据
  $('#data-table').on('click', '.edit', function() {
    editData($(this).data('id'));
  });
 
  // 提交更新后的数据
  $('#update-form').on('submit', function(e) {
    e.preventDefault();
    updateData($(this).serialize());
  });
});
 
// 加载数据和分页信息
function loadData(page) {
  $.ajax({
    url: 'get-data.php',
    type: 'GET',
    data: { page: page },
    success: function(response) {
      var data = JSON.parse(response);
      // 更新表格内容
      $('#data-table tbody').html(data.table);
      // 更新分页控件
      $('#pagination').html(data.pagination);
    }
  });
}
 
// 添加数据
function addData(data) {
  $.ajax({
    url: 'add-data.php',
    type: 'POST',
    data: data,
    success: function(response) {
      loadData(1); // 重新加载第一页数据
    }
  });
}
 
// 删除数据
function deleteData(id) {
  $.ajax({
    url: 'delete-data.php',
    type: 'POST',
    data: { id: id },
    success: function() {
      loadData($('#pagination .active a').data('page'));
    }
  });
}
 
// 编辑数据
function editData(id) {
  // 弹出编辑框或者跳转到编辑页面
  // ...
}
 
// 更新数据
function updateData(data) {
  $.ajax({
    url: 'update-data.php',
    type: 'POST',
    data: data,
    success: function() {
      loadData($('#pagination .active a').data('page'));
    }
  });
}

PHP部分 (处理AJAX请求)：




// get-data.php
$page = $_GET['page'];
// 构造数据源，查询数据库并分页
// ...
$data = array(
  'table' => '<tr>...</tr>', // 生成的表格行
  'pagination' => '<a href="#">...</a>' // 生成的分页链接
);
echo json_encode($data);
 
// add-data.php
$name = $_POST['name'];
$age = $_P

- 阅读更多 -