分类前端技术下的文章

2024-08-16

以下是一个使用Bootstrap和jQuery实现的简单树状菜单的代码示例：

HTML:




<div class="container">
    <ul class="nav nav-pills nav-stacked tree" style="width: 200px;">
        <li data-toggle="collapse" data-target="#item1" class="expandable">
            Item 1 <i class="pull-right fa fa-caret-down"></i>
        </li>
        <ul id="item1" class="collapse">
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
            <li>Subitem 1.3</li>
        </ul>
        <li data-toggle="collapse" data-target="#item2" class="expandable">
            Item 2 <i class="pull-right fa fa-caret-down"></i>
        </li>
        <ul id="item2" class="collapse">
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
        </ul>
        <!-- More list items as needed -->
    </ul>
</div>

CSS:




.tree li {
    cursor: pointer;
    list-style-type: none;
}
 
.tree i {
    float: right;
    margin-right: -15px;
}

jQuery:




$(document).ready(function(){
    $('.expandable').click(function(){
        $(this).find('i').toggleClass('fa-caret-right fa-caret-down');
    });
});

确保在你的HTML文件中引入了Bootstrap的CSS和jQuery库，以及Font Awesome图标库（用于提供箭头图标）。

这个代码实例提供了一个简单的树状菜单，每个可折叠项都有一个小箭头，点击时可以切换箭头的方向，表示菜单项现在是折叠还是展开。使用data-toggle="collapse"和data-target属性与Bootstrap的折叠组件结合，可以轻松实现菜单的折叠功能。

- 阅读更多 -

jquery操作元素的类名

System

2024-08-16

所有,jquery

在jQuery中，操作元素的类名可以使用.addClass()、.removeClass()和.toggleClass()方法。

.addClass(className)：添加一个或多个类名到每个匹配元素。
.removeClass(className)：从每个匹配的元素中移除一个或多个类名。
.toggleClass(className)：如果存在（不存在）就移除（添加）一个类名。

示例代码：




// 添加类名
$('#elementId').addClass('new-class');
 
// 移除类名
$('#elementId').removeClass('existing-class');
 
// 切换类名
$('#elementId').toggleClass('toggle-class');

如果需要检查元素是否包含特定的类名，可以使用.hasClass(className)方法：




// 检查是否包含类名
if ($('#elementId').hasClass('some-class')) {
  // 包含特定类名的操作
}

还可以通过.prop('class')获取或设置元素的class属性：




// 获取类名
var classNames = $('#elementId').prop('class');
 
// 设置类名
$('#elementId').prop('class', 'new-class-set');

- 阅读更多 -

jQuery事件与DOM操作

System

2024-08-16

所有,jquery




// 确保DOM完全加载完毕
$(document).ready(function() {
    // 为所有具有class="edit"的元素添加click事件监听器
    $('.edit').on('click', function() {
        // 获取当前元素的父元素
        var $parent = $(this).parent();
        // 找到并存储当前元素的兄弟元素（文本和删除按钮）
        var $textSibling = $(this).siblings('.text');
        var $deleteSibling = $(this).siblings('.delete');
        // 创建输入框并将当前文本值设置为输入框的值
        var $input = $('<input>').val($textSibling.text());
        // 用输入框替换文本和删除按钮
        $parent.append($input);
        $textSibling.remove();
        $deleteSibling.remove();
        // 聚焦输入框
        $input.focus();
        // 为输入框添加blur事件监听器，当输入框失去焦点时执行
        $input.on('blur', function() {
            // 获取输入框的值并清除输入框
            var newText = $(this).val();
            $(this).remove();
            // 创建新的文本元素和删除按钮并添加回父元素
            var $newText = $('<span>').addClass('text').text(newText);
            var $newDelete = $('<button>').addClass('delete').text('Delete');
            $parent.append($newText).append($newDelete);
            // 移除blur事件监听器
            $(this).off('blur');
        });
    });
});

这段代码首先确保在DOM完全加载后执行。然后，为所有class为"edit"的元素添加了click事件监听器。当edit按钮被点击时，它会获取当前元素的父元素，找到文本和删除按钮的兄弟元素，并创建一个新的输入框替换它们。在输入框获取焦点后，当输入框失去焦点时，它会将输入框的值设置为文本元素，并移除输入框和删除按钮，并将它们重新添加回父元素中。最后，它移除了为输入框添加的blur事件监听器。

- 阅读更多 -

PHP编程技术揭秘：如何高效捕捉网页HTML元素？

System

2024-08-16

所有,html




<?php
// 引入QueryList类
include('QueryList.php');
 
// 目标网页
$url = 'https://www.example.com';
 
// 初始化QueryList
$ql = new QueryList();
 
