js03
我们接着来学习js的一些基础知识点。
1.document:
document是window对象的一个属性。window对象表示浏览器中打开的窗口。如果文档包含框架(frame或者iframe),浏览器会为HTML文档创建一个window对象,并为每一个框架创建一个额外的window对象。所有的全局函数和变量都属于window对象的方法和属性。可以在浏览器中console一下window对象和document对象,理清它们的关系。
document常用属性:
document.title//设置文档标题,与HTNL中的title标签等价 document.bgColor//设置页面背景颜色 document.fgColor//设置页面前景色 document.fileCreateDate//文件建立日期,只读属性 document.fileModifiedDate//文件修改日期,只读属性 document.URL//可返回当前文档的URL document.linkColor//未点击过的链接颜色 doucment.alinkColor//鼠标在此链接上的颜色 document.vlinkColor//已点击过的链接颜色 document.charset//设置字符集,简体中文为gb2312 document.fileSize//文件大小,只读属性 document.cookies//设置和读出cookie
document常用方法:
document.createElement(Tag)//创建HTML元素 document.getElementById(ID)//获得指定id值的对象 document.getElementByName(name)//获得name值的对象 document.write()//动态向页面写内容 document.body.appendChild(oTag)//向节点添加最后一个子节点
2.HTML DOM:
网页被加载时,浏览器会创建DOM对象
DOM是一颗对象的树
3.js可以改变HTML元素、属性、样式、对事件作出回应、改变HTML输出流
document.write("some text...")
document.getElementById("eid").innerHTML="new text"
document.getElementById("eid").src="..."
document.getElementById("eid").style.color="gray"
4.查找元素:
id查找 document.getElementById("eid");
标签查找 var x=document.getElementById("eid");var y=x.getElementsByTagName("p");
类查找 document.getElementsByClassName("eclass");
5.HTML DOM事件:
分配事件:document.getElementById("eid").onclick=function(){}
onload与onunload事件 网页加载
onchange事件 结合对输入字段的验证
onmouseover与onmouseout 鼠标移到或者离开元素
onfocus事件 元素获得焦点
6.节点(增加或者删除HTML元素):
<script type="text/javascript">
var para=document.createElement("p");
var tnode=document.createTextNode("这是新段落哦!");
para.appendChild(tnode); document.getElementById("div1").appendChild(para);
</script> <script type="text/javascript">
var par=document.getElementById("pid");
var chi=document.getElementById("cid");
par.removeChild(chi);
</script>
js03的更多相关文章
- Vue.js-03:第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- Vue.js03:v-model实现简易计算器
v-model用于数据的双向绑定.bug不少,凑合看吧,主要是练习v-model. <!DOCTYPE html> <html lang="en"> < ...
- d3.js--03(增删改查)
选择元素 d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部 插入元素 append():在选择集末尾插入元素 insert():在选择集前面插入元 ...
- js---03属性操作
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- js03 数组
变量的自动转换=== 等同符:不会发生类型的自动转化! == 等值符:会发生类型自动转化.自动匹配!判断相等没有equals()方法,只有2个等号3个等号. <!DOCTYPE HTML PUB ...
- JS-03 牛客网练习
1.很多人都使用过牛客网这个在线编程网站,下面是自己做的该项所有练习,已通过网站和老师检查无误,分享给大家. 2.先说一下题目的位置:牛客网https://www.nowcoder.com/activ ...
- node.js03 第一个node.js程序和读取文件
Hello World 1.创建运行 创建txt文件起名为hellonode,在记事本中编写JavaScript脚本文件 例如: var bbl = 'hellonode' console.log(b ...
- js基础知识梳理(最简版)
基础的JavaScript知识,只放XMind截图.小白 JS01 JS02 JS03 最基础的js知识--!
- JS笔记—02
1.String截取:substr:截几位, substring:截到哪. 2.String的操作,例如变大写,小写,本身不会变,只是在栈里交换引用似的 var str = "hello w ...
随机推荐
- 2018.08.30 NOIP模拟 graph(dfs序/树剖+线段树)
[描述] 给你一个图,一共有 N 个点,2*N-2 条有向边. 边目录按两部分给出 1. 开始的 n-1 条边描述了一颗以 1 号点为根的生成树,即每个点都可以由 1 号点 到达. 2. 接下来的 N ...
- Django的路由层(1)
https://www.cnblogs.com/yuanchenqi/articles/8876685.html URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为 ...
- ssh到远程执行命令并返回
假设有三台机器 host1,host2,host3,host1能免密登录其他两台.要在第一台的机器里面写一个脚本分别删除每台机器的/root/test.txt rm -rf /root/test.tx ...
- webuploader在ie7下的flash模式的使用
webuploader在ie7下不能使用h5模式上传图片,只能使用flash模式. 但是出现了几个问题:(1)必须正确的引入.swf文件,才能使webuploader正常运行 ...
- Flex box 弹性盒子布局
display: -webkit-flex 标识使用弹性布局 flex: num 占容器的比例 Flex等比划分 导航1 : Flex :1; 导航2 Flex: 2; ————&g ...
- VC++ 定制应用程序的外观
一.在窗口创建之前改变窗口的大小和标题 要改变应用程序窗口的大小可以通过在PreCreatWindowl函数中修改CREATSTRUCT结构体变量成员的值 BOOL CMainFrame::PreCr ...
- hdu 4993
http://acm.hdu.edu.cn/showproblem.php?pid=4993 满足ax + by = c的x,y对数 水题,暴力 #include <cstdio> #in ...
- 对SpringDAO层支持的总结
1.问题 1.JDBC/ORM框架(如Hibernate)开发中编程模型有哪些缺点? 如JDBC 2.解决方案(模板设计模式,本质:将可变的和不可变的分离) 模板方法模式:定义操作的步骤(固定的 ...
- Spine输出资源一键入Unity3D工具代码
之前预研过2D骨骼动画编辑工具SPINE,感觉其比cocosStudio及Unity3D自带的骨骼动画编辑器(原生Sprite Tree或Uni2D)要更适合有3DSMax习惯的美术,即Spine更容 ...
- [leetcode] 17. Merge Two Sorted Lists
这个非常简单的题目,题目如下: Merge two sorted linked lists and return it as a new list. The new list should be ma ...