分类 jquery 下的文章

2024-08-17

以下是一个使用jQuery和JavaScript实现的简单的todolist待办事项清单的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<header>
    <h1>My TodoList</h1>
    <input type="text" id="new-todo-item" placeholder="Add new todo">
</header>
 
<section>
    <ul id="todo-list">
        <!-- Todo items will be added here -->
    </ul>
</section>
 
<script src="script.js"></script>
</body>
</html>

CSS部分（style.css）:




body {
    font-family: Arial, sans-serif;
}
 
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
 
#todo-list {
    list-style-type: none;
    padding: 0;
}
 
#todo-list li {
    margin: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-left: 5px solid #30de88;
    font-size: 16px;
}
 
#new-todo-item {
    padding: 8px;
    margin: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

JavaScript部分（script.js）:




$(document).ready(function(){
    $('#new-todo-item').keypress(function(event){
        if(event.which === 13){
            var todoText = $(this).val();
            $('#todo-list').append('<li>' + todoText + ' <button class="delete-item">X</button></li>');
            $(this).val('');
        }
    });
 
    $('#todo-list').on('click', '.delete-item', function(){
        $(this).parent().remove();
    });
});

这个简单的代码实现了一个基本的todolist功能，用户可以通过键盘输入添加待办事项，每一项旁边都有一个删除按钮，点击可以删除对应的事项。这个示例教学了如何使用jQuery处理键盘事件和动态更新DOM，是学习jQuery的一个很好的起点。

jQuery库+distpicker库实现省市区三级联动效果（超简单版）

2024-08-17




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动效果示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path_to/distpicker.data.js"></script>
    <script src="path_to/distpicker.js"></script>
    <link rel="stylesheet" href="path_to/distpicker.css">
</head>
<body>
    <div class="form-group">
        <label class="control-label">地址选择：</label>
        <div id="distpicker">
            <select id="province" data-province="---- 选择省份 ----"></select>
            <select id="city" data-city="---- 选择城市 ----"></select>
            <select id="district" data-district="---- 选择区县 ----"></select>
        </div>
    </div>
 
    <script>
        $(function(){
            $('#distpicker').distpicker({
                province: '---- 选择省份 ----',
                city: '---- 选择城市 ----',
                district: '---- 选择区县 ----'
            });
        });
    </script>
</body>
</html>

这段代码展示了如何使用jQuery和distpicker库来创建一个基本的省市区三级联动效果。在这个例子中，我们引入了必要的CSS和JavaScript文件，并在页面加载完成后初始化了distpicker插件。这个插件会自动将三个下拉菜单转换为联动的地区选择器。

jquery 封装的分页插件（包括上一页，下一页，跳转）

2024-08-17

以下是一个简单的使用jQuery实现的分页插件示例。这个示例提供了基本的分页功能，包括上一页、下一页和页码跳转。

HTML 部分：




<div id="pagination"></div>

CSS 部分：




.pagination {
    user-select: none;
}
.pagination a {
    cursor: pointer;
    user-select: none;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}
.pagination a.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.pagination a:hover {
    background-color: #007bff;
    color: white;
}

jQuery 部分：




(function($) {
    $.fn.pagination = function(options) {
        var settings = $.extend({
            currentPage: 1,
            totalPages: 5,
            callback: function(page) { /* do something */ }
        }, options);
 
        this.each(function() {
            var $this = $(this);
            var $nav = $('<nav></nav>').addClass('pagination').appendTo($this);
            var $previous = $('<a href="#">&laquo; 上一页</a>').appendTo($nav);
            var $next = $('<a href="#">下一页 &raquo;</a>').appendTo($nav);
            var $goToPage = $('<input type="text" size="2" />').appendTo($nav);
            var $goButton = $('<a href="#">跳转</a>').appendTo($nav);
 
            function render(page) {
                settings.callback(page);
                $nav.find('a').removeClass('active');
                $nav.find('a[href="' + page + '"]').addClass('active');
            }
 
            $previous.on('click', function(e) {
                e.preventDefault();
                if (settings.currentPage > 1) {
                    render(settings.currentPage - 1);
                }
            });
 
            $next.on('click', function(e) {
                e.preventDefault();
                if (settings.currentPage < settings.totalPages) {
                    render(settings.currentPage + 1);
                }
            });
 
            $goButton.on('click', function(e) {
                e.preventDefault();
                var page = parseInt($goToPage.val(), 10);
                if (!isNaN(page) && page >= 1 && page <= settings.totalPages) {
                    render(page);
                }
            });
 
            for (var i = 1; i <= settings.totalPages; i++) {
                $('<a href="' + i + '">' + i + '</a>').appendTo($nav);
            }
 
            render(settings.currentPage);
        });
    };
})(jQuery);
 
