JS基础知识再整理..........不断更新中

Posted 2020-08-31 业务高于技术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS基础知识再整理..........不断更新中相关的知识，希望对你有一定的参考价值。

1.JS的五种基本数据类型：字符串、数值、布尔、null、underfined。

2.在JS中，字符串、数值、布尔三种数据类型，有其属性和方法；

3.字符串的三种常用方法[.indexof()、.substring()、.split()]和一种常用属性[.length];

例子如下：

  /*提取字符串中列表的每一项*/
    var aa="This is a list:red,blue,white,black.";
    var start=aa.indexOf(":");     /* 找到：在的索引*/
    var end=aa.indexOf(".");       /* 找到字符串最后的.的索引*/
    var str=aa.substring(start+1,end);     /*substring("起始索引","结束索引");如果没有结束索引，默认截取到末位置*/
    var color=str.split(",");               /*split(",");按照，进行分割，分割之后是数组*/
    for(var i=0;i<color.length;i++)
    {
        alert(color[i]);
    }

4.向字符串中插入转义字符

例如：向已知字符串插入版权符号用\\u00A9是插入版权符号

var aa="This is a \\u00A9 list.";
    alert(aa);

常用转义字符：\\\'单引号 \\"双引号 \\\\反斜杠 \\b退格 \\f换页符 \\n换行 \\r回车 \\t水平制表符

5.字符串的替换,replace("旧字符","新字符或者生成新字符的函数");

6.addEventListener("click/mouseover等事件","执行函数","true/false") 方法用于向指定元素添加事件句柄，即给元素添加绑定事件。true - 事件句柄在捕获阶段执行.false- false- 默认。事件句柄在冒泡阶段执行。

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() 
{
    alert ("Hello World!")
}
function someOtherFunction() 
{
    alert ("该函数也将被执行!")
}
</script>

7.鼠标跟随事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center;  background:#06c; position:absolute; cursor:pointer; color:#fff}
</style>
</head>
<body style="height:1000px;">
<div id="to_top">鼠标跟随</div><!--跟随鼠标的div，一定要设置position，并且position一定是absolute-->
</body>
</html>
<script>
window.onload = function(){
  var oTop = document.getElementById("to_top");
  document.onmousemove = function(evt){
    var oEvent = evt || window.event;
    var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
    oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
  }
}
</script>

View Code

8.鼠标跟随事件，显示浮动层

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #kuang{width: 200px;
        height: 100px;
        border: 1px solid #CCCCCC;
        background-color: white;
        word-wrap:break-word; /*让文本换行*/
        word-break:break-all;
        display: none;
        position: absolute;
        }
        #jiantou{
            width: 10px;
            height: 10px;
            border: 1px solid #CCCCCC;
            border-style: none none solid solid;
            left: -6px;
            top: 10px;
            position: relative;
            transform: rotate(45deg);/*箭头45度处理*/
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            background-color: white;
            }
    </style>
</head>
<body>
  <ul>
  <!--静态页面时，不用加code主键值，当改动态页面时，循环输出这些li时，给每个主键值，然后根据主键值，通过ajax调数据，显示在浮动层-->
    <li code="n001">1111111</li>
    <li code="n002">2222222</li>
    <li>3333333</li>
    <li>4444444</li>
    <li>5555555</li>
    </ul>
    <div id="kuang">
        <div id="jiantou"></div>
        <div>djk</div>
        <div id="nr"><p>djlsakjdslk</p></div>
    </div>
        
</body>
</html>
<script type="text/javascript">
    window.onload=function()
    {
        
        var li=document.getElementsByTagName("li");
        
        var kuang=document.getElementById("kuang");
        for(var i=0;i<li.length;i++)
        {
            
            li[i].onmouseover=function(ev)
            {
                var ev=ev||event;
                kuang.style.display="block";
                kuang.style.left=(ev.clientX-this.scrollLeft+20)+"px";
                kuang.style.top=(ev.clientY-this.scrollTop-10)+"px";
                
                
                /*下面是改动态页面时，往浮动层中添加内容*/
                /*var code = this.getAttribute("code");
                
                $.ajax({
                    url:"",
                    data:{},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data){
                            $("#nr").html(data);
                        }
                    });*/
                
            }
            li[i].onmouseout=function(ev)
            {
                var ev=ev||event;
                kuang.style.display="none";
            }
            li[i].onmousemove=function(ev)
            {
                var ev=ev||event;
                kuang.style.display="block";
                kuang.style.left=(ev.clientX-this.scrollLeft+20)+"px";
                kuang.style.top=(ev.clientY-this.scrollTop-10)+"px";
            }
            
        }
        
    }
</script>

View Code

以上是关于JS基础知识再整理..........不断更新中的主要内容，如果未能解决你的问题，请参考以下文章

VS2010中代码自动对齐的快捷键是啥？以前是Alt+F8就有用的，可是现在不行了。

jmeter实操及性能测试基础知识整理 - 不断更新

idea中代码出现褐色方块怎么办

js事件(Event)知识整理

Vue5-Vuejs面试中常问知识点整理