JavaScript

ECMAscript

• js引入方式

  • Script标签中编写
  • 通过script标签引入（当前标签无法再编辑js代码）
  • 在页面中直接编写javascript
    • 例：οnclick=“javascript:alert(1)” 尽量不用

• js基本语法

  • js数据类型为弱类型，声明时无需指定数据类型，赋值时根据值决定类型。

var num = 10 ;

	- 运算符 与java大致一致
		== 比较值
		=== 比较值和类型 
	
	- 条件语句  循环语句 与java一致

• js中变量类型
  • Number 数字类型
  • String 字符串类型
  • Boolean 布尔类型
  • Undefined 未定义或未初始化类型
  • Null 表示空对象 一般作为对象类型的初始值
  • Object 复合类型 包含js中的各种对象
• 类型转换函数

parseInt():字符串转换为整数
parseFloat():字符串转换为浮点数
toString()：返回字符串
注意：小数相加时会丢失精度 如0.1+0.2 需要取位数 使用toFixed（位数）

• 函数定义

  • function 函数名（参数列表）{
    //执行的代码
    return xxx;
    }

  • var 函数名 = function(){
    //执行的代码
    }

• js事件

  • onclick 鼠标点击 button 块元素
  • onmouseover 鼠标经过 块元素
  • onmouseout 鼠标移出 。。。
  • onfocus 获取焦点 输入框
  • onblur 失去焦点 。。。
  • onchange 内容改变 select 输入框
  • onkeyup 键盘弹起 输入框
  • onload 加载结束 body
  • onsubmit 表单提交 form

• 元素上加事件

  • οnchange=“myCopy()”

• 事件绑定
  window.οnlοad=function(){
  document.getElementById(“myBtn”).οnclick=function(){
  console.log(“运行了111”);
  }
  }

  οnmοuseοver=“changeBg(‘red’,this,‘2’)”
  this 表示发生动作的元素

• 获取元素

  • document.getElementById(“checkPhoneSpan”)
  • value 表单元素的value属性
  • innerHTML 双标签中的内容 可以解析html代码
    • //.innerText 双标签中的内容 不能解析html代码
  • style.xxx 获取或者修改元素的某个样式
  • src 改变图片

BOM 浏览器对象模型

1. history对象
   .back()
   .forward()
   .go()

2. location对象
   .href 属性 浏览器地址栏 默认使用get方式传递
   相对路径
   绝对路径
   项目相对根路径
   .reload() 刷新当前页面

3. document对象
   .getElementById("")
   html中 id不要重复 会影响js中元素的获取
   .getElementsByTagName("")
   .getElementsByClassName("")
   .getElementById("").getElementsByClassName("") 获取元素数组

4. open() close()
   打开、关闭窗口

5. 定时函数
   setInterval(函数,毫秒数)
   setTimeOut(函数,毫秒数)
   通过setInterval返回值获取任务号 taskid
   var taskid =setInterval(函数,毫秒数)
   清除任务时使用
   clearInterval(taskid);

   setInterval(“xxx()”,毫秒数)
   setInterval(fucntion(){},毫秒数)

Dom 文档对象模型

• DOM(文档对象模型)提供了添加、移动、改变或移除结构文档的方法和属性。

• 获取元素节点
  getElementById():返回对拥有指定id的第一个对象的引用
  getElementsByTagName():返回带有指定名称的对象集合
  getElementsByName():返回带有指定名称的对象集合

• 根据节点层次关系获取节点（属性 不是方法）
  parentNode：返回节点的父节点
  childNodes：返回子节点集合,childNodes[i]
  firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
  lastElementChild： 返回节点的最后一个子节点
  nextElementSibling：下一个节点
  previousElementSibling：上一个节点

• 获取操作节点属性

  • getAttribute() 获取某个节点的属性值
    节点对象.getAttribute( “属性名” );

  • setAttribute() 设置某个节点的属性值
    节点对象.setAttribute( “属性名”, “属性值” );

  • 或者直接 元素.属性名

• DOM动态操作相关方法
  createElement() 创建元素
  appendChild() 追加元素
  insertBefore() 在某元素前追加元素
  cloneNode(bol) 复制元素
  removeChild() 删除元素

• 如果外边包含有双标签 通常可以直接把双标签中的内容当做字符串处理

document.getElementById("myul").innerHTML+='<li id="myli"><input type="password" /> </li>';

• dom操作表格
  table 二维表
  .rows
  .cells
  [[11,11,11,11],[22,22,22,22],[33,33,33,33]]
  insertRow(idx) 添加行
  insertCell(idx) 新增单元格（列）
  deleteRow(idx) 删除行

• js中常用对象

  • String
    IndexOf 查找指定字符
    subString 截取字符串
    Substr 截取字符串
    Split 分割
    toUppercase 转大写
  • Math
    Ceil 向上取整
    Floor 向下取整
    Round 四舍五入
    Random 伪随机数 [0-1)
  • Date
    new Date(xxxx)
    获取年月日时分秒。。。。。
    
  • Array
    [];
    可以放任意格式数据
    可以随意扩容
    Lenght 数组长度
    方法
    Join() 通过特定字符拼成字符串
    Sort() 排序
    Push() 尾部添加元素
    Pop() 尾部删除元素
    Shift() 头部删除元素
    Unshift() 头部添加元素

小结

• html中通用属性
  id 为js服务 定位元素
  name 表单元素加name 不加表单默认不传递数据 js也可以通过name获取元素
  class 为css服务 css中定位元素 js中也可以使用
  style 行内编辑样式 优先级最高

• js中常用属性
  .value 表单元素的值
  .innerHTML 双标签中的内容
  .style.xxx 修改元素的样式
  .className 操作class 谨慎使用
  通过.获得元素的属性
  .disabled 禁用
  .checked checkbox选中
  .selected select的option选中

• 做页面效果时，应明确：
  1.由谁触发
  2.什么事件
  3.发生什么事（什么元素 操作什么属性）

最后

以上就是端庄小熊猫为你收集整理的JavaScript的全部内容，希望文章能够帮你解决JavaScript所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。