1. 首页
  2. 分类
  3. jquery
「jQuery系列」jQuery插件介绍（遮挡面板Accordion、根据输入内容过滤/补全Autocomplete）
System
2024-08-23
所有,jquery

这里提供的是Accordion和Autocomplete两个jQuery插件的简单示例。

  1. Accordion (遮挡面板) 插件:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Accordion 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>
<script>
$(function() {
  $("#accordion").accordion();
});
</script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Content for section 1.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Content for section 2.</p>
  </div>
</div>
 
</body>
</html>
  1. Autocomplete (根据输入内容自动补全/过滤) 插件:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Autocomplete 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>
<script>
$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});
</script>
</head>
<body>
 
<label for="tags">Tags: </label>
<input id="tags">
 
</body>
</html>

这两个示例都使用了jQuery UI库，这是jQuery的一个扩展库，专门提供了丰富的UI组件，包括上述提到的Accordion和Autocomplete。在实际开发中，你需要确保已经正确引入了jQuery和jQuery UI的库文件。

- 阅读更多 -
jquery项目嵌入vue3框架
System
2024-08-23
所有,jquery

在Vue 3项目中嵌入jQuery可以通过几种方式实现，但通常不推荐在Vue项目中使用jQuery，因为Vue 3提供了更现代和更优化的方法来处理DOM操作和第三方库集成。

如果你的Vue 3项目中有无法避免使用jQuery的场景，你可以按照以下步骤操作：

  1. 安装jQuery：



npm install jquery --save
  1. 在Vue组件中引入jQuery并使用：



<template>
  <div id="jquery-example">
    <!-- 你的组件模板内容 -->
  </div>
</template>
 
<script>
import $ from 'jquery';
 
export default {
  mounted() {
    // 使用jQuery操作DOM
    $('#jquery-example').text('jQuery is working!');
  }
};
</script>

请注意，在Vue 3中，建议尽可能避免直接操作DOM，而应使用Vue的响应式系统和组合式API。如果你需要jQuery的功能，考虑使用Vue的生命周期钩子和方法来实现相同的效果。

- 阅读更多 -
jQuery判断checked的三种方法
System
2024-08-23
所有,jquery

在jQuery中，你可以使用几种方法来判断checkbox或radio button是否被checked（选中）。

方法一：使用is()函数。is()函数用于检查当前jQuery对象是否匹配选择器。




if ($('#myCheckbox').is(':checked')) {
    // checkbox is checked
}

方法二：使用prop()函数。prop()函数用于获取在匹配元素集合中第一个元素的属性值。




if ($('#myCheckbox').prop('checked')) {
    // checkbox is checked
}

方法三：使用is(':checked')或hasClass('checked')来判断。这种方法通常用于自定义的checkbox或radio样式。




if ($('#myCheckbox').hasClass('checked')) {
    // checkbox is checked
}

注意：方法一和方法二是jQuery官方推荐的方法，方法三是一种特殊情况，需要你的checkbox或radio使用了某种自定义样式（例如Bootstrap的checkbox或radio）。

- 阅读更多 -
springboot如何解决跨域问题(4种方式)
System
2024-08-23
所有,jquery

Spring Boot 解决跨域问题的四种方式：

  1. 通过CorsFilter



@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}
  1. 通过配置文件



# application.yml
spring:
  mvc:
    cors:
      allowed-origins: "*"
      allowed-methods: "*"
  1. 通过@CrossOrigin注解



@CrossOrigin(origins = "*")
@RestController
public class MyController {
    // ...
}
  1. 通过WebMvcConfigurer接口



@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*");
    }
}

以上四种方式可以解决Spring Boot跨域问题，具体使用哪种取决于实际情况。

- 阅读更多 -
jQuery 选择器--获取元素
System
2024-08-23
所有,jquery

在jQuery中，可以使用多种方式来获取页面上的元素。以下是一些常用的选择器和相应的示例代码：

  1. 通过ID选择元素：



$('#elementId')
  1. 通过类名选择元素：



$('.className')
  1. 通过元素标签名选择元素：



$('tagName')
  1. 选择所有元素：



$('*')
  1. 选择某个父元素下的所有子元素：



$('#parentElementId').children()
  1. 通过属性选择元素：



$('input[name="someName"]')
  1. 选择某个元素的直接子元素：



$('#parentElementId').find('.childClassName')
  1. 使用伪类选择器选择元素：



$('p:first')
  1. 使用表达式组合选择器：



$('div.myClass:eq(0)')
  1. 使用过滤器选择元素：



$('div').filter('.myClass')

这些是获取页面元素的常用方法，可以根据需要选择合适的选择器。