// 发送请求并获取网页内容
$ql->use(HttpRequest::class)->get($url)->setOptions(['timeout' => 30])->success(function (QueryList $ql) {
    // 通过CSS选择器选取HTML元素
    $content = $ql->rules([
        'title' => ['h1', 'text'], // 获取h1标签中的文本作为title
        'desc'  => ['p > span', 'text'] // 获取p标签下的span中的文本作为desc
    ])->query()->getData();
 
    // 打印结果
    print_r($content->all());
});
 
// 处理可能的错误
$ql->error(function (Exception $e) {
    echo "Error: " . $e->getMessage();
});

这段代码使用QueryList库来高效地捕捉网页上的特定HTML元素。首先，我们引入QueryList类。然后，我们初始化QueryList并发送请求到目标网页。成功获取网页内容后，我们使用CSS选择器规则来选取特定的HTML元素，并打印出结果。最后，我们处理可能发生的错误。这个例子展示了如何使用PHP快速方便地抓取网页数据。

- 阅读更多 -

JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】

System

2024-08-16

所有,jquery

打地鼠游戏是一个非常有趣的JavaScript游戏，它可以作为一个学习项目来制作。以下是一个简化版的打地鼠游戏制作讲解和代码实例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠游戏</title>
<style>
  #grid {
    width: 400px;
    height: 400px;
    background: #eaeaea;
    position: relative;
  }
  .tile {
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #333;
  }
</style>
</head>
<body>
<div id="grid"></div>
<script>
  const grid = document.getElementById('grid');
  const tileCount = 40; // 地图大小
  const mouseCount = 3; // 鼠标数量
 
  // 生成鼠标
  function generateMice(count) {
    for (let i = 0; i < count; i++) {
      const mouse = document.createElement('div');
      mouse.classList.add('tile');
      mouse.style.top = `${Math.random() * 400}px`;
      mouse.style.left = `${Math.random() * 400}px`;
      grid.appendChild(mouse);
    }
  }
 
  // 鼠标打击事件
  grid.onclick = function(event) {
    const mouse = event.target;
    if (mouse.classList.contains('tile')) {
      mouse.parentNode.removeChild(mouse);
      if (grid.children.length === 0) {
        alert('你赢了！');
      }
    }
  };
 
  generateMice(mouseCount);
</script>
</body>
</html>

这段代码创建了一个400x400像素的打地鼠游戏区域，其中包含3个鼠标。玩家点击鼠标时，鼠标会消失。如果所有鼠标都被玩家点击，会弹出一个警告框说明玩家赢了。这个示例教学了如何使用JavaScript和CSS创建游戏地图，以及如何处理用户的点击事件。

- 阅读更多 -

jquery实现tab切换简单好用

System

2024-08-16

所有,jquery

以下是一个使用jQuery实现的简单Tab切换功能的示例代码：

HTML部分：




<div id="tabs">
  <ul>
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1">Content for tab 1</div>
  <div id="tab2" style="display: none;">Content for tab 2</div>
  <div id="tab3" style="display: none;">Content for tab 3</div>
</div>

CSS部分（可选，用于美化）：




#tabs ul { list-style-type: none; margin: 0; padding: 0; }
#tabs ul li { display: inline-block; }
#tabs ul li a { padding: 5px; margin-right: 5px; border: 1px solid #ccc; }
#tabs ul li a.active, #tabs ul li a:hover { border-bottom: none; }

jQuery部分：




$(document).ready(function() {
  $('#tabs ul li a').click(function() {
    $('#tabs ul li a').removeClass('active'); // 移除所有tab的active类
    $(this).addClass('active'); // 为当前点击的tab添加active类
    var content_id = $(this).attr("href"); // 获取href属性值（即对应的内容区域ID）
    // 隐藏所有的内容区域，然后显示当前点击的内容区域
    $('#tabs ' + content_id).siblings().hide();
    $(content_id).show();
    return false; // 阻止默认的链接跳转行为
  });
  $('#tabs ul li a:first').click(); // 默认点击第一个tab
});

这段代码实现了基本的Tab切换功能，用户点击不同的链接，就会显示对应的内容区域，同时将其他区域隐藏。通过添加和移除CSS类，还可以实现不同的视觉效果。

- 阅读更多 -

jQuery(JS库) | 一文带你掌握jQuery的使用

System

2024-08-16

所有,jquery

在JavaScript中，jQuery是一个非常流行的库，它允许开发者使用更简洁的语法编写JavaScript代码。以下是一些使用jQuery的基本示例：

选择元素：

在jQuery中，你可以通过元素的id、类、属性等来选择元素。




// 选择id为"myId"的元素
var element = $('#myId');
 
// 选择所有具有"myClass"类的元素
var elements = $('.myClass');
 
// 选择所有的<p>元素
var paragraphs = $('p');

改变元素的文本：

