分类前端技术下的文章

2024-08-21

在jQuery中，我们可以使用多种方法来遍历DOM元素。以下是一些常用的方法：

children(): 获取元素的直接子元素。
find(): 获取元素的后代元素。
siblings(): 获取元素的同级兄弟元素。
parent(): 获取元素的父元素。
eq(): 获取指定索引的元素。
first(): 获取第一个元素。
last(): 获取最后一个元素。

示例代码：




// 假设我们有以下HTML结构
// <div id="parent">
//   <div class="child">Child 1</div>
//   <div class="child">Child 2</div>
//   <div class="child">Child 3</div>
// </div>
 
$(document).ready(function() {
    // 获取id为'parent'的直接子元素
    $('#parent').children().css('border', '2px solid red');
 
    // 获取class为'child'的所有元素
    $('#parent').find('.child').css('background-color', 'yellow');
 
    // 获取class为'child'的同级兄弟元素
    $('.child').siblings().css('text-decoration', 'line-through');
 
    // 获取class为'child'的父元素
    $('.child').parent().css('font-weight', 'bold');
 
    // 获取class为'child'的第一个元素
    $('.child').eq(0).css('color', 'green');
 
    // 获取class为'child'的最后一个元素
    $('.child').last().css('font-style', 'italic');
});

这段代码在文档加载完成后，会改变一些元素的样式，以便更明显地展示它们是如何被遍历和选中的。

- 阅读更多 -

js实现文字收起展开功能

System

2024-08-21

所有,jquery

以下是一个简单的JavaScript实现文本收起展开功能的例子：

HTML部分：




<div id="text-container">
  <p>这里是一段很长的文本，需要实现收起和展开的功能。</p>
  <button id="collapse-btn">收起</button>
</div>

CSS部分（可选，用于隐藏或显示文本）：




#text-container p {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
 
.show-text #text-container p {
  max-height: 100px; /* 设置合适的最大高度 */
}

JavaScript部分：




document.getElementById('collapse-btn').addEventListener('click', function() {
  var container = document.getElementById('text-container');
  container.classList.toggle('show-text');
  this.textContent = this.textContent === '收起' ? '展开' : '收起';
});

这段代码实现了基本的文本收起展开功能。点击按钮后，文本的最大高度从0变为设定的值（如100px），从而展示出隐藏的文本内容。再次点击按钮，文本的最大高度重置为0，实现隐藏。通过classList.toggle方法动态切换CSS类名，从而控制文本的显示和隐藏。

- 阅读更多 -

简单引入JQuery

System

2024-08-21

所有,jquery

JQuery是一个快速、简洁的JavaScript库，它使得JavaScript编程变得更加简单。以下是如何在网页中引入jQuery的几种方法：

从CDN引入jQuery：




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

从本地服务器引入jQuery：




<script src="/path/to/your/jquery.min.js"></script>

使用HTML5的<script>标签的defer属性来延迟脚本的执行，这对于改善页面的渲染性能有一定的帮助：




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

使用HTML5的<script>标签的async属性来异步加载和执行脚本，这可以帮助提高页面的加载速度：




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

在实际应用中，通常推荐使用CDN来引入jQuery，这样用户如果之前访问过其他使用同一CDN的网站，并且在浏览器缓存中保存了jQuery的副本，那么这部分内容就不需要重新下载。同时，使用defer或async属性可以帮助改善页面的渲染性能和加载性能。

- 阅读更多 -

jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍

System

2024-08-21

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <title>jQuery模板引擎比较</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="path/to/jquery.tmpl.min.js"></script>
    <script src="path/to/jsrender.js"></script>
</head>
<body>
    <h2>jQuery-tmpl 示例</h2>
    <div id="tmpl-template"></div>
 
    <h2>JsRender 示例</h2>
    <div id="jsrender-template"></div>
 
    <script type="text/x-jquery-tmpl" id="tmpl-template-content">
        <h3>{{=name}}</h3>
        <ul>
            {{for people}}
                <li>{{=$value}}</li>
            {{/for}}
        </ul>
    </script>
 
    <script id="jsrender-template-content" type="text/x-jsrender">
        <h3>{{:name}}</h3>
        <ul>
            {{for people}}
                <li>{{:}}</li>
            {{/for}}
        </ul>
    </script>
 
    <script>
        var data = {
            name: "人物列表",
            people: ["张三", "李四", "王五"]
        };
 
        // jQuery-tmpl 使用
        $("#tmpl-template").append($("#tmpl-template-content").render(data));
 
        // JsRender 使用
        $("#jsrender-template").html($("#jsrender-template-content").render(data));
    </script>
