分类 jquery 下的文章

js和jQuery两种方式实现：点击按钮，平滑滚动到锚点处

2024-08-11

JavaScript原生方式：




document.querySelector('#myButton').addEventListener('click', function() {
  document.querySelector('#anchor').scrollIntoView({
    behavior: 'smooth'
  });
});

jQuery方式：




$('#myButton').on('click', function() {
  $('#anchor').get(0).scrollIntoView({
    behavior: 'smooth'
  });
});

在这两个例子中，当按钮被点击时，页面会平滑滚动到id为anchor的元素位置。

jQuery 实现图片框切换【与原生 JS 对比】

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：提升用户体验的智能搜索

2024-08-11




$(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实现甘特图时效管理

2024-08-11

以下是一个简化的示例，展示了如何使用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标签自定义倍速播放

2024-08-11

在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 详解简单易懂

2024-08-11

在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

2024-08-11

在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对象。这样就可以进行进一步的文件处理。

2024-08-11




<!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的基本选择器

2024-08-11

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选择器，可以根据需要组合使用以完成更复杂的选择。