web前端java script BOM学习笔记2017.8.1


DOM: document object model
文档对象模型提供了一套可以访问和修改HTML文档内容的方法
访问:获取
修改:设置
1 JS要去操作HTML元素,必须要先用JS找到他,转换为JS的DOM对象
操作:
a 标签属性
b css属性
c 元素内容
2 找对象的方法
a 通过标签名来找对象
var DOM_OBJ=document.getElementsByTagName("标签名");
返回的是集合(数组),即使只有一个标签,返回的也是一个集合
b 通过id名来找对象:id名是唯一的
var DOM_OBJ=document.getElementById("id名");
c 可以组合使用标签名和id名的方式来获取对象
d 通过name属性名来找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByName("nameValue");
e 通过css类名找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByClassName("类名");

3 操作标签的属性
获取:var attVa=DOM_OBJ.属性名;//attruibute
设置:DOM_OBJ.属性名=attVa;
4 操作CSS属性
获取:var cssVa=DOM_OBJ.style.css属性名;//只能获取内联式(嵌入式)的css属性值
设置:DOM_OBJ.style.css属性名=cssVa;//设置的是内联式(嵌入式)的css属性值
background-color===>backgroundColor
list-style===>listStyle
5 操作内容
获取
非表单元素:var txt=DOM_OBJ.innerHTML;
表单元素:var txt=DOM_OBJ.value;
设置
非表单元素:DOM_OBJ.innerHTML=txt;//会将原有的内容替换掉
表单元素:DOM_OBJ.value=txt;
区分document.write()和innerHTML
前者是方法后者是属性
前者只能用document这个对象,后者可以是任意的非表单元素DOM对象
前者不会覆盖原有的东西,后者会覆盖原来的内容
***************计时器***************
是属于BOM里面的方法
BOM:brower object model---提供了可以操作浏览器的方法和属性
能够直接访问和修改的方法和属性是跟window相关

计时器:
window.setInterval();
语法:
setInterval(函数名,毫秒数);每隔多少毫秒去调用这个函数
setInterval("函数名()",毫秒数);每隔多少毫秒去调用这个函数
setInterval(function(){
代码块;
},毫秒数);每隔多少毫秒去调用这个函数
setInterval("console.log(1111)",毫秒数);每隔多少毫秒去执行js代码
清除计时器:
var timer=setInterval();//定义了一个计时器
clearInterval(timer);// 清除的是哪个计时器

