标签 Javascript 下的文章

2024-08-10




// 引入jQuery库
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
// 确保DOM完全加载完毕
$(document).ready(function() {
    // 当点击按钮时，触发函数
    $('#myButton').click(function() {
        // 输出到控制台
        console.log('按钮被点击了！');
        // 或者可以在这里执行其他操作
    });
});
 
// HTML部分
<button id="myButton">点击我</button>

这段代码展示了如何使用jQuery库来简化JavaScript编程。通过$(document).ready()确保在DOM完全加载后绑定事件处理器，而不是使用onload事件。$('#myButton')选择器用于选中ID为myButton的元素，并绑定一个点击事件处理函数。当按钮被点击时，控制台会输出一条消息。这是一个简单的示例，展示了jQuery如何使DOM交互更加简单和高效。

- 阅读更多 -

原生JS加jQuery实现拖拽和单击上传文件

System

2024-08-10

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽和单击上传文件</title>
    <style>
        #drop_area {
            width: 300px;
            height: 200px;
            border: 2px dashed #aaa;
            text-align: center;
            padding: 50px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        #fake_input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
</head>
<body>
 
<div id="drop_area">
    <form id="form" action="upload.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="dir" value="image">
        <input type="file" id="fake_input" name="file1" multiple>
    </form>
    将文件拖拽到此处上传<br>
    或<br>
    点击这里选择文件
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        var $dropArea = $('#drop_area');
 
        $dropArea.on('dragenter dragover', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).css('border-color', 'green');
        });
 
        $dropArea.on('dragleave', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).css('border-color', '#aaa');
        });
 
        $dropArea.on('drop', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).css('border-color', '#aaa');
 
            var files = e.originalEvent.dataTransfer.files;
            if (files.length) {
                $('#form').submit();
            }
        });
 
        $('#fake_input').on('change', function () {
            $('#form').submit();
        });
    });
</script>
 
</body>
</html>

这段代码使用jQuery为一个div元素添加了拖拽上传文件的功能。当用户拖拽文件到div上时，会有视觉反馈，并在释放鼠标按钮时触发表单提交。同时，也可以通过点击div并选择文件来上传。这个例子简单明了，并且易于理解和应用。

- 阅读更多 -

mapbox+three.js实现泛光效果

System

2024-08-10

所有,javascript

在Mapbox和Three.js中实现泛光效果，你需要先设置好Mapbox地图，并在其上面设置Three.js场景。然后，你可以使用Three.js的ShaderMaterial和自定义的光线Shader来实现泛光效果。

以下是一个简化的例子，展示如何在Mapbox地图上实现泛光效果：




// 初始化Mapbox地图
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v110',
    center: [0, 0],
    zoom: 
});
 
// 初始化Three.js场景与相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 1;
 
// 创建一个用于渲染的canvas
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建泛光效果的材质
var glowMaterial = new THREE.ShaderMaterial({
    uniforms: {
        'c': { value: new THREE.Color(0xff00ff) },
        'p': { value: 10 },
        'glowEmission': { value: 1.0 },
        'glowColor': { value: new THREE.Color(0xff00ff) },
        'glowWeight': { value: 1.75 },
        'viewVector': { value: new THREE.Vector3() }
    },
    vertexShader: `
        varying vec3 vNormal;
        varying vec2 vUv;
        varying float intensity;
        uniform vec3 viewVector;
        void main() {
            vNormal = normalize(normalMatrix * normal);
            vUv = uv;
            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
            intensity = pow(abs(dot(vNormal, normalize(viewVector))), 2.0);
            gl_Position = projectionMatrix * mvPosition;
        }
    `,
    fragmentShader: `
        uniform vec3 glowColor;
        uniform float glowEmission;
        uniform float glowWeight;
        varying vec2 vUv;
        varying vec3 vNormal;
        varying float intensity;
        void main() {
            vec3 glow = glowColor * glowEmission * intensity;
            gl_FragColor = vec4(glow, 1.0);
        }
    `
});
 
// 创建一个Three.js几何体，比如一个球体
var geometry = new THREE.SphereGeometry(1, 20, 20);
var sphere = new THREE.Mesh(geometry, glowMaterial);
scene.add(sphere);
 
