<!doctype html>
<html lang="en">
<head>
<title>day03</title>
<meta content="day03" charset="UTF-8">
</head>
<body>
<pre>
1、js的String对象
*创建String对象
-var str="123";
*属性和方法
-属性 length :字符串长度
-方法
--与html相关的方法
---bold()：加粗
---fontcolor("Color"):字体颜色
---fontsize(1-7):字体大小1-7
---link(URL):将字符串显示为链接
---sup():上标 ,sub():下标
--与java相似的方法
---concat(Object):字符串连接
---charAt(number):返回指定位置的字符串,若不存在该位置，返回一个空字符串，什么都没有;
---indexOf():第一个该字符或字符串位置,如不存在，返回-1;
---split():字符串切割,根据指定字符或字符串切割
---replace():替换字符串
**传递两个参数
-第一个参数：原字符串
-第二个参数：新字符串
---substr()和substring:切割字符串
**参数：
-substr(x,y):x表示起始位置，y截取个数
-substring(x,y):x表示起始位置，y表示结束位置，但是不包含y位置
*代码演示
<script type="text/javascript">
//length属性
var str="123";
document.write(str.length);
//bold方法
document.write("<hr/>");
var str1="adsad";
document.write(str1.bold());
//fontcolor,fontsize方法
document.write("<hr/>");
var str2="adsdsadad";
document.write(str2.fontcolor("Pink"));
document.write(str2.bold().fontcolor("red").fontsize(7));
//link方法
var str3="LinkTyper";
document.write(str3.link("day03-readme-JavaScript.html"));
//sup sub 方法
document.write("<hr/>");
var str4="10";
var str5="20";
document.write(str5);
document.write(str4.sup());
document.write("<br/>");
document.write(str4.sub());
document.write(str5);
//concat，charAt，indexOf方法
document.write("<hr size=1 color='pink'/>");
var st="asd";
var st1="fgh";
document.write(st.concat(st1));
document.write("<hr size=1 color='pink'/>");
document.write(st.charAt(5));
document.write(st.indexOf("w"));
//split方法
document.write("<hr size=1 color='pink'/>");
var st2="hello world java Script";
var arr = st2.split(" ");
document.write("length:"+arr.length);
document.write("<br/>");
for(var i=0;i<arr.length;i++)
{
document.write(arr[i]+"<br/>");
}
//replace方法
document.write("<hr size=1 color='pink'/>");
var st3="dwahdnwkajdkwhahduwhhadwjaldjwoia";
document.write(st3.replace("h","H"));
//substr ， subString方法
document.write("<hr size=1 color='pink'/>");
var st4="dwnajdnj";
document.write(st4.substr(5,3));
document.write("<br/>");
document.write(st4.substring(4,8));
</script>
2、js的Array对象
*创建数组
-var arr1=[1,2,3];
-var arr2=new Array(5);
-var arr3=new Array(1,2,3,4);
-var arr =[];创建一个空的数组
*属性和方法
-属性 length：长度
-方法：
--concat(Array):数组连接
--join(String):根据指定字符或字符串分割字符串,默认逗号
--push(Array/String):向数组末尾添加字符串，并返回新数组的长度;向数组末尾添加数组，把要添加的数组当做一个字符串添加到末尾。
--pop():删除最后一个元素，并返回删除的元素
--reverse():颠倒数组中的元素顺序
*代码演示
<script type="text/javascript">
//length属性
var arr = [1,2,3];
document.write(arr.length);
document.write("<hr color='pink'/>");
//concat方法
var arr1 = [4,5,6];
document.write(arr.concat(arr1));
document.write("<hr color='pink'/>");
//join方法
var arr2 = new Array(3);
arr2[0] = "a";
arr2[1] = "b";
arr2[2] = "c";
document.write(arr2.join("-"));
//push，pop方法
document.write("<hr color='pink'/>");
var arr3 = new Array(3);
arr3[0] = "jack";
arr3[1] = "lucy";
arr3[2] = "Tom";
document.write(arr3.push("Tony"));
document.write("<hr color='pink'/>");
var arr4 = ["xia","yujie"];
document.write(arr3.push(arr4));
document.write("<br/>");
for(var i=0;i<arr3.length;i++)
{
document.write(arr3[i]);
document.write("<br/>");
}
//pop,reversse方法
document.write("<hr color='pink'/>");
document.write(arr3.pop());
document.write("<hr color='pink'/>");
document.write(arr3.reverse());
</script>
3、js的Date对象
*在java里面获取当前时间
Date date = new Date();
//格式化
//toLocaleString()
*js里面如何获取当前时间
-var date = new Date();
*方法
-toLocaleString():转换成本地格式的时间
-getFullYear():返回年份
-getMonth():返回月份（0-11）
-getDay():返回星期（0-6 0：星期天）
-getDate():返回当月中的第几天
-getHours():返回小时
-getMinutes():返回分钟
-getSeconds():返回秒
-getTime:返回距1970年1月1日至今的毫秒数
--应用场景：使用毫秒数处理缓存的效果（不有缓存）
http://www.baidu.com？毫秒数
?后面加参数
*代码演示
<script type="text/javascript">
//toLocaleString,getFullYear,getMonth,getDay,getDate方法
var date = new Date();
document.write(date.toLocaleString());
document.write("<hr color='pink'/>");
document.write(date.getFullYear());
document.write("<hr color='pink'/>");
document.write(date.getMonth()+1);
document.write("<hr color='pink'/>");
document.write(date.getDay());
document.write("<hr color='pink'/>");
document.write(date.getDate());
//getHours,getMinutes,getSeconds方法
document.write("<hr color='pink'/>");
document.write(date.getHours());
document.write("<hr color='pink'/>");
document.write(date.getMinutes());
document.write("<hr color='pink'/>");
document.write(date.getSeconds());
//getTime方法
document.write("<hr color='pink'/>");
document.write(date.getTime());
document.write("<hr/ color='pink'>");
</script>
4、js的Math对象
*数学运算
*里面都是静态方法，使用可以直接使用，类名.方法名()
-ceil():向上取整
-floor():向下取整
-round():四舍五入
-random():返回0-1随机数，伪随机数
-max(x,y),min(x,y)
-pow(x,y):x的y次方
--弧度：角度*PI/180
*属性
-PI,E
*代码演示
<script type="text/javascript">
//ceil,floor,round方法
var m = 10.4;
document.write(Math.ceil(m));
document.write("<hr color='Pink'/>");
document.write(Math.floor(m));
document.write("<hr color='Pink'/>");
document.write(Math.round(m));
//random，pow方法
document.write("<hr color='Pink'/>");
document.write(Math.round(Math.random()*10));
document.write("<hr color='Pink'/>");
document.write(Math.pow(2,3));
//PI,E属性
document.write("<hr color='Pink'/>");
document.write(Math.PI);
document.write("<hr color='Pink'/>");
document.write(Math.E);
</script>
5、js的全局函数
*由于不属于任何一个类，直接写名称使用
-eval():计算JavaScript 字符串,并把它作为脚本代码来执行(如果字符串是一个js代码，使用方法直接执行)
-encodeURI() 把字符串编码为 URI
-decodeURI() 解码某个编码的 URI
-encodeURIComponent() 把字符串编码为 URI 组件
-decodeURIComponent() 解码一个编码的 URI 组件
-isNaN:检查某个值是否是数字,字符返回true或数字返回false,
-parseInt，parseFloat():类型转换
*代码演示
<script type="text/javascript">
//eval方法
var str = "alert('123456')";
eval(str);
//encodeURI,decodeURI方法
var str1="夏天aaa123!@#$%^&*()";
document.write("<hr color='pink'/>");
var encodeURI = encodeURI(str1);
document.write(encodeURI);
document.write("<hr color='pink'/>");
document.write(decodeURI(encodeURI));
document.write("<hr color='pink'/>");
var encodeURIComponent = encodeURIComponent(str1);
document.write(encodeURIComponent);
document.write("<hr color='pink'/>");
document.write(decodeURIComponent(encodeURIComponent));
//isNaN方法
document.write("<hr color='pink'/>");
var m = "123";
document.write(isNaN(m));
//parseInt方法
document.write("<hr color='pink'/>");
document.write(parseInt(m)+1);
</script>
6、js的函数重载
*什么是重载？方法名相同，参数不同
*js的重载是否存在？不存在
-调用最后一个方法
*js里面是否存在重载？
-js里面不存在重载
-但是js可以通过其他的方式模拟重载，将传递的参数保存到arguments数组里面了
*代码演示
<script type="text/javascript">
//模拟重载
function add1()
{
if(arguments.length==2)
{
return arguments[0]+arguments[1];
}else if(arguments.length==3)
{
return arguments[0]+arguments[1]+arguments[2];
}else if(arguments.length==4)
{
return arguments[0]+arguments[1]+arguments[2]+arguments[3];
}else
{
return 0;
}
}
/*function add1(a,b)
{
//将传递参数保存到arguments数组里面去
document.write("length："+arguments.length+"<br/>");
document.write("<hr color='green'/>");
for(var i=0;i<arguments.length;i++)
{
document.write(arguments[i]);
}
return a+b;
}
function add1(a,b,c)
{
return a+b+c;
}*/
//调用
document.write("<br/>"+add1(1,2)); //NaN
document.write("<hr color='orange'/>");
document.write("<br/>"+add1(1,2,3)); //6
</script>
7、js的bom对象：broswer object medal 浏览器对象模型
*那些对象？
-navigator:
--属性
*appName：返回浏览器名称
*platform:返回运行浏览器的操作系统平台
-screen:
--属性
*width：返回显示器屏幕的宽度
*height：返回显示屏幕的高度
-location:
--属性
*href：
-获取到请求的url地址
-设置url地址。
--页面上安置一个按钮，按钮上绑定一个事件，当我点击按钮，页面可以跳转到另一个页面
location.href = "String.html";
--<input type="button" value="Jump" onclick="href1();"> onclick=“js方法”
-history:
--属性
*length 返回浏览器历史列表中的 URL 数量
--方法
*back() 加载 history 列表中的前一个 URL
*forward() 加载 history 列表中的下一个 URL
-window(***):
*窗口对象
*顶层对象（所有的bom对象都是window里面操作的）
-方法
--alert():显示带有一段消息和一个确认按钮的警告框
--confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
--prompt():显示可提示用户输入的对话框
---window.prompt("显示内容","输入框默认值")
--open():打开一个新的浏览器窗口或查找一个已命名的窗口
---window.open("打开新窗口url","","窗口特征")
--close():关闭窗口，浏览器兼容性比较差
--做定时器
*setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
-window.setInterval("js代码",毫秒) 一直执行,返回一个id
*setTimeout() 在指定的毫秒数后调用函数或计算表达式
-setTimeout("js代码"，毫秒) 只执行一次,返回一个id
*clearInterval():清除setInterval设置的定时器
*clearTimeOut():清楚setTimeout设置的定时器
*代码演示
<input type="button" value="Jump" onclick="href1();">
<script type="text/javascript">
//Navigator对象
//appName,platform属性
document.write(navigator.appName);
document.write(navigator.platform);
document.write("<hr color='gray'>");
//screen对象
//width，height属性
document.write(screen.width+"<br/>");
document.write(screen.height);
document.write("<hr color='gray'>");
//location对象
//href属性
document.write(location.href);
//方法
function href1()
{
location.href = "String.html";
}
</script>
<input type="button" value="Back" onclick="back1()">
<input type="button" value="Forward" onclick="forward1()">
<script type="text/javascript">
//用于演示bom对象的history方法 back和forward
function back1()
{
history.back();
}
function forward1()
{
history.forward();
}
</script>
<input type="button" value="open" onclick="open1()"/>
<input type="button" value="clear" onclick="clearInterval1()">
<script type="text/javascript">
//window对象
//alert,confirm方法
var flag = window.confirm("Whether or not to delete?");
//alert(flag);//确认 返回true 取消 返回false
if(flag==true)
{alert("successfully delete");}
else
{alert("fail to delete");}
//prompt方法
var st = window.prompt("Please Input:","");
document.write(st);
//open方法
function open1()
{window.open("Date.html","","width='500' height='500'");}
//close方法
//window.close();
//setInterval , setTimeout方法
var id = window.setInterval("alert('12355');",5000);
//clearInterval ,clearTimeout方法
function clearInterval1()
{
window.clearInterval(id);
}
</script>
8、js的dom对象 ：document object medal 文档对象模型
*文档：超文本文档 （超文本标记文档）html xml
*对象：提供属性和方法
*模型：使用属性和方法操作超文本标记型文档
*可以使用js里面的dom提供的对象，使用这些对象的属性和方法，对标记型文档进行操作。
*想要对标记型文档进行操作，首先需要，对标记型里面的所有内容封装成对象，需要把html里面的标签，属性，文本内容都封装成对象。
*想要对标记型文档进行操作，解析标记型文档，图解dom解析html过程
*解析过程，根据html层次结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象
-document：整个标记型文档
-element：标签对象
-属性对象
-文本对象
-Node节点对象，这个对象是这些对象的父对象，如果在对象里面找不到想要的方法，这个时候到Node对象里面去找需要的方法
*DOM三种模型：
-DOM level 1：将html文档封装成对象
-DOM level 2：在level 1基础上添加新的功能，例：对于事件和css样式的支持
-DOM level 3：支持xml1.0一些新特性
*DHTML：很多技术的简称
-html：封装数据
-css：使用属性和属性值设置样式
-dom：操作html文档（标记型文档）
-JavaScript：专门指的是js语法语句（ECMAScript）
9、document对象
*表示整个文档
*常用方法
-write()：
--向页面输出变量（值）
--向页面输出html代码
-getElementById():使用该方法，通过id属性值返回标签名称,即可以获取标签的属性值和设置属性值等
-getElementsByName:根据name属性值，返回带有指定名称的对象集合
-getElementsByTagName:根据标签名称，返回带有指定名称的对象集合
*代码演示
<input type="button" value="aaa" id="id" name="name"/>
<input type="button" value="bbb" id="id1" name="name"/>
<input type="button" value="ccc" id="id2" name="name"/>
<input type="button" value="ddd" id="id3" name="name"/>
<div value="Test">aaa<div/>
<script type="text/javascript">
//write方法
document.write("wdawd");
document.write("<hr color='pink'/>");
//getElementById方法 使用该方法得到input标签
var ret = document.getElementById("id")
document.write(ret+"<br/>");
//获取input标签的value,name属性值
document.write(ret.value+"<br/>");
document.write(ret.name+"<br/>");
//向input里面设置一个value值
ret.value="haha";
document.write(ret.value);
document.write("<hr color='pink'/>");
//getElementsByName方法
var inputs = document.getElementsByName("name");
for(var i=0;i<inputs.length;i++)
{
document.write(inputs[i].value+"<br/>");
}
document.write("<hr color='blue'/>");
//getElementsByTagName方法
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
document.writeln(inputs[i].value);
}
document.write("<hr color='blue'/>");
//getElementsByName方法 和 getElementsByTagName方法 返回数组长度为1时
var div1 = document.getElementsByTagName("div")[0];
document.writeln(div1.value);
</script>
10、window弹窗案例
*实现过程
-创建页面，输入项两个，一个按钮，且按钮上面有个事件
-事件弹出一个新窗口
-创建弹出的页面，存在表格，表格每一行都有一个按钮，编号，姓名
-按钮上也有一个事件，事件发生复制姓名和编号到输入项
-window属性opener ：返回对创建此窗口的窗口的引用
-做这个案例时候会有一个问题
--由于我们现在访问的是本地文件，js安全性，谷歌浏览器安全级别很高，不允许访问本地文件
--在实际开发中，没有这样的问题，实际中不可能访问本地的文件
</pre>
</body>
</html>
JavaScript的对象
猜你喜欢
转载自blog.csdn.net/weixin_39531549/article/details/81262522
今日推荐
周排行