澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-09-16 19:56 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

记录我的旅程1之JavaScript,DOM的学习笔记

前天上学了DOM,做了以下部分基础演练……
DOM是Document Object Model文档对象模型的缩写;使用JavaScript操作DOM进行DHTML开垦。
学习目的:能够利用JavaScript操作Dom完成广大的DHTML效果。
参谋书:张孝祥《JavaScript网页开采——体验式学习课程》
一、DOM的入门:
1、DOM正是HTML页面包车型大巴模子,将各样标签都做为贰个目的,JavaScript通过调用DOM中的属性、方法就能够对网页中的文本框、层等要素实行编
程序调节制。比方通过操作文本框的DOM对象,就足以读取文本框中的值、设置文本框中的值。
2、DOM也像WinForm一样,通过事件、属性、方法举办编制程序。
3、CSS JavaScript DOM=DHTML(即动态 HTML,是HTML语言的扩张。它能够增Gavin档与对象的示范文稿效果。)
二、事件:
1、事件:<body onmousedown="alert('哈哈')">当点击鼠标的时候实践onmousedown中的代码。不常间事件响应的代码太多,就放置单独的函
数中:

序言:随着职业了多少个月的年月,笔者感到到到我们在全校学到的事物确实好少啊,由于未来在铺子做多少个连串,而以此类型中自个儿的剧中人物是后台代码的编辑撰写,可是小编也在是否的调试JavaScript代码,纵然老师当年交了大家,不过今后忘的大概了。所以本人抽时间看录制重新学习了眨眼间间JS,这里是自己的学习笔记,希望对我们想要学习JS初级的同校有用,所以作者就发出了这一个体系。

复制代码 代码如下:

  1. Dom入门

<script type="text/javascript">
function bodymousedown()
{
alert("网页被点坏了,赔呢!");
alert("逗你玩的!");
}
</script>
<body onmousedown="bodymousedown()">

(1) Dom便是HTML页面包车型地铁模型,将各类标签都看作二个指标,JavaScript通过调用Dom中的属性,方法就可以对网页中的文本框,层等要素实行编程序调控制,比如:通过操作文本框的Dom对象,就能够读取文本框的值,设置文本框中的值。

请当心:bodymousedown后的括号无法丢,因为代表调用bodymousedown函数,并非onmousedown事件的响应函数是bodymousedown。
2、动态设置事件:
能够在代码中动态设置事件响应函数,如同.Net中"btn.Click ="一样。

JavaScript——>Dom就像C#——>.NET FrameWork

复制代码 代码如下:

(2) Dom也像Winform同样,通过事件,属性,方法实行编制程序。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title></title>
<script type="text/javascript">
function bodymousedown() {
alert("网页被点坏了,赔吧!");
alert("逗你玩的!");
}
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
</head>
<body>
<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" />
</body>
</html>

(3) CSS JavaScript Dom=DHTML。

3、window对象表示当前浏览器窗口,使用window对象的性质、方法的时候能够省略window,例如window.alert('a')可以省略成alert('a')
1)alert方法,弹出音讯对话框
2)confirm方法,显示“鲜明”、“撤废”对话框,如果按了【明确】开关,就回到true,不然就false。
if(confirm("是或不是继续?"))

alert("确定");

else
{ alert("取消");}
3)重新导航到钦命的地方:navigate("");
4) setInterval每隔一段时间实践钦定的代码,第四个参数为代码的字符串,第三个参数为间隔时间(单位微秒),再次来到值为电磁料理计时器的标志。如:setInterval("alert('hello')",陆仟);

  1. 事件

复制代码 代码如下:

(1)    事件:<body onmousedown=”alert(‘款待您’);alert(‘来访谈’);”>当点击鼠标的时候试行onmousedown中的代码,有的时候候事件响应的代码太多,就放到单独的函数中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>招待光临作者的主页</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstch = title.charAt(0);
var leftstr = title.substring(1, title.length);
document.title = leftstr firstch;
} //目标是将网页的标题滚动起来
setInterval("scroll()", 500);
</script>
</head>
<body>
</body>
</html>

       <script type="text/javascript">

