标签 jquery 下的文章

2024-08-19

jQuery是一个快速、简洁的JavaScript框架，主要用于简化JavaScript与DOM之间的交互。以下是一个简化的jQuery结构示例，它展示了如何使用jQuery选择器和事件处理函数：




<!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>
    <script>
        $(document).ready(function() {
            // 当按钮被点击时执行的函数
            $('#myButton').click(function() {
                alert('按钮被点击了！');
            });
        });
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

这段代码的核心功能是当页面加载完成后，为ID为myButton的按钮元素添加点击事件处理程序。当按钮被点击时，会弹出一个警告框。这个示例展示了jQuery的基本用法，包括如何选择DOM元素以及如何添加事件监听器。

System

2024-08-19

所有,jquery

打地鼠游戏是一个经典的游戏，我们可以使用JavaScript和jQuery来制作。以下是一个简单的实现：

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>打地鼠游戏</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS部分（style.css）:




#game-container {
    width: 500px;
    height: 500px;
    position: relative;
    user-select: none;
}
 
#game-board {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
.mouse {
    width: 20px;
    height: 20px;
    background-color: #333;
    position: absolute;
    border-radius: 50%;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    const boardSize = 25;
    let gameBoard = $('#game-board');
    let mice = [];
 
    function createBoard() {
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                $('<div>', { class: 'mouse' }).css({
                    top: i * 20,
                    left: j * 20
                }).appendTo(gameBoard);
            }
        }
        mice = $('.mouse');
    }
 
    function initGame() {
        createBoard();
        gameBoard.on('click', '.mouse', function() {
            $(this).hide();
            mice = mice.filter(function(index, mouse) {
                return $(mouse).is(':visible');
            });
            if (mice.length === 0) {
                alert('你赢了！');
                initGame();
            }
        });
    }
 
    initGame();
});

这个游戏的实现包括了创建游戏区域和打地鼠的逻辑。每次点击鼠标，鼠标图标就会消失，如果所有鼠标都被打掉，会弹出警告框提示玩家赢得游戏，并重新初始化游戏。这个例子简单展示了如何使用jQuery来操作DOM元素，并添加事件监听器，实现游戏的交互功能。

System

2024-08-19

所有,jquery

jQuery noConflict() 方法：

jQuery 的 noConflict() 方法用于释放 $ 标识符的控制权，这样其他库就可以使用 $ 标识符。




// 使用 jQuery 的 noConflict() 方法，并将 jQuery 的控制权交给新的变量 jq
var jq = jQuery.noConflict();
 
// 使用 jq 来代替 $ 进行 jQuery 操作
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍在运行！");
    });
});

运用 JSONP：

JSONP（JSON with Padding）是一种跨域请求数据的方式，可以让你在不同域的服务器上获取数据。




// 定义一个用于接收数据的函数
function handleResponse(data) {
    console.log(data);
}
 
// 创建一个 script 元素，并设置其 src 属性为跨域请求的 URL
var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
 
// 将 script 元素添加到文档中
document.body.appendChild(script);

在这个例子中，我们假设 http://example.com/api 是一个跨域的 API 接口，它会根据传递的 callback 参数调用 handleResponse 函数，并将数据作为参数传递。这样我们就可以在不违反同源策略的情况下获取到跨域的数据。

- 阅读更多 -

html+css+jquery实现一个优雅的分页条

System

2024-08-19

所有,jquery

以下是一个使用HTML、CSS和jQuery实现的优雅分页条的示例代码：

HTML:




<div id="pagination">
  <a href="#" class="page-link prev-page">&laquo; Prev</a>
  <span class="current-page">1</span>
  <a href="#" class="page-link next-page">Next &raquo;</a>
</div>

CSS:




#pagination {
  text-align: center;
  margin-top: 20px;
}
 
.page-link {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}
 
.page-link:hover {
  background-color: #f0f0f0;
}

jQuery:




$(document).ready(function() {
  $('.next-page').click(function(e) {
    e.preventDefault();
    var currentPage = parseInt($('.current-page').text());
    var nextPage = currentPage + 1;
    $('.current-page').text(nextPage);
    // 这里可以添加更多的逻辑，比如发起AJAX请求获取数据等
  });
 
  $('.prev-page').click(function(e) {
    e.preventDefault();
    var currentPage = parseInt($('.current-page').text());
    var prevPage = currentPage - 1;
    if (prevPage > 0) {
      $('.current-page').text(prevPage);
      // 这里可以添加更多的逻辑，比如发起AJAX请求获取数据等
    }
  });
});

