System 发布的文章

2024-08-11




// 原生JS实现图片框切换
function switchImage(imageBox, imageIndex) {
    var images = imageBox.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].style.display = 'none';
    }
    images[imageIndex].style.display = 'block';
}
 
// jQuery实现图片框切换
$(document).ready(function() {
    $('.thumbnails img').click(function() {
        var imgIndex = $(this).index();
        $('.main-image img').eq(imgIndex).show().siblings().hide();
    });
});

这个例子展示了如何使用原生JavaScript和jQuery来实现图片框的切换功能。原生JS使用了Element.getElementsByTagName和Element.style.display来控制图片的显示和隐藏，而jQuery使用了$(selector).click(function)来绑定点击事件，并使用$(selector).show()和$(selector).hide()来切换图片的显示状态。

- 阅读更多 -

jQuery Autocomplete：提升用户体验的智能搜索

System

2024-08-11

所有,jquery




$(function() {
    $("#search-input").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "https://api.example.com/search",
                data: {
                    term: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 2, // 最小字符长度
        select: function(event, ui) {
            // 当选择某个提示项时执行的回调函数
            logSearch(ui.item ? ui.item.value : "");
        },
        open: function() {
            // 打开提示菜单时执行的回调函数
            $(this).autocomplete("widget").append("<div class='ui-autocomplete-loading'>Loading...</div>");
        },
        close: function(event, ui) {
            // 关闭提示菜单时执行的回调函数
        }
    }).data( "ui-autocomplete" )._renderItem = function(ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
    };
 
    function logSearch(term) {
        // 记录搜索日志的函数
        $.post("https://api.example.com/log", {term: term});
    }
});

这段代码使用jQuery UI Autocomplete插件提供了一个智能搜索框，它会向一个外部API发送请求来获取搜索建议，并在用户选择某个提示项时记录搜索日志。代码中包含了提示菜单打开和关闭时的回调函数，以及自定义提示项的渲染方式，从而提升了用户体验。

- 阅读更多 -

jquery实现甘特图时效管理

System

2024-08-11

所有,jquery

以下是一个简化的示例，展示了如何使用jQuery和CSS创建一个基本的甘特图时间线，并对任务进行管理。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Management with jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<div id="timeline">
  <div class="task" data-start="2023-01-01" data-end="2023-01-05">
    <h3>Task 1</h3>
    <button class="delete">Delete</button>
  </div>
  <!-- More tasks... -->
</div>
 
<button id="addTask">Add Task</button>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




#timeline {
  position: relative;
}
.task {
  position: absolute;
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}
.delete {
  cursor: pointer;
}

JavaScript (script.js):




$(document).ready(function() {
  // Function to add a task
  $('#addTask').click(function() {
    // Logic to add a task
  });
 
  // Function to delete a task
  $('#timeline').on('click', '.delete', function() {
    $(this).parent().remove();
  });
 
  // Function to manage tasks based on date
  // ...
});

这个示例展示了如何添加和删除任务，并且可以通过日期管理它们（需要自行实现manageTasks函数）。这个简化的例子只是展示了基本的概念，并没有包含完整的日期解析和布局逻辑。实际应用中，您可能需要编写额外的代码来处理任务的动态添加、删除和排序。

- 阅读更多 -

h5+jquery实现多个video标签自定义倍速播放

System

2024-08-11

所有,jquery

在HTML5中，使用<video>标签可以嵌入视频内容。结合jQuery，可以实现对多个视频的控制，包括定义和改变播放速度。

以下是一个简单的示例，展示如何使用jQuery来设置和改变多个<video>标签的播放速度（倍速）：

HTML部分：




<video id="video1" controls>
  <source src="movie1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<video id="video2" controls>
  <source src="movie2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 其他 video 标签 -->

jQuery部分：




$(document).ready(function(){
  // 设置初始播放速度为1.0
  var playbackRate = 1.0;
 
  // 为 video1 设置倍速播放
  $('#video1').get(0).playbackRate = playbackRate;
 
  // 为 video2 设置倍速播放
  $('#video2').get(0).playbackRate = playbackRate;
 
  // 为所有 video 设置倍速播放的函数
  function setPlaybackRate(rate) {
    $('video').each(function() {
      this.playbackRate = rate;
    });
  }
 
  // 示例：双倍速播放
  setPlaybackRate(2.0);
 
  // 示例：0.5倍速播放
  // setPlaybackRate(0.5);
});

