分类 jquery 下的文章

Visualize and Interpret Complex Data in jQuery

2024-08-08




<!DOCTYPE html>
<html>
<head>
    <title>Data Visualization</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="chart-container">
        <!-- 图表容器 -->
    </div>
 
    <script type="text/javascript">
        // 假设我们有一个数据集
        var data = [
            { name: "Alice", value: 70 },
            { name: "Bob", value: 85 },
            { name: "Charlie", value: 55 },
            // ... 更多数据
        ];
 
        // 使用jQuery动态生成图表
        $(document).ready(function() {
            var $container = $('#chart-container');
            $.each(data, function(index, item) {
                $container.append('<div class="bar" style="height: ' + item.value + 'px;"><p>' + item.name + ': ' + item.value + '</p></div>');
            });
        });
    </script>
</body>
</html>

style.css:




#chart-container {
    width: 300px;
    height: 300px;
    position: relative;
}
 
.bar {
    width: 20px;
    background-color: #555;
    border: 1px solid #000;
    float: left;
    margin: 1px;
    text-align: center;
}
 
.bar p {
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

这个简单的例子展示了如何使用jQuery和CSS来创建一个基本的条形图表。在实际应用中，你可能需要使用更复杂的图表库，如Chart.js或Google Charts，但这个例子展示了如何用jQuery和CSS动态生成一个简单的条形图表。

- 阅读更多 -

jQuery之设置获取文本内容text()获取元素的文本

System

2024-08-08

所有,jquery

在jQuery中，text() 方法用于获取或设置匹配元素集合中每个元素的文本内容。当不提供参数时，该方法会获取第一个匹配元素的文本内容。当提供一个字符串参数时，该方法会设置所有匹配元素的文本内容为该字符串。

获取文本内容：




$(selector).text();

设置文本内容：




$(selector).text(content);

实例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery text() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="example">Hello, <b>World</b>!</div>
 
<script>
$(document).ready(function(){
  // 获取文本内容
  var textContent = $('#example').text();
  console.log(textContent); // 输出: Hello, World!
 
  // 设置文本内容
  $('#example').text('New content');
});
</script>
 
</body>
</html>

在这个例子中，当页面加载完成时，我们首先使用 $('#example').text() 获取了 div 元素的文本内容，然后通过 .text('New content') 将其设置为新的文本内容 "New content"。

- 阅读更多 -

JQuery前端操作JSON浅谈

System

2024-08-08

所有,jquery

在前端操作JSON对象，主要涉及到解析和序列化两个过程。

JSON解析：

JSON字符串转换为JavaScript对象。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var obj = $.parseJSON(jsonString);
alert( obj.name ); // John

JSON序列化：

JavaScript对象转换为JSON字符串。




var obj = {name:"John", age:30, city:"New York"};
var jsonString = JSON.stringify(obj);
alert(jsonString); // {"name":"John", "age":30, "city":"New York"}

遍历JSON对象：




var obj = {name:"John", age:30, city:"New York"};
$.each(obj, function(key, value) {
    alert(key + " : " + value);
});

添加和删除JSON对象属性：




var obj = {name:"John", age:30, city:"New York"};
obj.email = "john@example.com"; // 添加属性
delete obj.age; // 删除属性

检查JSON对象中是否有特定的属性或元素：




var obj = {name:"John", age:30, city:"New York"};
"name" in obj; // true
"email" in obj; // false

合并两个JSON对象：




var obj1 = {name:"John", age:30};
var obj2 = {city:"New York"};
var obj3 = $.extend({}, obj1, obj2); // obj3 为合并后的对象

以上是使用jQuery进行JSON操作的基本方法，实际应用中可以根据需要选择合适的方法。

- 阅读更多 -

jQuery 元素选择器集合

System

2024-08-08

所有,jquery

在jQuery中，元素选择器是一种基于CSS选择器语法来选择HTML元素的方法。jQuery提供了丰富的选择器，可以用来选取特定的DOM元素。

以下是一些常用的jQuery元素选择器的示例：

选择所有的元素：




$('p').doSomething();

选择id为myId的元素：




$('#myId').doSomething();

选择所有的class为myClass的元素：




$('.myClass').doSomething();

选择所有的<div>元素中的元素：




$('div p').doSomething();

选择直接子元素<ul>下的所有<li>元素：




$('ul > li').doSomething();

选择所有同级的元素：




$('p + p').doSomething();

选择所有后面的兄弟元素：




$('p ~ p').doSomething();

选择第一个元素：




$('p:first').doSomething();

选择最后一个元素：




$('p:last').doSomething();

选择索引为1的元素：




$('p:eq(1)').doSomething();

选择所有可见的元素：




$('p:visible').doSomething();

选择所有的元素，它们具有myAttr属性：




$('p[myAttr]').doSomething();

选择所有元素，它们的myAttr属性等于myValue：




$('p[myAttr="myValue"]').doSomething();

选择所有<input>元素，它们的type属性为text：




$('input[type="text"]').doSomething();

在这些示例中，.doSomething()是一个占位符，代表你想要执行的具体方法。实际使用时，你需要将.doSomething()替换为实际的方法。

- 阅读更多 -

JQuery动态加载select下拉列表添加option数据代码参考

System

2024-08-08

所有,jquery




// 假设我们有一个空的select元素
<select id="mySelect"></select>
 
// 使用jQuery动态添加option
$.ajax({
    url: 'your-data-source.php', // 数据源URL
    type: 'GET', // 请求方法
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(data) {
        // 假设返回的数据是一个对象数组，每个对象包含id和name属性
        var select = $('#mySelect');
        $.each(data, function(key, value) {
            select.append($('<option></option>').attr('value', value.id).text(value.name));
        });
    }
});

这段代码展示了如何使用jQuery和AJAX从服务器获取数据，并动态地将这些数据作为option元素添加到select元素中。这是一个常见的模式，对于需要从服务器获取数据并动态更新表单元素的场景非常有用。

- 阅读更多 -

jQuery 实现小球撞击动画

System

2024-08-08

所有,jquery

以下是一个使用jQuery实现小球碰撞动画的简单示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ball Collision</title>
<style>
  .ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    left: 50px;
  }
