分类 jquery 下的文章

「jQuery系列」jQuery noConflict() 方法、运用JSONP

2024-08-19

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

所有,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注入攻击。

- 阅读更多 -

jQuery遍历（树遍历）

System

2024-08-19

所有,jquery

在jQuery中，可以使用.find()、.children()、.parent()、.parents()以及.siblings()等方法来进行树遍历。

.find(selector): 从当前元素集合中查找所有匹配selector的后代元素。
.children(selector): 查找当前元素集合中每个元素的直接子元素。
.parent(selector): 取得一个包含着所有匹配元素的父元素的jQuery对象。
.parents(selector): 获得当前元素集合中，所有元素向上的直接父元素和所有祖先元素。
.siblings(selector): 获得匹配元素集合中每个元素的所有同级兄弟元素。

示例代码：




// 假设有如下HTML结构
// <div id="parent">
//   <div id="child1" class="child">
//     <div id="grandchild1" class="grandchild"></div>
//   </div>
//   <div id="child2" class="child">
//     <div id="grandchild2" class="grandchild"></div>
//   </div>
// </div>
 
// 找到所有class为grandchild的元素
var grandchildren = $('#parent').find('.grandchild');
 
// 找到id为child1的直接子元素
var child1Children = $('#child1').children();
 
// 找到id为grandchild1的父元素
var grandchildParent = $('#grandchild1').parent();
 
// 找到id为child1的所有祖先元素
var child1Parents = $('#child1').parents();
 
// 找到id为child1的同级兄弟元素
var child1Siblings = $('#child1').siblings();

System

2024-08-19

所有,jquery

在 Vite 项目中，要使用插件 @rollup/plugin-inject 来全局注入 jQuery，你需要按照以下步骤操作：

安装 jQuery：




npm install jquery --save

在 Vite 配置文件中（如 vite.config.js 或 vite.config.ts），引入 @rollup/plugin-inject 插件并配置它来注入 jQuery：




import inject from '@rollup/plugin-inject';
import { defineConfig } from 'vite';
 
export default defineConfig({
  plugins: [
    inject({
      jQuery: 'jquery',
    }),
  ],
});

在你的应用代码中，你可以直接使用全局的 jQuery 变量：




// 在你的组件或模块中
console.log(jQuery().jquery); // 输出 jQuery 的版本号，证明 jQuery 被正确注入

请注意，@rollup/plugin-inject 是一个 Rollup 插件，但 Vite 底层构建系统是基于 Rollup 的。因此，这个插件也可以在 Vite 项目中使用。

这个例子展示了如何在 Vite 项目中简单地使用 @rollup/plugin-inject 来全局注入 jQuery。实际上，Vite 推荐使用 import 语句在需要的地方导入库，而不是全局注入，以获得更好的 Tree-shaking 和依赖管理。如果你只是为了学习目的或者项目历史原因需要全局注入，上述配置应该可以满足需求。

- 阅读更多 -

js、jquery 动态添加/删除元素内容

System

2024-08-19

所有,jquery

在JavaScript和jQuery中，可以使用以下方法来动态添加或删除元素的内容：

JavaScript方法:

添加元素内容：




document.getElementById("elementId").innerHTML = "新内容";

删除元素内容：




document.getElementById("elementId").innerHTML = "";

jQuery方法:

添加元素内容：




$("#elementId").html("新内容");

删除元素内容：




$("#elementId").empty();

这里的elementId是你想要添加或删除内容的DOM元素的ID。innerHTML和.html()方法允许你设置或获取元素的HTML内容。.empty()方法则用于移除元素的所有子节点。

- 阅读更多 -