</body>
</html>

这个示例代码展示了如何使用jQuery-tmpl和JsRender这两种常用的jQuery模板引擎。代码中定义了模板内容，并通过jQuery选择器和模板引擎的渲染方法将模板和数据结合，生成最终的HTML并插入到页面中。这是一个简单的比较，实际项目中可能需要根据具体情况选择合适的模板引擎。

- 阅读更多 -

泛微OA_E9之明细表选择框，选项带出主表审批人

System

2024-08-21

所有,jquery

泛微OA\_E9中的明细表选择框选择后，其对应的主表审批人可以通过以下方式进行传递：

设置明细表中的审批人字段，使其与主表中的审批人字段关联。
在明细表的选择框事件中编写脚本，将主表中的审批人信息赋值给明细表的相关字段。

以下是一个简单的示例代码，展示如何在明细表选择框事件中设置审批人信息：




' 假设主表中有一个字段叫MainTable_Approver，存储了审批人信息
' 假设明细表中有一个字段叫DetailTable_Approver，需要设置为与主表审批人一致
 
Sub 明细表名称_Select(item)
    Dim mainTableApprover As Variant
    mainTableApprover = ViewState("MainTable_Approver") ' 从视图状态中获取主表审批人信息
    
    ' 如果主表审批人信息存在，则设置到明细表字段中
    If Not IsEmpty(mainTableApprover) Then
        Me.DetailTable_Approver.Value = mainTableApprover
    End If
End Sub

在这个脚本中，我们假设主表的审批人信息存储在视图状态（ViewState）中，并在明细表的选择框事件中，将这个信息赋值给明细表中的字段。这样，当用户从明细表选择不同的记录时，与主表审批人相关联的信息会自动更新。

- 阅读更多 -

jQuery实现横版手风琴效果

System

2024-08-21

所有,jquery

以下是一个简单的jQuery实现横版手风琴效果的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横版手风琴效果</title>
<style>
    .accordion {
        width: 300px;
        margin: 50px auto;
    }
    .accordion-item {
        background-color: #f9f9f9;
        color: #444;
        cursor: pointer;
        padding: 18px;
        border: 1px solid #ccc;
        text-align: left;
        margin-top: -1px;
    }
    .accordion-item:first-child {
        margin-top: 0;
    }
    .accordion-content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
    }
</style>
</head>
<body>
 
<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-title">标题1</div>
        <div class="accordion-content">
            内容1...
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-title">标题2</div>
        <div class="accordion-content">
            内容2...
        </div>
    </div>
    <!-- 更多的.accordion-item -->
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.accordion-item').click(function() {
            $(this).find('.accordion-content').slideToggle('fast');
        });
    });
</script>
</body>
</html>

这段代码中，我们定义了一个基本的手风琴结构，并通过jQuery实现了点击标题时内容区域的展开和折叠。.slideToggle('fast')函数用于在当前内容区域可见时隐藏它，不可见时显示它，'fast'参数意味着动画执行速度很快。

System

2024-08-21

所有,jquery

在HTML中，<select> 标签默认是单选的，每次只能选择一个<option>。如果你想让<select> 标签的<option> 能够实现复选，即可以选择多个选项，你需要使用一些额外的JavaScript库，如multi-select。

以下是一个使用jQuery和multi-select库实现复选的例子：

首先，在HTML中添加<select>标签：




<select id="mySelect" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

接下来，引入jQuery和multi-select库：




<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>

最后，使用jQuery初始化multi-select：




$(function() {
  $('#mySelect').multiSelect();
});

完整的HTML示例代码如下：




<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
</head>
<body>
 
<select id="mySelect" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>
 
<script>
  $(function() {
    $('#mySelect').multiSelect();
  });
</script>
 
</body>
</html>

当你运行这段代码时，你会看到一个可以选择多个选项的下拉菜单。

System

2024-08-21

所有,jquery

首先，确保你已经在你的项目中包含了jQuery库和相关的插件。以下是一个简单的HTML和JavaScript示例，展示如何使用map和image maps来实现图片区域的点击功能。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Map Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.rwdImageMaps.min.js"></script>
    <script src="path/to/jquery.maphilight.min.js"></script>
    <link rel="stylesheet" href="path/to/jquery.maphilight.css">
    <style>
        img {
            width: 500px;
        }
    </style>