5) clearInterval撤废setInterval的定期实践,约等于提姆er中的Enabled=False。因为setInterval可以设定多少个定时,所以clearInterval要钦赐清除十分电磁照拂计时器的标志,即setInterval的再次来到值。var intervalld= setInterval("alert('hello')",陆仟);
clearInterval(intervalld);
6) setTimeout也是定期试行,不过不像setInterval那样是定期试行,而是设按期期后只进行二回,clearTimeout也是铲除定期。
很好界别:Interval是定期;提姆eout是晚点之意。如:var timeoutld=setTimeout("alert('hello')",两千);
案例:实现标题栏走马灯的功能,也正是浏览器的标题文字每隔500ms向右滚动一下。提醒:标题为document.title属性。
4、1)onload:网页加载达成时接触,浏览器是一边下载文书档案、一边分析实施,恐怕会冒出JavaScript实施时须要操作某些元素,那个成分还从未加载,即便如此将在把操作的代码放到body的onload事件中,可能能够把JavaScript放到成分之后。成分的onload事件是因素协调加载完成时接触,而body 里的onload才是整套加载成功。
2)onunload:网页关闭(大概离开)后触发。在事件中为 "Window.event.returnValue"赋值(要体现的警示音讯),那样窗口离开(比如升高、后退、关闭)就能弹出确认新闻。如:<body onbeforeunload="Window.event.returnValue='真的要废弃发贴退出吗?'">

        function bodymousedown() {

复制代码 代码如下:

            alert('欢迎您');

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title></title>
<script type="text/javascript">
//showModelDialog('HTMLPageWindow.htm');//被拦截
//btn.value = "OK";//报错,因为btn成分还没有被创设
</script>
</head>
<body onload="btn.value='OK';" onbeforeunload="window.event.returnValue='真的要屏弃发贴退出吗?小说会被错过!';">
<input type="button" id="btn" value="模态对话框" onclick="showModelessDialog('HTMLPageWindow.htm')" />
<input type="text" />
<textarea cols="20" rows="20"></textarea>
</body>
</html>

            alert('韩迎龙');

5、另外事件:
除此之外有特有的性情之外,当然还可能有通用的HTML成分的平地风波:onclick(单击)、ondblclick(双击)、onkeydown(开关按下)、onkeyup(按键释放)、onkeypress(点击开关)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开成分范围)、
onmouseover(鼠标移动到成分范围)、onmouseup(鼠标开关释放)等。
三、window对象的属性
1、window.location.href="
2、window.event是非常首要的习性,用来博取发滋事件时的信息,事件不囿于于window对象的事件,全部因素的风浪都得以通过event属性取到相关音讯。
1) altKey属性,boot类型,表示发惹事变时alt键是或不是被按下,类似的还应该有ctrlKey、shiftKey属性,例子<input type="button" value="点击" onclick="if(event.altKey)
{alert('Alt点击')}else{alert('普通点击')}"/>;

        }

复制代码 代码如下:

    </script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='HTMLPage1.htm'" />
<input type="button" value="点击" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通点击')}" />
<a href="" onclick="alert('禁止访谈!');window.event.returnValue=false;">百毒</a>
<form action="jing.aspx">
<input type="submit" value="提交" onclick="alert('数占有标题!');window.event.returnValue=false;" />
</form>
</body>
</html>

<body onmousedown="bodymousedown()">

2) clientX、clientY 发惹事件时鼠标在顾客区的坐标;screenX、screenY发闹事变时鼠标在荧屏上的坐标;offsetX、offsetY发惹事件时鼠标相对于事件源(譬如点击按键时触发onclick)的坐标。
3)returnValue属性,假设将returnValue设置为false,就可以收回默许事件的处理。
4)srcElement:获得事件源对象
5)KeyCode:爆发时间时的开关值
6)button:发生时间时鼠标的按键,1为左键,2为右键,3为左右键同一时候按。<body onmousedown="if(event.button==2){alert('禁止复制')}">

bodymousedown()后边的括号不能丢,因为代表调用bodymousedown函数,实际不是onmousedown事件的响应函数是bodymousedown。

您大概感兴趣的小说:

  • JS创设页面包车型地铁DOM节点结构的完成代码
  • jquery中dom操作和事件的实例学习 下拉框应用
  • jquery中dom操作和事件的实例学习 仿yahoo邮箱登陆框的提暗指义
  • jquery中dom操作和事件的实例学习-表单验证
  • 读JavaScript DOM编制程序艺术笔记
  • Dom 结点创立 基础知识
  • Dom操作之合作技艺分享
  • JQuery动态创设DOM、表单成分的贯彻代码
  • js中央银行使DOM复制(克隆)钦命节点名数据到新的XML文件中的代码
  1. 动态设置事件

(1)    能够在代码中动态设置事件响应函数,就好像.NET中的btnClick =同样。

    <script type="text/javascript">

        function trends1() {

            alert("动态成立事件1");

        }

        function trends2() {

            alert("动态创立事件2");

        }

</script>

    <input type="button" value="事件1" onclick="document.ondblclick=trends1" />

    <input type="button" value="事件2" onclick="document.ondblclick=trends2" />

小心:trends1,trends2不要加括号

  1. window对象1

(1) window对象表示当前浏览器窗口,大家在使用window对象的性质,方法的时候能够省略window,举个例子:window.alert(‘a‘)能够回顾成alert(‘a’)。

(2) alert方法,弹出音讯对话框。

(3) confirm方法,显示”明确”,”撤销”对话框,倘使按了[确定]开关,就回来True,不然就回来False。

        function ConfirmDemo() {

            if (confirm("是还是不是步向")) {

                alert("进入");

            }

            else {

                alert("没进入");

            }

        }

<input type="button" value="确定" onclick="ConfirmDemo()" />

(4) 重新导航到钦定的地方:navigate(“);

<input type="button" value="navigate" onclick="navigate('')" />

(5) setInterval每隔一段时间试行拟定的代码,第贰个参数为代码的字符串,第3个参数为间隔时间(单位阿秒),再次回到值为计时器的标记。

      function setInterVal() {

            setInterval("alert('Hello')", 一千);  //注意被实践的代码必得是字符串方式,也

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:记录我的旅程1之JavaScript,DOM的学习笔记

关键词: 澳门威利斯人 JavaScript