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. HTML5-contentEditable属性规定是否可编辑元素的内容

    contentEditable='true' :可以编辑 contentEditable='false' :不可以编辑

  2. Ceres Solver: 高效的非线性优化库(一)

    Ceres Solver: 高效的非线性优化库(一) 注:本文基于Ceres官方文档,大部分由英文翻译而来.可作为非官方参考文档. 简介 Ceres,原意是谷神星,是发现不久的一颗轨道在木星和火星之间 ...

  3. z-index 基础详解

    关于z-index网上其实有不少博文,写得也不错,不过有些帖子比较旧,而IE也已经更新到了IE11了,所以还是重新总结一下.由于 z-index 的属性表现和层级有关,有些特点在某些层级下才表现出来, ...

  4. python中mp3转wav(Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but may not work")

    1.下载pydub:pip install pydub 2.下载与操作系统一致的ffmpeg:http://ffmpeg.org/download.html 3.解压后将下载的ffmpeg下的bin目 ...

  5. 【spring boot logback】日志logback 生成日志文件在本项目下,而不在指定的日志文件目录下/指定日志文件到达最大值后不按照配置进行切割

    原本的日志文件配置如下: <?xml version="1.0" encoding="UTF-8"?> <configuration scan ...

  6. mac为photoshop添加字体

    https://jingyan.baidu.com/article/a3761b2b8484321576f9aaac.html 一. 1)点击Launchpad 2)搜索“字体册” 二 打开字体册 三 ...

  7. 查找python项目依赖并生成requirements.txt

    1.如果使用virtualenv环境,直接使用 pip freeze > requirements.txt ➜  ~ .virtualenvs/xxx/bin/pip freeze > r ...

  8. MySQL主库异常,从库手动切换为主库方案

    主库异常,从库手动切换为主库方案 1.登录从服务器,确认从服务器已经完成所有同步操作: mysql> stop slave io_thread mysql> show processlis ...

  9. Linux 正则表达式 vi, grep, sed, awk

          1. vi 表示内容的元字符 模式 含义 . 匹配任意字符 [abc] 匹配方括号中的任意一个字符.可以使用-表示字符范围,如[a-z0-9]匹配小写字母和阿拉伯数字. [^abc] 在方 ...

  10. C 作用域规则

    C 作用域规则 任何一种编程中,作用域是程序中定义的变量所存在的区域,超过该区域变量就不能被访问.C 语言中有三个地方可以声明变量: 在函数或块内部的局部变量 在所有函数外部的全局变量 在形式参数的函 ...