JAVAWeb（第二周）

Javascript基础·

js的String对象

创建String对象

   var str="abc";

方法和属性

***属性：  length：字符串的长度

***方法：

（1）于html相关的方法

-bold():字体加粗

-fontcolor():字体颜色

-fontsize()：设置字体大小

-link():将字符转换成超链接（  变量名.link("超链接地址")  ）

-sub()：上标      -sup()：下标

（2）于java相似的方法

-concat():连接字符串

**var str1="abc";

var str2="def";

document.write(str1.concat(str2));

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

-replace():替换字符串

传递俩个参数：

——第一个参数是原始字符

——需要替换成字符

var str6="abcd";

document.write(str6);

document.write("<br/>");

document.write(str6.replace("a","Q"));

-substr()和substring()

var str 7="abcdefghuiop";

document.write(str7.substr(5,5));  //从第五位开始，向后截五个字符

***从第几个字符开始，向后截取几位

document.write("<br/>");

document.write(str7.substring(3,5));     //从第几位开始到第几位结束[3,5)

***从第几位开始，到第几位结束，但是不包括最后哪一位

js的Array对象

创建数组（三种）

-var arr1=[1,2,3];

-var arr2 =new Array(3);//长度是3

-var arr3 =new Array(1,2,3,);数组中的元素是1 2 3

属性：length：查看数组的长度

方法：

-concat()：数组的连接

var arr11=[1,2,3];

var arr12=[11,12,123];

document.write(arr11.concat(arr12));

-join():根据指定的符号把数组进行分割

var arr13=new Affay(3);

arr13[0]="a";

arr13[1]="b";

arr13[2]="c";

document.write(arr13);

document.write("<br/>");

document.write(arr.13,join("-"));

-push():向数组末尾添加元素，返回数组的新的长度

**如果添加的是一个数组，这个时候把数组当作一个字符串添加进去

push方法演示

-pop():表示删除最后一个元素，返回删除的那个元素

    

pop方法

-reverse():颠倒数组中的元素顺序

reverse演示

js的date对象

js里如何获取当前时间：

var date =new Date();

document.write(date):  //不为习惯中国计时格式

document.write(date.toLocaletString())://转换为习惯的格式

getFullYear():得到当前年的方法

getMonth():得到当前的月的方法

****返回的是0-11月，如果想要得到准确的值，需要加1

var date 1=date.getMonth()+1;

document.write("month:  "+date1);

-getday():获取当前的星期

星期日返回的是0 星期一到星期六返回的值为1-6

document.write("week：  "+date.getday()):

-getDate:得到当前的天：

document.write((day: )+date.getDate);

-getHours:得到当前的小时：

document.write("hour:  "+date.getHors());

-getMinutes:得到当前的分钟：

document.write("minute:  "+date.getMinutes());

-getSeconds:得到当前的秒：

document.write("seconds:  "+getSeconds());

-getTime():获取毫秒：

js中的math对象

*数学的运算

**里面都是静态方法，使用可以直接使用Math.方法()

-ceil(x):向上舍入

floor(x):向下舍入

found(x):四舍五入

random():得到一个0-1随机数（伪随机数）

document.write(Math.random());

得到一个0-9的随机数：

document.write(Math.floor(Math.random()*10));

js的全局函数

不属于任何一个函数，直接写名称使用

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

var str="alert'1234';";

eval(str);

-encodeURI():对字符进行编码

var str="测试中文aaa1234";

var encode1=encodeURI(str1);

document.write(encode1);

-decodeURI():对字符进行解码

var decode1=decodeURI(ebcode1);

-isNaN():判断当前字符串是否是数字

***如果是数字，返回false

***如果不是数字，返回true

-parseInt():类型转换（字符串转换成数字类型）

js的函数的重载

面试问题回答：js里面是否存在重载？

（1）js里面不存在重载

（2）但是可以使用其他方法来模拟实现重载效果 （通过arguments数组来实现）

js的bom对象

有哪些对象：

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

docunment.write(navigator.appName);

csreen:获取屏幕的信息

docunment.write(screen,width);

docunment.write(screen.height);

location:请求url地址

-href：***获取请求的url地址

***设置url地址

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

<input type="button" value="tiaozhuan" onclick="href1();"/>

  onclick="js的方法；"   //鼠标点击事件

location.href="跳转的路径;";

history:请求url的历史记录

-到访问的上一个页面

history.back();

history.go(-1);

-到访问的下一个页面

history.forward();

history.go(1);

window:

window部分方法

window.setIbterval("alert('123');",3000)；//表示每三秒，执行一次alert方法