这个分页条支持翻页功能，点击“Prev”会后退到上一页，点击“Next”会前进到下一页。分页条的当前页面数会实时更新。这个示例只是一个基础版本，实际应用中可能需要添加更多功能，比如处理页码边界、发送AJAX请求获取数据等。

- 阅读更多 -

【1.0】jQuery引入

System

2024-08-19

所有,jquery

在HTML文件中引入jQuery库，可以通过本地文件路径或CDN链接的方式实现。以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 引入示例</title>
    <!-- 引入本地jQuery库 -->
    <!-- <script src="path/to/your/jquery.min.js"></script> -->
 
    <!-- 引入CDN jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        // 确保DOM完全加载后执行代码
        $(document).ready(function(){
            // 示例代码：点击按钮后隐藏
            $('#myButton').click(function(){
                $('#myDiv').hide();
            });
        });
    </script>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>
    <button id="myButton">点击我隐藏方框</button>
</body>
</html>

在上述代码中，我们通过<script>标签引入了jQuery库。可以通过本地路径引入（注释掉的行），或者使用CDN方式引入。在<script>内部编写的代码将在页面加载时执行，并使用jQuery库来处理事件。

- 阅读更多 -

优化jQuery性能的多种方法（整理总结）

System

2024-08-19

所有,ajax

选择最合适的选择器：
- 使用ID选择器（$('#id')）优于类选择器（$('.class')）。
- 使用子选择器（$('#parent > .child')）优于后代选择器（$('#parent .child')）。

缓存jQuery对象：




var $parent = $('#parent');
var $child = $parent.find('.child');

避免频繁使用jQuery链式调用：




// 不推荐
$('#parent').find('.child').click(function() {
    // ...
});
 
// 推荐
var $child = $('#parent').find('.child');
$child.click(function() {
    // ...
});

使用事件委托代替直接绑定：




$('#parent').on('click', '.child', function() {
    // ...
});

避免在选择器中使用JavaScript表达式：




// 不推荐
$('div[data-custom="' + variable + '"]').click(function() {
    // ...
});
 
// 推荐
$('div').filter(function() {
    return $(this).data('custom') === variable;
}).click(function() {
    // ...
});

避免在循环中使用jQuery选择器：




var elements = [];
for (var i = 0; i < 10; i++) {
    elements.push($('#element' + i));
}

使用.data()方法存取数据，而不是attr()：




$('#myElement').data('key', 'value'); // 设置
var value = $('#myElement').data('key'); // 获取

避免使用全局选择器：




jQuery('selector'); // 不推荐
$ ('selector'); // 推荐

避免在循环中使用.append()等DOM操作：




var html = '';
for (var i = 0; i < 10; i++) {
    html += '<div id="element' + i + '"></div>';
}
$('#parent').html(html);

使用原生JavaScript方法替代jQuery方法：
- 对于类名切换，使用element.classList.add/remove。
- 对于样式设置，使用element.style.property。
- 对于属性获取，使用element.getAttribute。

这些方法可以减少不必要的DOM操作和提升性能。

- 阅读更多 -

JQuery中的事件对象，阿里一线架构师技术图谱

System

2024-08-19

所有,jquery

在JQuery中，事件对象是一个包含有关事件的详细信息的对象。你可以通过传递一个参数到事件处理函数中来访问事件对象。在JQuery中，事件对象通常被命名为event或者evt。

以下是一些使用JQuery事件对象的常见方法：

阻止事件冒泡：




$("#button").click(function(event) {
    event.stopPropagation();
});

阻止默认事件行为：




$("#button").click(function(event) {
    event.preventDefault();
});

获取事件触发时的鼠标位置：




$("#button").click(function(event) {
    var x = event.clientX;
    var y = event.clientY;
});

获取鼠标的滚动位置：




$("#button").click(function(event) {
    var scrollTop = event.pageY;
    var scrollLeft = event.pageX;
});

获取按键的ASCII码：




$("#input").keypress(function(event) {
    var keyCode = event.which;
});

获取鼠标按钮的信息：




$("#button").mousedown(function(event) {
    var button = event.which;
});

获取事件绑定的元素：




$("#button").click(function(event) {
    var target = $(event.target);
});

获取事件绑定的元素的索引：




$("li").click(function(event) {
    var index = $("li").index(event.target);
});

以上都是JQuery中的事件对象的一些常用方法，可以根据实际需求使用。

- 阅读更多 -

JQuery实现小米商城轮播图

