标签 Javascript 下的文章

2024-08-07




$(document).ready(function() {
    // 1. 使用JQuery快速打印出所有的<p>标签的内容
    $('p').each(function(idx, p) {
        console.log($(p).text());
    });
 
    // 2. 将JS对象转换为JQuery对象
    var jsParagraph = document.querySelector('p');
    $(jsParagraph).css('color', 'red');
 
    // 3. 使用JQuery选择器选取元素
    $('#myId').css('color', 'blue');          // ID选择器
    $('.myClass').css('font-size', '20px');   // 类选择器
    $('li:first').css('font-weight', 'bold');  // 伪类选择器
    $('a[href="http://example.com"]').css('text-decoration', 'none'); // 属性选择器
});

这段代码首先确保文档加载完毕，然后遍历并打印所有<p>标签的文本内容。接着，将一个普通的JavaScript DOM元素转换为JQuery对象，并修改它的文字颜色。最后，通过不同的选择器获取元素并修改它们的样式。

- 阅读更多 -

JavaScript+jQuery,交换式web前端开发

System

2024-08-07

所有,jquery

在JavaScript和jQuery中，交换两个元素的位置可以通过一些技巧来实现。以下是一些可能的解决方案：

解决方案1：使用jQuery的.before()或.after()方法




// 假设我们有两个id为div1和div2的元素
var $div1 = $('#div1');
var $div2 = $('#div2');
 
// 交换它们的位置
if ($div1.next().is($div2)) {
    $div1.next().insertAfter($div1);
} else {
    $div1.prev().insertBefore($div1);
}

解决方案2：使用jQuery的.detach()方法




// 假设我们有两个id为div1和div2的元素
var $div1 = $('#div1').detach();
var $div2 = $('#div2').detach();
 
// 将它们插入到它们原来位置的地方
$('#div2').after($div1);
$('#div1').after($div2);

解决方案3：使用原生JavaScript的insertBefore()或insertAfter()方法




// 假设我们有两个id为div1和div2的元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var parent = div1.parentNode;
 
// 交换它们的位置
parent.insertBefore(div2, div1);
parent.insertBefore(div1, div2);

解决方案4：使用原生JavaScript的appendChild()方法




// 假设我们有两个id为div1和div2的元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var parent = div1.parentNode;
 
// 交换它们的位置
parent.insertBefore(div2, div1);
parent.appendChild(div1);

这些都是交换两个元素位置的方法，你可以根据你的具体需求来选择最适合你的方法。

- 阅读更多 -

看了jquery的animate动画函数，自己也用js写了一个，感觉还不错！

System

2024-08-07

所有,jquery

在JavaScript中实现类似jQuery的animate函数，你可以使用requestAnimationFrame来实现流畅的动画效果。以下是一个简单的实现例子：




function animate(element, to, duration, callback) {
  const start = performance.now();
  const from = Object.keys(to).reduce((acc, prop) => {
    acc[prop] = Number(element.style[prop] || 0); // 获取当前样式值
    return acc;
  }, {});
 
  const change = (time) => {
    if (time - start < duration) {
      const progress = (time - start) / duration;
      Object.keys(to).forEach(prop => {
        element.style[prop] = (to[prop] - from[prop]) * progress + from[prop] + 'px'; // 计算当前值
      });
      requestAnimationFrame(change); // 递归调用
    } else {
      Object.assign(element.style, to); // 动画结束，应用最终样式
      if (callback && typeof callback === 'function') callback(); // 调用回调函数
    }
  };
 
  requestAnimationFrame(change); // 开始动画
}
 
// 使用例子
const element = document.getElementById('myElement');
animate(element, { width: '200px', height: '100px' }, 1000, () => console.log('Animation completed'));

在这个例子中，animate函数接受四个参数：element是要应用动画的DOM元素，to是一个对象，包含了动画结束时想要设置的CSS样式属性和值，duration是动画持续的时间（单位是毫秒），callback是动画结束时调用的回调函数。函数内部使用requestAnimationFrame来实现每帧动画的更新，并在动画结束时应用最终的样式并调用回调函数。

System

2024-08-07

所有,jquery

该项目是一个完整的基于JavaWeb技术栈的汽车出租管理系统，包括前端和后端。以下是系统的核心模块和部分代码示例：

前端代码（JSP页面）




<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>汽车出租系统</title>
</head>
<body>
    <h1>汽车出租系统</h1>
    <!-- 省略其他HTML代码 -->
