1. 首页
  2. 标签
  3. jquery
jQuery-1.语法、选择器、节点操作
System
2024-08-23
所有,jquery



// 引入jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
<script>
// 文档加载完成后执行
$(document).ready(function(){
    // 选择器：选取所有的段落元素
    $("p").click(function(){
        // 节点操作：改变被点击的段落的文本颜色为红色
        $(this).css("color", "red");
    });
 
    // 选择器：选取id为"myDiv"的元素
    $("#myDiv").hover(function(){
        // 节点操作：鼠标悬停时改变背景颜色为蓝色
        $(this).css("background-color", "blue");
    }, function(){
        // 节点操作：鼠标离开时改变背景颜色为默认颜色
        $(this).css("background-color", "#f0f0f0");
    });
});
</script>

这段代码展示了如何使用jQuery来处理文档加载完成后的事件，包括如何给段落设置点击事件和如何在鼠标悬停和离开时改变特定元素的样式。

- 阅读更多 -
JQuery 操作Class实现前端交互方案（推荐）
System
2024-08-23
所有,jquery



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Class操作示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 点击按钮时，切换div的class
            $('#myButton').click(function() {
                $('#myDiv').toggleClass('hidden');
            });
        });
    </script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <button id="myButton">点击我</button>
    <div id="myDiv" class="hidden">这是一个可隐藏的div。</div>
</body>
</html>

这个示例中，我们使用jQuery的toggleClass函数来切换一个元素的hidden类。当按钮被点击时，关联的div会切换显示/隐藏状态。通过这种方式，我们可以简单地控制元素的可见性，而无需使用条件判断或直接操作DOM属性。

- 阅读更多 -
javaEE5（javascript/jquery附加作业（选做））
System
2024-08-23
所有,jquery

由于原代码已经是一个完整的Java EE 5应用，并且涉及到JavaScript和jQuery的使用，以下是一个简化的JavaScript和jQuery代码示例，用于在网页中动态更新时间显示：




<!DOCTYPE html>
<html>
<head>
    <title>时间显示示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            function updateClock(){
                var now = new Date();
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                $('#clock').text(hours + ':' + minutes + ':' + seconds);
            }
            
            setInterval(updateClock, 1000); // 每秒更新一次时间
        });
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>

这段代码使用jQuery库简化了JavaScript操作，并且使用了$(document).ready()确保在文档加载完成后执行代码。updateClock函数负责获取当前时间，并格式化显示在#clock元素中。setInterval则确保每秒钟调用一次updateClock函数更新时间。

- 阅读更多 -
jquery || js 实现阴影背景弹窗
System
2024-08-23
所有,jquery

以下是使用jQuery和JavaScript创建一个带有阴影背景的弹窗的简单示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shadow Popup</title>
<style>
  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
</style>
</head>
<body>
 
<button id="open-popup">打开弹窗</button>
<div class="popup" id="popup">
  这是一个带阴影的弹窗。
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#open-popup').click(function() {
      $('#popup').show();
    });
  });
</script>
</body>
</html>

这段代码中，我们定义了一个带有阴影的.popup类，并在按下按钮时通过jQuery显示这个弹窗。CSS样式包括box-shadow属性来创建阴影效果。JavaScript部分使用jQuery来监听按钮点击事件，并通过.show()方法显示弹窗。

- 阅读更多 -
JavaWeb系列十九: jQuery的DOM操作 上
System
2024-08-23
所有,jquery



// 导入jQuery库
import static jdk.nashorn.internal.objects.NativeString.trim;
import java.io.*;
 
public class Main {
    public static void main(String[] args) throws IOException {
        // 创建一个StringBuilder对象用于存储HTML内容
        StringBuilder sb = new StringBuilder();
 
        // 从文件中读取HTML内容
        try (BufferedReader reader = new BufferedReader(new FileReader("src/main/resources/template.html"))) {
            String line;
            while ((line = reader.readLine()) != null) {
                sb.append(line);
            }
        }
 
        // 获取HTML字符串并去除首尾空白字符
        String html = sb.toString().trim();
 
        // 使用jQuery选择器选择元素
        org.jsoup.nodes.Document doc = Jsoup.parse(html);
        Elements elements = doc.select("title");
 
        // 输出结果
        elements.forEach(element -> System.out.println(element.text()));
    }
}

这段代码使用了Jsoup库来解析HTML文档并使用jQuery选择器来选择特定的元素。首先，它从文件中读取HTML内容，然后使用Jsoup的parse方法解析HTML字符串，并通过select方法选择所有<title>元素。最后，它遍历选中的元素并打印它们的文本内容。这个例子展示了如何在Java中使用jQuery的DOM操作方法。

- 阅读更多 -
推荐一款强大的前端数据导出插件——tableExport.jquery.plugin
System
2024-08-23
所有,jquery



$(document).ready(function () {
    // 假设你的表格有一个ID为"exportTable"
    $('#exportTable').tableExport({
        headings: true,                    // 使用表头作为标题
        footers: true,                     // 使用表脚作为结尾
        formats: ['xls', 'csv', 'txt'],    // 导出的文件格式
        fileName: 'exported_file',         // 导出文件的默认文件名
        bootstrap: true,                   // 使用Bootstrap样式
        position: 'bottom',                // 导出按钮位置
        ignoreRows: [2],                   // 忽略某些行
        ignoreCols: [0],                   // 忽略某些列
        ignoreCSS: '.ignore',              // 忽略具有特定CSS类的元素
        tableName: 'data_table'            // 导出的表格名称
    });
});

这段代码演示了如何使用tableExport.jquery.plugin插件来为一个表格添加导出功能。你可以通过配置不同的选项来定制导出的文件格式、文件名、导出行列的规则等。在实际使用时，请确保已经引入了jQuery库和tableExport插件的相关CSS和JS文件。

