javaScript基础
2016-09-18 15:11
288 查看
一.javaScript
1.js的String对象
(1).创建string对象var str="abc";
(2).常用方法和属性(文档)
属性
length: 字符串的长度
方法
与html相关的方法
bold(): 加粗
fontcolor(): 设置字符串的颜色
fontsize(): 设置字符串的大小(1-7)
link(): 将字符串显示成超链接
sub(): 下标
sup(): 上标
与java相似的方法
concat(): 连接字符串
charAt(): 返回指定位置的字符串
indexOf(): 返回字符串位置
split(): 切分字符串,成数组
replace(): 替换字符串
substr()和substring():
substr(5,5): 从第五位开始截取长度为5的字符串
substring(5,3): 从第几位开始到第几位结束 包左不包右
(3).常用方法属性代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var str="123456";
document.write(str.length+" ");
var str1="abc";
document.write(str.concat(str1)+" ");
document.write(str.charAt(1)+" ");
document.write(str.indexOf("6")+" ");
document.write(str.substr(1,5)+" ");
document.write(str.substring(1,5)+" ");
document.write(str.bold())
</script>
</body>
</html>注意：只实现部分方法 实现都一样 就不浪费时间了
2.js的Array对象
(1).创建数组(三种)var arr1=[1,2,3,4];//元素为1,2,3,4
var arr2=new Array(5);//创建一个长度为5的数组
var arr3=new Array(1,2,3,4,5);//创建一个包含1,2,3,4,5的数组
(2).常用方法和属性(文档)
属性:
length: 数组的长度
方法:
concat(): 连接数组
join(): 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
push(): 向数组末尾添加一个或更多元素,并返回数组的新的长度
如果添加的是一个数组,这个时候把数组当做一个整体字符串添加进去
pop(): 删除最后一个元素,返回删除的那个元素
reverse(): 颠倒数组中的元素的顺序
(3).常用方法属性代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var arr1=[1,2,3,4];
var arr3=new Array(1,2,3,4,5);
var arr2=new Array(5);
document.write(arr3);
document.write(" "+arr3.length+" ");
document.write(arr3.concat(arr1));
document.write(" "+arr3.pop()+" ");
document.write(arr3.reverse());
</script>
</body>
</html>注意：只实现部分方法 实现都一样 就不浪费时间了
3.js的Date对象
(1).在java里面获取当前时间Date date = new Date(); //格式化 //toLocaleString()
(2).js里面获取当前时间
var date=new Date(); //toLocaleString:根据本地时间格式，把Date对象转换为字符串。
(3).常用方法
getFullYear():从Date对象以四位数字返回年份
getMonth():(0-11) 获取当前的月方法 0是12月份
getDay():(0-6) 获取当前的星期 0是星期天 因为发明者是外国人 所以这是外国人的习惯
getDate():得到当前的天(1-31)
getHours():获取当前的小时
getMinutes():获取当前的分钟
getSeconds():获取当前的秒
getTime():返回1970年1月1日至今的毫秒数
(4).常用方法代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var time =new Date();
document.write(time.getFullYear());
document.write("<br/>");
document.write(time.getMonth()+"<br/>");
document.write(time.getDay()+"<br/>");
document.write(time.getHours()+"<br/");
document.write(time.getMinutes()+"<br/>");
document.write(time.getSeconds()+"<br/>");
document.write(time.getTime()+"<br/>");
</script>
</body>
</html>注意:使用毫秒数处理缓存的效果(不有缓存)
4.js的Math对象
(1).注意事项数学的运算
里面的都是静态方法,使用直接使用Math.方法()
(2).常用方法
ceil(x): 向上舍入
floor(x): 向下舍入
round(x): 四舍五入
random(): 得到随机数(伪随机数) 0.0-1.0
pow()
sqrt():返回数的平方根
(3).常用方法代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> var m=100.16; document.write(Math.abs(m)+"<br/>"); document.write(Math.ceil(m)+"<br/>"); document.write(Math.floor(m)+"<br/>"); document.write(Math.round(m)+"<br/>"); document.write(Math.random()+"<br/>"); document.write(Math.pow(m,2)+"<br/>"); </script> </body> </html>
5.js的全局函数
(1).介绍由于不属于任何一个对象,直接写名称使用
eval(): 执行js代码(如果字符串是一个js代码,使用方法直接执行)
(2).常用方法
encodeURI(): 对字符进行编码
decodeURI(): 对字符进行解码
encodeURIComponent() 和 decodeURIComponent() 编码和解码
isNaN(): 判断当前字符串是否是数字 是数字 false 不是数字 true
parseInt(): 类型转换
(3).常用方法代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var str="alert('1234');";//注意里面是单引号
eval(str);//执行alert操作
var str1="是的好几天鱼鱼开口规划局";
var eval1=encodeURI(str1);//编码成一堆 %E6%98%AF%E7%9A%84%E5%A5%BD%E5%87%A0%E5%A4%A9%E9%B1%BC%E9%B1%BC%E5%BC%80%E5%8F%A3%E8%A7%84%E5%88%92%E5%B1%80
document.write(eval1+"<br/>");//打印就上面那个
var str2=decodeURI(eval1);//解码成中文
document.write(str2);
document.write("<br/>");
document.write(isNaN(str2));//判断是否是数字
</script>
</body>
</html>6.js的函数的重载
(1).什么是重载？方法名相同,参数不同
(2).js的重载是否存在？
不存在
就近原则
把传递的参数保存到 arguments数组里面
(3).js里面是否存在重载？
A.js里面不存在重载
B.但是可以通过其他方式模拟重载的效果 通过arguments数组来实现
(4).js的重载通过arguments数组实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function add() {
alert(arguments.length);
}
add(1,2,3,4);
add(1,2,3);
add(1,2);
</script>
</body>
</html>打印的分别是
说明传入方法add中的值由arguments数组接收了 所以我们可由它来实现js的重载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function add() {
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
document.write(sum);
document.write("<br/>");
}
add(1,2,3,4);
add(1,2,3);
add(1,2);
</script>
</body>
</html>效果如下:
7.js的bom对象
(1).bom的解释broswer object model: 浏览器对象模型
(2).bom的对象
navigator: 获取客户机的信息(浏览器的信息)
navigator.appName//火狐浏览器打印-Netscape
screen: 获取屏幕的信息
screen.height//火狐浏览器打印-864
screen.width//火狐浏览器打印-1536
location: 请求url地址
获取到请求的url地址
location.href//打印的url地址
设置url地址
页面上安置一个按钮,按钮上绑定一个时间,当我点击这个按钮,页面可以跳转到另外一个页面 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="添加" onclick="run();"/>
<hr/>
<script type="text/javascript">
function run() {
location.href="Array.html";
}
document.write(location.href);
document.write("<hr/>");
document.write(screen.width+" "+screen.height+" "+navigator.appName);
</script>
</body>
</html>使用方法如下: <input type="button" value="" onclick="方法"/> 鼠标点击事件 onclick="js的方法"; location.href="跳转的地址";
history:请求的url的历史记录
创建三个页面
1.创建第一个页面 a.html 写一个超链接 到b.html
2.创建b.html 超链接 到 c.html
3.创建c.html
history.back(): 到上一个页面
history.forward(): 到下一个页面
history.go(-1): 到上一个页面
history.go(1): 到下一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Aaaaaaaaaaaaaaaaaaaaaaa</h1>
<a href="b.html">aaaaa</a>
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>bbbbbbbbbbbbbbbb</h1>
<input type="button" value="上一页" onclick="back1();"/>
<input type="button" value="下一页" onclick="forword1();"/>
<a href="c.html">bbbbb</a>
<script type="text/javascript">
function back1() {
history.go(-1);
}
function forword1() {
history.go(1);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>CCCCCCCCCCCCC</h1>
<input type="button" value="上一页" onclick="back2();"/>
<script type="text/javascript">
function back2() {
history.go(-1);
}
</script>
</body>
</html>注意：不过有点扯淡的地方 必须先点超链接进入下一页才能直接这个是下一页 这样点下一页 上一页有用 不然没用
window:
窗口对象
顶层对象(所以的bom对象都是在window里面操作的)
比如上面的那些方法前面其实都应该加上window.，但其实这个是可以省略的
方法
window.alert(): 页面弹出一个框,显示内容
简写alert()
confirm(): 确认提示框
var flag=window.confirm(“确定要删除？”);
prompt(): 输入的对话框
window.prompt(“please input:”,”0”);
window.prompt(“在显示的内容”,”输入框里面的默认值”);
open(): 打开一个新的窗口
open(“打开的新窗口的地址”,”“,”窗口的特征,比如窗口宽度和高度”);
创建一个按钮 点击这个按钮 打开一个新的窗口
window.open(“XXX.html”,”“,”width=200,height=200”);
close(): 关闭窗口(浏览器兼容性比较差)
window.close();
做定时器
setInterval(“js代码”,毫秒数) 1秒=1000毫秒
每三秒,执行alert一次
window.setInterval(“alert(‘123’);”,3000);
setTimeout(“js代码”,毫秒数)
通过setInterval有一个返回值
clearInterval(id1);
clearTimeout(): 清除setTimeout设置的定时器
通过setTimeout有一个返回值
clearTimeout(id2);
8.js的dom对象
(1).性质:dom: document object model: 文档对象模型
文档:
超文本文档(超文本标记文档) html,xml
对象:
提供了属性和方法
模型: 使用属性和方法操作超文本标记型文档
可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作
想要对标记型文档进行操作,首先需要 对标记型文档里面的所有内容封装成对象
需要把html里面的标签,属性,文本内容都封装成对象
要想对标记型文档进行操作,解析表标记型文档
画图分析 如何使用dom解析html
(2).解析过程
根据html的层级结构,在内存中分配一个树形结构,需要把html中的每部分封装成对象,
document对象: 整个文档 element对象: 标签对象 属性对象 文本对象
Node节点对象:这个对象是这些对象的父对象
如果在对象里面找不到想要的方法,这个时候到Node对象里面去找
dom模型有三种
DHTML: 是很多技术的简称 有以下的技术
html: 封装数据
css: 使用属性和属性值设置样式
dom: 操作html文档(标记型文档)
javascript: 专门指的是js的语法语句(ECMAScript)
9.document对象
表示整个文档(1).常用方法
A.write()方法:
(1).向页面输出变量(值)
(2).向页面输出html代码
B.getElementById();通过id得到元素(标签)
C.getElementsByName();
通过标签的name的属性值得到标签
返回的是一个集合(数组)
D.getElementsByTagName(“标签名称”);
通过标签名得到元素
返回的也是一个集合(数组)
注意:只有一个标签,这个标签只能使用name获取到,这个使用,使用getElementsByName返回的是一个数组,但是现在只有一个元素,这个时候不需要遍历,而是直接通过数组的下标来获取值
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 