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:是一个属性:得到创建这个窗口的窗口的对象