分类前端技术下的文章

2024-08-26




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图API位置定位示例</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德API_KEY"></script>
    <script type="text/javascript">
        var map, geolocation;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //是否使用高精度定位，默认:true
                timeout: 10000           //超过10秒后停止定位，默认：5s
            });
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        //解析定位结果
        function onComplete(data) {
            var str = ['定位成功'];
            str.push('经度：' + data.position.getLng());
            str.push('纬度：' + data.position.getLat());
            if (data.accuracy) {
                str.push('精度：' + data.accuracy + ' 米');
            }
            //如为IP定位结果则无经纬度
            if (data.position.getLng() && data.position.getLat()) {
                map.setCenter(data.position); //设定地图中心点
            } else {
                str.push('IP定位成功');
            }
        }
        //返回定位出错信息
        function onError(data) {
            document.getElementById('tip').innerHTML = '定位失败';
        }
    </script>
</head>
<body>
<div id="container" style="height:500px;width:500px;"></div>
<div id="tip"></div>
</body>
</html>

在这段代码中，我们首先引入了高德地图API，并在head标签内包含了地图初始化和定位的JavaScript代码。在body标签内，我们有一个id为container的div，这是地图将要渲染的容器。onError函数用于在定位失败时显示错误信息，而onComplete函数则用于解析定位数据，并在定位成功时将地图中心设置为定位所得的位置。这个示例展示了如何在网页中集成高德地图API并实现定位功能。

- 阅读更多 -

HTML5 服务器发送事件(Server-Sent Events)

System

2024-08-26

所有,html5

Server-Sent Events（SSE）允许网页获得来自服务器的更新。与传统的HTTP请求-响应会话不同，SSE是单向的，只允许服务器向客户端发送数据。SSE使用Content-Type为"text/event-stream"的HTTP协议。

以下是一个简单的HTML和JavaScript示例，展示了如何使用SSE：




<!DOCTYPE html>
<html>
<head>
    <title>Server-Sent Events Example</title>
</head>
<body>
    <div id="message"></div>
    <script>
        if(typeof(EventSource) !== "undefined") {
            var source = new EventSource("sse.php");
            source.onmessage = function(event) {
                document.getElementById("message").innerHTML += event.data + "<br>";
            };
        } else {
            document.getElementById("message").innerHTML = "Sorry, your browser does not support server-sent events...";
        }
    </script>
</body>
</html>

以下是服务器端的PHP示例代码，假设服务器端支持SSE：




<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();

在这个例子中，浏览器打开一个到服务器的SSE连接，然后服务器源源不断地发送时间更新。这个过程是持久的，直到连接关闭。这种方式可以用来实现实时更新的应用，比如实时新闻，实时股票价格等。

- 阅读更多 -

jQuery知识点

System

2024-08-26

所有,jquery

在这个问题中，我们将讨论如何使用jQuery来选择DOM元素，并对其进行操作。

选择元素

在jQuery中，我们使用$()函数来选择DOM元素。这个函数可以接受多种类型的参数，包括字符串、DOM元素等。




// 选择id为'myId'的元素
var element = $('#myId');
 
// 选择所有的p元素
var elements = $('p');
 
// 选择class为'myClass'的元素
var elements = $('.myClass');

操作元素

一旦我们选择了元素，我们可以对其进行各种操作，例如修改其属性、内容、样式等。




// 改变id为'myId'的元素的文本内容
$('#myId').text('新内容');
 
// 改变id为'myId'的元素的HTML内容
$('#myId').html('<strong>新内容</strong>');
 
// 改变id为'myId'的元素的属性值
$('#myId').attr('属性名', '新属性值');
 
// 为id为'myId'的元素添加一个新的class
$('#myId').addClass('newClass');
 
// 为id为'myId'的元素移除一个class
$('#myId').removeClass('existingClass');
 
// 切换id为'myId'的元素的一个class
$('#myId').toggleClass('myClass');
 
// 改变id为'myId'的元素的CSS样式
$('#myId').css('属性名', '属性值');

事件处理

jQuery还允许我们绑定各种事件处理程序到DOM元素上。




// 为id为'myId'的元素绑定一个点击事件
$('#myId').click(function() {
    alert('元素被点击了！');
});

链式调用

jQuery还支持链式调用，这意味着我们可以在一个选择器上连续调用多个方法。




// 链式改变id为'myId'的元素的文本内容，并且添加一个class
$('#myId').text('新内容').addClass('newClass');

动画效果

jQuery还提供了一系列的动画方法，可以用来改变元素的样式和效果。




// 淡出id为'myId'的元素
$('#myId').fadeOut();
 
// 淡入id为'myId'的元素
$('#myId').fadeIn();
 