// 将Three.js场景渲染到Mapbox地图上
map.on('load', function() {
    var mapCanvas = map.getCanvasContainer();
    var width = mapCanvas.offsetWidth;
    var height = mapCanvas.offsetHeight;
    renderer.setSize(width, height);
 
    // 定期更新camera和uniforms
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        var ve

System

2024-08-10

所有,jquery

以下是一个简化的实现imgFileUpload插件的核心函数示例，用于模拟图片预览功能：




(function($) {
    $.fn.imgFileUpload = function() {
        this.on('change', function() {
            var files = this.files;
            if (files.length === 0) return;
 
            var file = files[0];
            if (/^image\/[a-z]+$/.test(file.type)) { // 检查是否为图片类型
                // 创建FileReader对象
                var reader = new FileReader();
                reader.onload = function(e) {
                    // 创建img元素并显示图片
                    $('<img>').attr('src', e.target.result).appendTo('body');
                };
                // 以DataURL的形式读取文件内容
                reader.readAsDataURL(file);
            } else {
                alert('请选择图片文件');
            }
        });
        return this; // 使插件支持链式调用
    };
})(jQuery);
 
// 使用方法：
$('input[type=file]').imgFileUpload();

在这个示例中，我们定义了一个imgFileUpload函数，它会在change事件触发时被调用。如果用户选择了文件，并且这个文件是图片类型，那么使用FileReader对象以DataURL的形式读取文件，并在读取完成后将图片内容显示在页面上。这个插件可以通过jQuery链式调用进一步操作其他DOM元素。

System

2024-08-10

所有,jquery

以下是一个简化的示例，展示如何使用JsBarcode库生成条形码，并使用canvas2image将其转换为图片，最后使用jQuery.print进行打印。

首先，确保你已经引入了必要的JavaScript库：




<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.print@1.6.4/jquery.print.min.js"></script>

然后，在HTML中添加一个用于展示条形码的canvas元素：




<canvas id="barcode"></canvas>

接下来，使用JavaScript代码生成并打印条形码：




$(document).ready(function() {
    // 条形码内容
    var barcodeContent = "123456789012";
 
    // 使用JsBarcode生成条形码
    JsBarcode("#barcode", barcodeContent, {
        format: "CODE128", // 指定条形码的格式
        lineColor: "#0aa", // 条形码颜色
        width: 2, // 条的宽度
        height: 100, // 条形码的高度
        displayValue: true // 是否在条形码下方显示文本
    });
 
    // 将条形码转换为图片
    var canvas = document.getElementById("barcode");
    Canvas2Image.saveAsPNG(canvas, true);
 
    // 打印条形码图片
    $("#barcode").print();
});

以上代码在文档加载完成后，会自动生成一个条形码，并将其转换为图片。然后使用jQuery.print插件打印这个图片。注意，实际应用中可能需要额外的样式和布局调整。

System

2024-08-10

所有,jquery

以下是一个简化的HTML结构示例，用于创建一个水果商城的成品页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水果商城 - 水果详情页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <!-- 导航栏 -->
    </header>
    <main>
        <section class="product-details">
            <div class="product-image">
                <!-- 图片展示 -->
            </div>
            <div class="product-info">
                <!-- 产品信息 -->
            </div>
        </section>
        <section class="product-description">
            <!-- 产品描述 -->
        </section>
        <section class="product-reviews">
            <!-- 产品评论 -->
        </section>
    </main>
    <footer>
        <!-- 页脚信息 -->
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS样式表 styles.css 需要根据具体设计进行编写，JavaScript脚本 script.js 需要根据页面功能进行编写。以上代码仅提供了HTML结构的一个框架，并未包含具体的样式和交互逻辑。

- 阅读更多 -

jquery 如何让js去读取Excel里面的数据

System

2024-08-10

所有,jquery

在网页中使用 jQuery 去读取 Excel 文件的数据，通常需要借助 JavaScript 库，因为 jQuery 本身不支持直接读取 Excel 文件的功能。一个常用的库是 SheetJS (xlsx.js)，它可以处理 Excel 文件的读写。

以下是使用 SheetJS 和 jQuery 读取 Excel 文件数据的基本步骤：

在项目中引入 SheetJS 库。
使用文件输入元素 <input type="file"> 让用户选择 Excel 文件。
使用 jQuery 监听文件选择事件，并在文件被选中后读取文件内容。
使用 SheetJS 解析 Excel 文件内容，并处理数据。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
</head>
<body>
 
<input type="file" id="input-excel" />
<div id="excel-data"></div>
 
<script>
    $(document).ready(function() {
        $('#input-excel').change(function(e) {
            var reader = new FileReader();
            reader.readAsArrayBuffer(e.target.files[0]);
            reader.onload = function(e) {
                var data = new Uint8Array(reader.result);
                var workbook = XLSX.read(data, {type: 'array'});
                
                // 假设我们只读取第一个工作表
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];
                
                // 将工作表转换为JSON
                var json = XLSX.utils.sheet_to_json(worksheet);
                
                // 显示或处理JSON数据
                $('#excel-data').text(JSON.stringify(json));
            };
        });
    });
</script>
 
</body>
</html>

在这个例子中，当用户选择了 Excel 文件后，FileReader 对象被用来读取文件内容，然后 SheetJS 的 XLSX.read 方法被用来解析 Excel 文件内容，并通过 XLSX.utils.sheet_to_json 方法将工作表转换为 JSON 格式。最后，JSON 数据被显示在页面的一个元素中。

System

2024-08-10

所有,jquery

在JavaScript中，可以使用内置的DOMParser和XMLSerializer来实现HTML标签的转义和反转义。

转义HTML标签：




function escapeHTML(html) {
  var doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.documentElement.textContent;
}

反转义HTML标签：




function unescapeHTML(text) {
  var doc = new DOMParser().parseFromString(text, 'text/html');
  var fragment = doc.createDocumentFragment();
  fragment.appendChild(doc.documentElement);
  return fragment.firstChild.innerHTML;
}

使用示例：




var escapedHTML = escapeHTML('<div>Hello & World</div>');
console.log(escapedHTML); // 输出：Hello &amp; World
 
var unescapedHTML = unescapeHTML('Hello &amp; World');
console.log(unescapedHTML); // 输出：<div>Hello & World</div>

这些函数通过解析和序列化HTML内容，可以将字符串中的特殊HTML标签转义，并在反转义时重新生成HTML标签。

- 阅读更多 -

Vue.js与jQuery相比较有何不同？各自有哪些特点和应用？

System

2024-08-10

所有,jquery

Vue.js 和 jQuery 是两种不同的技术，它们有着本质的区别，这主要体现在它们的设计理念、功能特性以及应用场景上。

Vue.js:

设计理念：Vue.js 是一个渐进式的 JavaScript 框架，主张简洁，自带数据驱动和组件系统，容易上手。
特性特点：Vue.js 2.0 引入了虚拟 DOM，数据驱动，组件系统等特性，而 Vue.js 3.0 进一步优化了这些特性，并引入了 Composition API 等新特性。
应用场景：Vue.js 主要应用于构建单页应用(SPA)，它的优点在于视图和数据的分离，以及它的响应式系统。

jQuery:

设计理念：jQuery 是一个快速、简洁的 JavaScript 库，主要通过选择器简化 DOM 操作，提供跨浏览器的 JavaScript 能力。
特性特点：jQuery 提供了丰富的 DOM 操作、事件处理、动画等功能，以及Ajax交互等，但是它主要依靠选择器查询DOM，性能上可能存在瓶颈。
应用场景：jQuery 主要用于简化 DOM 操作、事件处理、动画等，以及开发跨浏览器的 JavaScript 代码，它适用于各种网站的快速开发。

Vue.js 和 jQuery 可以一起使用，Vue.js 可以作为 jQuery 插件的一个替代，但在构建单页应用时，Vue.js 的响应式和组件系统等特性更有优势。

在选择使用哪种技术时，可以考虑以下因素：

如果是构建一个简单的网站，可能更倾向于使用 jQuery。
如果是构建大型的单页应用或者想要充分利用 Vue.js 的数据驱动和组件系统，那么选择 Vue.js 会更合适。

System

2024-08-10

所有,jquery

原生JavaScript获取单行id元素：




var element = document.getElementById('yourElementId');

jQuery获取单行id元素：




var element = $('#yourElementId');

Vue.js获取单行id元素（在模板中）：




<template>
  <div>
    <!-- 假设你的元素有id="myElementId" -->
    <div id="myElementId">Content</div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    let element = this.$el.querySelector('#myElementId');
    // 或者使用
    let element2 = document.getElementById('myElementId');
  }
}
</script>

请注意，Vue.js中获取DOM元素通常在生命周期钩子中进行，例如mounted，因为在Vue模板编译过程中，元素可能尚未出现在DOM中。

- 阅读更多 -