正则锚点定位转义字符

最新推荐文章于 2024-05-03 21:05:41 发布

ohlulu小企鹅

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量93

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Libra99WU/article/details/117676064

版权

工作中遇到的一些问题以及解决的办法前端 JS 正则

文章目录

前言
一、JS
- 1.时间
二、正则表达式
三、cmd以及终端简单命令
四、npm
五、锚点定位
- 总结
四、转义字符
🔚

前言

前端

一、JS

1.时间

获取当地时间

	this.state.date.toLocaleTimeString() 获取当地时间

/* 
一定注意区分：【js语句(代码)】与【js表达式】
	1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
		下面这些都是表达式：
		(1). a
		(2). a+b
		(3). demo(1)
		(4). arr.map() 
		(5). function test () {}
	2.语句(代码)：
		下面这些都是语句(代码)：
		(1).if(){}
		(2).for(){}
		(3).switch(){case:xxxx}
		
	 */

二、正则表达式

常用的正则表达式

	不包含汉字  ^[^\u4e00-\u9fa5]+$
	只能输入汉字 [\u4e00-\u9fa5]+

三、cmd以及终端简单命令

常用的命令

	在文件夹的目录搜索框输入cmd  可以直接到cmd的对应位置

cmd窗口命令
 	dir 列举文件 
	cls 清空
	cd 进入目录
	
vscode终端命令
	ls 列举文件
	clear 清空
	pwd 显示当前工作目录
	cd 切换文件路径
	exit 结束会话
	:q 退出

四、npm

下载依赖

	npm install @autolog --save 下载依赖并添加到json 中

五、锚点定位

下载依赖

用a标签，在href属性中写入DIV的id
或者在js事件中通过window.location.hash="to"跳转

<!DOCTYPE html>
<html>
	<head>
	<style></style>
	</head>
<body>
<h2>
	<a href="#to">to div1</a>/h2>
	<div id="to">div1</div>
</body>
</html>

不改变URL通过页面定位的方式
1: 用animate属性，当点击锚点后，页面滚动到相应的DIV

	
	import React, { Component } from 'rax';
import { View } from 'ace-element';
import $ from 'jquery';
import './index.less';

class Mod extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() { 
    window.addEventListener('scroll', this.onscroll)
  }
  onscroll = () =>{
    var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
	// 导航
	var quickMenu = $('.service-nav-item');
	// 需定位到的锚点位置
	var quickLayer = $(".louti");
	// 60 代表是需要去除的高度 如固顶的导航条
	var spaceTop = 60;
	if(scrollT >= 430 ){
          $('.service-nav-container').addClass('fixed');
    }else {
        $('.service-nav-container').removeClass('fixed') //动态删除class属性
    }
    var wTop = $(window).scrollTop();
    var space = [];
    wTop = wTop + spaceTop;
    quickLayer.each(function(i,t){
        space.push($(t).offset().top)
    });
    var flag = 0;
    var len = space.length;
    for (var i = 0; i < len - 1; i++) {
        if (space[i] <= wTop && space[i + 1] >= wTop) {
            flag = i;
            break;
        }
    }
    if (wTop - space[flag] > space[flag + 1] - wTop
    ) {
        flag += 1;
    }
    if (wTop > space[len - 1]) {
        flag = len - 1;
    }
    quickMenu.eq(flag).addClass('active').siblings().removeClass('active');
	}
	
  	a = (e,href) => {
    const t = $(".service-nav-container");
    console.log(e);
    $(`#${href}key`).addClass('active');
    $(".service-nav-item").not(`#${href}key`).removeClass('active');
    const h = t.height()-1;
    $("html,body").stop().animate({
      scrollTop: $(`#${href}`).offset().top - h
  	}, 500)
   }
  render() {
    const { navList = [] } = this.props;
    return (
      <View className="service-nav">
        <View className="service-nav-container">
          {navList.map((item) => {
            return (
              <span className="service-nav-item" id={item.navHref + 'key'} onClick={(e)=>{this.a(e,item.navHref)}}>{item.navName}</span>
            )
          })}
        </View>
      </View>
    );
  }
}

export default Mod;

2 用js的srollIntoView方法,点击a1页面跳转到a2

document.querySelector("#a1").onclick = function(){  
      document.querySelector("#a2").scrollIntoView(true);  
}

总结

滚轮监听事件
document.documentElement.scrollTop = $KaTeX parse error: Expected 'EOF', got '#' at position 3: (`#̲$ {href}).offset().top; document.body.scrollTop = $(#${href}`).offset().top;
问题：document.documentElement.scrollTop 不起作用
原因因为body html的高度是100% 滚轮是另外一个区域的滚动所以不起作用

四、转义字符

https://tool.oschina.net/commons?type=2

🔚

加油

ohlulu小企鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则锚点定位转义字符

工作中遇到的一些问题以及解决的办法文章目录前言一、JS1.时间二、正则表达式总结前言前端一、JS1.时间获取当地时间 this.state.date.toLocaleTimeString() 获取当地时间二、正则表达式常用的正则表达式不包含汉字 ^[^\u4e00-\u9fa5]+$ 只能输入汉字 [\u4e00-\u9fa5]+总结加油...
复制链接

扫一扫