// 使用方

2024-08-17

以下是一个简单的HTML模板，使用了红色作为主题颜色，并结合了中文元素。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红色中文网页模板</title>
    <!-- 引入 Bootstrap 样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        body {
            background-color: #c83030; /* 红色背景 */
            color: #fff; /* 白色文字 */
            font-family: 'Microsoft YaHei', Arial, sans-serif; /* 指定字体 */
        }
        .jumbotron {
            background-color: #c83030; /* 同主题红色 */
            color: #fff; /* 白色文字 */
            padding: 2rem 1rem; /* 内填充 */
        }
        /* 其他样式 */
    </style>
</head>
<body>
    <div class="jumbotron">
        <div class="container">
            <h1 class="display-4">欢迎来到红色中文网页</h1>
            <p class="lead">这是一个简单的红色主题中文网页模板。</p>
        </div>
    </div>
 
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2>章节标题</h2>
                <p>这里是内容描述...</p>
            </div>
            <div class="col-md-4">
                <h2>章节标题</h2>
                <p>这里是内容描述...</p>
            </div>
            <div class="col-md-4">
                <h2>章节标题</h2>
                <p>这里是内容描述...</p>
            </div>
        </div>
    </div>
 
    <!-- 引入 jQuery 和 Bootstrap 的 JavaScript 文件 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

这个模板使用了Bootstrap的组件来创建一个响应式的布局，同时定义了一些简单的CSS样式来实现红色背景和中文元素的显示。这个模板可以作为开发者开始创建红色中文网页的起点。

jQuery遍历DOM元素

2024-08-17

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

$.each()：这是jQuery的全局函数，用于遍历任何数组或对象。




$.each([52, 97], function(index, value) {
  alert(index + ": " + value);
});

children()：获取元素的子元素。




$("#parent").children().each(function() {
  alert($(this).text());
});

find()：获取元素的后代元素。




$("#parent").find("p").each(function() {
  alert($(this).text());
});

next()：获取元素后面的同级元素。




$("#element").next().each(function() {
  alert($(this).text());
});

prev()：获取元素前面的同级元素。




$("#element").prev().each(function() {
  alert($(this).text());
});

siblings()：获取元素的所有同级元素。




$("#element").siblings().each(function() {
  alert($(this).text());
});

parent()：获取元素的父元素。




$("#element").parent().each(function() {
  alert($(this).text());
});

.each()：遍历jQuery对象集合。




$("p").each(function() {
  alert($(this).text());
});

以上就是一些在jQuery中遍历DOM元素的方法，可以根据实际需求选择合适的遍历方式。

Ztree 局部刷新功能（VS2022+Mysql 8.0.22）

2024-08-17

在Visual Studio 2022中使用Ztree进行局部刷新通常涉及到与数据库的交互。以下是一个简化的示例，展示了如何在ASP.NET MVC项目中使用Ztree进行局部刷新：

首先，确保你已经在项目中引入了Ztree的必要文件，比如CSS和JS。
在MVC视图中创建Ztree的HTML元素和JS初始化代码。




<ul id="ztree" class="ztree"></ul>
 
