第一周 Web开发入门(下)

七.JavaScript对象模型---BOM对象

使JavaScript可以与浏览器进行对话。

1.window对象

   window.innerHeight - 浏览器窗口的内高度(以像素计)

   window.innerWidth - 浏览器窗口内宽度

2.location对象

   window.location.href                   返回当前页面的href(url)

   window.location.hostname         返回web主机的域名

   window.location.pathname         返回当前页面的路径或文件名

   window.location.protocol            返回使用的web协议(http/https)

   window.location.assign               加载新文档

3.history对象

   history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。

   方法 描述

   back() 加载history 列表中的前一一个URL

   forward() 加载history 列表中的下一个URL

   go() 加载history列表中的某个具体的页面

 

window.alert();
window.setInterval();
window.setTimeout();
window.confirm();//确认框
console.log("res");
var res=window.prompt("请输入你的性别:")

八.JavaScript对象模型---DOM对象

DOM节点分类:元素节点、文本节点、属性节点

 

1.获得节点

   getElementByld()方法(ID引用)

     元素的id属性值是该元素对象在HTML文档中的唯一标识,使用getElementByld()方法通过一个独一无二的id属性值返回相应的元素地

   getElementByTagName()方法()

      返回文档里指定标签tag的元素的对象数组 可通过标签调用

      parent.getElementsByTagName(tag)

      其中tag为指定标签。

var div=document.getElementByID("one");     //全部标签中寻找
var arr1=div.getElementsByTagName("span");  //只在div标签内子标签寻找

   getElementByClassName("two")

      返回文档里指定class的元素的对象数组  可通过标签调用

   document.getElementsByName("last")

      通过标签的name属性查找

2.对元素的三种操作

  .innerTest、.innerHTML、.getAttribute、.setAttribute

//设置内容
var p=document.getElementByID("three");
p.innerText="sikiedu.com";
p.innerHTML="1324";
p.innerHTML="<font style='red'>ciki</font>"


//设置属性
var myfont=document.getElementByID("myfont");
myfont.setAttribute("color","green");
var size = myfont.getAttribute("size");

myfont.setAttribute("style","font-family:幼圆");

3.修改超链接、图片、复选框和css样式的单独函数

<body>
    <a href="#" id="mya">进入siki学院</a>
    <img src="img/1.png" id="myimg">
    <input type="checkbox" id="mycheckbox">
    <div id="mydiv">
        1234556
    </div>
</body>

<script>
    var mya=document.getElementByID("mya");
    var myimg=document.getElementByID("myimg");
    var mycheckbox=document.getElementByID("mcheckbox");
    var mydiv=document.getElementByID("mydiv") 
    mya.setAttribute("href","www.baidu.com");
    myimg.setAttribute("src","img/2.jpg");
    mycheckbox.setAttribute("checked","true");
    

    mya.href="www.baidu.com";
    myimg.src="img/2.jpg";
    mycheckbox.checked=true;

    mydiv.style.fontsize="20px";

</script>

九.JavaScript事件

1.窗口事件

   用户与页面其他元素交换时触发的事件,如页面加载完成可以触发的事件、改变窗口大小可以触发事件等。窗口事件主要包括load、unload、abort、error、scroll等  

   如:window.οnlοad=function(){} //页面完全加载完之后

        img.οnlοad=function(){}        //图像完全加载完之后

2.光标事件

    光标事件主要指页面元素对焦点的获得和失去。不是所有对象都具有光标事件,通常,表单输入域input控件、textarea控件能够获得焦点,具有光标事件。

    如focus----对象获得焦点时

        blur----从一个对象失去焦点 

         οnblur="函数",失去焦点时执行什么函数。

        change----文字变化或列表选项变化

3.鼠标事件

    如onclick----单击鼠标键

    如mouseUp----松开鼠标键

 

4.键盘事件

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick="divClick()" id="myspan">DOM事件div</div>     //直接添加
	</body>
</html>

<script type="text/javascript">
	function divClick(){
		console.log("我被点击了");
	}
	var myspan=document.getElementById("myspan");
	myspan.onclick=function()                             //添加属性
	{
		console.log("span被点击了");
	}
	myspan.addEventListener("click",spanCLick);            //用addEventListener
	function spanClick()
	{
		console.log("span被点击了");
	}
</script>

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值