- 阅读更多 -
基于javaweb+mysql的ssm茶叶商城管理系统(java+ssm+jsp+ajax+jquery+mysql)
System
2024-08-23
所有,ajax

这是一个基于JavaWeb技术栈的SSM（Spring MVC + Spring + MyBatis）框架的茶叶商城管理系统。由于代码量较大，我将提供一些核心代码片段和配置文件的示例。

核心配置文件applicationContext.xml：




<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <!-- 数据库连接池 -->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/tea_store"/>
        <property name="username" value="root"/>
        <property name="password" value="password"/>
    </bean>
 
    <!-- 配置SqlSessionFactory -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>
 
    <!-- 配置Mapper扫描器 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.example.mapper"/>
    </bean>
 
    <!-- 事务管理器配置, 使用DataSourceTransactionManager -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
 
    <!-- 开启注解事务管理 -->
    <tx:annotation-driven transaction-manager="transactionManager"/>
 
</beans>

核心控制器类TeaController.java：




package com.example.controller;
 
import com.example.model.Tea;
import com.example.service.TeaService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
@Controller
@RequestMapping("/tea")
public class TeaController {
 
    @Autowired
    private TeaService teaService;
 
    @RequestMapping(value = "/list", method = RequestMethod.GET)
    public String listTeas(Model model) {
        model.addAttribute("teas", teaService.findAll());
        return "tea_list";
    }
 
    // 其他CRUD操作的映射
}

服务层接口TeaService.java：




package com.example.service;
 
import com.example.mod
- 阅读更多 -
AJAX的跨域问题使用jQuery封装的JsonP的方式实现跨域------AJAX
System
2024-08-23
所有,ajax

JSONP（JSON with Padding）是一种跨域请求数据的方式，可以让你在不同域的服务器上获取数据。JSONP 不使用 AJAX 请求，而是通过动态创建 <script> 标签来实现。

下面是使用 jQuery 进行 JSONP 请求的示例代码：




$.ajax({
    url: "http://example.com/api/data", // 跨域请求的URL
    type: "GET",
    dataType: "jsonp", // 指定使用jsonp方式
    jsonpCallback: "callbackFunction", // 服务器端用于包装响应的函数名
    success: function(response) {
        console.log(response); // 处理响应数据
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log('JSONP request failed: ' + textStatus);
    }
});
 
// 回调函数，服务器响应时调用
function callbackFunction(data) {
    // 处理data
    console.log(data);
}

在上面的代码中，url 是你要请求的服务端地址，dataType 设置为 "jsonp" 来指示 jQuery 使用 JSONP 方式发送请求。jsonpCallback 是一个函数名，服务器端用于包装 JSON 响应的函数名，该函数将被传递给服务器，以便服务器可以正确地将响应包装在函数调用中。

服务器端应该能够处理 JSONP 请求，并返回类似于以下格式的响应：




callbackFunction({"key": "value", ...});

这样就可以实现使用 jQuery 进行跨域请求的 JSONP 方式。

- 阅读更多 -
【前端面试】谈谈你对jQuery中的ajax方法的了解
System
2024-08-23
所有,ajax

jQuery中的$.ajax()方法是一种用于执行异步HTTP（HTTP）请求的强大技术。这是一种基础方法，用于构建更高级的AJAX功能，如$.get(), $.post()等。

以下是$.ajax()方法的一些常见参数：

  • url: （默认值: 当前页地址）发送请求的地址。
  • type: （默认值: "GET"）请求方式 ("POST" 或 "GET")， 默认为 "GET"。
  • data: （默认值: 无）发送到服务器的数据。将自动转换为请求字符串格式。其格式可以是对象、数组、字符串。

  • dataType: （默认值: 无）预期的服务器响应的数据类型。可用的类型如下：

    • "xml": 返回 XML 文档，可用 jQuery 处理。
    • "html": 返回纯文本 HTML 信息；包括 script 元素。
    • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
    • "json": 返回 JSON 数据 。
    • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调。
  • success: （默认值: 无）请求成功后的回调函数。
  • error: （默认值: 无）请求失败时的回调函数。

下面是一个使用$.ajax()方法的例子：




$.ajax({
    url: 'your-api-endpoint.com',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('Data received:', data);
    },
    error: function(xhr, status, error) {
        console.error('An error occurred:', status, error);
    }
});

在这个例子中，我们向your-api-endpoint.com发送一个GET请求，预期服务器返回JSON格式的数据。如果请求成功，我们在控制台中记录返回的数据；如果请求失败，我们记录错误信息。

- 阅读更多 -
JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios）
System
2024-08-23
所有,ajax

在JavaScript中，有多种方法可以用来发送HTTP请求以获取数据。以下是其中的四种方法：

  1. 使用原生的XMLHttpRequest对象
  2. 使用jQuery的$.ajax方法
  3. 使用Fetch API
  4. 使用axios库

下面是每种方法的示例代码：

  1. 使用原生的XMLHttpRequest对象：



var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var json = JSON.parse(xhr.responseText);
    console.log(json);
  }
};
xhr.send();
  1. 使用jQuery的$.ajax方法：



$.ajax({
  url: "https://api.example.com/data",
  type: "GET",
  dataType: "json",
  success: function (json) {
    console.log(json);
  },
  error: function (xhr, status, error) {
    console.error(error);
  },
});
  1. 使用Fetch API：



fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error("Error:", error));
  1. 使用axios库：

首先，你需要安装axios：




npm install axios

然后，你可以使用axios来发送请求：




axios.get("https://api.example.com/data")
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

这四种方法各有优缺点，你可以根据项目需求和个人喜好来选择使用哪一种。

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