1. 首页
  2. 分类
  3. jquery
JQuery文档处理
System
2024-08-17
所有,jquery

在jQuery中，我们可以使用各种方法来处理HTML文档中的元素。以下是一些常见的方法：

  1. 创建元素：



var newDiv = $("<div>Hello, World!</div>");
  1. 插入元素：



$("body").append(newDiv); // 在body的末尾插入新的div
$("#myList").prepend($("<li>Prepended item</li>")); // 在id为myList的元素的开头插入新的列表项
  1. 删除元素：



$("#myDiv").remove(); // 删除id为myDiv的元素
  1. 元素：



var clonedDiv = $("#myDiv").clone(); // 克隆id为myDiv的元素
  1. 替换元素：



$("#myDiv").replaceWith(newDiv); // 用新的div替换id为myDiv的元素
  1. 设置或获取元素的文本内容：



$("#myDiv").text("New text content"); // 设置id为myDiv的元素的文本内容
var textContent = $("#myDiv").text(); // 获取id为myDiv的元素的文本内容
  1. 设置或获取元素的HTML内容：



$("#myDiv").html("<p>New HTML content</p>"); // 设置id为myDiv的元素的HTML内容
var htmlContent = $("#myDiv").html(); // 获取id为myDiv的元素的HTML内容
  1. 设置或获取元素的属性：



$("#myImage").attr("src", "newImage.jpg"); // 设置id为myImage的元素的src属性
var srcAttribute = $("#myImage").attr("src"); // 获取id为myImage的元素的src属性
  1. 添加或移除元素的类：



$("#myDiv").addClass("myClass"); // 为id为myDiv的元素添加类
$("#myDiv").removeClass("myClass"); // 从id为myDiv的元素移除类
  1. 显示或隐藏元素：



$("#myDiv").show(); // 显示id为myDiv的元素
$("#myDiv").hide(); // 隐藏id为myDiv的元素
  1. 获取或设置元素的CSS样式：



$("#myDiv").css("color", "blue"); // 设置id为myDiv的元素的文本颜色为蓝色
var color = $("#myDiv").css("color"); // 获取id为myDiv的元素的文本颜色

这些是jQuery中常用的一些文档处理方法，可以根据需要选择合适的方法来处理HTML文档。

- 阅读更多 -
jQuery借鉴layui实现可搜索下拉列表(有值才显示筛选出的列表)
System
2024-08-17
所有,jquery

以下是一个使用jQuery和layui实现的可搜索下拉列表的简单示例。这个示例展示了如何在用户输入搜索条件后，动态筛选出下拉列表中的选项并显示。




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery借鉴layui实现可搜索下拉列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css"  media="all">
</head>
<body>
 
<div class="layui-form">
    <select id="searchable-select" lay-filter="test">
        <option value="">选择或搜索</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
        <!-- 更多选项 -->
    </select>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
$(document).ready(function(){
    var $select = $('#searchable-select');
 
    layui.use(['form', 'laysearch'], function(){
        var form = layui.form;
        var laysearch = layui.laysearch;
 
        // 初始化搜索框
        laysearch.render({
            elem: $select[0], // 指定原始select元素
            filter: function(res){
                // 过滤选项
                var matchMod = new RegExp(res, 'i');
                $select.find('option').each(function(){
                    var text = $(this).text();
                    if(matchMod.test(text)){
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                form.render('select'); // 更新 layui 下拉框
            }
        });
 
        // 表单提交事件监听
        form.on('select(test)', function(data){
            console.log(data.value); // 获取选中的值
        });
    });
});
</script>
 
</body>
</html>

在这个示例中，我们使用了layui的laysearch模块来创建一个搜索框，它会根据用户的输入来过滤原始的select元素中的选项。每次输入变更时，都会执行filter函数，并通过正则表达式来匹配选项文本。匹配的选项将被显示，而不匹配的选项则会被隐藏。最后，使用form.render('select')更新下拉框的显示，以反映筛选后的结果。

- 阅读更多 -
jq 动画
System
2024-08-17
所有,jquery

jQuery 提供了一系列的动画方法，例如 fadeIn(), fadeOut(), slideDown(), slideUp(), animate() 等，可以用来制作各种动画。

以下是一些使用 jQuery 制作的简单动画示例：

  1. 淡入淡出动画：



$("#element").fadeIn(1000); // 淡入效果，1000毫秒完成
$("#element").fadeOut(1000); // 淡出效果，1000毫秒完成
  1. 下滑上去动画：



$("#element").slideDown(1000); // 下滑效果，1000毫秒完成
$("#element").slideUp(1000); // 上去效果，1000毫秒完成
  1. 自定义动画：



$("#element").animate({
    opacity: 0.5, // 半透明效果
    height: '+=100px', // 高度增加100px
    width: '100px' // 宽度设置为100px
}, 1000); // 1000毫秒完成
  1. 连续动画：



$("#element")
    .fadeIn(1000)
    .fadeOut(1000)
    .slideDown(1000)
    .slideUp(1000);
  1. 循环动画：



function animateLoop() {
    $("#element")
        .fadeOut(1000)
        .fadeIn(1000);
}
 
setInterval(animateLoop, 2000); // 每2000毫秒执行一次动画循环

确保在使用这些动画之前，已经在页面中包含了 jQuery 库。

- 阅读更多 -
jQuery UI简单的讲解
System
2024-08-17
所有,jquery

jQuery UI是jQuery的一个扩展库，主要提供了一系列UI方面的功能，例如交互式组件(对话框、拖拽、放置)、视觉效果(动画、改变大小、旋转)等。

以下是一个简单的使用jQuery UI的示例，使用了Draggable和Droppable功能，实现了一个简单的拖拽排序功能：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>这是可拖拽的元素</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>这是放置的区域</p>
</div>
 
<script>
$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .find("p")
        .html("已放置！");
    }
  });
});
</script>
 