</style>
</head>
<body>
 
<div class="ball" id="ball1"></div>
<div class="ball" id="ball2"></div>
 
<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() {
  const BALL_RADIUS = 25;
  const BALL1_INIT_POS = { x: 50, y: 50 };
  const BALL2_INIT_POS = { x: 150, y: 50 };
  const SPEED = 5;
 
  function moveBall(ball, newPos) {
    $(ball).css({
      top: newPos.y + 'px',
      left: newPos.x + 'px'
    });
  }
 
  function checkCollision(ball1, ball2) {
    const pos1 = $(ball1).position();
    const pos2 = $(ball2).position();
    const width1 = $(ball1).width();
    const width2 = $(ball2).width();
    const distX = Math.abs(pos1.left - pos2.left);
    const distY = Math.abs(pos1.top - pos2.top);
    const radiusTotal = BALL_RADIUS + BALL_RADIUS;
 
    if (distX < (width1 + width2) / 2 && distY < (width1 + width2) / 2) {
      const angle = Math.atan2(pos2.top - pos1.top, pos2.left - pos1.left);
      const speed1 = { x: SPEED * Math.cos(angle), y: SPEED * Math.sin(angle) };
      const speed2 = { x: -SPEED * Math.cos(angle), y: -SPEED * Math.sin(angle) };
 
      moveBall(ball1, { x: pos1.left + speed1.x, y: pos1.top + speed1.y });
      moveBall(ball2, { x: pos2.left + speed2.x, y: pos2.top + speed2.y });
    }
  }
 
  function animate() {
    moveBall('#ball1', { x: BALL1_INIT_POS.x += SPEED, y: BALL1_INIT_POS.y });
    moveBall('#ball2', { x: BALL2_INIT_POS.x -= SPEED, y: BALL2_INIT_POS.y });
    checkCollision('#ball1', '#ball2');
    requestAnimationFrame(animate);
  }
 
  animate();
});

这段代码会创建两个小球，并且使它们在碰撞时进行碰撞动画。每次调用animate函数时，小球的位置会更新，并且调用checkCollision函数检查小球之间是否有碰撞。如果有碰撞，小球会反弹并继续移动。这个示例假设了没有其他物体与小球碰撞，并且没有考虑重力或其他物理效果。

- 阅读更多 -

jQuery 实现显示与隐藏效果，吊打面试官系列

System

2024-08-08

所有,jquery




// 引入jQuery库
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
// 显示和隐藏效果函数
function toggleEffect(selector, effect, duration) {
    $(selector).toggle(function() {
        $(this).show(effect, {}, duration);
    }, function() {
        $(this).hide(effect, {}, duration);
    });
}
 
// 使用示例
$(document).ready(function() {
    // 为id为"myDiv"的元素添加点击事件
    $("#myDiv").click(function() {
        // 使用"slide"效果，持续时间为500毫秒来切换显示和隐藏
        toggleEffect("#myDiv", "slide", 500);
    });
});

