标签 Javascript 下的文章

【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~

2024-08-19




// 获取元素
var element = document.querySelector('.my-element'); // 获取第一个class为my-element的元素
var elements = document.querySelectorAll('div.my-class'); // 获取所有class为my-class的div元素
 
// 操作元素
element.textContent = 'Hello, World!'; // 设置元素的文本内容
element.style.color = 'blue'; // 设置元素的文本颜色为蓝色
 
// 添加和移除类
element.classList.add('new-class'); // 添加一个新的类
element.classList.remove('old-class'); // 移除一个已存在的类
 
// 添加和删除属性
element.setAttribute('data-role', 'page'); // 添加一个新的属性
element.removeAttribute('data-role'); // 移除一个已存在的属性
 
// 添加和移除元素/节点
var newNode = document.createElement('p');
newNode.textContent = 'This is a new paragraph.';
element.appendChild(newNode); // 添加一个新的子节点
element.removeChild(newNode); // 移除一个已存在的子节点

这段代码展示了如何使用querySelector和querySelectorAll获取元素，并对其进行文本内容设置、样式更改、类的添加和移除、属性的添加和移除，以及如何添加和移除节点。这些是在进行DOM操作时常用的基本操作。

- 阅读更多 -

使用JavaScript将富文本HTML转换为纯文本

System

2024-08-19

所有,html




// 将富文本HTML转换为纯文本的函数
function htmlToPlainText(htmlContent) {
    // 使用DOM解析器创建一个新的DOM元素
    var tempDiv = document.createElement("div");
    tempDiv.innerHTML = htmlContent;
  
    // 使用textContent获取所有文本内容，并清除空格
    var text = tempDiv.textContent || tempDiv.innerText || "";
    text = text.trim();
  
    return text;
}
 
// 示例HTML内容
var htmlContent = "<p>这是一个<b>富文本</b>示例。</p>";
 
// 使用函数转换HTML为纯文本
var plainText = htmlToPlainText(htmlContent);
console.log(plainText); // 输出: 这是一个富文本示例。

这段代码定义了一个htmlToPlainText函数，它接受HTML内容作为参数，创建一个临时的DOM元素，并将HTML内容作为其innerHTML。然后，它使用textContent或innerText属性来获取所有文本内容，并移除前后的空格。最后，它返回一个纯文本字符串。

System

2024-08-19

所有,html

在JavaScript中，可以使用addEventListener方法为DOM元素添加事件监听器。这样当特定事件发生时，可以执行一些JavaScript代码。

以下是一个简单的例子，演示了如何为一个按钮添加点击事件监听器：




// 获取按钮元素
const myButton = document.getElementById('myButton');
 
// 为按钮添加点击事件监听器
myButton.addEventListener('click', function() {
    alert('按钮被点击了!');
});

在这个例子中，当按钮被点击时，会弹出一个警告框。

addEventListener方法接受两个参数：

事件名称：一个字符串，指定要监听的事件类型，例如'click'、'mouseover'等。
事件处理函数：当事件发生时要执行的函数。

你可以为同一个元素添加多个事件监听器，并且它们会按照被添加的顺序依次触发。如果同一个事件监听器被添加多次，它也会被多次触发。为了避免这种情况，可以使用removeEventListener方法移除不需要的监听器。

- 阅读更多 -

H5+CSS3+JS逆向前置——HTMLtable表格标签

System

2024-08-19

所有,css3

在HTML中，<table>标签用于创建表格布局。以下是一个简单的HTML表格示例，使用了HTML、CSS和JavaScript（简称H5+CSS3+JS）：




<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
    text-align: left;
  }
</style>
</head>
<body>
 
<h2>HTML Table</h2>
 
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>
 
</body>
</html>

这段代码创建了一个具有标题行和两行数据的表格。CSS用于设置表格的样式，包括边框、内边距和文本对齐方式。这个示例展示了如何使用HTML创建表格结构，并通过CSS进行样式化，这是学习Web开发的基础知识。

- 阅读更多 -

uni-app+Vue2+vue.js+css3实现滑动删除效果

System

2024-08-19

所有,css3