延时器:
window.setTimeout();
语法:
setTimeout(函数名,毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout("函数名()",毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout(function(){
代码块;
},毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout("console.log(1111)",毫秒数);延迟多少毫秒去执行一次js代码
清除延时器:
var timer=setTimeout();//定义了一个延时器
clearTimeout(timer);// 清除的是哪个延时器

***************事件***************
事件:是用来实现JS与HTML之间的交互的。
1 可以作用于任何对象
2 通过函数来进行事件处理的。相关的函数是在事件发生时才执行
3 事件分类:鼠标事件 键盘事件 表单事件 window事件
---事件分类
1 鼠标事件
click 单击
dbclick 双击
mouseover 悬停
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动

转载于:https://www.cnblogs.com/jiandandeboke/p/7389393.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/400138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【电路补习笔记】4、二极管的参数与选型

目录常用二极管二极管的结构与特性结构参数最大整流电流IFI_FIF​最大反向工作电压URU_RUR​反向电流IRI_RIR​最高工作频率fMf_MfM​应用常见应用单相整流电路单相半波整流电路单相桥式整流电路稳压管稳压管的伏安特性参数稳压值UZU_ZUZ​稳定电流IZI_ZIZ​额定功耗PZP_ZPZ​动…

wordpress 自定义字段

https://codex.wordpress.org/Using_Custom_Fields 显示自定义字段 <&#xff1f;php the_meta&#xff08;&#xff09;; &#xff1f;> 获取自定义字段

@font-face 使用过程

格式&#xff1a; TureTpe(.ttf)格式&#xff1a; .ttf字体是Windows和Mac的最常见的字体&#xff0c;是一种RAW格式&#xff0c;因此他不为网站优化,支持这种字体的浏览器有【IE9,Firefox3.5,Chrome4,Safari3,Opera10,iOS Mobile Safari4.2】 OpenType(.otf)格式&#xff1a;…

【电路补习笔记】5、三极管的参数与选型

目录常用的三极管型号结构作用放大三极管的三种放大组态的比较共射极放大电路单管共射放大电路&#xff08;受温度影响大&#xff09;的动态特性单管共射分压偏置放大电路的动态特性共集电极放大电路使用共基极放大电路多级放大电路多级放大电路的耦合多级放大电路的动态分析开…

WordPress函数:get_sidebar(获取侧边栏)

https://www.wpdaxue.com/get_sidebar.html 左边栏和右边栏 一个主题包含2个边栏。 1 2 3 4<?php get_header(); ?> <?php get_sidebar(left); ?> <?php get_sidebar(right); ?> <?php get_footer(); ?> 右边栏和左边栏的名字应该分别命名为…

office word 2010 怎么把左侧的标题大纲调出来?

有时候打开Word很希望出现左边的大纲&#xff0c;可是有时候就不出来&#xff0c;对word一些操作都忘得差不多了&#xff0c;这个小问题确实还是让我迷糊了一下~~网上的解决方案是&#xff1a; 打开Word2010文档窗口&#xff0c;切换到“视图”功能区。在“视图”功能区的“显示…

FFT 专题讲解

FFT是什么&#xff1f; FFT是快速傅里叶变换(fast Fourier transform)的简称。在ACM领域主要是用来快速求解多项式乘法的算法&#xff0c; 在信号领域也有很大用途 基础知识 卷积 举个例子&#xff0c;给你两个向量 \(a (a_0, a_1, a_2), b(b_0, b_1, b_2)\) a和b的卷积就是$ (…

PureMvc学习笔记

2019独角兽企业重金招聘Python工程师标准>>> PureMvc学习笔记&#xff1a; Mediator ->对应View层&#xff0c;内部绑定View对象&#xff0c;由 Mediator 对象来操作具体的视图组件。&#xff08;它的作用还包括&#xff1a;添加事件监听器&#xff0c;发送或接收…

【电路补习笔记】6、MOS管的参数与选型

目录符号寄生二极管&#xff08;体二极管&#xff09;的方向连接方法作用导通问题NMOSPMOS开关作用隔离作用引脚分辨常见型号NMOS的参数VDSS最大漏-源电压VGS最大栅源电压ID-连续漏电流VGS&#xff08;th&#xff09;RDS&#xff08;on&#xff09;导通电阻Ciss&#xff1a;输入…

HTML中 CSS去除li前面的小黑点

ul.tpl-left-nav-menu {list-style: none; } https://blog.csdn.net/qq_33833327/article/details/78652039

servlet核心API的UML图

转载于:https://www.cnblogs.com/suncoolcat/p/3339613.html

8.19noip模拟题

2017 8.19 NOIP模拟赛 by coolyangzc 共3道题目&#xff0c;时间3小时 题目名 高级打字机 不等数列 经营与开发 源文件 type.cpp/c/pas num.cpp/c/pas exploit.cpp/c/pas 输入文件 type.in num.in exploit.in 输出文件 type.out num.out exploit.out 时间限制 …

【电路补习笔记】7、磁珠的工作原理、磁珠的分类、磁珠的模型、磁珠的参数、磁珠与电感的区别、磁珠的应用、磁珠的误区

目录简介铁耗磁滞损耗磁珠归类应用对比参数用途电源滤波低通滤波器的设计符号关于单点接地老师的主页&#xff1a;唐老师讲电赛 视频地址&#xff1a;磁珠的工作原理&#xff0c;磁珠的分类&#xff0c;磁珠的模型&#xff0c;磁珠的参数磁珠与电感的区别&#xff0c;磁珠的应用…

几个常用的正则表达式

几个常用的正则表达式(下面是在javascript里面的使用方式): 1. 正则表达式的中文表示 var reg_zh/^[\u4E00-\u9FA5\uF900-\uFA2D]*$/; 2. 正则表达式的英文表示(可以拆分成大小写) var reg_en /^[a-zA-Z]$/; 3. 正则表达式判断特殊字符(可以增减字符) var reg_spechars /^(?…

wordpress教程百科

https://www.xuewangzhan.net/jz/wpbbs/

顺序容器之vector

最近因为需要&#xff0c;在看C primer,哇&#xff0c;感觉这本书真不错&#xff0c;讲的细而且到位&#xff0c;而且大量的练习题&#xff0c;不愧为C学习的经典书籍。今天看了顺序容器方面的内容&#xff0c;现在汇报一下&#xff1a; 一、什么是vector vector是C标准模板库&…

利用python数据分析panda学习笔记之Series

1 Series a&#xff1a;类似一维数组的对象&#xff0c;每一个数据与之相关的数据标签组成 b:生成的左边为索引&#xff0c;不指定则默认从0开始。 1 from pandas import Series,DataFrame 2 import pandas as pd 3 #series 一组数据与相关得数据标签组成 4 objSeries([4,7,-5…

12864 OLED屏显示日历

目录calendar.c测试程序效果普中51-单核-A2 STC89C52 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 stdint.h见【51单片机快速入门指南】1&#xff1a;基础知识和工程创建 I2C版OLED驱动程序见【51单片机快速入门指南】4.2&#xff1a; SSD1306…

【笔记】iOS开发基础笔记二

1.block 2.didReceiveMemoryWarning 使用 3.HTTP&#xff0c;TCP&#xff0c;UDP 答&#xff1a;HTTP是应用层协议&#xff0c;定义的是传输数据的内容的规范HTTP协议中的数据是利用TCP协议传输的&#xff0c;所以支持HTTP也就一定支持TCP HTTP支持的是www服务 而TCP/IP是协议…

心得体会2-7

通过例题2-7&#xff0c;i1还是il的一次次反复错误导致难以运行&#xff0c;我懂得了输完程序并不只是盯着程序看&#xff0c;还应该看看例题中提示&#xff0c;真正明白表达式是什么意思。转载于:https://www.cnblogs.com/huangsilinlana/p/3349449.html