分类前端技术下的文章

2024-08-22

在Vue 2项目中配置jQuery，你需要按照以下步骤操作：

安装jQuery：




npm install jquery --save

在项目中使用jQuery。你可以在Vue组件中引入jQuery并使用，或者在main.js/main.ts中全局引入jQuery以在项目中的任何组件中使用。

在main.js或main.ts文件中全局引入jQuery：




import Vue from 'vue';
import $ from 'jquery';
 
// 在Vue原型上添加jQuery实例，以便在组件中通过this.$使用
Vue.prototype.$ = $;
 
new Vue({
  // ...
}).$mount('#app');

在Vue组件中使用jQuery：




<template>
  <div>
    <button @click="hideElement">点击我隐藏上面的元素</button>
    <div ref="myDiv">这是一个可以被隐藏的元素</div>
  </div>
</template>
 
<script>
export default {
  methods: {
    hideElement() {
      // 使用jQuery隐藏元素
      this.$(this.$refs.myDiv).hide();
    }
  }
}
</script>

请注意，在Vue 2中，通常建议尽可能避免使用jQuery，因为Vue本身提供了强大而简单的数据绑定和DOM操作方法。然而，如果你有现成的jQuery插件或代码库需要集成到Vue项目中，那么上述方法可以让你这样做。

- 阅读更多 -

用jquery实现页面滚动加点击事件对应的导航栏高亮

System

2024-08-22

所有,jquery

以下是一个使用jQuery实现的页面滚动和点击事件相应更新导航栏高亮的简单示例：

HTML结构：




<nav id="navbar">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>
 
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

CSS样式：




#navbar ul li.active {
  color: #FF0000; /* 高亮颜色 */
}
 
.section {
  height: 500px;
  border: 1px solid #000;
  margin-top: 100px;
}

jQuery代码：




$(document).ready(function() {
  // 初始化第一个导航项为激活状态
  $('#navbar ul li:first-child').addClass('active');
 
  // 滚动事件处理
  $(window).scroll(function() {
    var scrollPos = $(document).scrollTop();
    $('#navbar ul li a').each(function() {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top - 70 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#navbar ul li').removeClass("active");
        currLink.parent().addClass("active");
      }
      else{
        currLink.parent().removeClass("active");
      }
    });
  });
 
  // 点击事件处理
  $('#navbar ul li a').click(function(e) {
    e.preventDefault(); // 阻止默认的链接跳转行为
    var target = this.hash;
    $('html, body').animate({
      scrollTop: $(target).offset().top - 70 // 减去头部的一些高度以适应导航栏
    }, 1000);
  });
});

这段代码首先为导航栏中的第一个项目添加了一个 "active" 类以表示默认激活状态。然后，当用户滚动页面时，会动态地根据页面的滚动位置来更新导航栏的 "active" 类。此外，点击导航链接时，页面会平滑滚动到对应的元素区域。

- 阅读更多 -

html jquery vue php 混合使用

System

2024-08-22

所有,jquery

在实际开发中，HTML、jQuery、Vue和PHP可以混合使用来构建复杂的Web应用程序。以下是一个简单的示例，展示了如何在一个HTML页面中使用jQuery、Vue和PHP。

HTML文件（index.html）:




<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
 
<div id="app">
    <p>{{ message }}</p>
    <button @click="fetchData">获取服务器数据</button>
</div>
 
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            fetchData: function() {
                $.get('server.php', function(data) {
                    app.message = data;
                }).fail(function() {
                    app.message = '服务器通信失败';
                });
            }
        }
    });
</script>
 
</body>
</html>

PHP文件（server.php）:




<?php
// server.php
$response = array('status' => 'success', 'data' => 'Hello from PHP!');
header('Content-Type: application/json');
echo json_encode($response);
?>

在这个示例中，我们创建了一个简单的HTML页面，其中包含了Vue实例来处理应用程序的逻辑，并使用jQuery发起到PHP服务器的请求。当用户点击按钮时，Vue的fetchData方法会被触发，jQuery的$.get函数会向server.php发送一个GET请求，并在成功获取响应后更新Vue实例中的数据。

- 阅读更多 -

jQuery获取dom元素

System

2024-08-22

所有,jquery