</head>
<body>
    <img usemap="#myMap" src="path/to/your_image.png" alt="My Image Map">
    <map name="myMap">
        <area href="#" coords="100,100,200,200" class="area1">
        <area href="#" coords="250,150,350,350" class="area2">
        <!-- Add more areas as needed -->
    </map>
 
    <script>
        $(document).ready(function() {
            $('img[usemap]').rwdImageMaps();
 
            $('area').maphilight({
                fillColor: '00FF00',
                fillOpacity: 0.5,
                strokeColor: '000000',
                strokeOpacity: 0.8,
                strokeWidth: 2,
                fade: true
            }).on('click', function() {
                // Handle area click event
                var areaClass = $(this).attr('class');
                console.log('You clicked area with class: ' + areaClass);
                // Add your custom logic here
            });
        });
    </script>
</body>
</html>

在这个示例中，我们首先包含了必要的jQuery库和map highlight插件。然后，我们定义了一个图片和一个map元素，其中包含了不同的area元素。我们使用maphilight插件来突出显示被点击的区域，并且为每个区域绑定了click事件处理函数，以便在点击区域时执行自定义的逻辑。

请确保替换path/to/your_image.png和path/to/jquery.rwdImageMaps.min.js、path/to/jquery.maphilight.min.js和path/to/jquery.maphilight.css为你的实际文件路径。

注意：这个示例假设你已经正确地引入了所需的jQuery库和插件。如果你的项目中还没有这些库，你需要先通过<script>标签将它们包含进来。

- 阅读更多 -

关于jQuery日历插件：daterangepicker

System

2024-08-21

所有,jquery

以下是一个使用 daterangepicker 插件创建日历的简单示例代码：

首先，确保你已经在你的项目中包含了 daterangepicker 的 CSS 和 JS 文件。




<!-- 在<head>中包含CSS文件 -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
 
<!-- 在页面底部包含jQuery和JS文件 -->
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>

然后，在你的 HTML 中添加一个元素来显示日历：




<input type="text" id="datepicker" />

最后，使用以下 JavaScript 代码初始化 daterangepicker：




$(function() {
    $('#datepicker').daterangepicker({
        opens: 'left'
    }, function(start, end, label) {
        // 当选择日期范围时触发的回调函数
        console.log("Start Date: " + start.format('YYYY-MM-DD'));
        console.log("End Date: " + end.format('YYYY-MM-DD'));
    });
});

这段代码会在页面加载完成时自动初始化一个日历控件，用户可以选择一个日期范围。选择后，会在控制台输出开始和结束日期。

- 阅读更多 -

尝试用js和jQuery实现一个简单的商品购买系统

System

2024-08-21

所有,jquery

以下是一个简单的JavaScript和jQuery实现的商品购买系统的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Shopping Cart</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<h2>商品列表</h2>
<ul id="products">
  <li data-price="100" data-name="商品A">商品A - ¥100</li>
  <li data-price="200" data-name="商品B">商品B - ¥200</li>
  <li data-price="300" data-name="商品C">商品C - ¥300</li>
</ul>
 
<h2>购物车</h2>
<div id="cart">
  <!-- 购物车内容将被添加到这里 -->
</div>
 
<script src="shopping-cart.js"></script>
</body>
</html>

JavaScript部分 (shopping-cart.js)：




$(document).ready(function() {
  $('#products').on('click', 'li', function() {
    var product = $(this);
    var name = product.data('name');
    var price = product.data('price');
 
    var cartRow = $('<div>').addClass('cart-row').attr('data-name', name);
    var productName = $('<span>').text(name);
    var productPrice = $('<span>').text('¥' + price);
    var removeButton = $('<button>').addClass('remove-btn').text('移除');
 
    cartRow.append(productName, productPrice, removeButton);
    $('#cart').append(cartRow);
 
    removeButton.on('click', function() {
      cartRow.remove();
    });
  });
});

这段代码实现了一个简单的购物车功能。用户点击产品列表中的商品时，会将该商品添加到购物车中。每行购物车中的商品都有一个移除按钮，点击可以将该商品从购物车中移除。这个例子使用了jQuery来简化DOM操作，并且使用了data-*属性来存储商品的价格和名称。

- 阅读更多 -