![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript教程
记录js学习
playboy-jordan
磨炼灵魂,提升心智
展开
-
js学习之js的声明和引入
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js的声明和引入</title> <!--声明js代码域--> <!--引入外部声明好的js文件--> <script src="js/my.js" type="text/javascript" charset="utf-8"></script>原创 2020-06-19 23:34:58 · 152 阅读 · 0 评论 -
js学习之变量学习
<html> <head> <title>js的变量学习</title> <meta charset="UTF-8"/> <!-- js的变量声明学习: 1、js中的所有变量声明只有var关键字。 var a=123; var A=1234; var a1=3.1415926; var a2="js"; var a3='k'; var a4=t原创 2020-06-19 23:37:28 · 175 阅读 · 0 评论 -
js学习之变量强转
<html> <head> <title>js中的变量强转</title> <meta charset="UTF-8"/> <!-- js中的数据转换: 其他类型转换为number 类型 使用Number(其他类型的数据); string 类型的数字字符: 对应的number数字 string 非数字字符: NaN(number类型) boolean true: 1原创 2020-06-20 00:19:44 · 157 阅读 · 0 评论 -
js学习之运算符学习
<html> <head> <title>js的运算符学习</title> <meta charset="UTF-8"/> <!-- js的运算符学习: 算术运算符: 加法:+ 减法:- 乘法:* 除法:/ 余数:% number类型的和number类型的 number类型和boolean类型(true--1,false--0)原创 2020-06-20 10:08:10 · 163 阅读 · 0 评论 -
js学习之==和===判断
<html> <head> <title>js的特殊关系运算符</title> <meta charset="UTF-8"/> <!-- 等值运算符:== 先判断类型,类型一致则直接比较。 类型不一致,则先使用Number()进行强转后再进行比较。 等同运算符:=== 先判断类型,类型一致则再比较内容,内容一致则返回true,内容不一致则返回false。 类型不一致则直接fal原创 2020-06-20 11:09:46 · 294 阅读 · 0 评论 -
js学习之逻辑结构和循环结构
<html> <head> <title>js的逻辑结构和循环结构学习</title> <meta charset="UTF-8"/> <!-- js的逻辑结构: if结构 单分支结构: if(判断条件){执行体} 双分支: if(判断条件){执行体}else{执行体} 多分支: if(判断条件){执行体}else if(判断条件){执行体}……el原创 2020-06-20 11:33:48 · 212 阅读 · 0 评论 -
js学习之数组学习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js的数组学习</title> <!-- js的数组学习: 1、数组的声明 var arr=new Array();//声明一个空数组对象 var arr=new Array(length)//声明一个指定长度的数组 var arr=[元素]//声明数组(原创 2020-06-20 12:27:51 · 278 阅读 · 0 评论 -
js学习之计算器案例
<html> <head> <title>计算器</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> /*设置div样式*/ #showdiv{ border: solid 1px; border-radius: 10px;/*设置边框角度*/ width: 320px;原创 2020-06-20 14:54:49 · 267 阅读 · 0 评论 -
js学习之数组的常用操作
<html> <head> <title>js数组的常用操作</title> <meta charset="UTF-8"/> <!-- 数组的操作学习: 1、数组的合并:arr.concat(b,c);//数组的合并 2、数组指定间隔符转换字符串:var b=arr.join("-"); 3、数组移除最后一个元素并返回:var ele=arr.pop(); 4、数组的追加,返回新的长度:var ln=原创 2020-06-20 15:32:35 · 165 阅读 · 0 评论 -
js学习之函数学习(一)
<html> <head> <title>js的函数学习</title> <meta charset="UTF-8"/> <!-- test,1-2, test(1,2) js的函数学习一: 作用:功能代码块的封装。减少代码的冗余。 1、函数的声明: 方式一:function 函数名(形参名1,形参名2……){执行体} 方式二:var 函数名=new Function("形参原创 2020-06-22 12:56:57 · 229 阅读 · 0 评论 -
js学习之类和对象学习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js中的类和对象学习</title> <meta charset="UTF-8"/> <!-- js中的类学习: 1、类的声明: function 类名(形参1,形参2……){ this.属性名1=形参1; this.属性名2=形参2;原创 2020-06-22 22:34:35 · 197 阅读 · 0 评论 -
js学习之自定义对象
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js的自定义对象</title> <meta charset="UTF-8"/> <!-- js创建自定义对象 对象的作用:用来存储整体数据。 原因:很多时候我们没有办法预先知道一个对象应该有哪些属性, 所以只能临时的创建一个对象来自定义属性存储数据。来原创 2020-06-22 22:54:25 · 125 阅读 · 0 评论 -
js学习之常用对象和方法
<html> <head> <title>js的常用对象和方法</title> <meta charset="UTF-8"/> <!-- 常用的对象和方法: 1、String 2、Date 3、Math 4、Global --> <!--声明js代码域--> <script type="text/javascript"> //1、String对原创 2020-06-23 21:30:07 · 103 阅读 · 0 评论 -
js学习之事件机制(一)
<html> <head> <title>js的事件机制学习1</title> <meta charset="UTF-8"/> <!-- js的事件机制: 解释:当我们的行为动作满足了一定的条件后,会触发某类事务的执行。 作用:主要是结合js的函数来使用。 内容: 1、单双击事件 单击:onclick 当鼠标单击的时候会触发 双击:ondblclick原创 2020-06-23 22:27:26 · 193 阅读 · 0 评论 -
js学习之事件机制(二)
<html> <head> <title>js的事件机制二</title> <meta charset="UTF-8"/> <!-- js的事件机制学习2: 1、给合适的HTML标签添加合适的事件 onchange----select下拉框 onload------body标签 单双击-------用户会进行点击动作的HTML元素 鼠标事件------用户会进行鼠标移动操作的原创 2020-06-23 23:22:38 · 207 阅读 · 0 评论 -
js学习之window对象学习(一)
<html> <head> <title>window对象学习</title> <meta charset="UTF-8"/> <!-- BOM浏览器对象模型:是规范浏览器对js语言的支持(js调用浏览器本身的功能)。 BOM的具体实现是window对象 window对象使用学习: 1、window对象不用new,直接进行使用即可,类似Math的使用方式,window关键字可以省略不写。 2、原创 2020-06-24 23:44:40 · 197 阅读 · 0 评论 -
js学习之window对象学习(二)
<html> <head> <title>js的window对象学习2</title> <meta charset="UTF-8"/> <!-- js的window对象学习 1、子窗口方法 window.open('子页面的资源(相对路径)','打卡方式','配置'); 示例:window.open('son.html','newwindow','height=400, width=600, top=10原创 2020-06-25 10:36:12 · 193 阅读 · 0 评论 -
js学习之document对象学习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>document对象学习</title> <!-- document对象学习: 1、document对象的概念 浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息。 2、使用document 获取HTML元素对象原创 2020-06-25 12:01:28 · 231 阅读 · 0 评论 -
js学习之操作HTML的元素属性
<html> <head> <title>js操作HTML的元素属性</title> <meta charset="UTF-8"/> <!-- js操作HTML元素属性学习: 获取元素对象 操作元素属性 获取: 元素对象名.属性名//返回当前属性的属性值。----固有 元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义原创 2020-06-25 15:47:59 · 374 阅读 · 0 评论 -
js学习之操作元素内容
<html> <head> <title>js操作元素内容学习</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #div01{ width: 200px; height: 200px; border: solid 1px orange; } </style>原创 2020-06-25 20:25:43 · 157 阅读 · 0 评论 -
js学习之操作元素样式
<html> <head> <title>js操作元素的样式</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #showdiv{ width: 200px; height: 200px; border: solid 1px; } .common{ width:原创 2020-06-25 20:29:01 · 166 阅读 · 0 评论 -
js学习之操作元素的文档结构(一)
<html> <head> <title>js操作元素的文档结构</title> <meta charset="UTF-8"/> <!-- js操作HTML文档结构: 增加节点 删除节点 第一种方式:使用innerHTML div.innerHTML=div.innerHTML+"内容"//增加节点 div.innerHTML=""//删除所有子节点 父节点.remov原创 2020-06-25 20:51:50 · 228 阅读 · 0 评论 -
js学习之操作元素的文档结构(二)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js操作文档结构2</title> <!-- js操作文档结构2: 获取元素对象 var obj=document.createElement("标签名"); 元素对象名.appendChild(obj); --> <!--声明js代码域--&g原创 2020-06-25 21:31:45 · 198 阅读 · 0 评论 -
js学习之操作form表单
<html> <head> <title>js操作form表单</title> <meta charset="UTF-8"/> <!-- js操作form: 获取form表单对象 使用id:var fm=document.getElementById("fm"); 使用name属性:var frm=document.frm; 获取form下的所有表单元素对象集合 f原创 2020-06-25 21:59:03 · 533 阅读 · 0 评论 -
js学习之操作表单元素
<html> <head> <title>操作表单元素</title> <meta charset="UTF-8"/> <!-- js操作多选框、单选框 被选中状态下在js中checked属性值为true,未选中状态为false; js操作下拉框: 被选择的option对象在js中selected属性值为true,未选中为false --> <!--声明js代码域-->原创 2020-06-26 09:56:50 · 243 阅读 · 1 评论 -
js学习之校验form表单
<html> <head> <title>js校验form表单</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> /*设置背景图片*/ body{ background-image: url(img/b.jpg); } /*设置tr样式*/ tr{ height: 40原创 2020-06-26 16:34:46 · 441 阅读 · 0 评论 -
js学习之模拟淘宝案例
<html> <head> <title>模拟淘宝网</title> <meta charset="UTF-8"/> <!--声明js代码域--> <script type="text/javascript"> //创建函数进行照片的联动和样式设置 function operInImg(img,src){ //设置图片的样式 img.style.border="solid原创 2020-06-26 19:35:15 · 325 阅读 · 0 评论 -
js学习之操作表格
<html> <head> <title>操作表格</title> <meta charset="UTF-8"/> <!-- js操作表格学习: 1、删除行: 行对象.rowIndex//返回行对象的角标 表格对象.deleteRow(要删除的行对象的角标); 2、修改单元内容 单元格对象.innerHTML="新的内容"; 行对象.cells//返回当前行所有的单元原创 2020-06-27 00:28:19 · 405 阅读 · 0 评论