在这个示例中，我们首先设置了初始的播放速度playbackRate。然后，使用jQuery选择器为每个<video>标签设置了相同的播放速度。通过setPlaybackRate函数，可以轻松地更改所有视频的播放速度。只需调用setPlaybackRate(desiredRate)并传入所需的播放速度即可。

- 阅读更多 -

jQuery 效果 - 滑动 —— W3school 详解简单易懂

System

2024-08-11

所有,jquery

在W3School的jQuery效果库中，有一个叫做"滑动详解"的效果，它展示了如何使用jQuery库创建一个简单的滑动效果。

以下是一个简单的例子，演示了如何使用jQuery来实现一个元素的滑动效果：

HTML部分:




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑动效果示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<button id="slide">点击滑动</button>
<div id="panel" style="height: 100px; background-color: #ffcc00; width: 200px; display: none;">
  这里是需要滑动的内容
</div>
 
<script>
$(document).ready(function(){
  $("#slide").click(function(){
    $("#panel").slideToggle();
  });
});
</script>
 
</body>
</html>

在这个例子中，我们首先引入了jQuery库。然后定义了一个按钮和一个需要滑动的面板。在jQuery的ready函数中，我们绑定了一个点击事件到按钮上，当按钮被点击时，通过slideToggle函数来切换面板的滑动状态。如果面板是关闭的，slideToggle会让它滑下来；如果面板是打开的，它会滑上去。这个效果是通过CSS和jQuery结合实现的，使得页面的交互性更好。

- 阅读更多 -

jQuery文件上传以及MultipartFile

System

2024-08-11

所有,jquery

在Spring MVC中，你可以使用@RequestParam注解来处理jQuery上传的文件，并将其转换为MultipartFile。以下是一个简单的例子：

前端代码（HTML + jQuery）:




<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="button" value="Upload" onclick="uploadFile()" />
</form>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function uploadFile() {
    var formData = new FormData($('#uploadForm')[0]);
    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,  // 告诉jQuery不要处理发送的数据
        contentType: false,  // 告诉jQuery不要设置内容类型头
        success: function(response) {
            console.log(response);
        },
        error: function() {
            console.log('Error occurred!');
        }
    });
}
</script>

后端代码（Spring MVC Controller）:




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
 
@Controller
public class FileUploadController {
 
    @PostMapping("/upload")
    @ResponseBody
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "File is empty";
        }
        // 处理上传的文件，例如保存到磁盘或数据库
        // file.transferTo(new File("targetFilePath"));
        return "File uploaded successfully: " + file.getOriginalFilename();
    }
}

在这个例子中，前端使用jQuery构造了一个文件上传的表单并通过Ajax发送请求。后端使用Spring MVC的@RequestParam注解接收上传的文件并将其转换为MultipartFile对象。这样就可以进行进一步的文件处理。

System

2024-08-11

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <title>jQuery Ajax 调用 WebService 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="result"></div>
 
    <script>
        // 使用 jQuery 发送 AJAX 请求
        $.ajax({
            url: 'http://ws.webservice-cross-domain.com/service.php', // WebService 接口 URL
            type: 'GET', // 请求方法
            dataType: 'jsonp', // 数据类型为 jsonp 以解决跨域问题
            jsonpCallback: 'callbackFunction', // 服务器端用于包装响应的函数名
            success: function(response) {
                // 请求成功后的回调函数
                $('#result').text(response.message);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 请求失败后的回调函数
                $('#result').text('Error: ' + textStatus);
            }
        });
 
        // 回调函数，需要与服务器端协商
        function callbackFunction(data) {
            console.log(data);
        }
    </script>
</body>
</html>

这段代码演示了如何使用jQuery的$.ajax方法调用一个跨域的WebService接口。通过指定dataType为jsonp并提供一个jsonpCallback函数，可以解决跨域问题。成功获取响应后，会将响应内容显示在页面的<div id="result"></div>元素中。