System

2024-08-19

所有,jquery

以下是使用jQuery实现一个简单小米商城轮播图的示例代码：

HTML部分：




<div id="banner">
  <div class="banner-item"><img src="image1.jpg"></div>
  <div class="banner-item"><img src="image2.jpg"></div>
  <div class="banner-item"><img src="image3.jpg"></div>
  <!-- 更多轮播图项 -->
</div>
<div id="banner-dots">
  <span class="dot" data-index="0"></span>
  <span class="dot" data-index="1"></span>
  <span class="dot" data-index="2"></span>
  <!-- 更多点 -->
</div>

CSS部分：




#banner {
  position: relative;
  overflow: hidden;
  height: 400px; /* 根据实际情况设置高度 */
}
.banner-item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
.banner-item img {
  width: 100%;
  height: 100%;
}
#banner-dots {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 5px;
  cursor: pointer;
}
.dot.active {
  background-color: #f00;
}

jQuery部分：




$(document).ready(function() {
  var $bannerItems = $('.banner-item');
  var $dots = $('#banner-dots .dot');
  var currentIndex = 0;
 
  function goToSlide(index) {
    currentIndex = index;
    $bannerItems.eq(currentIndex).show().siblings('.banner-item').hide();
    $dots.eq(currentIndex).addClass('active').siblings('.dot').removeClass('active');
  }
 
  function nextSlide() {
    goToSlide((currentIndex + 1) % $bannerItems.length);
  }
 
  function autoPlay() {
    setInterval(nextSlide, 3000); // 每3秒自动播放下一张图片
  }
 
  $dots.on('click', function() {
    goToSlide($(this).data('index'));
  });
 
  autoPlay(); // 启动自动播放
});

这段代码实现了一个简单的小米商城轮播图，包括图片切换和点点滑动指示。你可以根据实际需求进一步完善，比如添加动画效果、停止自动播放等功能。

System

2024-08-19

所有,jquery

在jQuery中，.remove() 方法用于从DOM中移除匹配的元素集合。如果你不想彻底删除元素，而只是想将其从DOM中移除，但保留在jQuery对象中，那么你应该使用 .detach() 方法而不是 .remove()。

下面是一个简单的例子，演示如何使用 .detach() 而不是 .remove()：

HTML:




<div id="container">
  <p>这是一个段落。</p>
  <button id="remove">删除段落</button>
</div>

JavaScript (使用jQuery):




$(document).ready(function() {
  $('#remove').click(function() {
    // 使用.detach()而不是.remove()
    var $paragraph = $('#container p').detach();
 
    // 你可以在将来再次将其插入DOM中
    // $('#container').append($paragraph);
  });
});

在这个例子中，当按钮被点击时，<p> 元素会被从DOM中移除，但会被保存在变量 $paragraph 中。你可以在将来通过再次将其插入到页面的DOM中来恢复这个元素。如果使用 .remove()，被移除的元素将不可恢复，因为它们从DOM中彻底删除了。

System

2024-08-19

所有,jquery

由于提供的代码较为庞大，我将提供一个核心函数的例子，展示如何在Java Web应用中使用JDBC连接MySQL数据库，以及如何执行一个简单的查询。




import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
 
public class DatabaseHandler {
 
    private Connection connect = null;
    private PreparedStatement preparedStatement = null;
    private ResultSet resultSet = null;
 
    public DatabaseHandler() {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
 
    public void connectToDatabase(String username, String password) {
        try {
            connect = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/your_database_name", username, password);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
 
    public ResultSet executeQuery(String query) {
        try {
            connectToDatabase("username", "password");
            preparedStatement = connect.prepareStatement(query);
            resultSet = preparedStatement.executeQuery();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return resultSet;
    }
 
    public void closeConnection() {
        try {
            if (resultSet != null) {
                resultSet.close();
            }
            if (preparedStatement != null) {
                preparedStatement.close();
            }
            if (connect != null) {
                connect.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

在这个简化的例子中，DatabaseHandler类包含了连接数据库和执行查询的方法。connectToDatabase方法用于建立与数据库的连接，executeQuery方法用于执行SQL查询，并返回一个ResultSet对象。closeConnection方法用于关闭所有数据库资源，以防止资源泄露。

请注意，在实际应用中，你需要根据自己的数据库用户名、密码、数据库名称和查询来修改连接字符串和查询字符串。同时，为了安全起见，建议使用数据库连接池或者PreparedStatement来避免SQL注入攻击。

- 阅读更多 -