标签 jquery 下的文章

2024-08-08

以下是实现Tab菜单切换内容的原生JavaScript和jQuery版本的代码示例：

原生JavaScript版本：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab Menu in JavaScript</title>
<style>
  .tab-content { display: none; }
  .tab-content.active { display: block; }
</style>
</head>
<body>
 
<div class="tabs">
  <button class="tab" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tab" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tab" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
 
<div id="tab1" class="tab-content active">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>
 
<div id="tab2" class="tab-content">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</div>
 
<div id="tab3" class="tab-content">
  <h3>Tab 3</h3>
  <p>This is tab 3 content.</p>
</div>
 
<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].className = tabcontent[i].className.replace("active", "");
  }
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace("active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
 
</body>
</html>

jQuery版本：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab Menu in jQuery</title>
<style>
  .tab-content { display: none; }
  .tab-content.active { display: block; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 
<div class="tabs">
  <button class="tab" data-tab="tab1">Tab 1</button>
  <button class="tab" data-tab="tab2">Tab 2</button>
  <button class="tab" data-tab="tab3">Tab 3</button>
</div>
 
<div id="tab1" class="tab-content active">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>
 
<div id="tab2" class="tab-content">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</

- 阅读更多 -

jQuery的层次选择器

System

2024-08-08

所有,jquery

在jQuery中，层级选择器用于选择特定的子元素或后代元素。常用的层级选择器包括以下几种：

子选择器（Child Selector）>：选择指定父元素的直接子元素。
后代选择器（Descendant Selector）（空格）：选择指定父元素的所有后代元素（不仅限于子元素）。
相邻兄弟选择器（Adjacent Sibling Selector）+：选择紧随另一个元素之后的元素，且两者有相同父元素。
一般兄弟选择器（General Sibling Selector）~：选择同一父元素下的所有某个元素之后的兄弟元素。

以下是这些层级选择器的实例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery层级选择器示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="grandchild">
    <span>孙元素1</span>
    <span>孙元素2</span>
  </div>
  <div class="child">子元素3</div>
  <div class="sibling">兄弟元素1</div>
  <div class="adjoining-sibling">紧跟兄弟元素1</div>
  <div class="general-sibling">一般兄弟元素1</div>
</div>
 
<script>
$(document).ready(function() {
  // 子选择器
  $(".child > span").css("color", "red"); // 选中.child的直接子元素span
 
  // 后代选择器
  $("#parent .grandchild").css("font-weight", "bold"); // 选中#parent的所有后代元素.grandchild
 
  // 相邻兄弟选择器
  $(".sibling + .adjoining-sibling").css("text-decoration", "underline"); // 选中.sibling紧跟的.adjoining-sibling元素
 
  // 一般兄弟选择器
  $(".adjoining-sibling ~ .general-sibling").css("text-transform", "uppercase"); // 选中.adjoining-sibling后的所有.general-sibling元素
});
</script>
 
</body>
</html>

在这个例子中，我们选择了特定的子元素、后代元素、紧跟的兄弟元素和一般的兄弟元素，并对它们应用了不同的CSS样式。

System

2024-08-08

所有,jquery




<!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请求从服务器获取数据，并在成功获取后更新页面上的数据和分页信息。最后，它绑定了分页点击事件，当用户点击分页链接时，会加载相应页面的数据。

- 阅读更多 -