在jQuery中，获取DOM元素通常使用$()函数，它是jQuery的核心函数，用于将DOM元素选择器转换为jQuery对象，以便可以使用jQuery提供的各种方法和属性。

以下是一些基本的示例：

通过ID获取元素：




var element = $('#elementId');

通过类名获取元素：




var elements = $('.className');

通过标签名获取元素：




var elements = $('div');

通过属性获取元素：




var elements = $('[name="elementName"]');

通过CSS选择器获取元素：




var elements = $('selector');

获取所有元素：




var allElements = $('*');

获取元素的子元素：




var children = $('#parent > .child');

获取元素的同胞元素：




var siblings = $('#elementId').siblings('.siblingClass');

通过元素的索引获取特定元素：




var nthElement = $('div').eq(2); // 获取第3个div元素

请注意，$()返回的是jQuery对象，不是原生的DOM元素。如果需要使用原生DOM元素，可以通过.get()方法获取，如：




var nativeElement = $('#elementId').get(0);

- 阅读更多 -

推荐项目：jQuery.Gantt

System

2024-08-22

所有,jquery

jQuery.Gantt 是一个用于创建和管理项目时间线的 jQuery 插件。以下是一个简单的使用示例：

首先，确保在您的 HTML 文件中包含了 jQuery 和 jQuery.Gantt 的库：




<link rel="stylesheet" href="path_to/jquery.gantt.css" />
<script src="path_to/jquery.js"></script>
<script src="path_to/jquery.gantt.js"></script>

接下来，在 HTML 的 body 中添加一个用于显示 Gantt 图的容器：




<div id="gantt"></div>

最后，使用 jQuery.Gantt 插件来初始化图表：




$(function() {
    "use strict";
    $("#gantt").gantt({
        source: [
            {
                name: "Example Task",
                desc: "This is an example task",
                values: {
                    "Example Subtask 1": "2023-04-01",
                    "Example Subtask 2": "2023-04-03"
                }
            }
        ],
        scale: "days",
        minScale: "hours",
        maxScale: "years",
        onItemClick: function(data) {
            console.log(data.item); // 打印点击的任务数据
        },
        onAddClick: function(dt, rowId) {
            console.log(dt, rowId); // 打印添加任务的日期和行ID
        },
        onRender: function() {
            console.log("chart rendered"); // 图表渲染后打印消息
        }
    });
});

这个示例定义了一个包含单个任务和两个子任务的简单 Gantt 图表。你可以根据需要添加更多的任务和子任务，并且可以通过修改 source 数组和其他选项来自定义图表的外观和行为。

System

2024-08-22

所有,jquery

这是一个基于SpringBoot框架的图书管理系统，后端使用MyBatisPlus操作数据库，前端使用Vue和Jquery，并通过Axios进行数据交互。

后端代码示例（只列出部分关键代码）：




@RestController
@RequestMapping("/books")
public class BookController {
 
    @Autowired
    private BookService bookService;
 
    @GetMapping
    public ResponseEntity<List<Book>> getAllBooks() {
        List<Book> books = bookService.list();
        return ResponseEntity.ok(books);
    }
 
    @GetMapping("/{id}")
    public ResponseEntity<Book> getBookById(@PathVariable("id") Long id) {
        Book book = bookService.getById(id);
        return ResponseEntity.ok(book);
    }
 
    @PostMapping
    public ResponseEntity<Void> createBook(@RequestBody Book book) {
        bookService.save(book);
        return ResponseEntity.status(HttpStatus.CREATED).build();
    }
 
    @PutMapping("/{id}")
    public ResponseEntity<Void> updateBook(@PathVariable("id") Long id, @RequestBody Book book) {
        Book bookToUpdate = new Book();
        BeanUtils.copyProperties(book, bookToUpdate);
        bookToUpdate.setId(id);
        bookService.updateById(bookToUpdate);
        return ResponseEntity.ok().build();
    }
 
    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteBook(@PathVariable("id") Long id) {
        bookService.removeById(id);
        return ResponseEntity.noContent().build();
    }
}

前端代码示例（只列出部分关键代码）：




