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 ...
随机推荐
- jenkins 中 violation使用pylint
在jenkins中无法打开源码问题: 1. 在 Report Violations的 Source encoding 设置为 项目文件的编码, 如: utf-8. 缺省是 default. 2. 在 ...
- nodejs递归创建目录
var fs = require("fs"); var path = require("path"); // 递归创建目录 异步方法 function mkdi ...
- 转载：html+js实现只允许输入两位小数的输入框
JS代码: <script language="JavaScript" type="text/javascript"> function clear ...
- 线程安全的单例模式还需要对成员变量的set get方法设置锁么
不需要,线程安全的单例模式,在获得对象时已经加锁了,保证每时每刻只有一个线程获得此单例对象.所以不需要再上锁了啊
- iOS进行单元测试OCUnit+xctool
单元测试 什么是单元测试 wiki解释 简单说来就是为你的方法多专门写一个测试函数.以保证你的方法在不停的修改开发中.保持正确.如果出错,第一时间让你知道,这样从最小单位开始监控来保证软件的质量. 我 ...
- 写在php设计模式前
在学校写代码的时候,看过许多代码,跟着学长学过一段时间.找工作的时候由于种种原因,从事于本专业, 最近重拾php,充充电,找个好工作. 以前项目中设计模式用的比较多的也就是单例模式,看书中回顾写过的代 ...
- SQL Server数据库连接，Web.config的正确配置 [转]
http://database.51cto.com/art/201007/213289.htm 此文章主要介绍的是Web.config正确配置SQL Server数据库连接的实际擦步骤,在图5-6中, ...
- TensorFlow笔记三：从Minist数据集出发 两种经典训练方法
Minist数据集:MNIST_data 包含四个数据文件 一.方法一:经典方法 tf.matmul(X,w)+b import tensorflow as tf import numpy as np ...
- Android--数据库数据显示至屏幕
MainActivity.java 这段代码的作用是从数据库中获取到数据并显示在界面上 import java.util.ArrayList; import java.util.List; impor ...
- vue2.0 仿手机新闻站（四）axios
1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from ...