标签 jquery 下的文章

2024-08-24




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端知识点</title>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>ECharts 示例</h2>
        <div id="main" style="width: 600px;height:400px;"></div>
    </div>
 
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这段代码展示了如何在HTML页面中引入jQuery、Bootstrap以及ECharts，并创建了一个简单的ECharts柱状图。这是一个典型的Web前端开发场景，其中包含了各种常用的技术栈。

- 阅读更多 -

jQuery学习：内置动画淡出/淡入展开/收缩显示/隐藏

System

2024-08-24

所有,jquery




$(document).ready(function() {
    // 淡出动画
    $("#fadeOutButton").click(function() {
        $("#box").fadeOut(1000); // 1000毫秒内淡出
    });
 
    // 淡入动画
    $("#fadeInButton").click(function() {
        $("#box").fadeIn(1000); // 1000毫秒内淡入
    });
 
    // 展开动画
    $("#slideDownButton").click(function() {
        $("#box").slideDown(1000); // 1000毫秒内展开
    });
 
    // 折叠动画
    $("#slideUpButton").click(function() {
        $("#box").slideUp(1000); // 1000毫秒内折叠
    });
 
    // 显示动画
    $("#showButton").click(function() {
        $("#box").show(1000); // 1000毫秒内显示
    });
 
    // 隐藏动画
    $("#hideButton").click(function() {
        $("#box").hide(1000); // 1000毫秒内隐藏
    });
});

这段代码为jQuery内置的淡出、淡入、展开、折叠、显示和隐藏动画提供了简单的实例。每个函数都通过一个ID选择器绑定到一个按钮的点击事件上，并在点击时触发对应的动画。动画时长设置为1000毫秒。

- 阅读更多 -

用jquery实现京东首页轮播图效果 (源码分享)

System

2024-08-24

所有,jquery

以下是一个使用jQuery实现的简单京东首页轮播图效果的示例代码：

HTML部分：




<div class="jd-carousel">
    <div class="carousel-inner">
        <div class="carousel-item active"><img src="image1.jpg"></div>
        <div class="carousel-item"><img src="image2.jpg"></div>
        <div class="carousel-item"><img src="image3.jpg"></div>
        <!-- 更多轮播图项 -->
    </div>
    <a class="carousel-control-prev" href="#" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

CSS部分：




.jd-carousel {
    position: relative;
    width: 100%;
    margin: auto;
    height: 400px; /* 轮播图高度 */
    overflow: hidden;
}
.carousel-inner {
    position: absolute;
    width: 300%; /* 所有轮播图项的宽度 */
    transition: transform 0.5s ease-in-out;
}
.carousel-item {
    width: 100%;
    float: left;
}
.carousel-item img {
    width: 100%;
    height: 400px; /* 与HTML中的高度一致 */
    display: block;
}
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
    display: none; /* 默认不显示 */
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.25);
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

jQuery部分：