</body>
</html>

后端代码（Controller和Service）




@Controller
@RequestMapping("/car")
public class CarController {
 
    @Autowired
    private CarService carService;
 
    @RequestMapping("/list")
    public ModelAndView list() {
        List<Car> carList = carService.findAll();
        ModelAndView mv = new ModelAndView();
        mv.addObject("carList", carList);
        mv.setViewName("car-list");
        return mv;
    }
 
    // 省略其他Controller方法
}
 
@Service
public class CarService {
 
    @Autowired
    private CarMapper carMapper;
 
    public List<Car> findAll() {
        return carMapper.selectAll();
    }
 
    // 省略其他Service方法
}

数据访问层（Mapper）




@Mapper
public interface CarMapper {
    List<Car> selectAll();
    // 省略其他Mapper方法
}

实体类（Car）




public class Car {
    private Integer id;
    private String brand;
    private String type;
    private String color;
    // 省略其他属性及getter和setter方法
}

配置文件（applicationContext.xml）




<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <!-- 数据库配置 -->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/rental_car_system"/>
        <property name="username" value="root"/>
        <property name="password" value="password"/>
    </bean>
 
    <!-- SqlSessionFactoryBean -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
    </bean>
 
    <!-- 扫描Mapper接口 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.car.rental.mapper"/>
    </bean>
 
    <!-- 省略其他Bean配

System

2024-08-07

所有,jquery

这是一个基于JavaWeb、SSM框架和MySQL数据库的流浪动物收养系统。由于代码量较大，我将提供部分核心代码和配置文件的示例。

配置文件applicationContext.xml的一部分：




<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <!-- 数据库连接池 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <!-- 其他配置 -->
    </bean>
 
    <!-- 配置SqlSessionFactory -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <property name="mapperLocations" value="classpath:mappers/*.xml"/>
    </bean>
 
    <!-- 配置扫描Mapper接口的包，动态生成代理对象 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.yourpackage.mapper"/>
    </bean>
 
    <!-- 事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
 
    <!-- 开启注解事务 -->
    <tx:annotation-driven transaction-manager="transactionManager"/>
 
</beans>

Service层示例代码：




@Service
public class AnimalServiceImpl implements AnimalService {
    @Autowired
    private AnimalMapper animalMapper;
 
    @Override
    @Transactional
    public void adoptAnimal(AdoptRequest request) {
        // 业务逻辑，例如保存收养信息等
        animalMapper.updateStatus(request.getAniId(), "adopted");
    }
}

Controller层示例代码：




@Controller
public class AnimalController {
    @Autowired
    private AnimalService animalService;
 
    @RequestMapping("/adopt")
    @ResponseBody
    public String adoptAnimal(AdoptRequest request) {
        try {
            animalService.adoptAnimal(request);
            return "success";
        } catch (Exception e) {
            return "error";
        }
    }
}

以上代码仅为示例，实际系统中会有更多的细节和功能。这个系统的核心功能是展示如何使用S

- 阅读更多 -

js对url进行编码解码（三种方式）

System

2024-08-07

所有,javascript

在JavaScript中，可以使用encodeURI，encodeURIComponent和decodeURI，decodeURIComponent函数来对URL进行编码和解码。

encodeURI()：用于编码整个URI。它不会对特定的字符进行编码：字母、数字、( )、*、-、.、_、~。
encodeURIComponent()：用于编码URI组件。它会对以下特定的字符进行编码：非字母数字字符、:、/、?、#和[、]、@。
decodeURI()：用于解码由encodeURI()编码的URI。
decodeURIComponent()：用于解码由encodeURIComponent()编码的URI组件。

示例代码：




// 原始URL
let originalURL = "https://www.example.com/?query=Hello World!#Section";
 
// 编码URL
let encodedURL = encodeURI(originalURL);
console.log(encodedURL); // 输出: https://www.example.com/?query=Hello%20World!#Section
 
let encodedURLComponent = encodeURIComponent(originalURL);
console.log(encodedURLComponent); // 输出: https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World%21%23Section
 
// 解码URL
let decodedURL = decodeURI(encodedURL);
console.log(decodedURL); // 输出: https://www.example.com/?query=Hello World!#Section
 
let decodedURLComponent = decodeURIComponent(encodedURLComponent);
console.log(decodedURLComponent); // 输出: https://www.example.com/?query=Hello World!#Section

