分类前端技术下的文章

2024-08-24

Zepto 和 jQuery 都是 JavaScript 库，主要用于简化 JavaScript 在网页上的使用，但它们有一些关键的区别：

文件大小：jQuery 比较大，包含了所有的功能，而 Zepto 更小，专门为移动设备优化。
兼容性：Zepto 主要支持现代浏览器，而 jQuery 则支持更多的旧浏览器。
事件系统：Zepto 的事件系统与 iOS 设备上的触摸事件紧密配合，而 jQuery 的事件系统更一般化。
选择器引擎：Zepto 的选择器引擎更优化，更适合移动设备。
插件生态：由于 jQuery 更成熟，有更多的插件和成熟的项目在使用 jQuery。

使用场景：

如果你需要一个轻量级的库，主要用于移动网页，并且不需要支持旧的浏览器，可以选择 Zepto。
如果你需要广泛的浏览器支持，并且关注于插件生态和成熟项目，可以选择 jQuery。

例子代码：




// 使用Zepto获取元素
$(document).ready(function() {
  $('#myElement').hide();
});
 
// 使用jQuery获取元素
$(document).ready(function() {
  $('#myElement').hide();
});

在上述例子中，两者的 API 使用方式非常相似，但是文件大小和兼容性就有所不同。

2024-08-24

要解决前端二维码图片解析成链接并转换为本地链接的问题，可以使用JavaScript库，如jsQR来解析二维码，然后将解析出的链接转换为下载链接。以下是一个简单的示例：

首先，确保你已经安装了jsQR库，如果没有安装，可以通过npm安装：




npm install jsqr

在你的Vue组件中，引入jsQR并添加一个方法来处理二维码解析和下载：




<template>
  <div>
    <input type="file" @change="handleQrcode" />
    <a v-if="downloadUrl" :href="downloadUrl" download="qrcode.png">Download QR Code</a>
  </div>
</template>
 
<script>
import { JSQR } from 'jsqr';
 
export default {
  data() {
    return {
      downloadUrl: null,
    };
  },
  methods: {
    handleQrcode(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }
 
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const cvs = document.createElement('canvas');
        const context = cvs.getContext('2d');
        const image = new Image();
        image.src = data;
        image.onload = () => {
          cvs.width = image.width;
          cvs.height = image.height;
          context.drawImage(image, 0, 0, image.width, image.height);
          const imageData = context.getImageData(0, 0, cvs.width, cvs.height);
          const code = JSQR(imageData.data, cvs.width, cvs.height);
 
          if (code) {
            const url = code.data;
            this.downloadUrl = this.convertUrlToLocalLink(url);
          }
        };
      };
      reader.readAsDataURL(file);
    },
    convertUrlToLocalLink(url) {
      // 通过创建一个Blob URL来将网络链接转换为本地链接
      const blob = new Blob([`<a href="${url}">${url}</a>`]);
      return URL.createObjectURL(blob);
    },
  },
};
</script>

在这个示例中，我们首先通过文件输入获取图片，然后使用FileReader读取图片数据。接着，我们在图片加载完成后，使用jsQR库解析二维码。如果解析到二维码，我们将获取的数据通过convertUrlToLocalLink方法转换成本地链接，并更新组件的downloadUrl数据属性。最后，在模板中，如果downloadUrl存在，我们会显示一个下载链接。

jQuery select获取选中的值资料记录，零基础开始学web前端开发

2024-08-24

在jQuery中，你可以使用.val()方法来获取被选中的<option>的值。这通常用在<select>元素中。

假设你有以下的<select>元素：




<select id="mySelect">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

你可以使用以下的jQuery代码来获取选中的<option>的值：




$(document).ready(function() {
  $('#mySelect').change(function() {
    var selectedValue = $(this).val();
    console.log(selectedValue); // 输出选中的值
  });
});

每当用户改变选择时，这段代码会输出当前选中的<option>的值。如果你想要在页面加载时获取默认的选中值，可以直接使用$(this).val();而不用.change()事件。




