Javascript_02

1.js的String对象

• 创建String对象var str="abc";

• 方法和属性
  属性length；字符串长度
  （1）与 html 相关的方法

bold（）：加粗
fontcolor（）: 设置字符串饿颜色
fontsize（）：设置字体大小
link（）：将字符串显示成超链接

str4.link（“hello.html”）

• sub（） sup（）：上标和下标
  （2）与 java 相似的方法

concat（）：连接字符串

var str1="abc";
var str2="dfg";
document.write(str1.concat(str2));   // abcdfg

charAt();返回指定位置的字符串

var str3="abcdefg";
document.write(str3.charAt(20)); //字符位置不存在，返回空字符串

indexOf（）：返回字符串位置

var str4="poiuyt";
document.write(str4.indexOf("w"));//若字符存在返回字符的索引位置，若不存在返回 -1

split（）：切分字符串，成数组

var str5="a-b-c-d";
var arr1=str5.split("-");
document.write("length:"+arr1.length);  //4

replace（）：替换字符串

var str6="abcd";
document.write(str6.replace("a","q"));  //qbcd

substr（）和 substring（）

var str7="abcdefghuiop";
document.write(str7.substr(5,5));   //fghui   从第五位开始，向后截取五个字符
document.write(str7.substring(53,5));   //de   从第几位开始，到第几位结束但是不包含最后那一位

2.js 的 Array 对象

创建数组（三种）

 var arr1=[1,2,3];
 var arr2=new array[3];  //长度是3
 var arr3=new array(1,2,3); //数组中的元素是 1,2,3
var arr=[];//创建一个空数组

• 属性
  length：查看数组的长度
• 方法：

concat（） 方法：数组的连接
join（）：根据指定的字符分割数组

