1.js 的 string 对象

创建 string 对象

var str="abc";

方法和属性
（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("<br/>");
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("<br/>");
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 地址

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

location.href="hello.html";
<input type="button" value="tiaozhuan" onclick="href1();"

—— 鼠标点击事件，onclick ="js 的方法"

• history :请求的 url 的历史记录
  ——访问上一个页面

history.back（）；
history.go（-1）；
——访问到下一个页面
history.forward（）；
history.go(1）；

- window
窗口对象
顶层对象（所有的 bom 对象都是在 window 里面操作的）

方法

• window.alert（）：页面弹出一个框，显示内容
  简写 alert（）

• confirm（）：确认框

var flag=window.confirm("显示的内容");

image.png

• prompt（）：输入对话框

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

image.png

• open（）：打开一个新的窗口
  open("打开的新窗口的地址 url","","窗口特征，比如窗口宽度和高度");
  创建一个按钮，点击这个按钮，打开一个新的窗口

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

image.png

• 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<inputs.length;i++){//通过遍历数组，得到每个标签里面的具体的值
var input1=inputs[i];  //每次循环得到的 input 对象，赋值到 inout1 里面
alert1(input1.value);  //得到每一个input 标签里面的 value值
}

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

//使用getElementsByName得到 input 标签
var inputs=document.getElementsByTagName（"name1"）;//传递的参数是
标签名称
//遍历数组
for(var i=0;i<inputs.length;i++){//通过遍历数组，得到每个input 标签
var input1=inputs[i];  //每次循环得到的 input 标签，赋值到 inout1 里面
alert1(input1.value);  //得到每一个input 标签里面的 value值
}

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

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

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

9.window 弹框案例

hello.html

<body>
    编号：<input type="text" id="numid"/><br/>
    姓名：<input type="text" id="nameid" /><br />
    <input type="button" value="选择" onclick="open1()"/>

     <script type="text/javascript">

      function open1(){
          window.open("lx.html","","width=250,height=150");  //打开一个新窗口 lx.html
      }

    </script>
</body>

lx.html

<body>
    <table border="1" bordercolor="red">
        <tr>
            <td>操作</td>
            <td>编号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('100','东方不败')"/></td>
            <td>100</td>
            <td>东方不败</td>
        </tr>
        <tr>
        <td><input type="button" value="选择" onclick="s1('101','岳不群')" /></td>
        <td>101</td>
        <td>岳不群</td>
        </tr>
        <tr>
            <td><input type="button" value="选择" onclick="s1('102','凌平之')" /></td>
            <td>102</td>
            <td>凌平之</td>
        </tr>
    </table>
    <script type="text/javascript">
          function s1(num1,name1){
                   var pwin=window.opener;    //得到创建这个窗口的窗口，得到window 页面
                   pwin.document.getElementById("numid").value=num1;  //给编号赋值
                   pwin.document.getElementById("nameid").value = name1;//给姓名赋值
                   window.close();   //关闭窗口
        }
    </script>
</body>

案例展示：

image.png