2020-03-13

、一、定时器1、循环定时器的设置和取消(1)启动循环定时器:setInterval()循环定时器,调用一次就会创建并循环执行一个定时器格式:setInterval(调用方法, 毫秒值);//毫秒值就是循环周期(2)停止循环定时器clearInterval(定时器ID)setInterval方法在创建一个定时器的同时,还会返回一个定时器的ID,该ID就代表这个定时器此定时器ID在当前页面是不能重复的我们可以通过clearInterval方法,指定某个循环定时器停止格式:clearInterval(定时器ID);2、一次性定时器的设置和取消(1)启动一次性定时器:setTimeout()一次性定时器,调用一次就会创建并执行一个定时器一次格式:setTimeout(调用方法,毫秒值);(2)停止一次性定时器clearTimeout(定时器ID)setTimeout方法在创建一个定时器的同时,还会返回一个定时器的ID,该ID就代表这个定时器此定时器ID在当前页面是不能重复的我们可以通过clearTimeout方法,指定某个一次性定时器停止格式:clearTimeout(定时器ID);二、location对象location对象包含浏览器地址栏的信息常用属性:href    设置或返回完整的URL设置href属性,浏览器就会跳转到对应的路径三、DOM对象1、DOM对象是什么?有什么作用?DOM(Document Object Model)文档对象模型    ​​​文档:标记型文档(HTML等)DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的2、DOM树介绍<html>    <head>        <title>文档标题</title>    </head>    <body>        < a href="">我的链接</ a>        <h1>我的标题</h1>    </body></html>上述HTML文档会被浏览器由上到下依次加载并解析每个标签会被加载成DOM树上的一个元素节点对象每个标签的属性会被加载成一个属性节点对象每个标签的内容体会被加载成一个文本节点对象整个DOM树,是一个文档节点对象,即DOM对象一个HTML文档加载到内存中就会形成一个DOM对象3、DOM树的特点:必定会有一个根节点每个节点都是节点对象常见的节点关系:父子节点关系文本节点对象没有子节点(叶子节点)每个节点都有一个父节点,零到多个子节点只有根节点没有父节点四、获取元素对象的四种方式在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:getElementById();    通过元素ID获取对应元素对象,如果找不到,返回nullgetElementsByName();    通过元素的name属性获取符合要求的所有元素,如果找不到,返回空数组getElementsByTagName();    通过元素的元素名属性获取符合要求的所有元素,如果找不到,返回空数组getElementsByClassName();    通过元素的class属性获取符合要求的所有元素,如果找不到,返回空数组注:获取某个(些)元素节点对象,必须保证元素节点对象先被加载到内存中五、元素对象常见属性value元素对象.value,获取元素对象的value属性值元素对象.value=属性值,设置元素对象的value属性值className元素对象.className,获取元素对象的class属性值元素对象.className=属性值,设置元素对象的class属性值checked元素对象.checked,获取元素对象的checked属性值元素对象.checked=属性值,设置元素对象的checked属性值,修改单选/复选的选中与否注:HTML中checked="checked",JavaScript中返回trueinnerHTML元素对象.innerHTML,获取元素对象的内容体元素对象.innerHTML=值,设置元素对象的内容体六、JS事件1、JS事件是什么?有什么作用?通常鼠标或热键的动作我们称之为事件(Event),例如点击、表单提交、值发生改变、鼠标移入、移出……通过JS事件,我们可以完成页面的指定特效2、JS事件驱动机制简述页面上的特效,我们可以理解在JS事件驱动机制下进行JS事件驱动机制:事件源:专门产生事件的组件事件:由事件源所产生的动作或者事情监听器:专门处理事件源所产生的事件注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理事件源:小偷(因为偷了东西被抓)事件:偷东西(由小偷引起的)监听器:警察(专门处理小偷偷东西的事情的)注册/绑定监听器:让警察时刻盯着小偷(偷了就马上抓)3、常见的JS事件(1)点击事件(onclick)点击事件:由鼠标或热键点击元素组件时触发(2)焦点事件获取焦点事件(onfocus)焦点:即整个页面的注意力默认一个正常页面最多仅有一个焦点例如:文本框中闪烁的小竖线通常焦点也能反映出用户目前的关注点,或者正在操作的组件获取焦点事件:当元素组件获取焦点时触发失去焦点事件(onblur)失去焦点事件:元素组件失去焦点时触发(3)域内容改变事件(onchange)域内容改变事件:元素组件的值发生改变时触发(4)加载完毕事件(onload)加载完毕事件:元素组件加载完毕时触发获取元素对象时,要保证元素对象先加载,建议是把获取元素对象的代码放在body最后,如果想放在前面,也可以写在onload中(5)表单提交事件(onsubmit)表单提交事件:表单的提交按钮被点击时触发注意:该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作    事件得到true,提交表单数据    事件得到false,阻止表单数据提交(6)键位弹起事件(onkeyup)键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件(7)常用鼠标事件鼠标移入事件(onmouseover)鼠标移入事件:鼠标移入某个元素组件时触发鼠标移出事件(onmouseout)鼠标移出事件:鼠标移出某个元素组件时触发4、JS事件的两种绑定方式(1)元素事件句柄绑定将事件以元素属性的方式写到标签内部,进而绑定对应函数事件句柄绑定方式    优点:1、开发快捷;2、传参方便;3、可以绑定多个函数    缺点:JS和HTML代码高度揉合在一起,不利于多部门的项目开发维护(2)DOM绑定方式使用DOM的属性方式绑定事件DOM绑定方式    优点:使得HTML代码和JS代码完全分离    缺点:1、不能传递参数,解决:匿名函数是可以的;2、一个事件只能绑定一个函数,解决:匿名函数内部是可以绑定多个函数的



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,480评论 1 11
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,329评论 0 8
  • 一、定时器 1、循环定时器的设置和取消 (1)启动循环定时器:setInterval() 循环定时器,调用一次就会...
    01_ff7c阅读 197评论 0 0
  • DOM和BOM 一、定时器 1、循环定时器的设置和取消 (1)启动循环定时器:setInterval() 循环定...
    你养猪吗阅读 117评论 0 0
  • 作业: 一、定时器 1、循环定时器的设置和取消 (1)启动循环定时器:setInterval() 循环定时器,调用...
    常樂_b00d阅读 137评论 0 0