js课程 1-2  js概念

一、总结

一句话总结:js标签元素也是js对象,有属性和方法,方法就是事件,属性就是标签属性,可以直接调用。

1、js中如何获取标签对象?

getElement获取的是标签,是元素,同样也是js对象,也有属性和方法,方法就是onclick这些事件,属性就是固有的属性

13 //找到小狗图片
14 dogobj=document.getElementById('dogid');
15
16 //给小狗图片加事件
17 dogobj.onclick=function(){
18 //代码段
19 alert(dogobj.id);
20 alert(dogobj.src);
21 }

2、为什么说js是基于对象语言而不是面向对象语言?

因为js是内置了很多对象,我们可以直接使用而不用创建,比如document、history、event等等

3、document.write()的作用是什么,里面可以输出html标签么?

在执行位置输出html,可以html标签

2.document.write('<h1>'+username+'</h1>');

4、js中的标签对象有哪些常用属性和方法?

方法就是那些onclick事件那些,属性的话就标签的各种属性

13 //找到小狗图片
14 dogobj=document.getElementById('dogid');
15
16 //给小狗图片加事件
17 dogobj.onclick=function(){
18 //代码段
19 alert(dogobj.id);
20 alert(dogobj.src);
21 }

二、js概念

1、相关知识

何为js特效:
1.定义事件(触发时机+行为)
2.触发事件(行为发生)
3.事件发生是具有重复性

面向对象编程:(js是一门基于对象的语言)
1.如何获得该对象
2.如何调用该对象的属性
3.如何调用该对象的方法

对象的组成部分:
1.属性(特征)
2.方法(行为)

js标签放置位置(执行顺序):
1.内联
2.内部
3.外部

变量定义:
username='小金';

字符串连接变量:
'my name is '+username

js如何输出变量:
1.alert(username);
2.document.write('<h1>'+username+'</h1>');

js中字符串连接符:
+

2、代码

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div class="img">
<img src="dog.png" id='dogid'>
</div>
</body>
<script>
//找到小狗图片
dogobj=document.getElementById('dogid'); //给小狗图片加事件
dogobj.onclick=function(){
//代码段
alert(dogobj.id);
alert(dogobj.src);
} //触发事件
</script>
</html>
 

js课程 1-2 js概念的更多相关文章

  1. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. TensorFlow.js之安装与核心概念

    TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装     ...

  3. 7-81 js课程小结

    7-81 js课程小结 学习要点 理解全局对象 变量的作用范围 理解全局对象Global 全局属性和函数可用于所有内建的 JavaScript 对象.全局对象是所有全局方法的拥有者,用来统一管理全局方 ...

  4. js课程 6-15 js简单弹力球如何实现

    js课程 6-15 js简单弹力球如何实现 一.总结 一句话总结:a.通过document的documentElement属性获取可是区域的高: b.通过增值变为负的实现到底部后反弹 1.docume ...

  5. js课程 5-14 js如何实现控制动画角色走动

    js课程 5-14 js如何实现控制动画角色走动 一.总结 一句话总结:首先是onkeydown事件,然后是改变元素的left和top属性 1.常用键盘事件有哪些? • onkeydown和 onke ...

  6. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  7. js课程 4-12 js中正则表达式如何使用

    js课程 4-12 js中正则表达式如何使用 一.总结 一句话总结: 1.js正则表达式手册取哪里找? w3cschool或者菜鸟教程->找到js正则表达式->完整的RegExp参考手册这 ...

  8. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  9. js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么

    js课程 3-10  js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么 一.总结 一句话总结:js中是对象点方法的形式,这些方法都是对象的方法,而在php.java中却不是这样. 1.j ...

随机推荐

  1. Linux下搭建JSP环境

    Linux下搭建JSP环境     作为一名Java EE系统架构工程师,经常需要搭配和建立JSP(Java Server Pages)的开发环境和运行环境,所以本人在平时的工作中积累了一些在Linu ...

  2. C#中选中指定文件并读取类似ini文件的内容

    一.背景 由于项目中需要去读取设备的配置信息,配置文件的内容和INI配置文件的格式类似,所以可以按照INI文件的方式来处理.涉及如何打开一个文件,获取打开的文件的路径问题,并读取选中的文件里边的内容. ...

  3. Apple Watch 集成环信SDK

    本文简单的讲述下怎样用Apple Watch Kit集成环信SDK. 升级xcode到version 6.2,和 IOS SDK8.2 下载环信SDK从官网 打开XCode->new proje ...

  4. Linux下改动Oracle数据库字符集命令

    常见情形:从server备份Oracle数据库后再到本地机器上还原Oracle数据库的时候常常会碰见数据库字符编码不一致的情况,能够用下面命令来改动本地的Oracle数据库字符编码,然后顺利还原Ora ...

  5. 9. ZooKeeper之搭建单机模式。

    转自:https://blog.csdn.net/en_joker/article/details/78673456 在集群和单机两种模式下,我们基本完成了分别针对生产环境和开发环境ZooKeeper ...

  6. 6 Spring Boot 静态资源处理

    转自:https://blog.csdn.net/catoop/article/details/50501706

  7. 79.cgi硬盘查询个人信息

    运行截图: 把cgi编码转为char*类型 //把cgi编码转为char*类型 char* change(char *str) { //分配内存 ); //x是tempstr的下标,y是str的下标 ...

  8. oracle 多行转多列查询

     oracle 多行转多列查询  ---create table Fruit(id int,name varchar(20), Q1 int, Q2 int, Q3 int, Q4 int);inse ...

  9. call,apply,求最大最小值,平均数等基础编程知识

    CALL/APPLY.一些编程基础以及一些基础知识.正则 call.apply.bind 求数组的最大值和最小值: 数组排序(SORT的原理->localeCompare实现汉字比较),取头取尾 ...

  10. jmeter--错误之Not able to find Java executable or version. Please check your Java installation. errorlevel=2

    学习jmeter中遇到的问题: 'findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件. Not able to find Java executable or version. Pl ...