var arr13=new array(3);
arr13[0]="a";
arr13[1]="b";
arr13[2]="c";
document.write(arr13); //a,b,c
document.write("
");
document.write(arr13.join("-"));//a-b-c

push()：向数组末尾添加元素，返回数组的新的长度
如果是一个数组，这个时候把数组当做一个整体的字符串添加进去

var arr14=["lisi","lucy","coco"];
var arr15=["xixi","haha"];
document.write("arr14.push(arr15)");//4

pop（）：表示删除最后一个元素，返回删除的那个元素

var arr14=["lisi","lucy","coco"];
document.write("arr14.pop()");//coco
document.write("
");
document.write("arr14");//lisi,lucy

reverse（）：颠倒数组中的元素的顺序

var arr14=["lisi","lucy","coco","cici"];
document.write("arr14.reverse()"); //cici,coco,lucy,lisi

3.js 的 Date 对象

• js 获取当前的时间

var date=new Date();
document.write(date);// Fri Apr 17 10:47:46 UTF+0800 2019

• 转换成习惯的格式

document.write(date.toLocaleString()); //2019年4月8日  10:26:10

• 获取当前年的方法

document.write(date.getFullYear()); //2019 

• 获取当前的月的方法

getMonth(): 获取当前的月
——返回的是0-11月，如果想要得到准确的值，加 1

document.write(date.getMonth()+1); // 4

*获取当前的星期
getDay():星期，返回的是（0~6）
——星期日返回的是零，而星期一到星期六返回的是1~6

• 获取当前的日
  getDate ()：得到当前的天 1-31

document.write(date.getDate());//8

• 获取当前的小时
  getHours ()：获取小时

document.write(date.getHours()); // 20

• 获取当前的分钟
  getMinutes ()：获取分钟

document.write(date.getMinutes()); // 53

• 获取当前的秒
  getSeconds ()：获取秒

document.write(date.getSeconds ()); // 48

• 获取毫秒数
  gettime ()：返回的是 1970 1 1 至今的毫秒数
  应用场景：
  使用毫秒数处理缓存的效果

4.js 的 Math 对象

• 数学的运算
  ——里面的都是静态方法，使用可以直接使用 Math. 方法（）

ceil （x）：向上舍入
floor（x）：向下舍入
round（x）：四舍五入
random（）：得到随机数 （0.0~1.0之间的伪随机数）
——想得到 0~9 之间的随机数

Math.random（）*10；
Math.floor（Math.random（）*10）；

5.js 的全局函数

• 由于不属于任何一个对象，直接写名称使用

eval（）：执行 js 代码（如果字符串是一个 js 代码，使用方法直接执行）

var str="alert('1234');";
alert(str);//alert('1234');
eval(str);//1234

encodeURI（）：对字符进行编码
decodeURI（）：对字符进行解码
isNaN（）：判断当前字符串是否是数字

var str2="aaaa";
alert(isNaN(str2));//true

——如果是数字，返回 false
——如果不是数字，返回 true

parseInt（）：类型转换
——将字符串类型转换为数字类型

6.js 函数的重载

js 里面是否存在重载？不存在
（1）调用最后一个方法
（2）把传递的的参数保存到 arguments 数组里面
js 里面是否存在重载？（面试题目）
（1）js 里面不存在重载。
（2）但是可以通过其他方式模拟重载的效果（通过 arguments 数组来实现）

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

7.js 的 bom 对象

bom：broswer object model：浏览器对象模型
有哪些对象？

navigator：获取客户机的信息（浏览器的信息）

navigator.appName
document.write(navigator.appName);

screen:获取屏幕的信息

document.write(screen.width);
document.write(screen.height);

location请求url地址
href属性

• 获取到请求的url地址

document.write(location,href);

设置url地址

• 页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面

//鼠标点击事件
js:
function href1(){
    //alert("a");
    location.href="../index.html"//跳转
}

history：请求的url的历史纪录

• 创建三个页面
  1.创建第一个页面a.html写一个超链接到b.html
  2.创建第页面b.html写一个超链接到c.html
  3.创建第一个c.html

js:
function back1(){
history.back();
}
function next1(){
    history.forward();
}

window:窗口对象

• 顶层对象（所有的 bom 对象都是在 window 里面操作的）
  window.alert（）：页面弹出一个框，显示内容
  简写 alert（）
confirm（）：确认框

window.confirm("显示的内容")

2.jpg

prompt（）：输入对话框

window.prompt("please input：","0");
window.prompt（"在显示的内容"，“输入框里面的默认值”);

3.jpg

open（）：打开一个新的窗口
创建一个按钮，点击这个按钮，打开一个新的窗口

window.open（“c.html”，“”，“width=200,height=100”）；

open("打开的新窗口的地址 url","","窗口特征，比如窗口宽度和高度");

4.jpg

close（）：关闭窗口（浏览器兼容性比较差）

window.close();

image.png

#做定时器

• setInterval（“js 代码”，毫秒数） 1秒=1000毫秒

window.setInterval（“alert（'123'）;”,3000）;

表示每三秒，执行一次 alert 方法

• setTimeout（"js 代码"，毫秒数）

表示在毫秒数之后执行，但只会执行一次

window.setTimeout（"alert（‘abc’）;"，4000）;

表示四秒之后执行 js 代码，只会执行一次

clearInterval（）：清除 setInterval 设置的定时器

var id1=window.setInterval（“alert（'123'）;”,3000）;
clearInterval（id1）;

clearTimeout（）：清除 setTimeout 设置的定时器

var id2=window.setTimeout（"alert（‘abc’）;"，4000）;
clearTimeout（id2）;

8.js 的dom 对象

dom：document object model：文档对象模型

文档：超文本文档（超文本标记文档）html、xml
对象：提供了属性和方法
模型：使用属性和方法操作超文本标记型文档

可以使用js里面的 dom 里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象
——需要把 html 里面的标签、属性、文本内容都封装成对象
要想对标记型文档进行操作，解析标记型文档
——画图分析，如何使用 dom 解析 html
解析过程：

根据html 的层级结构，在内存中分配一个树形结构，需要把 html 中的每部分封装成对象
document 对象：整个文档
element对象：标签对象
属性对象
文本对象
Node 节点对象：这个对象是这些对象的父对象
如果在对象里面找不到想要的方法，这个时候到 Node 对象里面去找

DHTML :是很多技术的简称

html ：封装数据
css：使用属性和属性值设置样式
dom：操作 html 文档（标记型文档）
JavaScript：专门指的是 js 的语法语句（ECMAScript）

9.document 对象

表示整个的文档
常用方法：

write（）方法：
（1）向页面输出变量值
（2）向页面输出 html 代码
getElementById（）
通过 id 得到元素（标签）

//使用 getElementById 得到 input 标签
var input1=document.getElementById("nameid");  //传递的参数是标签里面的 id 的值
//得到 input 里面的 value 值
alert（input1.name）//标签对象.属性名称
//向 input 里面设置一个值value
input 1.value=“bbbbb”；

getElementsByName（）；
通过标签的 name 的属性值得到标签
返回的是一个集合（数组）

//使用getElementsByName得到 input 标签
var inputs=document.getElementsByName（"name1"）;//传递的参数是
标签里面的 name 的值
//遍历数组
for(var i=0;i

getElementsByTagName（“标签名称”）；
通过标签名称得到元素

//使用getElementsByName得到 input 标签
var inputs=document.getElementsByTagName（"name1"）;//传递的参数是
标签名称
//遍历数组
for(var i=0;i

注意：
只有一个标签，这个标签只能使用 name 获取到，使用 getElementsByName 返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历，而是直接通过数组的下标获取到值

var inputs2=document.getElementsName（“name11”）[0];
alert(inputs2.value);

var inputss=document.getElementsByTagName（“name11”）[0];
alert(inputss.value);