首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >4篇笔记搞定JavaScript----第四篇

4篇笔记搞定JavaScript----第四篇

作者头像
Lemon黄
发布2019-10-29 18:18:47
4230
发布2019-10-29 18:18:47
举报
文章被收录于专栏:Lemon黄Lemon黄

对象

将一组数据与这组数据有关操作组装在一起,形成一个实体,这个实体就是对象。

在 JavaScript 中,对象是拥有属性和方法的数据。

  • 属性是对象相关的值
  • 方法是能够在对象上执行的动作。

以汽车为例,汽车就是现实中的对象。

  • 汽车的属性包括名称、型号、重量、颜色等
  • 汽车的方法可以是启动、驾驶、刹车等。

JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。

访问对象的属性的语法是:

 objectName.propertyName

访问对象的方法的语法是:

objectName.methodName()

事件

HTML和JS通过事件建立联系

1、鼠标事件:

  • onClick:点击事件
  • onMouseover:鼠标放上
  • onMouseout:鼠标离开

2、键盘事件:

  • onkeyDown:键盘按下
  • onkeyUp:键盘抬起
  • onkeyPress:按键一次

3、表单事件

  • onSubmit:表单提交事件
  • onFocus:获得焦点
  • onBlur:失去焦点

4、窗口事件

  • onLoad:在网页一打开的时候(必须把所有的东西都加载完成之后)
<body onload=”init()”></body>
.
.
Window.onload = init

注意:函数名init之后没有括号

  • event:是指事件发生的时候(事件源)相关的一些信息
  • clientX:获得鼠标的X坐标
  • clientY:获得鼠标的Y坐标
  • event.target:事件源
<!DOCTYPE>
<html>
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <script type="text/javascript">
    window.onload = init;
    function init(){
      alert(123);
    }
</script>
 </head>
 <body>
  hello
 </body>
</html>

Js控制改变标签的html属性和css属性

1、首先获取标签

2、找对对应的标签属性并赋值

1) HTML的标签属性设置

i. 取值var w=对象.HTML属性名

ii. 对象.HTML 属性名 = 值

2) CSS属性设置

i. var ab = 对象.style.CSS属性名

ii. 对象.style.CSS属性名 = 值

HTML

CSS

JS

Width

background-colr

backgroundColor

height

margin-left

marginLeft

Document获取标签元素:

  • Document.getElementById(“id”) : 通过这种方法可以获得这个id名的标签对象
  • Document.getElemetsByTagName(“标签名”):通过这种方法可以获得标签名的标签对象注意:这个时候获得的是数组形式的
  • Document.body:获得body这个对象
<!DOCTYPE >
<html>
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css">
    #div{
      width:200px;
      height:100px;
      background-color:red;
    }
</style>
  <script type="text/javascript">
          function change(){
      var obj = document.getElementById("div");
      obj.style.backgroundColor="black";       
    }
</script>
 </head>
 <body>
  <div id="div"></div>
  <input type="button" value="改变">
 </body>
</html>

效果:

innerHTML和value对比

  • innerHTML:所有在这个对象内的内容都是innerHTML的内容
  • value:一般情况input的时候都是value,双标签都需要用到innerHTML
<!DOCTYPE>
<html>
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <script type="text/javascript">
function show(){
var m = document.getElementById("d1");
var str = m.innerHTML;
alert(str);
}
</script>
 </head>
 <body>
  <div id="d1">
<div>这是汉字</div>
  </div>
 </body>
</html>

效果:

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Lemon黄 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 对象
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档