<div id="app">
  <table>
    <tr v-for="book in books" :key="book.id">
      <td>{{ book.name }}</td>
      <td>{{ book.author }}</td>
      <!-- 省略其他内容 -->
    </tr>
  </table>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    books: []
  },
  created() {
    this.fetchBooks();
  },
  methods: {
    fetchBooks() {
      axios.get('/books')
        .then(response => {
          this.books = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
    // 省略其他方法
  }
});
</script>

以上代码展示了如何使用SpringBoot和MyBatisPlus创建一个简单的图书管理系统后端接口，以及如何使用Vue和Axios从后端获取数据并展示在前端页面上。

- 阅读更多 -

jQuery 修改元素、查找元素_jquery修改元素内容

System

2024-08-22

所有,jquery




// 使用jQuery修改元素内容的例子
$(document).ready(function() {
    // 修改元素文本内容
    $('#text-element').text('新的文本内容');
 
    // 修改元素HTML内容
    $('#html-element').html('<strong>新的HTML内容</strong>');
 
    // 修改元素属性
    $('#link-element').attr('href', 'http://www.newsite.com');
 
    // 修改元素CSS样式
    $('#style-element').css('color', 'blue');
 
    // 修改元素的类
    $('#class-element').addClass('new-class');
 
    // 修改元素值
    $('#value-element').val('新的输入值');
});

这段代码展示了如何使用jQuery来修改页面上不同类型元素的内容，包括文本、HTML、属性、CSS样式、类和值。这些是在Web开发中常见的元素修改操作。

- 阅读更多 -

前端jQuery和原生js 实现下拉框select模糊搜索功能总结

System

2024-08-22

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select Fuzzy Search</title>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.3/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.3/dist/js/select2.min.js"></script>
</head>
<body>
 
<select id="mySelect" style="width: 200px;">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="grape">Grape</option>
    <option value="pineapple">Pineapple</option>
    <option value="strawberry">Strawberry</option>
    <option value="mango">Mango</option>
</select>
 
<script>
$(document).ready(function() {
    $('#mySelect').select2({
        placeholder: 'Search Fruit',
        allowClear: true
    });
});
</script>
 
</body>
</html>

这段代码使用了Select2库来为普通的<select>元素添加模糊搜索功能。在页面加载完成后，Select2会自动初始化这个下拉框，并且允许用户通过输入来过滤选项。这是一个简单而实用的下拉框模糊搜索实现，适用于各种前端开发场景。

- 阅读更多 -

获取shell脚本所处路径

System

2024-08-22

所有,jquery

使用pwd命令获取当前的工作目录，并将其保存到一个变量中。然后打印该变量即可。




#!/bin/bash

# 获取当前工作目录
current_path=$(pwd)

# 打印当前工作目录
echo $current_path

使用dirname命令获取脚本所在的目录，并将其保存到一个变量中。然后打印该变量即可。




#!/bin/bash

# 获取脚本所在目录
script_path=$(dirname "$0")

# 打印脚本所在目录
echo $script_path

使用readlink命令获取脚本的绝对路径，并通过提取目录部分来获取脚本所在的目录。




#!/bin/bash

# 获取脚本绝对路径
abs_path=$(readlink -f "$0")

# 获取脚本所在目录
script_path=$(dirname "$abs_path")

# 打印脚本所在目录
echo $script_path

- 阅读更多 -

【JQuery】发送get请求

System

2024-08-22

所有,jquery

在jQuery中，你可以使用$.get()方法来发送一个GET请求。以下是一个简单的例子：




$.get('your-endpoint-url', { key1: 'value1', key2: 'value2' }, function(data) {
    // 这里的data是服务器返回的数据
    console.log(data);
});

在这个例子中，your-endpoint-url是你想要请求的服务器地址，{ key1: 'value1', key2: 'value2' }是作为请求参数发送的数据对象，function(data)是请求成功后的回调函数，其中data是服务器返回的响应数据。

如果你需要在请求中设置特定的HTTP头部或需要进行更复杂的配置，你可以使用$.ajax()方法：




$.ajax({
    url: 'your-endpoint-url',
    type: 'GET',
    data: { key1: 'value1', key2: 'value2' },
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});

在这个例子中，$.ajax()接受一个对象参数，其中可以定义请求的各种配置，包括URL、请求类型、请求数据以及成功和错误回调函数。

- 阅读更多 -