7月25日--JavaScript基础
来源:互联网 发布:巴克利职业生涯数据 编辑:程序博客网 时间:2024/06/07 02:41
1.关闭窗口(window.close)
window.close();或《窗口对象》.close();关闭指定窗口
例:
var mywin=window.open('http//:www.imooc.com');
mywin.close();
2.认识DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点:上图中html、body、p等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如li.../li中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"。
3.通过ID获取元素
网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
<script type="text/javascript"> var mye=document.getElementById("con") document.write(mye);</script><p id="con">i love javascript</p>
输出的结果为空或[object HTMLParagraphElement]
因为获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。
4.innerHTML属性
innerHTML属性用于获取或替换HTML元素的内容。
语法:Object.innerHTML
注意:
1.Object是获取元素对象,如通过document.getElementByIdx_x_x("ID")获取元素
2.注意书写,innerHTML区分大小写
结果:New text!
p标签原始内容:Hello World!
p标签修改后内容:New text!
5.改变HTML样式
语法:
Object.style.property=new style;
注意:Object是获取的元素对象,如通过document.getElementByIdx_x_x("id")获取的元素。
看看下面的代码:
改变 p 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:
<p id="pcon">Hello World!</p><script> var mychar = document.getElementById("pcon"); mychar.style.color = "red"; mychar.style.fontSize = "20"; mychar.style.backgroundColor = "blue";</script>
显示和隐藏(display属性)
网页中经常会看到显示和隐藏的效果,可通过display属性来设置。
语法:
Object.style.display = value
注意:Object是获取的元素对象,如通过document.getElementByIdx_x("id")获取的元素。
value取值:
none
block <script> function hidetext() { var mychar = document.getElementById("con"); mychar.style.display = "none"; } function showtext() { var mychar = document.getElementById("con"); mychar.style.display = "block"; }</script><input type="button" onclick="hidetext()" value="隐藏内容" /><input type="button" onclick="showtext()" value="显示内容" />
其中段落的class叫con,当点击隐藏内容是段落内容隐藏,点击显示后再次显示
控制类名(className属性)
className属性设置或返回元素的class属性。
语法:
Object.className=newclassname;
作用:
1,获取元素的class属性
2,为网页的某个元素指定一个css样式来更改该元素的外观
<script> function add() { var p1 = document.getElementById("p1"); p1.className = "one"; }</script>
- 7月25日--JavaScript基础
- 7月24日--JavaScript基础(1)
- javascript学习手册(7月25日)
- 7月25日
- javascript 基础 模块展开 2017年1月24日
- 7月28日--JavaScript进阶篇
- java基础 7月17日
- 7月27日,7月25日
- 7月29日--javascript进阶篇4
- 7月30日--javascript进阶篇后续
- 7月28日--JavaScript进阶篇2
- 7月29日--javascript进阶篇3
- 记7月8日基础班结业“谢师宴”
- 记7月8日基础班结业“谢师宴”
- 第十三天3月7日之MySQL基础
- 7月20日--Java基础的回顾与总结
- javascript基础 获取属性并创建 2017年1月11日
- javascript 基础 图片库的动态速度与元素生成 2017年1月15日
- 7月20日--Java基础的回顾与总结
- 7月21日--JDBC
- 7月22日--注册登录
- 7月23日--验证码
- 7月24日--JavaScript基础(1)
- 7月25日--JavaScript基础
- 7月26日--HTML和CSS
- 7月27日--HTML和CSS
- excel插件中的RibbonButton中文字符换行问题
- ubuntu 编译licode
- git cherry-pick 小结
- 7月29日--javascript进阶篇4
- 7月30日--javascript进阶篇后续
- 7月31日--旋转木马幻灯片