2024-08-17

jQuery 是一个 JavaScript 库,它封装了很多 JavaScript 操作 DOM 的方法,使得我们在操作 DOM 时更加简便。

主要的区别在于:

  1. jQuery 是一个库,它遵循 JavaScript 语法和规则,只是封装了很多常用的方法,使我们更方便地操作 DOM。
  2. jQuery 的方法通常返回一个 jQuery 对象,我们可以在这个对象上继续调用 jQuery 的其他方法。
  3. JavaScript 是原生的 JavaScript,不依赖于任何库,它需要我们自己写更多的代码来实现相同的功能。
  4. JavaScript 的方法通常返回一个 JavaScript 的原生对象,或者 null,我们只能在这个对象上调用原生 JavaScript 的方法。

以下是一个简单的例子,展示了如何用 jQuery 和原生 JavaScript 选择 DOM 元素,并为选择的元素添加点击事件:




<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
});
 
window.onload = function() {
  document.getElementById("btn2").addEventListener("click", function(){
    document.getElementById("test2").textContent = "Hello world!";
  });
};
</script>
</head>
<body>
 
<button id="btn1">点击我-jQuery</button>
<p id="test1"></p>
 
<button id="btn2">点击我-JavaScript</button>
<p id="test2"></p>
 
</body>
</html>

在这个例子中,我们使用 jQuery 通过 id 选择器选择了一个按钮和一个段落,并为这个按钮添加了点击事件。在点击按钮后,我们使用 jQuery 的 text 方法改变段落的文本。

同时,我们也使用原生 JavaScript 完成了同样的操作。在 JavaScript 中,我们使用 getElementById 选择 DOM 元素,并使用 addEventListener 添加事件监听器。在点击按钮后,我们使用 textContent 改变段落的文本。

2024-08-17

以下是实现手风琴特效的简化版示例代码,使用了jQuery库:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴特效</title>
<style>
  .accordion {
    width: 315px;
    height: 460px;
    position: relative;
    perspective: 1000px;
  }
  .accordion .card {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }
  .accordion .card.show {
    transform: rotateY(180deg);
  }
  .accordion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
</head>
<body>
 
<div class="accordion">
  <div class="card">
    <img src="https://placekitten.com/315/460" alt="Card 1">
  </div>
  <!-- Add more cards if needed -->
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
  $('.accordion .card').on('click', function() {
    $(this).toggleClass('show');
  });
});
</script>
 
</body>
</html>

这段代码实现了基本的手风琴效果,点击卡片会将其翻转180度显示背面内容。在实际应用中,您可能需要为每个卡片添加不同的背面内容,并且可能需要添加更多的交互细节,比如动画完成的回调函数等。

2024-08-17

在jQuery中,可以通过$.ajax$.get$.post方法来发送数据。

  1. 使用$.ajax方法发送数据:



$.ajax({
    url: 'your-endpoint.php', // 服务器端的URL
    type: 'POST',             // 请求类型,这里是POST
    data: {key1: 'value1', key2: 'value2'}, // 要发送的数据
})
.done(function(response) {
    // 请求成功后的回调函数
    console.log(response);
})
.fail(function() {
    // 请求失败后的回调函数
    console.log('request failed');
});
  1. 使用$.get方法发送GET请求:



$.get('your-endpoint.php', {key1: 'value1', key2: 'value2'}, function(response) {
    // 请求成功后的回调函数
    console.log(response);
});
  1. 使用$.post方法发送POST请求:



$.post('your-endpoint.php', {key1: 'value1', key2: 'value2'}, function(response) {
    // 请求成功后的回调函数
    console.log(response);
});

以上代码中,your-endpoint.php是服务器端处理请求的脚本地址,{key1: 'value1', key2: 'value2'}是要发送的数据,response是服务器返回的响应数据。

2024-08-17

