20231007-学习笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_44887198/article/details/133637914

文章目录

JS获取当前页面的链接信息
JS移除给定URL中最后一个斜杠后面的内容
JS从文件名中移除任意文件扩展名，并仅保留前面的文件名部分
JS去除数组中的空行
JS动态生成标签
Emmet语法

JS获取当前页面的链接信息

// 获取完整的页面链接
const fullUrl = window.location.href;
console.log(fullUrl);

// 获取页面的协议
const protocol = window.location.protocol;
console.log(protocol);

// 获取页面的主机名和端口号
const host = window.location.host;
console.log(host);

// 获取页面的主机名
const hostname = window.location.hostname;
console.log(hostname);

// 获取页面的端口号
const port = window.location.port;
console.log(port);

// 获取页面的路径部分
const pathname = window.location.pathname;
console.log(pathname);

// 获取页面的查询参数部分
const search = window.location.search;
console.log(search);

// 获取页面的片段标识符部分
const hash = window.location.hash;
console.log(hash);

JS移除给定URL中最后一个斜杠后面的内容

const url = 'http://192.168.22.53:1235/%E5%9B%BE%E7%89%87/%E5%9B%BE%E7%89%87.html';

const lastIndex = url.lastIndexOf('/');
const modifiedUrl = url.substring(0, lastIndex + 1);

console.log(modifiedUrl); // http://192.168.22.53:1235/%E5%9B%BE%E7%89%87/

JS从文件名中移除任意文件扩展名，并仅保留前面的文件名部分

const fileName = '1.jpg';
const fileNameWithoutExtension = fileName.split('.').slice(0, -1).join('.');

console.log(fileNameWithoutExtension);

JS去除数组中的空行

uesfulData= data.split('\n').filter(function (line) {
  return line.trim() !== '';
});

JS动态生成标签

<body>
  <div class="gallery">
    <div class="gallery-item">
      <img src="1.jpg" alt="Image 1">
      <div class="image-name">Image 1</div>
    </div>
    <div class="gallery-item">
      <img src="2.jpg" alt="Image 2">
      <div class="image-name">Image 1</div>
    </div>
    <div class="gallery-item">
      <img src="3.jpg" alt="Image 3">
      <div class="image-name">Image 1</div>
    </div>
  </div>
</body>

<script>
	const galleryContainer = document.querySelector('.gallery');
	
	// 图片数据
	const images = [
	  { src: '1.jpg', alt: 'Image 1', name: 'Image 1' },
	  { src: '2.jpg', alt: 'Image 2', name: 'Image 2' },
	  { src: '3.jpg', alt: 'Image 3', name: 'Image 3' }
	];
	
	// 循环生成图库项
	images.forEach(image => {
	  const galleryItem = document.createElement('div');
	  galleryItem.classList.add('gallery-item');
	
	  const img = document.createElement('img');
	  img.src = image.src;
	  img.alt = image.alt;
	
	  const imageName = document.createElement('div');
	  imageName.classList.add('image-name');
	  imageName.textContent = image.name;
	
	  galleryItem.appendChild(img);
	  galleryItem.appendChild(imageName);
	  galleryContainer.appendChild(galleryItem);
	});
</script>

Emmet语法

0.生成页面框架 输入 ！ 按回车即可
1.生成标签 直接输入标签名 按Tab键即可 比如 div 按Tab键 就可以生成<div></div>
2.如果想要生成多个相同标签 加上*就可以了 比如 div*3 就可以快速生成3个 <div></div>
3.如果有父子级关系的标签 可以用> 比如 ul>li 就可以了
4.如果有兄弟关系的标签 用+ 就可以了 比如 div+p
5.如果生成带有类名或者id名字的 直接写 标签名.one 或 标签名#two 按Tab键就可以了
6.如果想生成的div的类名是有序的 可以用自增符号$ 比如 div.demo$*5
7.如果想要在生成的标签内部写内容可以用{}表示 比如 div{Hello World!} 按Tab键即可