<script type="text/javascript">
    var zTreeObj;
    var setting = {
        async: {
            enable: true,
            url: "/Home/GetNodes",
            autoParam: ["id", "name"]
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
 
    $(document).ready(function () {
        zTreeObj = $.fn.zTree.init($("#ztree"), setting);
    });
</script>

在控制器中添加方法来处理异步请求并返回节点数据。




public ActionResult GetNodes(string id)
{
    // 这里的代码应该根据id查询数据库，获取子节点数据
    // 假设我们有一个方法GetChildNodes(id)来获取子节点
    var nodes = GetChildNodes(id);
 
    return Json(nodes, JsonRequestBehavior.AllowGet);
}
 
private List<Node> GetChildNodes(string parentId)
{
    // 这里应该是连接数据库，查询数据的代码
    // 假设的数据库查询代码
    // List<Node> nodes = dbContext.Nodes.Where(n => n.ParentId == parentId).ToList();
    // return nodes;
}
 
public class Node
{
    public string id { get; set; }
    public string name { get; set; }
    // 其他属性...
}

在Mysql数据库中，确保你有正确的权限来执行查询操作。

以上代码提供了一个基本框架，展示了如何在MVC项目中使用Ztree进行局部刷新。需要注意的是，数据库查询代码需要根据实际的数据库结构和权限进行修改。在实际应用中，你可能需要使用Entity Framework或者ADO.NET来与数据库进行交互。

jQuery与javascript的区别＋案例锋芒毕露

2024-08-17

jQuery 是一个 JavaScript 库，它封装了很多 JavaScript 操作 DOM 的方法，使得我们在操作 DOM 时更加简便。

主要的区别在于：

jQuery 是一个库，它遵循 JavaScript 语法和规则，只是封装了很多常用的方法，使我们更方便地操作 DOM。
jQuery 的方法通常返回一个 jQuery 对象，我们可以在这个对象上继续调用 jQuery 的其他方法。
JavaScript 是原生的 JavaScript，不依赖于任何库，它需要我们自己写更多的代码来实现相同的功能。
JavaScript 的方法通常返回一个 JavaScript 的原生对象，或者 null，我们只能在这个对象上调用原生 JavaScript 的方法。

以下是一个简单的例子，展示了如何用 jQuery 和原生 JavaScript 选择 DOM 元素，并为选择的元素添加点击事件：




<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
});
 
window.onload = function() {
  document.getElementById("btn2").addEventListener("click", function(){
    document.getElementById("test2").textContent = "Hello world!";
  });
};
</script>
</head>
<body>
 
<button id="btn1">点击我-jQuery</button>
<p id="test1"></p>
 
<button id="btn2">点击我-JavaScript</button>
<p id="test2"></p>
 
</body>
</html>

在这个例子中，我们使用 jQuery 通过 id 选择器选择了一个按钮和一个段落，并为这个按钮添加了点击事件。在点击按钮后，我们使用 jQuery 的 text 方法改变段落的文本。

同时，我们也使用原生 JavaScript 完成了同样的操作。在 JavaScript 中，我们使用 getElementById 选择 DOM 元素，并使用 addEventListener 添加事件监听器。在点击按钮后，我们使用 textContent 改变段落的文本。

【JS特效之手风琴效果】基于jquery实现手风琴网页特效

2024-08-17

以下是实现手风琴特效的简化版示例代码，使用了jQuery库：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴特效</title>
<style>
  .accordion {
    width: 315px;
    height: 460px;
    position: relative;
    perspective: 1000px;
  }
  .accordion .card {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }
  .accordion .card.show {
    transform: rotateY(180deg);
  }
  .accordion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
</head>
<body>
 
<div class="accordion">
  <div class="card">
    <img src="https://placekitten.com/315/460" alt="Card 1">
  </div>
  <!-- Add more cards if needed -->
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
  $('.accordion .card').on('click', function() {
    $(this).toggleClass('show');
  });
});
</script>
 
</body>
</html>

这段代码实现了基本的手风琴效果，点击卡片会将其翻转180度显示背面内容。在实际应用中，您可能需要为每个卡片添加不同的背面内容，并且可能需要添加更多的交互细节，比如动画完成的回调函数等。

前端篇-jquery发送数据的三种方式

2024-08-17

在jQuery中，可以通过$.ajax、$.get和$.post方法来发送数据。

使用$.ajax方法发送数据：




$.ajax({
    url: 'your-endpoint.php', // 服务器端的URL
    type: 'POST',             // 请求类型，这里是POST
    data: {key1: 'value1', key2: 'value2'}, // 要发送的数据
})
.done(function(response) {
    // 请求成功后的回调函数
    console.log(response);
})
.fail(function() {
    // 请求失败后的回调函数
    console.log('request failed');
});

使用$.get方法发送GET请求：




$.get('your-endpoint.php', {key1: 'value1', key2: 'value2'}, function(response) {
    // 请求成功后的回调函数
    console.log(response);
});

使用$.post方法发送POST请求：




$.post('your-endpoint.php', {key1: 'value1', key2: 'value2'}, function(response) {
    // 请求成功后的回调函数
    console.log(response);
});

以上代码中，your-endpoint.php是服务器端处理请求的脚本地址，{key1: 'value1', key2: 'value2'}是要发送的数据，response是服务器返回的响应数据。