$(document).ready(function() {
    var $carouselItems = $('.carousel-inner .carousel-item');
    var carouselItemCount = $carouselItems.length;
    var currentIndex = 0;
 
    // 显示第一张图片
    $carouselItems.eq(currentIndex).addClass('active');
 
    // 轮播图切换函数
    function slideTo(index) {
        var currentItem = $carouselItems.eq(currentIndex);
        var nextItem = $carouselItems.eq(index);
 
        currentItem.removeClass('active').css('left', '');
        nextItem.addClass('active');
 
        var offset = -nextItem.index() * 100;
        $('.carousel-inner').css('transform', 'translateX(' + offset + '%)');
 
        currentIndex = index;
    }
 
    // 初始化时显示控制按钮
    $('.jd-carouse

- 阅读更多 -

jQuery获取当前元素、上一个/下一个元素

System

2024-08-24

所有,jquery

在jQuery中，你可以使用.prev()和.next()方法来获取上一个或下一个元素。要获取当前元素，你可以使用选择器直接定位到它。以下是一些示例代码：




// 获取当前元素
var $currentElement = $('#currentElementId');
 
// 获取上一个元素
var $previousElement = $currentElement.prev();
 
// 获取下一个元素
var $nextElement = $currentElement.next();

确保在调用.prev()和.next()方法之前，当前元素已经被正确选中，否则可能得不到预期的结果。

- 阅读更多 -

用html、css和jQuery实现图片翻页的特效

System

2024-08-24

所有,jquery

以下是一个简单的使用HTML、CSS和jQuery实现的图片翻页特效示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Flipbook</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 
<div class="flipbook">
  <div class="page" style="background-image: url('image1.jpg');"></div>
  <div class="page" style="background-image: url('image2.jpg');"></div>
  <div class="page" style="background-image: url('image3.jpg');"></div>
  <!-- Add more pages here if needed -->
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




.flipbook {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
}
 
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 1.0s;
  background-size: cover;
  background-position: center;
}
 
.page.flip {
  transform: rotateY(-180deg);
}

jQuery (script.js):




$(document).ready(function() {
  var currentPage = 1;
  var numPages = $('.page').length;
 
  $('.page').click(function() {
    if (currentPage === 1) {
      $('.page').eq(numPages - 1).addClass('flip');
      currentPage = numPages;
    } else if (currentPage === numPages) {
      $('.page').eq(0).addClass('flip');
      currentPage = 1;
    } else {
      $('.page').eq(currentPage - 2).addClass('flip');
    }
  });
});

这个简单的例子使用了类 .flipbook 包裹所有的 .page 元素，每个 .page 元素都是一个页面，通过点击页面进行翻转。当翻转发生时，通过添加 .flip 类来改变页面的 transform 属性，从而创建翻页效果。这个例子没有包含所有的错误处理和完善功能，例如边界条件检查和动画完成的事件监听等，但足以展示基本的翻页特效实现。

- 阅读更多 -

jQuery：一站式指南

System

2024-08-24

所有,jquery

jQuery是一种快速、简洁的JavaScript库，设计的目标是“写得少，做得多”。以下是一些常见的jQuery使用场景和示例代码：

选择元素：




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

修改HTML内容：




$("p").html("Hello, jQuery!");

修改CSS样式：




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

事件监听：




$("button").click(function(){
  alert("Clicked!");
});

动画效果：




$("div").animate({left: '+50px'}, 500);

AJAX请求：




$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

链式调用：




$("div").find("h3").andSelf().addClass("blue");

遍历：




$("li").each(function(){
  alert($(this).text());
});

事件委托：




$("ul").on("click", "li", function(){
  alert($(this).text());
});

插件开发：




$.fn.extend({
  pluginName: function() {
    return this.each(function() {
      // 插件代码
    });
  }
});
 
$("#myElement").pluginName();

这些示例展示了jQuery的基本用法，涵盖了常见的场景，如DOM操作、事件处理、动画、Ajax和插件开发。jQuery提供了一个强大且灵活的工具集，用于简化JavaScript开发。

- 阅读更多 -

jQuery的事件-动画-AJAX和插件

System

2024-08-24

所有,ajax

在这个问题中，你想要了解jQuery的事件处理、动画、AJAX和插件系统。下面是一些简单的示例代码。

事件处理：




// 点击事件
$("#button").click(function() {
    alert("按钮被点击了！");
});

动画：




// 淡入淡出动画
$("#box").fadeIn().fadeOut();

AJAX：




// 使用jQuery发送GET请求
$.get("example.php", { name: "John", time: "2pm" }, function(data){
    alert("Data Loaded: " + data);
});

插件：




// 使用jQuery插件进行表单验证
$("#form").validate({
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        name: "请输入您的名字",
        email: "请输入一个有效的电子邮件地址"
    }
});

确保在使用上述代码之前，你已经在页面中包含了jQuery库。例如：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

System

2024-08-24

所有,ajax

整合Spring Boot与MyBatis-Plus进行增删改查操作，并使用Ajax和jQuery进行前后端分离，同时加入分页功能的示例代码如下：

1. 引入MyBatis-Plus依赖

在pom.xml中添加MyBatis-Plus的依赖：




<dependencies>
    <!-- MyBatis-Plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.x.x</version>
    </dependency>
    <!-- MySQL -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.x.x</version>
    </dependency>
    <!-- jQuery -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.x.x</version>
    </dependency>
</dependencies>

2. 配置MyBatis-Plus

在application.properties或application.yml中配置数据库信息：




spring.datasource.url=jdbc:mysql://localhost:3306/your_database?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

3. 创建实体类和Mapper




// 实体类 User.java
@Data
public class User {
    private Long id;
    private String name;
    private Integer age;
    private String email;
}
 
// Mapper 接口 UserMapper.java
@Mapper
public interface UserMapper extends BaseMapper<User> {
}

4. 控制器Controller




@RestController
@RequestMapping("/user")
public class UserController {
 
    @Autowired
    private UserMapper userMapper;
 
    // 分页查询
    @GetMapping("/list")
    public IPage<User> getUserPage(Page<User> page) {
        return userMapper.selectPage(page);
    }
 
    // 新增用户
    @PostMapping("/add")
    public boolean addUser(User user) {
        return userMapper.insert(user) > 0;
    }
 
    // 删除用户
    @DeleteMapping("/delete/{id}")
    public boolean deleteUser(@PathVariable Long id) {
        return userMapper.deleteById(id);
    }
 
    // 更新用户
    @PutMapping("/update")
    public boolean updateUser(User user) {
        return userMapper.updateById(user);
    }
}

5. 前端页面




<!DOCTYPE html>
<html>
<head>
    <title>User Management</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/jquery.

- 阅读更多 -

「jQuery系列」jQuery中Ajax的运用

System

2024-08-24

所有,ajax

在jQuery中，Ajax的运用主要是通过$.ajax()函数实现的。以下是一个简单的例子，展示了如何使用jQuery发送Ajax GET请求：




$.ajax({
    url: 'your-endpoint.php', // 请求的URL
    type: 'GET', // 请求方法，可以是GET或POST
    data: {
        key1: 'value1', // 发送到服务器的数据
        key2: 'value2'
    },
    success: function(response) {
        // 请求成功后的回调函数
        console.log(response); // 打印服务器返回的响应
    },
    error: function(xhr, status, error) {
        // 请求失败后的回调函数
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});

若要发送POST请求，只需将type改为'POST'，并且可以通过data属性发送需要发送的数据。

以下是一个简单的POST请求示例：




$.ajax({
    url: 'your-endpoint.php',
    type: 'POST',
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});

这些是使用jQuery发送Ajax请求的基本方法。jQuery还提供了更简洁的$.get()和$.post()方法，用于发送GET和POST请求，但底层仍然是通过$.ajax()实现的。

- 阅读更多 -

jQuery库 01 基础知识

System

2024-08-23

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 基础示例</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 当文档加载完成时执行
        $(document).ready(function() {
            // 点击按钮时触发的事件
            $("#myButton").click(function() {
                // 改变段落的文本内容
                $("p").text("Hello, jQuery!");
            });
        });
    </script>
</head>
<body>
 
    <button id="myButton">点击我</button>
    <p>一个段落。</p>
 
</body>
</html>

这段代码演示了如何使用jQuery库来改变HTML元素的内容。当用户点击按钮时，一个段落中的文本内容会被改变为"Hello, jQuery!"。这是jQuery库的一个基本用法，它简化了JavaScript编程任务，提高了开发效率。

- 阅读更多 -