Dom学习笔记（一）

最新推荐文章于 2022-08-13 16:09:21 发布

1_f0rm4t3d

最新推荐文章于 2022-08-13 16:09:21 发布

阅读量1.1k

点赞数

分类专栏： Dom学习文章标签： js dom 框架

本文链接：https://blog.csdn.net/l_f0rm4t3d/article/details/21282631

版权

Dom学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

	预备知识：
		 Dom就是JS的一个应用平台，实际上就是C#->ASP.NET关系，Dom就是提供了JS的各种操作对象，就像C++只能编写控制台的程序，但是在借用了Windows的Win32的框架之后就直接可以实现一个用户界面的GUI啦，懂了Dom就是JS的一个应用平台就Ok了;
		 
1.简单的Dom编程实际上咱早已经实现过啦，就是alert('');函数的使用，还有是就是<body document.ondbclick="函数名()"> 实际上就是在执行ondbclick事件的时候执行的语句是调用一个函数的（这里只写函数名是不对的，因为系统找不到该对象），代码如下：
	<script language="javascript">
	function confirmDemo()
	{

	//confirm方法就是实现确定和取消的对话框
	  if(confirm("是否进入？"))
	{
	   alert('进入啦');
	}
	else
	{
	  window.alert('退出啦');
	}

	}


	</script>

	<input type="button" value="ConfirmDemo" οnclick="confirmDemo">
	<!--这里实际使用函数加不加括号都行-->
2.实际使用的alert('');就是使用window.alert方法，只不过是常用的对话框，就直接省略啦

	具体的方法如下：
	  navigate("http://www.baidu.com"); //j就是重新导航，将网站重定向到新的网站，类似于<a href="www.baidu.com"> </a>

	  setInterval("alert('hello')",1000); //就是定时执行，实际相当于Timer的功能，其中需要两个参数，一个是字符串的代码（可以是匿名函数），后面一个当然就是控制的时间
	  clearInterval(IntervalId);就是实现把定时器关闭，参数是要停止的ID（var ID = setInteral(... , .);
	  setTimeout("alert('setTimeout')",1000);//也是定时执行任务，但是不像  setInterval()的重复执行任务，只能执行一次，这其实很好区分Interval:间隔，Timeout:超时

	  clearTimeout(); //也是实现清除计时，计时专门是清除setTimeout("",)的超时

	具体的使用代码：

	<script language="javascript">


	function confirmDemo()
	{
	  if(confirm("是否进入？"))
	  {
	   alert('进入拉');
	  }
	 else
	  {
	   window.alert('退出啦');
	  }
	}



	var IntervalId;  //全局的变量，在全局内都可以访问到

	function startInterval(fun_str){
	  //IntervalId = setInterval("alert('你好啊！')",3000);
	  IntervalId = setInterval(fun_str,500);
		
	}


	var TimeoutId;
	function startTimeout(){
	 TimeoutId = setTimeout("alert('你好啊！')",2000);

	}



	function startNavitage(){
	navigate("www.baidu.com");
	}

	function scroll_rigth(){

	  var title = document.title;   //这是获取当前页面的document对象的title
	  var first_str = title.charAt(title.length-1);  //该函数是获取字符串里面的一个字符，参数是字符的位置
	  var left_str = title.substring(0,title.length-1);  //该函数是获取字符串里面的一个子串，两个参数分别是起始位置，长度
	document.title = first_str + left_str ;
	}

	function scroll_left(){

	  var title = document.title;
	  var first_str = title.charAt(0);
	  var left_str = title.substring(1,title.length);
	document.title = left_str + first_str;
	}

	</script>

	<input type="button" value="ConfirmDemo" onclick = "confirmDemo()">

	<input type="button" value="startInterval" onclick = startInterval("alert('123')")>

	<input type="button" value="clearInterval" onclick = "clearInterval(IntervalId)">

	<input type="button" value="startTimeout" onclick = "startTimeout()">

	<input type="button" value="clearTimeout" onclick ="clearTimeout(TimeoutId)">

	<input type="button" value="startNavitage" onclick ="startInterval('startNavitage()')">


	<input type="button" value="scroll_rigth" onclick ="startInterval('scroll_rigth()')">

	<input type="button" value="scroll_left" onclick ="startInterval('scroll_left()')">

	<title>新学期欢迎新同学</title>

3.body、document对象的事件
	  网站上的网页在浏览器端的显示是在下载边显示的，这样的一些方法的使用必须的在要操作的元素加载完成才能使用

	  onload 事件是在网页的该元素加载完成之后再执行的事件，body onload才是全部加载
	  onunload 事件是在网页将要关闭（前进、后退、关闭）的时候或要重新载入时发生的
	  onbeforeunload 事件是在网页准备关闭的时候触发，在事件中为window.event.returnValue赋值就会实现在无意间关闭页面时产生的警告消息

	  onload >onbeforeunload > onunload 是事件的执行顺序

	  <script language="javascript">


	function scroll_left(){

	  var title = document.title;
	  var first_str = title.charAt(0);
	  var left_str = title.substring(1,title.length);
	document.title = left_str + first_str;
	}

	var IntervalId;  //全局的变量，在全局内都可以访问到
	function startInterval(fun_str){
	  //IntervalId = setInterval("alert('你好啊！');",3000);
	  IntervalId = setInterval(fun_str,500);
		
	}

	</script>
	<body onload ="btn.value = 'ok';" onunload = "alert('大爷要走啦！');" οnbefοreunlοad="window.event.returnValue='你确定要撤退吗？';alert('真撤啦');"> 

	<!--写在body里面表示是整个页面加载完成之后，写在单个元素里面的只是表示该元素加载完成，也可以把JS放在该元素加载之后-->

	<input type="button" value="scroll_rigth" onclick ="startInterval('scroll_left()')">

	<input type="button" value="startInterval"  id = "btn"  onclick = "startInterval('scroll_left()')">

	</body>

	<title>1234567890</title>

	  还有很多其他的HTML元素的事件：
	  onclick(单击)、ondbclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等，亲，这你妈这莫多，以后用到的时候再查文档吧

1_f0rm4t3d

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom学习笔记（一）

预备知识： Dom就是JS的一个应用平台，实际上就是C#->ASP.NET关系，Dom就是提供了JS的各种操作对象，就像C++只能编写控制台的程序，但是在借用了Windows的Win32的框架之后就直接可以实现一个用户界面的GUI啦，懂了Dom就是JS的一个应用平台就Ok了; 1.简单的Dom编程实际上咱早已经实现过啦，就是alert('');函数的使用，还有是就是实际上就是在执行
复制链接

扫一扫