在uni-app中使用Vue2实现一个简单的滑动删除效果，可以通过监听触摸事件来实现。以下是一个简单的示例：




<template>
  <view class="container">
    <view
      class="item"
      v-for="(item, index) in list"
      :key="index"
      @touchstart="start"
      @touchmove="move"
      @touchend="end"
      :data-index="index"
      :class="{ 'item-active': activeIndex === index }"
    >
      {{ item }}
      <view class="delete" v-if="activeIndex === index">删除</view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      startX: 0,
      activeIndex: -1,
    };
  },
  methods: {
    start(event) {
      this.startX = event.touches[0].clientX;
    },
    move(event) {
      const index = event.currentTarget.dataset.index;
      const moveX = event.touches[0].clientX;
      const distance = moveX - this.startX;
      if (distance > 0) {
        this.activeIndex = index;
      }
    },
    end() {
      this.activeIndex = -1;
    },
  },
};
</script>
 
<style>
.container {
  display: flex;
  flex-direction: column;
}
 
.item {
  position: relative;
  height: 50px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  transition: transform 0.3s;
}
 
.item-active {
  transform: translateX(-100%);
}
 
.delete {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100px;
  background-color: red;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
</style>

在这个例子中，每个列表项都有触摸事件监听，当用户滑动时，记录开始滑动的位置，并在移动时计算滑动的距离。如果是向右滑动，那么设置当前滑动的项的索引，并通过添加item-active类来显示删除按钮。当滑动结束或触发touchend事件时，重置activeIndex。这里使用了transform进行滑动效果的实现，并通过transition属性添加了滑动的动画效果。

- 阅读更多 -

H5+CSS3+JS逆向前置——HTMLH5文本元素

System

2024-08-19

所有,css3

HTML5 引入了大量新的语义化标签，例如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，它们有助于开发者编写更清晰的代码，有利于搜索引擎的搜索和更好的用户体验。

以下是一个简单的 HTML5 页面结构示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS3 样式代码 */
        body {
            font-family: Arial, sans-serif;
        }
        header, footer {
            background-color: #ddd;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            background-color: #bbb;
            padding: 5px;
        }
        section {
            background-color: #eee;
            padding: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
        </ul>
    </nav>
    <section>
        <h2>最新文章</h2>
        <p>这里是一些文章内容...</p>
    </section>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script>
        // JavaScript 代码
    </script>
</body>
</html>

这个示例展示了如何使用 HTML5 的语义化标签来构建一个简单的网站结构，并通过内联的 CSS3 样式和 JavaScript 实现一些基本的交互功能。

System

2024-08-19

所有,css3

HTML5 基础：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>页面头部</header>
    <nav>导航栏</nav>
    <section>
        <article>
            <h1>文章标题</h1>
            <p>这里是文章内容...</p>
        </article>
    </section>
    <aside>侧边栏</aside>
    <footer>页面底部</footer>
</body>
</html>

CSS3 应用：




/* CSS 文件 */
body {
    background-color: #f3f3f3;
}
header, footer {
    background-color: #444;
    color: white;
    text-align: center;
    padding: 5px 0;
}
nav, aside {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px;
}
section article {
    background-color: white;
    padding: 15px;
    margin-bottom: 10px;
}
section article h1 {
    color: #333;
    margin-bottom: 5px;
}

JavaScript 动画：




// JavaScript 文件
window.onload = function() {
    var header = document.getElementsByTagName('header')[0];
    var nav = document.getElementsByTagName('nav')[0];
    var aside = document.getElementsByTagName('aside')[0];
    var footer = document.getElementsByTagName('footer')[0];
 
    // 使用 setInterval 实现简单的动画效果
    setInterval(function() {
        var random = Math.random() * 20; // 生成一个0到20之间的随机数
        header.style.left = random + 'px'; // 改变元素的位置
        nav.style.height = random + 'px'; // 改变元素的高度
        aside.style.width = random + 'px'; // 改变元素的宽度
        footer.style.fontSize = random + 'px'; // 改变元素的字体大小
    }, 100);
};

以上代码展示了如何使用HTML5和CSS3创建一个简单的页面框架，并通过JavaScript实现动态效果。这个例子旨在展示基础的页面结构和动画技术，并不是实际的动画效果，因为动画效果需要更复杂的逻辑和CSS3的animations和transforms属性。

- 阅读更多 -

SpringMvc-json处理

System

2024-08-19

所有,ajax

在Spring MVC中处理JSON数据，你可以使用@RequestBody和@ResponseBody注解。@RequestBody用于将请求体中的JSON数据绑定到方法参数上，而@ResponseBody用于将返回值放入响应体中。

以下是一个简单的例子：




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
 
@Controller
public class JsonController {
 
    @PostMapping("/submit")
    @ResponseBody
    public MyData submitData(@RequestBody MyData data) {
        // 处理接收到的数据
        // ...
        return data; // 返回处理后的数据
    }
}
 
class MyData {
    private String name;
    private int age;
 
    // 必要的getter和setter方法
    // ...
}

在这个例子中，MyData类代表了要传输的JSON对象。submitData方法通过@RequestBody注解接收JSON数据，Spring自动将其转换为MyData对象。处理完数据后，方法返回的MyData对象将自动被转换为JSON格式的响应体。

确保你的Spring MVC配置中包含了必要的消息转换器，例如Jackson或Gson，这样Spring才能自动地将JSON转换为Java对象，反之亦然。

- 阅读更多 -

SpringMVC处理Ajax请求及处理和响应json格式的数据

System

2024-08-19

所有,ajax

在Spring MVC中，你可以使用@RestController注解来创建RESTful web服务，并用@RequestMapping注解来处理Ajax请求。以下是一个简单的例子，展示了如何处理Ajax请求并返回JSON格式的数据：




import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
 
@RestController
public class AjaxController {
 
    @GetMapping("/getData")
    public @ResponseBody String getData(@RequestParam("param") String param) {
        // 处理请求参数param
        // 返回JSON格式的数据
        return "{\"message\": \"Hello, " + param + "!\"}";
    }
}

在这个例子中，@GetMapping("/getData")注解表示这个方法会处理对/getData的GET请求。@RequestParam("param")注解用于获取请求参数param。@ResponseBody注解告诉Spring MVC这个方法的返回值应该直接写入HTTP响应体，而不是解析为视图名。

返回的字符串是一个简单的JSON对象。如果你想返回一个对象或者集合，Spring MVC会自动将其序列化为JSON格式。例如：




@GetMapping("/getUsers")
public ResponseEntity<List<User>> getUsers() {
    List<User> users = new ArrayList<>();
    // 假设这里添加了一些User对象
    return ResponseEntity.ok(users);
}

在这个例子中，我们返回了一个List<User>对象，Spring MVC将自动将其转换为JSON数组。ResponseEntity.ok(users)是一个快捷方式，用于返回状态码200（OK）的响应，并包含了用户列表。

- 阅读更多 -

✿✿✿JavaScript --- Ajax异步请求与JSONP 跨域请求

System

2024-08-19

所有,ajax




// 使用原生JavaScript发送AJAX请求
function makeAjaxRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            callback(response);
        }
    };
    xhr.send();
}
 
// 使用JSONP进行跨域请求
function jsonpRequest(url, callbackName) {
    var script = document.createElement('script');
    script.src = `${url}?callback=${callbackName}`;
    document.body.appendChild(script);
 
    // 定义全局函数作为回调
    window[callbackName] = function (data) {
        callback(data);
        document.body.removeChild(script);
        delete window[callbackName];
    };
}
 
// 使用示例
makeAjaxRequest('https://api.example.com/data', function (response) {
    console.log('AJAX Response:', response);
});
 
jsonpRequest('https://api.example.com/data', 'jsonCallback');

这段代码展示了如何使用原生JavaScript的XMLHttpRequest对象发送AJAX请求以及如何使用JSONP进行跨域请求。makeAjaxRequest函数用于发送普通的AJAX请求，而jsonpRequest函数用于发送JSONP请求。在发送JSONP请求时，我们动态创建了一个<script>标签，并将请求发送到服务器。服务器端应该对JSONP请求进行相应的处理。

- 阅读更多 -