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 ...
随机推荐
- 524. Longest Word in Dictionary through Deleting
Given a string and a string dictionary, find the longest string in the dictionary that can be formed ...
- http系列--HTTP2.0新特性：二进制传输，多路复用，Haeder压缩，服务端push，QUIC协议
一.前言 HTTP 2.0 相比于 HTTP 1.X,可以说是大幅度提高了 web 的性能. 在 HTTP 1.X 中,为了性能考虑,我们会引入雪碧图.将小图内联.使用多个域名等等的方式.这一切都是因 ...
- SpringMVC+Shiro权限管理(转载)
源码 http://pan.baidu.com/s/1pJzG4t1 SpringMVC+Shiro权限管理 博文目录 权限的简单描述 实例表结构及内容及POJO Shiro-pom.xml Shir ...
- SPOJ 20713 DIVCNT2 - Counting Divisors (square)
DIVCNT2 - Counting Divisors (square) #sub-linear #dirichlet-generating-function Let \sigma_0(n)σ0 ...
- 2016北京集训测试赛（十六）Problem B: river
Solution 这题实际上并不是构造题, 而是一道网络流. 我们考虑题目要求的一条路径应该是什么样子的: 它是一个环, 并且满足每个点有且仅有一条出边, 一条入边, 同时这两条边的权值还必须不一样. ...
- 基于http的断点续传和多线程下载
HTTP协议的GET方法,支持只请求某个资源的某一部分: 206 Partial Content 部分内容响应: Range 请求的资源范围: Content-Range 响应的资源范围: 断点续传: ...
- Topshelf+Quartz.net+Dapper+Npoi（一）
背景 前段时间公司有个需求(每天给业务导出一批数据,以excel的形式通过邮件发送给他).A说:直接写个服务,判断等于某个时间点,执行一下sql语句,生成excel,写个EmaiHelper发送给他不 ...
- Delphi中@,^,#,$分别表示什么？
@:取址运算符; var int:integer; p:^integer; new(P); int:=24; p:=@int; dispose(P); ^:指针的引用解析操作符; var pint:^ ...
- JAVAWEB开发之JSP、EL、及会话技术（Cookie和Session）的使用详解
Servlet的缺点 开发人员要十分熟悉JAVA 不利于页面调试和维护(修改,重新编译) 很难利用网页设计工具进行页面设计(HTML内容导入到servlet中,用PrintWriter的对象进行输出) ...
- ASP.NET Web API路由规则（二） 【转】
http://www.cnblogs.com/liulun/archive/2012/06/20/2556556.html 默认的规则 在ASP.NET MVC4中 global.asax.cs代码中 ...