您的位置：首页 > Web前端 > JavaScript

JS基础知识再整理..........不断更新中

2017-02-18 17:30 495 查看

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);

<!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>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航