window.setTimeout("alert('abc');",4000);   //表示在毫秒数结束后执行，但只会执行一次

-clearInterval();清除setInterval

-clearTimeout();清除setTimeout

方法演示

js的dom文档

分析如何使用dom解析html 补充上图

DHTML：是很多技术的简称

**html：封装数据

**css：使用属性值和属性设置样式

**dom：操作html文档（标记型文档）

**javascript：专门指的是js的语法语句（ECMAScript）

document对象：

*表示整个文档

**常用方法

  ***write（）方法：

（1）向页面输出变量 （值）

（2）向页面输出html代码

document.write("abc");

document.write("<hr/>");

getElementById();

-通过id得到元素（标签）

-//使用getElementById得到input标签

var input1=document.getElementById("nameid");

//得到input里面的value值

alert(input1.value);

getElementsByName();

-通过标签的name的属性值得到input标签

-返回的是一个集合（数组）

-//使用getElementsByName得到input标签

代码演示

-getElementBytypeTagName("标签名称");

-通过标签名称得到元素

代码演示

***注意的地方：

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

//通过name得到input标签

var inputs2=document。getElementByName("name11")[0];

alert(inputs2.value);

案例：window弹窗案例

-实现过程

1，创建一个页面

**有俩个输入项和一个按钮

**按钮上面有一个事件：弹出一个新窗口

<body>

编号：<input type="text" id="numid">

姓名：<input type="text" id="nameid">

<input type="button" value="选择" onclick="open1()">

<script type="text/javascript">

function open1() {

window.open("user.html","","width=250px,height=300px")

}

</body>

2，创建弹出页面

**表格

**每一个有一个按钮和编号和名字

**按钮上有一个事件：把当前的编号和姓名，赋值到第一页面相应的位置

<body>

<table>

    <tr>

        <td><input type="button" value="选择" oncancel="s1('100','东方不败');"/></td>

        <td>100</td>

        <td>东方不败</td>

    </tr>

    <tr>

        <td><input type="button" value="选择" oncancel="s1('101','岳不群');"/></td>

        <td>101</td>

        <td>岳不群</td>

    </tr>

    <tr>

        <td><input type="button" value="选择" oncancel="s1('102','林平之');"/></td>

        <td>102</td>

        <td>林平之</td>

    </tr>

</table>

<script type="text/javascript">

    //实现s1的方法

    function s1(num1,name1) {

        //需要把num1和name1赋值到window页面

        //跨页面操作 opener：得到创建这个窗口的窗口 得到window页面

        var pwin=window.opener;

        pwin.document.getElementById("numid").value=num1;

        pwin.document.getElementById("nameid").value=name1;

        //关闭窗口

        window.close();

    }

</script>

</body>

案例一：在末尾添加节点

实现思路

第一步：获取ul标签

第二步：创建li标签

document.createElement("标签方法")方法

第三步：创建文本

document.createTexNode("文本内容");

第四步：把文本添加到li下面

使用appendChild方法

第五步：把里添加到ul末尾

使用appendChild方法

代码演示

元素对象（element对象）

**要操作element对象，首先必须要获取到element，

-使用document里面相应的方法获取

**方法

***获取属性里面的值

getAttribute（"属性名称"）

-var input1=document.getElementById("inputid");

//alert(input1.value);

alert(input1.getAttribute("value"));

设置属性的值：setAttribute("属性名","属性值");

input.setAttribute("class","haha");

删除属性

input.removeAttribute("name");

不能删除value

想要获得标签下面的子标签

使用属性childNodes，但是这个属性兼容性很差

获得标签下面子标签的唯一有效办法，使用getElementByTagName方法

var ul11=document.getElementById("ulid1");

//获取标签下面的子标签

var lis=ul11.getElementByTagName("li");

alert(lis.length);

node对象属性一

*nodeName

*nodeType

*nodeValue

代码演示

*标签节点对应的值

nodeType:  1

nodeName:  大写标签名称  比如  SPAN

nodeValue:   null

*属性节点对应的值

nodeType:   2

nodeName:   属性名称

nodeValue:  属性的值

*文本节点对应的值

nodeType:  3

nodeName:  #text

nodeValue:  文本内容

Node对象的属性二

*父节点

parentNode

*子节点

childNodes：得到所有子节点，但是兼容性差

firstchild：获得第一个子节点

lastchild：获取最后一个子节点

*同辈节点

nextSibling：返回一个给固定节点的下一个兄弟节点。

previousSibling：返回一个给定节点的上一个兄弟节点。

操作dom树

appendChild方法：

--添加子节点到末尾

