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>

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>

JS基础知识再整理..........不断更新中的更多相关文章

  1. C#基础知识汇总（不断更新中）

    ------------------------------目录---------------------------- 1.隐式类型2.匿名类型3.自动属性4.初始化器5.委托6.泛型7.泛型委托8 ...

  2. java基础知识汇总（持续更新中....）

    1.java四大特性:抽象.继承.封装,多态 构造函数: http://blog.csdn.net/qq_33642117/article/details/51909346 2.java数据基本类型: ...

  3. java基础知识-笔记整理

    1.查看已安装jdk文件路径 CMD输入java -verbose.   2.java学习提升路线 java学习视屏地址: http://www.icoolxue.com/album/show/38 ...

  4. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  5. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  6. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  7. NodeJs>------->>第三章：Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  8. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  9. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

随机推荐

  1. 二叉树遍历 Morris

    二叉树的遍历,先根遍历,不适用递归,存储空间为 O(1) 转自:http://chuansongme.com/n/100461 MorrisInOrder(): while 没有结束 如果当前节点没有 ...

  2. springBoot 快捷键

    设置idea导入包 勾选标注 2 选项,IntelliJ IDEA 将在我们书写代码的时候自动帮我们优化导入的包,比如自动去掉一些没有用到的包. 勾选标注 1 选项,IntelliJ IDEA 将在我 ...

  3. 洛谷——P1785 漂亮的绝杀

    P1785 漂亮的绝杀 题目背景 话说absi2011的企鹅在和斗神塔第60层的Boss战斗 不好,这局要输了,企鹅还剩4血了Boss还有392呢,哇,漂亮——红缨枪连击,280,343(暴击),绝杀 ...

  4. codevs——2102 石子归并 2（区间DP）

    时间限制: 10 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 在一个园形操场的四周摆放N堆石子,现要将石子有次序地 ...

  5. c# datetime是一年中的第几周

    public static int WeekOfYear(DateTime dt, CultureInfo ci) { return ci.Calendar.GetWeekOfYear(dt, ci. ...

  6. Git 详细的操作指南笔记

    喜欢的朋友start一下,长期更新文章 设置 安装git后我们需要配置一下,告诉git我们的基本信息等等..一般在用户范围内去配置 git ,也就是在 global 范围. global 全局设置 $ ...

  7. HDU2830

    一开始把题目意思理解错啦,做那好久没做出来.本题是一个dp问题:题目说列可以无限次对换,设矩阵为M[i][j],要找到面积大的矩形其实就是处理连续1的个数问题,用d[i][j](i表示行,j表示列)表 ...

  8. MFC中 报错：error : bitmap file Res\tankBattle.ico is not in 3.00 format

    今天换了一个ico图标,本来源图像是bmp的,让我改了后缀名成ico. 然后编译就报错了:error : bitmap file Res\tankBattle.ico is not in 3.00 f ...

  9. Shell脚本部分语法

    Shell中的变量   Linux Shell中的变量分为“系统变量”和“用户自定义变量”,可以通过set命令查看那系统变量 系统变量:$HOME.$PWD.$SHELL.$USER等等 显示当前sh ...

  10. 2016.6.21 maven：Failure to transfer ... from ....

    问题描述: 才刚新建的工程,什么都没做,就显示pom.xml有问题,在第一行的标签上 有如下错误: 点击详情: Failure to transfer org.apache.maven:maven-p ...