你可以使用text()或html()函数来改变元素的文本或HTML内容。




// 改变id为"myId"的元素的文本
$('#myId').text('新文本');
 
// 改变id为"myId"的元素的HTML内容
$('#myId').html('<strong>新HTML</strong>');

改变元素的样式：

你可以使用css()函数来改变元素的样式。




// 改变id为"myId"的元素的背景颜色
$('#myId').css('background-color', 'yellow');

绑定事件：

你可以使用各种jQuery事件绑定函数，如click(), dblclick(), mouseover()等，来为元素绑定事件。




// 为id为"myId"的元素添加点击事件
$('#myId').click(function() {
    alert('元素被点击了！');
});

AJAX请求：

jQuery提供了一个简便的AJAX请求方法，即$.ajax()。




$.ajax({
    url: 'your-api-endpoint',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('数据请求成功：', data);
    },
    error: function(error) {
        console.log('数据请求失败：', error);
    }
});

创建动画：

jQuery提供了一系列的动画函数，如fadeIn(), fadeOut(), slideDown()等，可以用来创建动画效果。




// 淡入id为"myId"的元素
$('#myId').fadeIn();
 
// 淡出id为"myId"的元素
$('#myId').fadeOut();

使用jQuery插件：

jQuery有大量的插件供开发者使用，例如，你可以使用jQuery UI来给你的网页添加更加丰富的用户界面元素。




// 为id为"myId"的元素添加拖拽功能
$('#myId').draggable();

总结：

jQuery提供了一种简化JavaScript编写的方法，它允许开发者以更简洁的语法编写选择器、事件处理、动画和AJAX请求等代码。尽管现在有很多现代的JavaScript库（如React、Vue等）正在流行起来，但jQuery仍然是学习JavaScript和Web开发的一个基本工具，值得了解和掌握。

- 阅读更多 -

jQuery 动态绑定事件 on.click 与简单绑定 click ！

System

2024-08-16

所有,jquery

在jQuery中，.on() 方法用于绑定事件处理程序，它可以处理由DOM未来元素引起的事件。.click() 是一个快捷方式，实质上是对 .on("click", handler) 的封装。

如果你想为未来的元素绑定点击事件，你应该使用 .on() 方法。如果你只需要为当前存在的元素绑定点击事件，你可以直接使用 .click() 方法。

以下是两种方法的示例代码：

使用 .on() 绑定点击事件：




$(document).on("click", ".myButton", function() {
    alert("按钮被点击了！");
});

在上面的代码中，.myButton 是将来会添加到DOM中的按钮的类名。当任何具有 .myButton 类的元素被点击时，会触发提供的函数。

使用 .click() 绑定点击事件：




$(".myButton").click(function() {
    alert("按钮被点击了！");
});

在上面的代码中，只有当前存在的具有 .myButton 类的元素会被绑定点击事件。如果该按钮是未来动态添加到DOM中的，上述代码不会为这个按钮绑定事件。

如果你需要同时绑定当前存在的和未来的元素，你需要使用 .on() 方法。

- 阅读更多 -

实现jQuery切换代码

System

2024-08-16

所有,jquery

要实现一个简单的jQuery切换代码，你可以使用.toggle()方法。这个方法在被选元素上进行切换——如果是可见的，它会隐藏它们；如果是隐藏的，它会显示它们。

下面是一个使用.toggle()方法的例子：

HTML:




<button id="toggleButton">切换</button>
<div id="toggleDiv">这是一个可以切换显示与隐藏的div。</div>

jQuery:




$(document).ready(function(){
  $("#toggleButton").click(function(){
    $("#toggleDiv").toggle();
  });
});

确保在你的HTML文件中包含了jQuery库，例如：




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

当点击按钮时，#toggleDiv会切换显示与隐藏状态。

- 阅读更多 -

jQuery-1.7.2版本存在任意文件读取漏洞

System

2024-08-16

所有,jquery

该报错信息指出jQuery 1.7.2版本可能存在一个任意文件读取（RFI）漏洞。这种漏洞允许攻击者通过修改jQuery的一个函数，从而可能读取服务器上的任何文件。

解决方法：

升级jQuery版本：最简单的解决方法是将jQuery更新到最新版本，因为后续的修正补丁可能已经解决了该漏洞。
使用内容安全策略（CSP）：通过设置内容安全策略（CSP），可以限制网站加载的资源来减少攻击面。
输入验证和清理：对所有用户输入进行验证和清理，确保传递给jQuery的参数是安全的，不含有可能被利用的不当payload。
移除或替换有问题的jQuery功能：如果不能更新jQuery版本，可以考虑移除或替换可能受影响的功能。

请注意，解决方案应该根据具体的应用环境和上下文来实施。在实施任何安全修复措施之前，应该进行充分的安全评估和测试。

- 阅读更多 -