$(document).ready(function() {
  var selectedValue = $('#mySelect').val();
  console.log(selectedValue); // 输出默认选中的值
});

成功解决：jQuery is not defined

2024-08-24

报错解释：

"jQuery is not defined" 表示在当前的作用域中，jQuery 对象没有被定义。这通常是因为没有正确加载jQuery库文件，或者加载顺序不正确导致的。

解决方法：

确保在使用jQuery代码之前，通过<script>标签在HTML文档中引入了jQuery库。
检查jQuery库文件的URL是否正确，确保文件能够从服务器上正确下载。
检查jQuery的<script>标签是否在调用jQuery代码的<script>标签之前。
如果你使用的是模块化的JavaScript构建工具（如Webpack），确保jQuery被正确安装并在你的模块中引入。

示例代码：




<!-- 在<head>中或<body>中，在调用jQuery代码之前添加jQuery库的引用 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

确保遵循正确的加载顺序，先加载jQuery库，再加载其他依赖jQuery的脚本。

jQuery简易留言板

2024-08-24

以下是一个使用jQuery创建简易留言板的示例代码：

HTML 部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Guestbook</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="guestbook">
        <h2>Simple Guestbook</h2>
        <form id="messageForm">
            <label for="name">Name:</label>
            <input type="text" id="name" required>
            <label for="message">Message:</label>
            <textarea id="message" required></textarea>
            <button type="submit">Submit</button>
        </form>
        <h3>Messages:</h3>
        <ul id="messages">
            <!-- Messages will be displayed here -->
        </ul>
    </div>
 
    <script src="guestbook.js"></script>
</body>
</html>

JavaScript (jQuery) 部分 (guestbook.js):




$(document).ready(function() {
    // Get messages from localStorage if available
    var messages = localStorage.getItem('messages') ? JSON.parse(localStorage.getItem('messages')) : [];
 
    // Display messages
    messages.forEach(function(message) {
        $('#messages').append('<li><strong>' + message.name + '</strong>: ' + message.message + '</li>');
    });
 
    // Submit message form
    $('#messageForm').submit(function(e) {
        e.preventDefault();
        var name = $('#name').val();
        var message = $('#message').val();
 
        // Add message to messages array
        messages.push({ name: name, message: message });
 
        // Clear form and display new message
        $('#name').val('');
        $('#message').val('');
        $('#messages').append('<li><strong>' + name + '</strong>: ' + message + '</li>');
 
        // Store messages in localStorage
        localStorage.setItem('messages', JSON.stringify(messages));
    });
});

这个例子中，留言信息通过localStorage持久化保存，即使刷新页面也不会丢失。简单的表单验证确保了只有填写了必要信息时，用户才能提交留言。留言被添加到页面上的<ul>列表中，并且使用jQuery动态添加，而不是直接在HTML中写死。

JQuery表格Table操作-获取表格数据/向表格填充数据

2024-08-24




// 获取表格中的数据
var tableData = [];
$('#myTable tr').each(function() {
    var rowData = {};
    $(this).find('td').each(function(index, td) {
        rowData["column" + index] = $(td).text();
    });
    tableData.push(rowData);
});
 
// 向表格中填充数据
var dataToFill = [
    {column0: '数据1', column1: '数据2'},
    {column0: '数据3', column1: '数据4'}
];
 
dataToFill.forEach(function(rowData) {
    var newRow = '<tr>';
    $.each(rowData, function(key, value) {
        newRow += '<td>' + value + '</td>';
    });
    newRow += '</tr>';
    $('#myTable').append(newRow);
});

这段代码展示了如何使用jQuery来遍历表格的行和列，并获取其中的数据，以及如何使用数组中的数据填充一个表格。在实际应用中，你可以根据需要调整dataToFill中的数据结构和填充逻辑。

WEB前端知识点整理（JQUERY+Bootstrap+ECharts）

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学习：内置动画淡出/淡入展开/收缩显示/隐藏

2024-08-24




$(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实现京东首页轮播图效果 (源码分享)

2024-08-24

以下是一个使用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获取当前元素、上一个/下一个元素

2024-08-24

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




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

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