// 向下滑动id为'myId'的元素
$('#myId').slideDown();
 
// 向上滑动id为'myId'的元素
$('#myId').slideUp();

AJAX请求

jQuery还提供了一个简便的方法来进行AJAX请求。




$.ajax({
    url: 'your-api-endpoint',
    type: 'GET',
    success: function(data) {
        // 请求成功后的回调函数
        console.log(data);
    },
    error: function() {
        // 请求失败后的回调函数
        console.log('请求失败！');
    }
});

以上就是jQuery的基本知识点，这些内容足够让你开始使用jQuery进行基本的网页开发。

- 阅读更多 -

学生成绩管理系统实现（CSS+JQuery+PHP+MySQL）

System

2024-08-26

所有,jquery

以下是实现学生成绩管理系统的核心功能的代码示例，包括查看成绩、添加成绩和修改成绩。




// 连接数据库
$db = new mysqli('localhost', 'username', 'password', 'database');
 
// 检查连接
if ($db->connect_error) {
    die('连接失败: ' . $db->connect_error);
}
 
// 查看成绩
if (isset($_GET['action']) && $_GET['action'] == 'view') {
    $student_id = $_GET['student_id'];
    $sql = "SELECT * FROM results WHERE student_id = ?";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('i', $student_id);
    $stmt->execute();
    $result = $stmt->get_result();
    while ($row = $result->fetch_assoc()) {
        echo "学生ID: " . $row['student_id'] . " 成绩: " . $row['score'] . "<br>";
    }
    $stmt->close();
}
 
// 添加成绩
if (isset($_POST['action']) && $_POST['action'] == 'add') {
    $student_id = $_POST['student_id'];
    $score = $_POST['score'];
    $sql = "INSERT INTO results (student_id, score) VALUES (?, ?)";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('is', $student_id, $score);
    $stmt->execute();
    echo "成绩添加成功";
    $stmt->close();
}
 
// 修改成绩
if (isset($_POST['action']) && $_POST['action'] == 'edit') {
    $student_id = $_POST['student_id'];
    $score = $_POST['score'];
    $sql = "UPDATE results SET score = ? WHERE student_id = ?";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('is', $score, $student_id);
    $stmt->execute();
    echo "成绩修改成功";
    $stmt->close();
}
 
// 关闭数据库连接
$db->close();

这段代码展示了如何使用PHP、MySQLi和准备语句来安全地处理数据库操作。同时，也展示了如何使用JQuery和CSS来创建一个简单的用户界面，以便用户可以查看、添加和修改学生成绩。

- 阅读更多 -

thymeleaf radio 获取及回显

System

2024-08-26

所有,jquery

在Thymeleaf中，要实现单选按钮（radio）的获取及回显，你需要确保每个单选按钮都有不同的name属性值，并且其value属性与模型中的值相匹配。

以下是一个简单的例子：

Controller中设置模型数据：




@GetMapping
public String getForm(Model model) {
    model.addAttribute("selectedOption", "option2"); // 假设已选择option2
    return "form";
}

Thymeleaf模板中的radio按钮：




<form th:action="@{/submit}" th:object="${yourModel}" method="post">
    <div th:each="option : ${#{'option1' : '选项1', 'option2' : '选项2', 'option3' : '选项3'}}">
        <input type="radio" th:name="radioName" th:value="${option.key}"
               th:field="*{selectedOption}" th:checked="${option.key} == ${selectedOption} ? true : false"/>
        <label th:for="${#ids.prev('radioName')}" th:text="${option.value}">选项标签</label>
    </div>
    <button type="submit">提交</button>
</form>

在这个例子中，th:field="*{selectedOption}" 指定了模型属性与单选按钮绑定。th:checked 属性用于判断当前选项是否应该被选中。

当表单提交时，selectedOption 的值将会被提交到服务器。如果需要回显，只需确保在服务器端设置的值与提交上来的值相匹配，或者在获取表单数据时设置到模型中。

- 阅读更多 -

jQuery操作select

System

2024-08-26

所有,jquery

在jQuery中，操作select元素可以通过以下方法：

获取选中项的值：




var selectedValue = $('#mySelect').val();

获取选中项的文本：




var selectedText = $('#mySelect option:selected').text();

设置选中项：




$('#mySelect').val('要选中的值');

添加选项：




$('#mySelect').append($('<option>', {
    value: '新值',
    text: '新文本'
}));

删除选项：




$('#mySelect option[value="要删除的值"]').remove();

禁用/启用select元素：




$('#mySelect').prop('disabled', true); // 禁用
$('#mySelect').prop('disabled', false); // 启用

清空select中所有选项：




$('#mySelect').empty();