</body>
</html>

在这个例子中，我们首先引入了必要的jQuery和jQuery UI库。然后，我们创建了两个div元素，一个用于拖拽，另一个作为放置的目标。在JavaScript代码块中，我们使用jQuery选择器选中这些元素，并分别调用.draggable()和.droppable()方法来使它们变为可拖拽和可放置的。当元素被放置在#droppable上时，我们更改了#droppable里p标签的内容来表示元素已被放置。

- 阅读更多 -
jQuery简单小案例，自学必看，前端app开发
System
2024-08-17
所有,jquery

以下是一个使用jQuery实现的简单小案例，展示了如何点亮一个LED灯。

HTML部分:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LED灯控制</title>
    <style>
        #led {
            width: 100px;
            height: 100px;
            background-color: #000;
            border-radius: 50%;
            position: relative;
            top: 20px;
            left: 20px;
        }
        .on {
            background-color: #ff0;
        }
        .off {
            background-color: #000;
        }
    </style>
</head>
<body>
    <div id="led"></div>
    <button id="btn-on">开启</button>
    <button id="btn-off">关闭</button>
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分 (jQuery):




$(document).ready(function() {
    var $led = $('#led');
 
    $('#btn-on').click(function() {
        $led.addClass('on').removeClass('off');
    });
 
    $('#btn-off').click(function() {
        $led.addClass('off').removeClass('on');
    });
});

这个例子中，我们有一个LED灯的HTML元素和两个按钮，一个用于打开LED灯，另一个用于关闭。我们使用jQuery的click事件处理器来处理按钮点击事件，并使用addClass和removeClass方法来切换LED灯的状态（亮或灭）。

- 阅读更多 -
jq引入插件实现数字滚动
System
2024-08-17
所有,jquery

要使用jQuery插件实现数字滚动，可以使用jquery-countup库。以下是如何使用jquery-countup的简单示例：

  1. 首先，确保你已经在你的项目中包含了jQuery库和jquery.countup.js。你可以通过CDN引入它们：



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>
  1. 在HTML中，为想要滚动显示数字的元素添加一个带有data-countup属性的元素：



<div id="number">8425</div>
  1. 使用jQuery初始化countUp：



$(document).ready(function() {
  var options = {
    useEasing: true,
    useGrouping: true,
    separator: ',',
    decimal: '.',
  };
  
  var demo = new countUp.CountUp('number', 0, 8425, 0, 2.5, options);
  if (!demo.error) {
    demo.start();
  } else {
    console.error(demo.error);
  }
});

在上面的代码中，countUp.CountUp构造函数的第一个参数是元素的ID，第二个参数是数字滚动的起始值，第三个参数是目标值，后面的参数是配置选项。调用start方法后，数字就会从起始值滚动到目标值。

- 阅读更多 -
jQueryUI 1.10：jQuery 的用户界面库
System
2024-08-17
所有,jquery

jQuery UI是一套基于jQuery的用户界面扩展插件，它提供了丰富的Widget、交互式UI元素、视觉效果和主题等。