- 阅读更多 -

jQuery的基本选择器

System

2024-08-11

所有,jquery

jQuery 提供了多种基本选择器，允许你选择 DOM 元素。以下是一些基本的选择器和相应的实例代码：

元素选择器：$( "element" )
选择所有的元素。




$("p").css("color", "red");

ID选择器：$( "#id" )
通过元素的ID选择一个元素。




$("#myId").css("color", "red");

类选择器：$( ".class" )
选择所有具有指定类的元素。




$(".myClass").css("color", "red");

全选选择器：$( "*" )
选择所有元素。




$("*").css("color", "red");

群组选择器：$( "selector1, selector2, selectorN" )
选择每个选择器匹配的元素。




$("p, div, .myClass").css("color", "red");

相邻选择器：$( "element1 + element2" )
选择紧跟在另一个元素后的元素。




$("p + div").css("color", "red");

子选择器：$( "parent > child" )
选择直接子元素。




$("div > p").css("color", "red");

兄弟选择器：$( "element1 ~ element2" )
选择某个元素之后的所有兄弟元素。




$("p ~ div").css("color", "red");

这些是基本的jQuery选择器，可以根据需要组合使用以完成更复杂的选择。

- 阅读更多 -

JS/jQuery 获取 HTTPRequest 请求标头?

System

2024-08-11

所有,jquery

在JavaScript中，您可以使用XMLHttpRequest对象或原生的fetch API来发送HTTP请求。但是，出于安全原因，浏览器不允许JavaScript代码访问HTTP请求的标头，除了User-Agent和Referer之外。这是一个安全机制，以防止跨站点脚本攻击（XSS）。

如果您正在尝试获取响应的标头信息，您可以使用getResponseHeader()和getAllResponseHeaders()方法。

使用XMLHttpRequest获取响应标头的示例代码：




var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com", true);
 
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求已完成
    if (xhr.status === 200) { // 成功状态码
      // 获取特定的响应标头
      var contentType = xhr.getResponseHeader("Content-Type");
      console.log(contentType);
 
      // 获取所有的响应标头
      var allHeaders = xhr.getAllResponseHeaders();
      console.log(allHeaders);
    }
  }
};
 
xhr.send();

使用fetch API获取响应标头的示例代码：




fetch("https://example.com")
  .then(response => {
    // 获取特定的响应标头
    const contentType = response.headers.get('Content-Type');
    console.log(contentType);
 
    // 获取所有的响应标头
    return response.headers.forEach(
      (value, name) => console.log(name + ': ' + value)
    );
  })
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

请注意，以上代码中的URL和头信息都是示例，实际使用时需要替换为您的目标URL和需要获取的标头。

System

2024-08-11

所有,jquery

在JavaScript和jQuery中，可以使用以下方法来判断复选框和单选按钮是否被选中：

JavaScript:

复选框:




// 获取checkbox元素
var checkbox = document.getElementById('myCheckbox');
 
// 判断是否选中
if (checkbox.checked) {
  // checkbox是选中的
} else {
  // checkbox没有被选中
}

单选按钮:




// 获取radio元素
var radio = document.querySelector('input[name="myRadio"]:checked');
 
if (radio) {
  // 有radio按钮被选中
  console.log(radio.value); // 输出选中的radio的值
} else {
  // 没有radio按钮被选中
}

jQuery:

复选框:




// 判断是否选中
if ($('#myCheckbox').is(':checked')) {
  // checkbox是选中的
} else {
  // checkbox没有被选中
}

单选按钮:




// 获取选中的radio值
var radioValue = $('input[name="myRadio"]:checked').val();
 
if (radioValue) {
  // 有radio按钮被选中
  console.log(radioValue); // 输出选中的radio的值
} else {
  // 没有radio按钮被选中
}

在这两种方法中，你可以通过ID或者name属性来选择checkbox或radio按钮，然后使用.is(':checked')来判断是否被选中。对于单选按钮，你可以使用:checked选择器来找到当前选中的按钮，并通过.val()获取其值。

- 阅读更多 -