在前面的文章中,我们已经介绍了如何使用jQuery来选择HTML元素以及如何对这些元素进行遍历操作。在这篇文章中,我们将介绍如何使用jQuery来操作HTML元素的属性、内容和值以及CSS样式。

  1. 操作HTML属性

在jQuery中,可以使用.attr()方法来获取或者设置HTML元素的属性。

例如,我们可以使用以下代码来获取或设置一个元素的href属性:




// 获取链接的href属性
var href = $('#link').attr('href');
 
// 设置链接的href属性
$('#link').attr('href', 'http://www.example.com');
  1. 操作HTML内容

在jQuery中,可以使用.html()方法来获取或设置HTML元素的内容。

例如,我们可以使用以下代码来获取或设置一个元素的内容:




// 获取元素的内容
var content = $('#content').html();
 
// 设置元素的内容
$('#content').html('<p>新的内容</p>');
  1. 操作HTML值

在jQuery中,可以使用.val()方法来获取或设置HTML表单元素的值。

例如,我们可以使用以下代码来获取或设置一个输入框的值:




// 获取输入框的值
var value = $('#input').val();
 
// 设置输入框的值
$('#input').val('新的值');
  1. 操作CSS样式

在jQuery中,可以使用.css()方法来获取或设置HTML元素的CSS样式。

例如,我们可以使用以下代码来获取或设置一个元素的背景颜色:




// 获取元素的背景颜色
var bgColor = $('#content').css('background-color');
 
// 设置元素的背景颜色
$('#content').css('background-color', 'blue');

以上就是使用jQuery来操作HTML、CSS的基本方法。在实际开发中,可以根据需要选择合适的方法来操作HTML元素。

2024-08-17



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易购物车示例</title>
<style>
    /* 复合选择器选中所有带有.item类的元素,并且它们的父元素具有.cart类 */
    .cart .item {
        margin-bottom: 10px;
    }
    .cart .item .quantity {
        width: 50px;
        text-align: center;
    }
</style>
</head>
<body>
 
<div class="cart">
    <div class="item">
        <span class="quantity">2</span> 件物品
    </div>
    <div class="item">
        <span class="quantity">1</span> 件物品
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 更新购物车中物品的总数量
    function updateCartQuantity() {
        var totalQuantity = 0;
        $('.cart .item .quantity').each(function() {
            totalQuantity += parseInt($(this).text(), 10);
        });
        $('#totalQuantity').text(totalQuantity);
    }
 
    // 页面加载完成后绑定更新方法
    $(document).ready(function() {
        updateCartQuantity();
    });
</script>
 
<div>总共有 <span id="totalQuantity">0</span> 件物品。</div>
 
</body>
</html>

这个简化的购物车示例展示了如何使用jQuery遍历特定元素,并执行一些操作(例如更新总数量)。这里使用了.each()方法来遍历所有的.quantity元素,并将它们的数量累加起来。这个例子教会用户如何在实践中使用复合选择器来选择特定的DOM元素,并通过jQuery操作它们。

2024-08-17

原生AJAX请求示例:




