java web学习第七天——js

Day 07

总结

 Css和HTML的四种结合方式

1:标签里面直接使用style属相定义属性值值

2:使用标签 <style type=”text/css”>css代码</style>

3: 在是style标签里面使用 @import url(css的路径)

  <style type=”text/css”>@import url(div.css);</style>

4: 使用头标签link <link rel=”stylesheet” type=”text/css”href=”css的文件路径”>

 Css的基本选择器（三种）

标签选择器：div {css代码}

Class选择器 .名称{}

Id选择器 #名称{}

 扩展选择器（三种）

关联选择器：嵌套标签样式设置

组合选择器：不同标签设置相同的样式

伪元素选择器：

盒子模型：边框border 内边距 padding 外边距 margin

漂浮：float：left right

定位：position ：absolute relative

JavaScript

 基于对象和事件驱动的语言，应用于客户端，安全性，交互性，跨平台

Js和HTML的结合方式（两种）

1 <script type=”text/javascript”>js代码；</script>

2<script type=”text/javascript”src=”js的路径”>

Js的数据类型：string number Boolean nullundefined

语句 if while switch fordo-while

==判断值   ===判断值还有类型

Js数组的三种定义方式：

Var arr=[1,2,”3”];

Var arr1=new Array(9);数组的长度是9

Var arr2= new array（1,2,4）

属性 length表示数组的长度

Js的函数 function add(a,b){方法体和返回值；}

Var add1= function(m,n) {方法体和返回值;}

Var add2= new Function(“a,b”,”方法体和返回值”)

不要忘记调用

Js 的全局变量和局部变量

全局变量：在js的任何部分都可以使用

局部变量：只有在定义的方法体内可以使用

Script标签的位置最好放在body的后面。因为加载顺序是由前向后的

 

 

Js 的 String对象

创建String 对象 ：Var str=”abc”;

属性length：求字符串的长度

方法：

1：与HTML相关的方法

—bold()加粗字体，—fontcolor(“颜色”)，—fontcolor（1-7）字体大小

—link（）将字符串显示成超链接，点击超链接进入指定页面

—sub —sup设置上标和下标

2：与Java相关的方法

—Concat()链接字符串 —charAt()返回指定位置的字符(字符不存在返回空字符)

—indexOf返回字符第一次出现的位置，如果不存在返回-1；

—split()切分字符串 var str5="1-3-45-6";  vararr=str5.split("-");

document.write(arr.length);结果是4

—replace()替换字符串 replace(“a”,”A”);将a替换成A

—substr(5,5)从第几位开始向后几位

——substring(3,5)得到[3,5)，从第几位到第几位

Js 的Array对象

 创建数组（三种）

var arr1= [1,2,3];

var arr2=new Array(3);

var arr3= new Array(1,3,5);

数组的属性 length 求数组的长度

方法

—concat()链接两个字符串

—join(“-”)使用”-“来分割字符串

—push()向数组最后添加元素并且返回数组的长度，如果最后加的是一个数组，那么会吧数组当做一个字符串添加进去。

—pop()删除最后一个元素，并且返回删除元素的值

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

Js的date对象

获取当前时间 var date=new Date();

//转化为普通格式 date.toLocaleString();‎2018‎年‎4‎月‎6‎日‎ ‎11‎:‎04‎:‎24

获取当前年的方法：getFullYear()

获取当前月的方法：getMonth()+1;

获取当前星期的方法：getDay();星期日返回0；

获取当前日的方法：getDate()

获取当前的小时：getHouse();

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

获取当前的秒：getSeconds();

获取毫秒数：getTime();返回1970年到现在的豪秒数，处理缓存的问题

Js 的Math对象

 数学运算：里面都是静态方法，直接使用Math.方法()

—ceil();向上舍入

—floor();向下舍入

—round();四舍五入

—random();0-1之间的随机数

—pow(2,5);返回2的5次方

—abs();绝对值

Js的全局函数

 由于不属于任何的函数，直接写名称来使用

—eval();执行js代码，如果字符串是一个js 代码，使用方法直接执行。

varstr="alert('123');";eval(str);

—encodeURI(),encodeURIComponent(),对中文字符进行编码

—decodeURI(),decodeURIComponent(),对中文字符解码

—isNaN()判断是否是数字，是数字返回false，不是数字返回true

—parseInt();类型转化将字符串转化为数字类型

Js的重载

 定义：函数名相同，参数不同

不存在重载：可以模拟重载，调用最后一个方法，把传递的参数放到arguments数组中，通过查看数组arguments的长度来区别不同的函数。

Js 的bom对象

 Bom：borswer  object model:浏览器对象模型

 对象：

Navigator：获取浏览器的一些信息 document.write(navigator.appName);

Screen：获取屏幕信息document.write(screen.height);

Location:请求url地址document.write(location.href);

设置URL的地址：在页面上安置一个按钮，按钮绑定一个事件，当我点击这个按钮，页面跳转到另外的一个页面

<input type="button"value="tiaozhun" οnclick="href1()";/>

functionhref1(){location.href="Css01.html";}

history：history.back();到上一个页面history.forword()到下一个页面

Window：顶层对象，窗口对象

  方法：alert()页面弹出框

         Confirm()确认提示框 window.confirm(“显示的内容”);返回Boolean值

         Prompt():输入对话框 window.prompt(“文本提示信息”,”默认输入值”)

         Open() :打开一个新的窗口open(“新窗口的URI”,”空”,”窗口的特征”);

         Close():关闭

                 setInterval(“js代码”，毫秒数)一直执行

                 setTimeout(“js代码”，毫秒数)只会执行一次

       

                 clearInterval(id):setInterval函数会返回一个值，通过这个函数可以清除

                 clearTimeout(id)

js的dom对象

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

文档：超文本标记文档 HTML，xml

对象：提供了属性和方法

模型：使用方法和属性操作超文本标型文档

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

想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象

需要把HTML里面的标签，属性，文本内容都封装成对象

想要对标记型文档操作，首先需要解析

解析过程：首先根据HTML的层级结构，在内存中分配一个树形结构，需要把HTML中的每部分封装成对象

 —document对象：整个文档

—element对象：标签对象

—文本对象

—属性对象

——Node节点对象：这个对象是所有对象的父对象

   *****如果在其他对象里面找不到想要的方法，就可以在这个对象里面找

DHTML:是HTML，css，dom,javascript这些技术的简称

 

Document对象

 表示整个文档

常用的方法：write，向页面输出变量，输出HTML代码

getElementByID ()通过id得到对象

<input type=”text” id=”nameid”>

var input1=document.getElimentByID(“nameid”);得到input 的对象

getElementsByName();通过名字得到数组对象

<input type="text"name="name1" value="aaa">

<input type="text"name="name1" value="bbb">

<input type="text"name="name1" value="ccc">

    <script type="text/javascript">

    var arr=document.getElementsByName("name1");得到数组对象

    for(var i = 0 ;i<arr.length;i++){

        var arr1=arr[i];                          得到每一个input对象

        alert(arr1.value);}                       通过input得到value的值

    </script>

</body>

getElementsByTagName()通过标签得到对象

<inputtype="text" name="name1" value="aaa">

<inputtype="text" name="name1" value="bbb">

<inputtype="text" name="name1" value="ccc">

                 <scripttype="text/javascript">

                 vararr=document.getElementsByTagName("input");

                 for(vari = 0 ;i<arr.length;i++){

                     vararr1=arr[i];

                     alert(arr1.value);}

                 </script>

opener:是一个属性：得到创建这个窗口的窗口的对象