- 阅读更多 -

nestjs 事务处理

System

2024-08-07

所有,typescript

在NestJS中，你可以使用@Transaction()装饰器来处理事务。这个装饰器可以被应用在控制器的方法上，以确保在执行这个方法的时候，所有的数据库操作都会在同一个事务内进行。

以下是一个使用@Transaction()装饰器的例子：




import { Controller, Post, Body, UseInterceptors, ClassSerializerInterceptor } from '@nestjs/common';
import { Transaction } from 'typeorm';
import { YourService } from './your.service';
 
@Controller('your-endpoint')
export class YourController {
  constructor(private readonly yourService: YourService) {}
 
  @Post()
  @UseInterceptors(ClassSerializerInterceptor)
  @Transaction()
  async createItem(@Body() createItemDto: any) {
    const result = await this.yourService.createItem(createItemDto);
    return result;
  }
}

在这个例子中，createItem方法会在一个事务的上下文中被执行。如果方法成功完成，事务将会被自动提交。如果方法抛出任何异常，事务将会被自动回滚。

确保你已经配置了TypeORM，并且你的数据库支持事务。例如，如果你使用的是MySQL，你需要确保你的数据库是InnoDB类型的，因为它支持事务处理。

- 阅读更多 -

WEB 3D技术 three.js 元素居中与获取元素中心点

System

2024-08-07

所有,javascript

在Three.js中，要将一个3D对象居中，并获取其中心点，可以使用以下步骤：

计算3D对象的包围盒（BoundingBox）。
获取包围盒的中心点。
将3D对象的位置设置为中心点位置。

以下是实现这些步骤的示例代码：




// 假设我们有一个3D对象(mesh)
 
// 1. 计算包围盒
const box = new THREE.Box3().setFromObject(mesh);
 
// 2. 获取包围盒中心点
const center = new THREE.Vector3();
box.getCenter(center);
 
// 3. 将对象位置设置为中心点
mesh.position.copy(center);

在这段代码中，我们首先创建了一个THREE.Box3对象，并使用setFromObject方法计算出给定3D对象的包围盒。然后，我们使用getCenter方法从包围盒中获取了中心点，最后将3D对象的位置设置为计算出的中心点。这样，3D对象就会居中在场景中了。

System

2024-08-07

所有,typescript




import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加灯光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
 
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 0.5).normalize();
scene.add(directionalLight);
 
// 创建地形和材质
const geometry = new THREE.PlaneGeometry(100, 100, 100, 100);
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, depthWrite: false });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
 
// 添加模型
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('models/scene.gltf', (gltf) => {
  scene.add(gltf.scene);
});
 
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

这段代码示例展示了如何使用Three.js创建一个基本的3D场景，并加载一个模型和轨道控制器，以便用户可以以第一人称视角探索虚拟环境。代码简洁，注重核心功能的实现，并提供了一个清晰的学习路径。

System

2024-08-07

所有,typescript

解释：

export default: 用于默认导出模块中的单个实例（一个值、对象、函数等）。一个模块只能有一个默认导出。
export const: 用于导出多个实例，这里导出的是常量。
async: 用于声明异步函数，异步函数返回一个Promise对象。
await: 用于等待一个Promise对象解析完成，并获取其返回值。

实例代码：




// mathUtils.js
export default function add(a, b) {
  return a + b;
}
 
export const subtract = (a, b) => a - b;
 
// 使用async/await的异步操作
export async function calculate(a, b) {
  // 假设这是一个异步操作，比如网络请求
  const result = await delayedAdd(a, b);
  return result;
}
 
// 一个返回Promise的异步函数
async function delayedAdd(a, b) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(a + b), 1000);
  });
}
 
// main.js
import add, { subtract, calculate } from './mathUtils.js';
 
async function start() {
  const sum = await add(1, 2);
  const difference = subtract(5, 3);
  const calculatedSum = await calculate(3, 4);
  
  console.log('Sum:', sum);
  console.log('Difference:', difference);
  console.log('Calculated Sum:', calculatedSum);
}
 
start();

在这个例子中，mathUtils.js 文件中定义了一个默认导出的 add 函数和一个导出常量 subtract 函数，以及使用 async 和 await 的 calculate 函数。main.js 文件中，我们导入了 mathUtils.js 文件中的所有导出项，并在 start 函数中调用了它们。start 函数是一个异步函数，用来启动和运行其他异步操作。

- 阅读更多 -