JS文档整理

文章目录

  • JavaScript概述
  • Js基础语法
    • 变量
    • 数据类型
    • 运算符
    • 流程控制
    • 循环
    • 函数
    • 数组
    • 字符串
    • 事件
  • DOM
    • getElementById方法
    • getElementsByName()方法
    • 封装自己的$函数
    • this

JavaScript概述

JavaScript是一门前端编程语言,和我们曾经学习过的HTML、CSS一起编写的网页中,运行在客户端浏览器,被浏览器解释执行

通过JavaScript 以及html、css的配合可以帮助我们制作动态网页

网页 = HTML + Css + JavaScript (相互配合)
HTML负责:网页的基本结构
Css 负责: 美化网页 增加样式
javascript 负责:动态(交互)效果

Js基础语法

在HTML中:
js即JavaScript代码必须写在script标签中,script标签属性type=“text/javascript”,也可省略,js已经默认
三种输出:
·弹出框输出:alert(“hello word”);
·网页控制台输出:console.log(“hello word”);
·网页文本输出:document.write(“hello word”);
JS文档整理_第1张图片

变量

变量:在内存中开辟一块数据存储空间,可以在这个空间中存储任意的数据
在JavaScript中定义一个变量:var 变量名 = 数据;
var: variable(变量)
将JavaScript称之为弱数据类型变量没有类型,但是数据有类型

JS文档整理_第2张图片

数据类型

1.数值类型 (number)
包括整数+小数(不区分整数和浮点数)
2. 字符串类型(string)
不区分字符和字符串,’’和””的作用是一样
var a1 = ‘张三’;
3. 布尔类型(boolean)
true 或者 false
“true”
4. null
在js中支持为变量赋值为null,但是null不在是变量的默认值了(默认为undefined)
var a1 = null;
5.undefined
defined(定义) undefined(未定义)
在js中一个变量被声明了,但是没有赋值,那么这个变量的值就是undefined, undefined在js中是一个 关键字,是变量的默认值
console.log(a1); //如果一个变量没有声明就被使用,引发程序报错
var a2; //声明但未赋值
console.log(a2); //打印undefined

JS文档整理_第3张图片

typeof()作用:校验变量的类型

在这里插入图片描述

运算符

算术运算符: + - * / %
逻辑运算符:&& || !
比较运算符:> < != ==(只比较内容,不管类型) ===先进性类型是否匹配判断,再进行内容比较
三元运算符:boolean类型表达式?结果1:结果2

JS文档整理_第4张图片

流程控制

if的特殊情况
Js的if语句中可以出现的不仅仅是布尔表达式,还可以是数值或字符串为0,null,undefined时为false,其余为true

JS文档整理_第5张图片

循环

for(var i=0;i<10;i++){
     
}

Js中定义变量不可用int,要用var

函数

1.定义函数
函数三要素:函数名,参数列表,返回值
2.调用函数

js函数的参数表列也不写数据类型
JS文档整理_第6张图片
3.在js中变量可以存储一个匿名函数 (语法)
匿名函数:没有名字的函数
JS文档整理_第7张图片
4.回调函数

函数(代码)可作为另一个函数的参数
JS文档整理_第8张图片

注意事项:
JavaScript中没有函数重载
JavaScript中形参的个数和实参的个数可以不一致,可以正常调用, 如果实参个数多于形参列表,多出的实参会被丢弃

JS文档整理_第9张图片
实参的个数少于形参,有些形参没有被赋值,使用默认值undefined
问题:数字和undefinded无法运算,所以结果是NaN(not a number)
JS文档整理_第10张图片

数组

Js中数组定义的两种形式:
Js中数组与java的区别:
1.js数组用[]
2.js数组可以不定义长度
3.Js数组所存元素的类型可以不一致
JS文档整理_第11张图片

字符串

Java中数组求长度用length属性,
字符串用length()方法
Js中数组和字符串长度都是length属性
常用字符串方法:
JS文档整理_第12张图片
JS文档整理_第13张图片

事件

事件都是由浏览器已经提前准备的,我们可以给网页中的html元素绑定这些已经存在的事件,当事件触发之后就会执行我们为事件绑定的代码

使用点击事件
JS文档整理_第14张图片
输入框获取焦点事件
输入框失去焦点事件
JS文档整理_第15张图片
下拉框内容被改变 onchange事件
JS文档整理_第16张图片

表单提交事件
JS文档整理_第17张图片

DOM

DOM : document object model (文档 对象 模型)
document(文档): 相当于一个html文件
document是JS中的一个对象,用浏览器打开一个html文件,浏览器就创建在内存上创建一个与html文件对应的document对象
element(元素): 网页中一个html标签就是一个element对象

document对象和element对象的关系?
包含, document对象中包含了许多element对象

getElementById方法

getElementById方法来自于document对象
作用: 从document对象中,根据标签的id获取对应的标签对象(element对象)
document.getElementById(“t1”);

<body>
<div id=”t1”>张三div>
<div id=”t3”>张三div>
<h1 id=”t2”>李四h1>
body>

JS文档整理_第18张图片
网页中的图片的改变
获取图片标签对象,修改标签对象的src属性值,进而实现图片的改变
JS文档整理_第19张图片

改变输入框的内容
改变value属性值

改变复选框的选中状态
改变checked属性(true/false)

改变div标签中的内容(张三—>李四)
改变innerHTML属性

张三

标签中的内容是innerHTML的属性值

改变div标签背景颜色(red---->green)
改变 style属性

哈哈哈

编码思路
1.加事件 给标签加事件
2.获取标签对象 getElementById(“”)
3.操作标签对象的属性 获取属性值 | 修改属性值

getElementsByName()方法

作用:根据标签的name属性值,获取所有对应的标签对象
getElementsByName方法的返回值是一个数组

var arr = document.getElementsByName(“n1”);
//arr是一个标签对象数组,存储着所有获取的标签
for(var i=0;i<arr.length;i++){
      
   console.log( arr[i] );
}

 name=”n1”>张三div>
<div name=”n1”>李四div>
<div name=”n1”>王五div>

应用:全选功能

JS文档整理_第20张图片

封装自己的$函数

作用:每次写document.getXxx方法,好烦呀,所以封装一个$()函数,以后获取标签就很方便了
1.在项目中新建一个js文件(fold),里面在新建一个my.js文件
JS文档整理_第21张图片
2.在需要使用该函数html文件中先引入该js外部文件
独立的写一个scrpit标签用以引入
在这里插入图片描述

3.使用$()函数获取标签对象

规则:id就带#前缀,class就带.前缀,标签名就不带前缀

JS文档整理_第22张图片

this

语法:this代表当前所在的div标签对象

     <script>
         function test1(obj){
       
			}
     script>
 <div onclick=”test1(this)”>张三div>
<div onclick=”test1(this)”>李四div>

JS文档整理_第23张图片
JS文档整理_第24张图片

你可能感兴趣的:(JS文档整理)