这里的#mySelect是select元素的ID，如果需要通过其他属性或者元素关系来选择元素，请相应修改选择器。

- 阅读更多 -

jQuery实现框里画面的展开、收起和停止

System

2024-08-26

所有,jquery

以下是一个简单的示例，展示了如何使用jQuery来控制一个简单的画面(面板)的展开、收起和停止。这里的“画面”是一个<div>元素，可以通过CSS来设计样式。

HTML:




<button id="expand">展开</button>
<button id="collapse">收起</button>
<button id="stop">停止</button>
<div id="panel">画面内容</div>

CSS:




#panel {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  transition: height 1s;
  overflow: hidden;
}
 
.collapsed {
  height: 0;
}

jQuery:




$(document).ready(function() {
  var $panel = $('#panel');
 
  $('#expand').click(function() {
    $panel.removeClass('collapsed');
  });
 
  $('#collapse').click(function() {
    $panel.addClass('collapsed');
  });
 
  $('#stop').click(function() {
    $panel.css('transition', 'none');
    $panel.addClass('collapsed');
    setTimeout(function() {
      $panel.css('transition', 'height 1s');
    }, 0);
  });
});

这段代码中，#panel是要展开和收起的画面。.collapsed类定义了当画面处于收起状态时的样式，即height设为0。transition属性用于平滑地过渡画面的尺寸变化。

点击“展开”按钮会移除.collapsed类，使画面展开；点击“收起”按钮会添加.collapsed类，使画面收起；点击“停止”按钮会临时取消过渡效果，使画面立即收起，然后重新启用过渡效果。

- 阅读更多 -

jquery简介与解析

System

2024-08-26

所有,jquery

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档 traversing, event handling, animation 和Ajax等一系列的操作变得更加简单，而且它还支持跨平台的操作。

jQuery的核心特性可以概括为：

快速获取文档元素
动态改变页面样式
事件处理
动画操作
AJAX交互
插件扩展
跨浏览器兼容

下面是一个简单的jQuery代码示例，它展示了如何在文档加载完成后，通过jQuery选择器选取一个元素，并改变其CSS样式：




$(document).ready(function(){
  $("#myDiv").css("color", "blue");
});

在这个例子中，$(document).ready是一个函数，它确保在执行代码前，文档已经完全加载。$("#myDiv")是一个jQuery选择器，它选取了ID为myDiv的元素。.css("color", "blue")是一个方法，它将该元素的文字颜色改为蓝色。

jQuery的解析过程通常是指它是如何在浏览器中工作的，它主要包括以下步骤：

载入jQuery库
使用jQuery语法编写代码
在页面加载完毕后执行jQuery代码

这些步骤都是通过JavaScript代码实现的，通常如下所示：




<!DOCTYPE html>
<html>
<head>
  <title>jQuery 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="myDiv">Hello, World!</div>
 
<script>
$(document).ready(function(){
  $("#myDiv").css("color", "blue");
});
</script>
 
</body>
</html>

在这个HTML文件中，我们通过<script src="..."></script>标签引入了jQuery库，然后在<script>标签内编写了jQuery代码。这段代码在页面加载完成后执行，将ID为myDiv的元素的文字颜色改为蓝色。

- 阅读更多 -

Vue3.0中如何引入jQuery并使用

System

2024-08-26

所有,jquery

在Vue 3.0中引入jQuery并使用，首先需要安装jQuery：




npm install jquery

然后，在Vue组件中使用jQuery，可以在<script setup>标签中或者在<script>标签中使用import引入：




// 在<script setup>中使用jQuery
import $ from 'jquery';
 
// 示例：在Vue组件的onMounted生命周期钩子中使用jQuery
import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      // jQuery代码
      $('selector').somePlugin();
    });
  }
};

或者在普通的<script>标签中：




import $ from 'jquery';
 
export default {
  mounted() {
    // jQuery代码
    $('selector').somePlugin();
  }
};

请注意，在Vue 3中，建议尽可能避免使用jQuery，因为Vue 3推荐使用组合式API（如ref、reactive、onMounted等）来编写响应式和组件逻辑，而不是操作DOM。如果需要操作DOM，可以使用Vue提供的ref属性或者$el属性。

- 阅读更多 -

探索 JQuery EasyUI：构建简单易用的前端页面

System

2024-08-26

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI 示例</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div class="easyui-panel" title="EasyUI 面板" style="width:500px;padding:10px;">
        <p>这是一个EasyUI面板</p>
    </div>
</body>
</html>

这段代码展示了如何在HTML页面中引入EasyUI库，并创建一个简单的面板组件。通过引入EasyUI的CSS和JavaScript资源，开发者可以快速构建功能丰富、易于使用的前端界面。

- 阅读更多 -