var xhr = new XMLHttpRequest();
xhr.open("POST", "your_url", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send("param1=value1&param2=value2");

JQuery $.ajax 请求示例:




$.ajax({
  type: "POST",
  url: "your_url",
  data: { param1: "value1", param2: "value2" },
  success: function(response){
    console.log(response);
  },
  error: function(xhr, status, error){
    console.error("An error occurred: " + status + "\nError: " + error);
  }
});

自定义AJAX POST请求示例:




function postRequest(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(data);
}
 
postRequest("your_url", "param1=value1&param2=value2", function(response){
  console.log(response);
});

自定义AJAX GET请求示例:




function getRequest(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}
 
getRequest("your_url", function(response){
  console.log(response);
});
2024-08-17

在jQuery中,网络请求通常使用$.ajax()方法实现。以下是一个使用$.ajax()发送GET请求的例子:




$.ajax({
    url: 'https://api.example.com/data', // 请求的URL
    type: 'GET', // 请求方法
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(response) {
        // 请求成功时的回调函数
        console.log('Response:', response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error('Error:', error);
    }
});

对于POST请求,你可以这样使用$.ajax()




$.ajax({
    url: 'https://api.example.com/data',
    type: 'POST',
    contentType: 'application/json', // 发送信息至服务器时内容编码类型
    data: JSON.stringify({ key: 'value' }), // 将对象转换为JSON字符串
    processData: false, // 不要对data进行处理,因为数据已经是字符串
    dataType: 'json',
    success: function(response) {
        console.log('Response:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

此外,jQuery还提供了更简洁的请求方法,如$.get()$.post()




// GET请求
$.get('https://api.example.com/data', function(response) {
    console.log('Response:', response);
}).fail(function(xhr, status, error) {
    console.error('Error:', error);
});
 
// POST请求
$.post('https://api.example.com/data', { key: 'value' }, function(response) {
    console.log('Response:', response);
}).fail(function(xhr, status, error) {
    console.error('Error:', error);
});

以上代码展示了如何使用jQuery发送不同类型的AJAX请求,并处理响应或错误。

2024-08-17



$(document).ready(function() {
    // 定义函数,用于发送Ajax请求并更新文章数量显示
    function updateArticleCount() {
        $.ajax({
            url: '/api/article/count', // 假设这是你的API端点
            method: 'GET',
            success: function(data) {
                // 假设返回的数据是一个对象,其中包含属性 'count'
                $('#articleCount').text(data.count);
            },
            error: function(error) {
                // 错误处理逻辑
                console.log('Error fetching article count:', error);
            }
        });
    }
 
    // 页面加载完成后立即获取文章数量
    updateArticleCount();
 
    // 如果需要在特定事件发生时更新文章数量(例如发表新文章后),可以调用 updateArticleCount 函数
    // 例如:
    // $('#newArticleForm').on('submit', function(event) {
    //     event.preventDefault(); // 防止表单提交的默认行为
    //     // 执行表单提交逻辑...
    //     updateArticleCount(); // 更新文章数量统计
    // });
});

这段代码使用jQuery和Ajax定期检查并更新了文章数量统计,确保了数据的实时性。在实际应用中,你需要根据自己的API端点和数据结构来调整代码。

2024-08-17

原生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();

使用jQuery发起请求:




$.ajax({
  url: "https://api.example.com/data",
  type: "GET",
  dataType: "json",
  success: function (json) {
    console.log(json);
  },
  error: function (xhr, status, error) {
    console.error("An error occurred: " + status + "\nError: " + error);
  }
});

使用axios发起请求:




axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

以上三种方法分别展示了如何使用原生的XMLHttpRequest对象、jQuery的$.ajax方法和axios库来发起GET请求,并处理响应。

2024-08-17

Spring Boot整合Jquery主要涉及到前后端的交互,以下是一个简单的例子:

  1. 在Spring Boot项目的static目录下添加jquery库。
  2. 在HTML页面中引入jquery库。



<!DOCTYPE html>
<html>
<head>
    <title>Spring Boot 整合 jQuery</title>
    <!-- 引入jQuery库 -->
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>
        <button id="sendRequest">发送请求</button>
    </div>
 
    <div id="result"></div>
 
    <script>
        $(document).ready(function(){
            $("#sendRequest").click(function(){
                $.ajax({
                    url: "/greeting",
                    type: "GET",
                    success: function(result) {
                        $("#result").html("来自后端的问候: " + result);
                    }
                });
            });
        });
    </script>
</body>
</html>
  1. 创建一个Controller返回数据。



import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class GreetingController {
 
    @GetMapping("/greeting")
    public String greeting() {
        return "Hello, Spring Boot!";
    }
}

确保你的Spring Boot项目已经配置了Web模块,并且能够正确地处理静态资源。

以上代码实现了一个简单的前后端交互,通过点击按钮发送一个Ajax请求到后端,后端返回数据后更新页面的指定部分。