标签 jquery 下的文章

jQuery HTML - 获取 —— W3school 详解简单易懂

2024-08-11

在W3School的jQuery教程中，.html()方法用于获取或设置选定元素的HTML内容。

获取HTML内容：




$(selector).html()

这将返回选定元素的HTML内容。

设置HTML内容：




$(selector).html(content)

这将设置选定元素的HTML内容为content。

例子：




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery html() 方法实例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").html());
  });
  $("#btn2").click(function(){
    $("#test").html("Hello <b>World</b>!");
  });
});
</script>
</head>
<body>
 
<p id="test">Hello <b>World</b>!</p>
 
<button id="btn1">显示 p 元素的 HTML 内容</button>
<button id="btn2">改变 p 元素的 HTML 内容</button>
 
</body>
</html>

在这个例子中，当点击按钮1时，会弹出一个包含#test元素HTML内容的警告框。点击按钮2会将#test元素的HTML内容改为"Hello World!"。

jQuery 3.7.0 发布，提升操作性能

2024-08-11

jQuery 3.7.0 在性能优化方面有重大提升，主要关注点是提高 DOM 元素操作的效率，包括属性访问、类操作和CSS操作等。以下是一些主要的改进点：

.attr() 方法现在可以更快地访问和设置 id 属性。
.addClass(), .removeClass() 和 .toggleClass() 方法现在对带有多个类的元素执行更快。
对 .css() 方法进行了优化，可以更快地设置多个CSS属性。

示例代码：




// 访问 id 属性的优化
var id = $("#myElement").attr("id");
 
// 对多个类执行快速操作
$("#myElement").addClass("class1 class2 class3");
 
// 设置多个CSS属性的优化
$("#myElement").css({
  "color": "#fff",
  "background-color": "#000",
  "border-color": "#ccc"
});

这些改进旨在显著提高使用 jQuery 操作 DOM 的响应性和效率。

jQuery实现表格最后增加一行和删除最后一行

2024-08-11

使用jQuery可以很容易地在表格中增加一行，并删除表格的最后一行。以下是实现这两个功能的代码示例：

增加行：




function addRow() {
    var newRow = '<tr><td>新内容1</td><td>新内容2</td><td>新内容3</td></tr>';
    $('#myTable').append(newRow);
}

删除最后一行：




function deleteLastRow() {
    var rows = $('#myTable tr');
    if (rows.length > 1) { // 确保至少还有一行
        rows.last().remove();
    }
}

在HTML中，你需要有一个表格，并为这些函数设置按钮的点击事件：




<table id="myTable">
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
    </tr>
    <!-- 其他行... -->
</table>
 
<button onclick="addRow()">增加行</button>
<button onclick="deleteLastRow()">删除最后一行</button>

确保在使用这些函数之前，已经引入了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结合实现的，使得页面的交互性更好。