这段代码定义了一个toggleEffect函数，它接受目标元素的选择器、显示或隐藏时使用的效果以及动画的持续时间作为参数。函数内部使用了jQuery的toggle方法来在显示和隐藏之间切换。当用户点击目标元素时，效果会被触发。这是一个简单的例子，展示了如何使用jQuery实现显示和隐藏效果的函数。

- 阅读更多 -

基于jquery的web分页实现

System

2024-08-08

所有,jquery




$(document).ready(function() {
    var currentPage = 1; // 当前页面
    var pageSize = 10; // 每页显示数量
    var totalRecords = 0; // 总记录数
    var totalPages = 0; // 总页数
 
    // 获取数据
    function fetch_data(page) {
        $.ajax({
            url: "server.php", // 服务器端脚本
            method: "GET", // 请求方法
            data: { page: page, size: pageSize }, // 发送到服务器的数据
            dataType: "json", // 服务器响应的数据类型
            success: function(response) {
                // 更新页面上的数据
                $('#table_data').html(response.data); // 假设response.data是服务器返回的HTML数据
 
                // 更新分页信息
                totalRecords = response.totalRecords; // 更新总记录数
                totalPages = Math.ceil(totalRecords / pageSize); // 计算总页数
                buildPagination(page); // 重新构建分页
            }
        });
    }
 
    // 构建分页
    function buildPagination(currentPage) {
        var html = '';
        for (var i = 1; i <= totalPages; i++) {
            html += '<a href="#" class="pagination-link" data-page="' + i + '">' + i + '</a>';
        }
        $('#pagination').html(html);
        $('#pagination .pagination-link[data-page="' + currentPage + '"]').addClass('active');
    }
 
    // 分页点击事件
    $('#pagination').on('click', '.pagination-link', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        currentPage = page;
        fetch_data(page);
    });
 
    // 初始加载第一页数据
    fetch_data(currentPage);
});

这段代码示例展示了如何使用jQuery来实现Web分页功能。它首先定义了一些变量来跟踪当前页面、每页显示的记录数、总记录数和总页数。然后，它实现了一个fetch_data函数，该函数通过Ajax请求从服务器获取数据，并在成功获取后更新页面上的数据和分页信息。最后，它绑定了分页点击事件，当用户点击分页链接时，会加载相应页面的数据。

- 阅读更多 -

Web建站之jQuery进阶篇 jQuery自定义插件应用开发

System

2024-08-08

所有,jquery




// 定义一个简单的jQuery插件，用于为元素添加一个点击事件，并在控制台打印消息
(function($){
    $.fn.extend({
        // 插件名称
        logClick: function(){
            // 遍历匹配的元素，并为它们添加点击事件处理程序
            return this.each(function(){
                $(this).click(function(){
                    console.log('元素被点击了！');
                    // 如果需要，可以在这里添加其他的点击行为
                });
            });
        }
    });
})(jQuery);
 
// 使用插件的例子
$(document).ready(function(){
    // 为所有的button元素添加logClick插件
    $('button').logClick();
});

这个jQuery插件定义了一个logClick方法，当按钮被点击时，在控制台打印一条消息。这是一个很好的入门级插件示例，展示了如何创建一个简单的jQuery插件并使用它。

- 阅读更多 -

jQuery UI widget源码解析

System

2024-08-08

所有,jquery




// 假设我们有一个简单的jQuery UI Widget，名为myWidget
(function( $ ) {
 
    $.widget( "custom.myWidget", {
 
        // 初始化方法
        _create: function() {
            this.element.text( "Hello, World!" );
        },
 
        // 更新部件的选项
        _setOption: function( key, value ) {
            this._super( key, value );
            if ( key === "disabled" ) {
                this.element( this.options.disabled ? "disable" : "enable" );
            }
        },
 
        // 销毁部件的方法
        destroy: function() {
            this.element.removeData( "custom.myWidget" );
            this.element.unbind( ".custom.myWidget" );
            this.element.removeAttr( "aria-disabled" );
            this.element.removeClass( "custom-myWidget-disabled ui-state-disabled" );
        }
    });
 
})( jQuery );
 
// 使用方法
$( "#myElement" ).myWidget();

这个简单的代码示例展示了如何定义一个基本的jQuery UI部件，它会将指定元素的文本设置为"Hello, World!"。它还展示了如何实现部件的初始化、选项设置和销毁方法。这是学习如何创建自定义jQuery UI部件的一个很好的起点。

- 阅读更多 -