- 阅读更多 -
jquery复选框(全选/取消全选/反选/查看选中项）
System
2024-08-23
所有,jquery

以下是一个使用jQuery实现的复选框功能示例：

HTML部分：




<button id="checkAll">全选</button>
<button id="uncheckAll">取消全选</button>
<button id="toggleCheck">反选</button>
<button id="showChecked">查看选中项</button>
 
<input type="checkbox" class="item" value="选项1"> 选项1
<input type="checkbox" class="item" value="选项2"> 选项2
<input type="checkbox" class="item" value="选项3"> 选项3
 
<div id="result"></div>

jQuery部分：




$(document).ready(function() {
  // 全选
  $('#checkAll').click(function() {
    $('.item').prop('checked', true);
  });
 
  // 取消全选
  $('#uncheckAll').click(function() {
    $('.item').prop('checked', false);
  });
 
  // 反选
  $('#toggleCheck').click(function() {
    $('.item').each(function() {
      $(this).prop('checked', !$(this).prop('checked'));
    });
  });
 
  // 查看选中项
  $('#showChecked').click(function() {
    var checkedItems = $('.item:checked').map(function() {
      return this.value;
    }).get();
    $('#result').text(checkedItems.join(', '));
  });
});

这段代码为复选框提供了基本的全选、取消全选、反选和查看选中项的功能。点击相应的按钮会执行对应的操作。查看选中项时，会将选中的复选框的值以逗号分隔显示在<div id="result"></div>中。

- 阅读更多 -
jQuery实现倒计时效果
System
2024-08-23
所有,jquery

以下是一个使用jQuery实现倒计时效果的简单示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时效果</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="timer">00:00:10</div>
 
<script>
$(document).ready(function(){
    var countdownDuration = 10; // 倒计时时间（秒）
    var display = $('#timer');
 
    var timer = setInterval(function() {
        var minutes = parseInt(countdownDuration / 60, 10);
        var seconds = parseInt(countdownDuration % 60, 10);
 
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
 
        display.text(minutes + ":" + seconds);
 
        if (--countdownDuration < 0) {
            clearInterval(timer);
            display.text("时间到!");
        }
    }, 1000);
});
</script>
 
</body>
</html>

这段代码会在页面上显示一个倒计时，从10秒开始，每秒更新一次显示时间，直至时间结束。倒计时时间可以通过修改 countdownDuration 变量的值来自定义。

- 阅读更多 -
Echarts通过Jquery添加下拉列表动态改变展示的数据和图表
System
2024-08-23
所有,jquery

以下是一个简化的代码示例，展示了如何使用jQuery和ECharts来根据下拉列表的选择动态更新数据和图表。

HTML部分：




<select id="chart-selector">
  <option value="data1">数据1</option>
  <option value="data2">数据2</option>
</select>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript部分（使用jQuery和ECharts）：




// 假设有两组数据
var data1 = [120, 200, 150, 80, 70, 110, 130];
var data2 = [30, 182, 434, 791, 390, 30, 10];
 
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
 
// 图表配置
var option = {
  // ... 其他图表配置项
};
 
// 设置图表的配置项和数据
function setChartData(data) {
  option.series = [{
    // ... 系列配置
    data: data
  }];
  myChart.setOption(option);
}
 
// 当下拉列表选项变化时更新图表
$('#chart-selector').change(function() {
  var selectedData = $(this).val() === 'data1' ? data1 : data2;
  setChartData(selectedData);
});
 
// 初始化时显示第一个数据集
setChartData(data1);

这段代码首先定义了两组假设的数据，然后初始化了ECharts图表并准备了一个函数setChartData来设置图表的数据。在jQuery的change事件中，我们根据下拉列表的选择来决定使用哪组数据，然后更新图表。最后，我们在页面加载时默认显示第一组数据的图表。

- 阅读更多 -
js 判断元素中是否包含指定元素
System
2024-08-23
所有,jquery

在JavaScript中，可以使用Element.contains()方法来判断一个父元素是否包含一个指定的子元素。如果子元素是父元素的子孙元素（直接或间接），则返回true；否则返回false。

示例代码：




// 假设有两个元素
var parentElement = document.getElementById('parent');
var childElement = document.getElementById('child');
 
// 使用contains方法判断
if (parentElement.contains(childElement)) {
    console.log('父元素包含指定的子元素');
} else {
    console.log('父元素不包含指定的子元素');
}

在这个例子中，parentElement是父元素，childElement是要检查的子元素。如果childElement是parentElement的子元素或子孙元素，contains方法将返回true；否则返回false。

- 阅读更多 -
jQuery jq 开发文档
System
2024-08-23
所有,jquery

jQuery是一种快速、简洁的JavaScript库，它使得HTML文档遍历和操作、事件处理、动画和Ajax交互等变得更加简单容易。jQuery设计的宗旨是“write Less，Do More”，即提倡写更少的代码，做更多的事情。

在jQuery中，$(document)是一个非常常见的用法，它是一个快捷方式，用来选择整个HTML文档。

以下是一些使用$(document)的示例：

  1. 在文档加载完成后执行代码：



$(document).ready(function() {
    // 在这里执行代码
});

或者可以使用更简洁的写法：




$(function() {
    // 在这里执行代码
});
  1. 绑定一个事件到文档上：



$(document).on('click', function() {
    console.log('文档被点击了');
});
  1. 使用jQuery的each函数遍历文档中的所有元素：



$(document).each(function() {
    // 遍历文档中的每一个元素
});
  1. 使用jQuery的width()和height()函数获取文档的宽度和高度：



var docWidth = $(document).width();
var docHeight = $(document).height();
  1. 使用jQuery的on函数为文档添加事件监听器：



$(document).on('click', '#myElement', function() {
    console.log('元素被点击了');
});

在上述代码中，$(document)选择了整个HTML文档，然后可以对其进行各种操作。这是jQuery编程的基础，对于学习jQuery的开发者来说非常重要。

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