分类前端技术下的文章

2024-08-17

由于篇幅限制，这里仅提供每个页面的HTML结构代码示例。完整的代码请查看原链接中的文件。

index.html (首页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <!-- 首页内容 -->
</body>
</html>

about.html (关于页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于我</title>
</head>
<body>
    <!-- 关于我的内容 -->
</body>
</html>

works.html (作品页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的作品</title>
</head>
<body>
    <!-- 作品展示内容 -->
</body>
</html>

contact.html (联系页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我</title>
</head>
<body>
    <!-- 联系表单 -->
</body>
</html>

blog.html (博客页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>
    <!-- 博客文章列表 -->
</body>
</html>

single.html (单博文页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客文章</title>
</head>
<body>
    <!-- 单个博客文章内容 -->
</body>
</html>

contact-success.html (联系成功页)




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系成功</title>
</head>
<body>
    <!-- 联系成功确认内容 -->
</body>
</html>

以上代码仅展示了每个页面的基本HTML结构，完整的样式和交互需要查看原链接中的文件。

- 阅读更多 -

Jquery实现二级下拉选择框

System

2024-08-17

所有,jquery

使用jQuery实现二级下拉选择框的基本思路是监听第一级下拉选择框的变化事件，然后根据用户的选择动态更新第二级下拉选择框的选项。以下是一个简单的实现示例：

HTML 部分：




<select id="firstSelect">
  <option value="">请选择</option>
  <option value="category1">类别1</option>
  <option value="category2">类别2</option>
</select>
 
<select id="secondSelect">
  <option value="">请先选择上级选项</option>
</select>

jQuery 部分：




$(document).ready(function() {
  var options = {
    'category1': ['选项1', '选项2'],
    'category2': ['选项3', '选项4']
  };
 
  $('#firstSelect').change(function() {
    var selectedCategory = $(this).val();
    var secondSelect = $('#secondSelect');
 
    if (selectedCategory) {
      var subOptions = options[selectedCategory];
      var newOptionsHtml = subOptions.map(function(option) {
        return '<option>' + option + '</option>';
      }).join('');
 
      secondSelect.html(newOptionsHtml);
    } else {
      secondSelect.html('<option value="">请先选择上级选项</option>');
    }
  }).change(); // 触发一次change事件以防初始选择
});

在这个示例中，options 对象包含了不同类别对应的子选项。当用户在第一级下拉框中选择不同的类别时，第二级下拉框的选项会相应更新。注意，我们在change事件处理函数的最后调用了.change()，这是为了在页面加载时也能正确地初始化第二级下拉框。

- 阅读更多 -

JQuery事件操作

System

2024-08-17

所有,jquery

在jQuery中，事件操作主要指绑定事件处理程序到元素上。以下是几种常见的事件操作方法：

.on(event, handler)：绑定事件处理程序到选择的元素。
.off(event, handler)：从选择的元素解绑事件处理程序。
.trigger(event)：触发选择的元素上的事件。
.one(event, handler)：绑定一次性的事件处理程序。

以下是这些方法的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Event Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<button id="myButton">Click Me</button>
 
<script>
$(document).ready(function() {
    // 绑定点击事件处理程序
    $('#myButton').on('click', function() {
        alert('Button clicked!');
    });
 
    // 触发点击事件
    $('#myButton').trigger('click');
 
    // 解绑点击事件处理程序
    $('#myButton').off('click');
 
    // 绑定一次性事件处理程序
    $('#myButton').one('click', function() {
        alert('Button clicked once!');
    });
});
</script>
</body>
</html>

在这个例子中，我们首先绑定了一个点击事件处理程序到按钮上。然后我们触发了这个点击事件。接着我们解绑了这个点击事件处理程序。最后，我们使用.one()方法绑定了一个只会执行一次的点击事件处理程序。

System

2024-08-17

所有,jquery

错误解释：

Uncaught TypeError: $(...).live is not a function at HTM 这个错误表明你正在尝试使用 jQuery 的 .live() 方法，但是在当前的 jQuery 版本中，.live() 方法已经被废弃并从库中移除。从 jQuery 1.9 开始，.live() 已经不被推荐使用，并在后续的版本中被移除。

解决方法：

要解决这个问题，你需要使用一个替代的事件绑定方法，比如 .on()。以下是一个简单的替换例子：

如果你原来的代码是这样的：




$('#someElement').live('click', function() {
    // 事件处理代码
});

你应该将它修改为使用 .on() 方法：




$(document).on('click', '#someElement', function() {
    // 事件处理代码
});

在这个例子中，我们将事件绑定到了 document 对象上，并指定了要绑定事件的具体元素（#someElement）。这样，即使在 DOM 完全加载之后添加到文档中的元素也会响应原来绑定的事件。

确保你使用的是支持 .on() 方法的 jQuery 版本。如果你依然需要使用旧版本的 jQuery，可以考虑降级到不包含 .live() 方法移除的版本，但这不是推荐的做法，因为它可能会带来安全风险。

- 阅读更多 -

node实现文件上传

System

2024-08-17

所有,jquery

在Node.js中实现文件上传，你可以使用内置的http模块搭建一个简单的服务器，并使用formidable模块来处理上传的表单。以下是一个简单的例子：

首先，安装formidable模块：




npm install formidable

然后，创建一个简单的HTTP服务器来处理文件上传：




const http = require('http');
const formidable = require('formidable');
const fs = require('fs');
 
const server = http.createServer((req, res) => {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // 解析请求，包括文件上传
    const form = new formidable.IncomingForm();
 
    form.parse(req, (err, fields, files) => {
      const oldPath = files.filetoupload.filepath;
      const newPath = __dirname + '/uploads/' + files.filetoupload.originalFilename;
 
      // 重命名文件
      fs.rename(oldPath, newPath, function (err) {
        if (err) throw err;
        res.write('File uploaded and moved!');
        res.end();
      });
    });
  } else {
    // 显示一个用于上传文件的表单
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="upload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
});
 
server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在上述代码中，服务器监听3000端口。当访问服务器时，它会显示一个用于上传文件的表单。当提交表单时，如果URL是/upload并且请求方法是POST，服务器将使用formidable解析请求，并将上传的文件保存在服务器的uploads目录下。

请确保服务器的上传目录（这个例子中是uploads）存在，并且服务器有足够的权限来写入该目录。

- 阅读更多 -

解决JSmol中的低版本JQuery带来的XSS漏洞

System

2024-08-17

所有,jquery

要解决JSmol中由低版本JQuery引起的XSS漏洞问题，你需要更新JQuery到一个安全的版本。以下是解决方案的步骤：

确定当前使用的JQuery版本。
查看最新的JQuery版本，了解是否有修复XSS漏洞的更新。
如果有修复的更新，请将JQuery更新到最新的安全版本。

以下是更新JQuery版本的示例代码：




<!-- 旧版本的JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<!-- 新版本的JQuery，替换为不含漏洞的版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

请注意，替换版本时，确保选择的版本不包含已知的安全漏洞。你还可以选择使用CDN来引入JQuery，这样可以确保你总是获得最新的安全更新。

务必在更新JQuery之后，重新测试你的应用，确保没有引入新的兼容性问题。如果你对JSmol的使用有特定需求，确保JSmol的版本也是最新的，以便兼容最新的JQuery版本。

- 阅读更多 -

select2 根据option文本设置选中，并触发改变事件

System

2024-08-17

所有,jquery

要根据Select2的选项文本来设置选中的项并触发改变事件，你可以使用Select2的trigger方法来模拟用户的行为。以下是一个简单的例子：




// 假设你已经初始化了Select2并且你的select元素有一个id为'mySelect'
$('#mySelect').val('你要选中的项的值').trigger('change');
 
// 如果你要根据文本来选中，你可以先找到对应的值，然后再使用上面的代码
var optionText = "你要选中的选项的文本";
$('#mySelect').find('option').each(function(index, option) {
    if ($(option).text() === optionText) {
        $(this).attr('selected', 'selected').trigger('change');
    }
});

确保你在设置选中项之后触发了change事件，这样Select2插件就会更新显示的值。如果你的选项文本是唯一的，你可以直接通过文本来查找对应的值，然后设置选中。

System

2024-08-17

所有,jquery

在前端开发中，我们经常需要使用jQuery来筛选DOM元素。jQuery提供了多种筛选方法，这些方法可以帮助我们快速准确地选中我们需要的元素。

子元素筛选：




// 选择所有<p>元素，在其父元素中作为第一个子元素
$('div > p:first-child')

同胞元素筛选：




// 选择所有<p>元素，在其父元素中作为最后一个子元素
$('div > p:last-child')
 
// 选择所有<p>元素，在其父元素中作为第二个子元素
$('div > p:nth-child(2)')

属性筛选：




// 选择所有具有title属性的<a>元素
$('a[title]')
 
// 选择所有title属性值为"test"的<a>元素
$('a[title="test"]')

表单元素筛选：




// 选择所有选中的表单元素
$('input:checked')

可见性筛选：




// 选择所有不可见的元素
$('a:hidden')

内容筛选：




// 选择包含文本"test"的所有<p>元素
$('p:contains("test")')

内容筛选：




// 选择所有<p>元素，它们直接包含文本"test"
$('p:contains("test")')

表单元素筛选：




// 选择所有不可用的表单元素
$('input:disabled')

以上示例展示了如何使用jQuery的筛选方法来选择特定的DOM元素。筛选方法提供了一种强大而灵活的方式来定位和操作DOM元素，是前端开发中不可或缺的一部分。

- 阅读更多 -

jquery实现联动效果（通用）省市的三级联动四级联动同样的做法

System

2024-08-17

所有,jquery

使用jQuery实现联动效果通常涉及到使用<select>元素来创建下拉菜单，并使用jQuery来处理不同选择的变化。以下是实现三级和四级联动的基本示例：

HTML部分：




<select id="province">
  <option value="">请选择省份</option>
</select>
 
<select id="city">
  <option value="">请选择城市</option>
</select>
 
<!-- 三级联动 -->
<select id="district">
  <option value="">请选择区/县</option>
</select>
 
<!-- 四级联动 -->
<select id="town">
  <option value="">请选择街道</option>
</select>

JavaScript部分（jQuery）:




$(document).ready(function() {
  // 示例数据
  var provinces = [
    {name: "省份A", cities: ["城市A1", "城市A2"]},
    {name: "省份B", cities: ["城市B1", "城市B2"]}
  ];
 
  // 填充省份
  for (var i = 0; i < provinces.length; i++) {
    $('#province').append($('<option>', {
      value: i,
      text: provinces[i].name
    }));
  }
 
  // 省份变化时更新城市
  $('#province').change(function() {
    var index = $(this).val();
    var cities = provinces[index].cities;
    $('#city').empty(); // 清空城市下拉菜单
    for (var i = 0; i < cities.length; i++) {
      $('#city').append($('<option>', {
        value: i,
        text: cities[i]
      }));
    }
 
    // 城市变化时更新区/县
    $('#city').change(function() {
      var cityIndex = $(this).val();
      var districts = cities[cityIndex].districts; // 假设每个城市有districts属性
      $('#district').empty(); // 清空区/县下拉菜单
      for (var i = 0; i < districts.length; i++) {
        $('#district').append($('<option>', {
          value: i,
          text: districts[i]
        }));
      }
 
      // 如果需要四级联动，在这里继续添加change事件处理函数
    });
  });
 
  // 如果需要四级联动
  // $('#district').change(function() {
  //   ...
  // });
});

请注意，示例中的provinces、cities和districts数组应该替换为实际的省份、城市和区/县数据。这只是一个简单的示例，实际应用中可能需要从服务器获取数据或使用更复杂的逻辑。

- 阅读更多 -

JS-38-jQuery07-jQuery插件

System

2024-08-17

所有,jquery




// 定义一个简单的jQuery插件
$.fn.extend({
    "simplePlugin": function(options) {
        // 默认配置
        var defaults = {
            'color': 'red',
            'fontSize': '12px'
        };
 
        // 合并用户提供的选项和默认选项
        var settings = $.extend({}, defaults, options);
 
        // 遍历匹配的元素集合并应用插件
        return this.each(function() {
            // 在每个匹配元素上设置样式
            $(this).css({
                'color': settings.color,
                'fontSize': settings.fontSize
            });
        });
    }
});
 
// 使用插件
$(document).ready(function() {
    // 将所有<p>元素的颜色设置为蓝色，字体大小设置为20px
    $('p').simplePlugin({
        'color': 'blue',
        'fontSize': '20px'
    });
});

这段代码定义了一个简单的jQuery插件simplePlugin，它允许用户设置文本的颜色和大小。插件使用$.extend来合并默认配置和用户提供的选项，然后遍历匹配的元素并应用这些样式。使用时，可以通过传递一个对象来覆盖默认配置，例如设置颜色为蓝色和字体大小为20px。

- 阅读更多 -