--特点：类似剪切黏贴的效果

insertBefore(newNode,oldNode)方法

-在某个节点之前插入一个新的节点

-俩个参数

*要插入的节点

*在谁之前插入

-插入一个节点，节点不存在，创建

1，创建标签

2，创建文本

3，把文本添加到标签的下面

代码思路：

1，获取到li13标签

2，创建li

3，创建文本

4，把文本添加到li下面

5，获取到ul

6，把li添加到ul下面

代码演示

removeChild();  :删除节点，通过父节点删除，不能自己删除自己

代码思路：

1、获取到li24标签

2、获取父节点ul标签

3、执行删除（通过父节点删除）

//获取li标签

var li24=document.getElementById("li24");

//获取父节点

//俩种方式  1、通过id获取； 2、通过属性parentNode获取

var ul31=document.getElementById("ulid31");

//删除（通过父节点）

ul31.removeChild(li24);

replaceChild(newNode,oldNode)方法：替换节点

-不能自己替换自己，通过父节点替换

-俩个参数

**第一个参数：新的节点（替换成的节点）

**第二个节点：旧的节点（被替换的节点）

代码思路：

1、获取到li34

2、创建标签li

3、创建文本

4、把文本添加到li下面

5、获取ul标签（父节点）

6、执行替换操作（replaceChild(newNode,oldNode)）

//获取li34

Var li34=document.getElementById("li34");

//创建li

varli35=document.createElement("li");

//创建文本

var text35=document.createTextNode("张无忌");

//把文本添加到li的下面

li35.appendChild(text35);

//获取ul

var ul41=document.getElementById("ulid41");

//替换节点

ul41.replaceChild(li35,li34);

clonNode(boolean):复制节点

-//把ul列表复制到另外一个div里面

代码思路：

1、获取到ul

2、执行复制方法 cloneNode方法复制True

3、把复制之后的内容放到div里面qu

**获取到div

**appendChild方法

//获取ul

var ul41=document.getElementById("ulid41");

//复制ul，放到类似剪切板里的东西

var ulcopy=ul41.coloneNode(ture)

//获取dic

var divv=document.getElementById("divv");

//把副本放到div里面去

divv.appendChild(ulcopy);

操作dom总结

innerHTML属性

这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

第一个作用：可以获得文本内容

第二个作用：向标签里面设定一些内容（可以是html代码）

案例：动态显示时间

得到当前时间

var date = new Date();

var d1=datedate.toLocaleString();

*需要让页面每一秒获取时间

setInterval方法

*显示到页面上

    每一秒向div里面写一次时间

    * 使用innerHTML属性

<div id="times">

<script type="text/javascript">

    function getD1() {

var date =new Date();

        var d1 = date.toLocaleString();

        var div1 = document.getElementById("times");

        div1.innerHTML = d1;

    }

setInterval("getD1();",1000);

</body>

案例：全选练习

*创建一个页面

**复选框和按钮

—四个复选框表示爱好

—还有一个复选框操作  全选和全不选

**三个按钮，分别由事件

—全选

—全不选

—反选

先构建选项按钮：

<input type="checkbox" id="boxid" onclick="selAllNo();">全选/全不选

<br/>

<input type="checkbox" name="love">篮球

<input type="checkbox" name="love">排球

<input type="checkbox" name="love">足球

<input type="checkbox" name="love">橄榄球

<br/>

<input type="button" value="全选" oncancel="selAll();">

<input type="button" value="全不选" oncancel="selNo();">

<input type="button" value="反选" oncancel="selOther();">

实现全选操作：

<script type="text/javascript">

    function selAll() {

//获取要操作的复选框

        var loves =document.getElementsByName("love");

        //遍历数组，得到每一个复选框

        for (var i=0;i

var love1=loves[i];//得到每一个复选框

//设置属性是true

            love1.checked =true;

        }

}

</script>

实现反选操作：

function selOther(){

//获取操作的复选框

var loves11=document.getElementsByName("love");

for(var a=0;a<loves11.length;a++){

var love11=loves11[a];

if(love11.checked==tyre){

love11.checked=false;

}else{

love11.check=true;

               }

      }

 }

案例：下拉列表左右选择

*下拉选择框<select>

<option>111</option>

<option>111</option>

</select>

*创建一个页面

**俩个下拉选择框

-设置属性multiple属性

**四个按钮，有事件

*选中添加到右边

步骤

1、获取select里面的option

-getElementByTagName()返回是数组

-遍历数组，得到每一个option

2、判断option是否被选中

-属性 selected，判断是否被选中

**select=true：选中

**select=false：没有选中

3、如果是选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分