以下是使用jQuery UI的一个简单示例，展示了如何使用其拖放功能（Draggable）和放置功能（Droppable）：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>拖动我!</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>放置我!</p>
</div>
 
<script>
$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .find("p")
        .html("放置成功!");
    }
  });
});
</script>
 
</body>
</html>

在这个例子中，我们创建了两个div元素，一个可以拖动（#draggable），另一个可以接受拖动元素并在拖动后改变其内容（#droppable）。通过调用jQuery的.draggable()和.droppable()方法，我们分别使得#draggable元素可拖动，并使得#droppable元素可以接受拖动物品并在物品放置后触发一个函数。

- 阅读更多 -
解决jquery-1.11.0.js安全漏洞
System
2024-08-17
所有,jquery

解释：

jQuery 1.11.0 版本中存在一个安全漏洞，该漏洞可能允许攻击者执行跨站点脚本 (XSS) 攻击。具体来说，jQuery.parseXML 函数在解析 XML 字符串时使用了浏览器内置的 DOMParser，但没有对 XML 内容进行足够的验证或清理，这可能允许注入恶意代码。

解决方法：

  1. 升级到 jQuery 的一个安全版本，比如 1.12.0 或更高版本，因为这些版本修复了该漏洞。
  2. 如果必须使用 1.11.0 版本，可以对输入进行清理，避免将不受信任的输入直接插入到 XML 中。

示例代码（升级 jQuery 版本）：




<!-- 替换旧版本的 jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

如果选择不升级，可以在使用 jQuery.parseXML 时进行输入清理：




var xmlString = someInput; // 假设这是需要解析的 XML 字符串
xmlString = xmlString.replace(/[^\x20-x7F]/g, ''); // 清理非 ASCII 字符
var xmlDoc = jQuery.parseXML(xmlString);

请注意，输入清理并不能保证完全防止 XSS 攻击，因为攻击者可以使用其他方式注入恶意代码。因此，最佳做法是始终使用最新的、经过安全审核的库版本。

- 阅读更多 -
前端提高篇：jQuery的属性与特性，prop与attr
System
2024-08-17
所有,jquery

在jQuery中，prop()和attr()是用于获取和设置元素属性的两个主要方法。prop()主要用于处理元素自带的属性，如checked、selected、disabled等，而attr()用于获取和设置HTML属性，如class、id、name等。

  1. prop()方法：

    • 获取属性的值：$(selector).prop('attribute')
    • 设置属性的值：$(selector).prop('attribute', value)

  2. attr()方法：

    • 获取属性的值：$(selector).attr('attribute')
    • 设置属性的值：$(selector).attr('attribute', value)

示例代码：




<input type="checkbox" id="checkbox1" checked>



// 获取checkbox是否被选中
var isChecked = $('#checkbox1').prop('checked'); // true 或 false
 
// 设置checkbox为选中状态
$('#checkbox1').prop('checked', true);
 
// 获取checkbox的id属性
var id = $('#checkbox1').attr('id'); // checkbox1
 
// 设置checkbox的id属性
$('#checkbox1').attr('id', 'newId');

在上述示例中，prop('checked')用于获取checkbox是否被选中，而prop('checked', true)用于设置checkbox为选中状态。attr('id')用于获取checkbox的id属性，而attr('id', 'newId')用于设置checkbox的id属性。

总结：prop()用于处理元素的属性，如checked、selected、disabled等，而attr()用于处理元素的HTML属性，如class、id、name等。

- 阅读更多 -
jQuery中如何定义数组
System
2024-08-17
所有,jquery

在jQuery中，定义数组的方式与在原生JavaScript中一样。你可以使用方括号[]来定义一个空数组，或者直接用逗号分隔的值列表来填充数组。

以下是一些示例：




// 定义一个空数组
var emptyArray = [];
 
// 定义一个包含元素的数组
var fruits = ['apple', 'banana', 'cherry'];
 
// 定义一个数组，包含不同类型的元素
var mixedArray = [1, 'two', { three: true }];
 
// 使用jQuery定义数组，与原生JavaScript一样
var $emptyArray = [];
var $fruits = ['apple', 'banana', 'cherry'];
var $mixedArray = [1, 'two', { three: true }];

请注意，$前缀通常在jQuery中用于变量名，以区分原生JavaScript变量，但这并不是定义数组的一部分，数组的定义方式与语法完全一样，无论是否带有$前缀。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号