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日记——食物链 codevs 1047
1074 食物链 2001年NOI全国竞赛 时间限制: 3 s 空间限制: 64000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 动物王国中有 ...
- TP5 多条件whereOr查询
问题背景:最近在用ThinkPHP 5开发项目的过程中,发现根据筛选条件做or查询的时候,连贯操作不可以使用where进行条件查询了. 首先列出一个user数据表的信息: uid uname grad ...
- （5）php数组
定义数组 $arr=array('篮球','自行车','海贼王'); 打印指定数组 echo $arr[0]; 打印全部数组 print_r($arr); 改变数组的值 $arr[0]='足球'; 赋 ...
- TensorFlow——共享变量的使用方法
1.共享变量用途 在构建模型时,需要使用tf.Variable来创建一个变量(也可以理解成节点).当两个模型一起训练时,一个模型需要使用其他模型创建的变量,比如,对抗网络中的生成器和判别器.如果使用t ...
- 10.1综合强化刷题 Day4
财富(treasure) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有n个小伙伴.每个小伙伴有一个身高hi. 这个游戏是这样的,LYK生活的环境是以 ...
- centos7下使用wget命令安装mysql
1.首先安装wget命令: yum -y install wget 2.下载mysql wget http://repo.mysql.com/mysql-community-release-el7- ...
- (译)关于使用Eclipse Memory Analyzer的10点小技巧
作者 Rave_Tian 2016.02.01 17:56* 字数 2988 阅读 520评论 0喜欢 0 分析和理解应用的内存使用情况是开发过程中一项不小的挑战.一个微小的逻辑错误可能会导致监听器没 ...
- 使用REST-Assured对API接口进行自动化测试
转载:http://blog.csdn.net/u012050416/article/details/50674612 准备 目标 开始编码 总结 说明:本文只是一个getStart示例,关键在于 ...
- AngularJS中选择样式
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSSelectClass.rar 要点,{{ctrl.name}}比<spa ...
- 国内云引擎平台概览——新浪SAE，阿里ACE，百度BCE
新浪SAE 平时大家的測试server都是执行在自己的PC上面,用Tomcat或者IIS搭建的本机server. 事实上新浪云平台SinaAppEngine也是挺好用的. 今天总结一下我使用过程中的一 ...