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>
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基础知识再整理..........不断更新中的更多相关文章
- C#基础知识汇总（不断更新中）
------------------------------目录---------------------------- 1.隐式类型2.匿名类型3.自动属性4.初始化器5.委托6.泛型7.泛型委托8 ...
- java基础知识汇总（持续更新中....）
1.java四大特性:抽象.继承.封装,多态 构造函数: http://blog.csdn.net/qq_33642117/article/details/51909346 2.java数据基本类型: ...
- java基础知识-笔记整理
1.查看已安装jdk文件路径 CMD输入java -verbose. 2.java学习提升路线 java学习视屏地址: http://www.icoolxue.com/album/show/38 ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章：Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
随机推荐
- AC日记——【模板】树链剖分 洛谷 P3384
题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式 ...
- Educational Codeforces Round 34 B. The Modcrab【模拟/STL】
B. The Modcrab time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- bjtu 1846. Infinity的装备[状压dp+dfs/bfs]
https://citel.bjtu.edu.cn/acm/oj/problem/1846 1846. Infinity的装备 时间限制 1000 ms 内存限制 64 MB 题目描述 “测试服终于下 ...
- C++面向对象程序设计_Part1
目录 C++历史 C++的组成 C++ 与 C 的数据和函数区别 基于对象与面向对象的区别 C++类的两个经典分类 头文件防卫式声明 头文件的布局 类的声明 类模板简介 内联(inline)函数 访问 ...
- [XJOI-NOI2015-13-C]白黑树
题目大意: 给你一个$n(n\leq300000)$个结点的以$1$为根的树,结点有黑白两种颜色,每个点初始权值为$0$.进行以下2种共$m(m\leq300000)$次操作: 1.给定结点$u$,对 ...
- UVA 10827 Maximum sum on a torus 最大矩阵和
题目链接:UVA - 10827 题意描述:给出一个n*n矩阵,把第一行和最后一行粘一起,把第一列和最后一列粘一起,形成一个环面,求出这个环面中最大的矩阵和. 算法分析:首先复制n*n这个矩阵,形成由 ...
- Beginning Auto Layout Tutorial in iOS 7: Part 3
How Auto Layout works 在使用auto layout之前,你可能总是使用initWithFrame或者frame, bounds or center属性. 使用约束的好处在于你不需 ...
- XCode设置竖屏
选中你的项目,在General这个标签内,Deoployment info的这个分组,有一个Device Orientation 标签,内有一个Portrait的选项,选中是竖屏,取消选中是横屏
- Source tree配置gitlab
1.打开控制台:ssh-keygen -t rsa -C "GIT上的账号邮箱" 2.回车 3.输入密码(git上的账号密码) 4.确认密码 5.输入命令 cd .ssh 6.输入 ...
- MFC中 CString类型用fprintf 函数写到文件中乱码的解决办法
在上一篇中记录了用fprintf函数写内容到文件中的方法,但是发现了问题:产生的文件字符串有乱码现象. 解决办法:用_ftprintf函数 另外,据说: unicode的话要用fwprintf ...