JavaScript总结

JavaScript： JS - Behavior

​ ECMAScript - 语法规范 - ES5

​ BOM - 浏览器对象模型 - window

​ DOM - 文档对象模型 - document

JavaScript 数据类型

JavaScript 有隐式的类型转换。

​ 简单数据类型： number、string、boolean、null、undefined

​ 复杂数据类型： object

​ 可以使用 typeof() 查看数据类型

JavaScript 运算符

​ 算术运算符：+ 、-、 *、/、 % 、**（ES7版本）

​ 赋值运算符：= 、+=、 -=、 *=、 /=、%=

​ 比较（关系）运算符： >、 >=、 <、 <=、 ==、 != 、===（不带隐式类型转换的等于，全等于）、!==（严格不等于）

​ 逻辑运算符： &&（短路与）、 ||（短路或）、 !

​ 自增自减运算符： ++ 、--

​ 位运算、成员运算

JavaScript 中的全局函数

isNaN() 判断是不是 不是一个数

parseInt() 取整，如果取不出，返回NaN

parseFloat() 取小数，如果取不出，返回NaN

isFinite() 判断是不是有限的数

eval() - evaluate - 容易引发XSS（跨站脚本攻击）

encodeURIcomponent() 编成 百分号 编码

decodeURIcomponent() 从百分号编码 解码

获取对象

获取的对象元素：

document.getElementById(#id)

document.getElementByClassName(.class)

document.getElementByTagName(标签)

querySelector() ： 根据指定的选择器查找单个元素

querySelectorAll() ： 根据指定的选择器查找所有元素

this // this 表示引发当前事件的对象元素

// evt 表示当前事件，evt.target 表示引发当前事件的事件源

// 需要在函数参数中 传入evt 对象

evt = evt || window.event; // 兼容低版本的IE

var target = evt.target || evt.srcElement;

在定义函数时，如果没有传入参数，那么函数中有一个隐藏的 arguments 对象，它代表了参数的列表，在调用时，可以传入任意多个参数。

1
2
3
4
5
function foo(){
	for (var i = 0;i < arguments.length;i++){
		alert(arguments[i]);
	}
}

window对象

document 文档

location 地址栏 - href / reload / replace

history 历史记录 - go / forward / back

navigator 浏览器

screen 操作系统窗口 - availWidth/ availHeight / width / height

alert /confirm / prompt

open / close

setTimeout / setInterval / clearTimeout / clearInterval

修改节点的内容和属性

textContent

innerHTML

nodeValue

访问成员运算符 .

setAttribute / getAttribute / removeAttribute

创建新节点

createElement

追加新节点

appendChild

insertBefore

移除子节点

removeChild

通过自己节点访问父节点

parentNode

通过自己节点访问子节点

children 所有

firstChild 第一个

lastChild 最后一个

通过自己节点访问兄弟节点

nextSibling 前面的兄弟

prevSibling 后面的兄弟

JQuery

jQuery的$函数的作用:

1、$(function() {}) $() 函数传入的是一个函数，表示该函数是在页面加载完成之后要执行的回调函数

2、$(selector) $() 函数传入的是一个选择器，表示通过选择器获得对应的元素，并处理成 jQuery对象，jQuery对象的本质是一个数组，如果要将jQuery对象转成原生js对象，使用下标或者get() 运算

3、$(element) $() 函数传入的是一个原生js对象，表示将其转成jQuery对象

4、$(标签) $() 函数传入的是一个标签，表示创建对应的元素并处理成jQuery对象

注意：当jQuery库和其他的库中的 $函数 有冲突，可以使用以下方法解决：

​ jQuery.noConflict() 将jQuery库中的 $函数 不起作用，但是jQuery库可以使用jQuery来替代 $，其他库可以使用 $函数。

查找元素

  • 选择器
    • * / element / #id / .class / selector1, selector2
    • ancestor descendant / parent>child / previous+next / previous~siblings
  • 筛选器
    • 基本筛选器：:not(selector)/ :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus
    • 内容筛选器：:contains('…')/ :empty / :parent / :has(selector)
    • 可见性筛选器：:hidden / :visible
    • 子节点筛选器：:nth-child(expr) / :first-child / :last-child / :only-child
    • 属性筛选器：[attribute] / [attribute='value'] / [attribute!='value'] / [attribute^='value'] / [attribute$='value'] / [attribute|='value'] / [attribute~='value']
  • 表单： :input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked

执行操作

  • 内容操作
    • 获取/修改内容：html() / text() / replaceWith() / remove()
    • 获取/设置元素：before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()
    • 获取/修改属性：attr() / removeAttr() / addClass() / removeClass() / css()
    • 获取/设置表单值：val()
  • 查找操作
    • 查找方法：find() / parent() / children() / siblings() / next() / nextAll() / prev() / prevAll()
    • 筛选器：filter() / not() / has() / is() / contains()
    • 索引编号：eq()
  • 尺寸和位置
    • 尺寸相关：height() / width() / innerHeight() / innerWidth() / outerWidth() / outerHeight()
    • 位置相关：offset() / position() / scrollLeft() / scrollTop()
  • 特效和动画
    • 基本动画：show() / hide() / toggle()
    • 消失出现：fadeIn() / fadeOut() / fadeTo() / fadeToggle()
    • 滑动效果：slideDown() / slideUp() / slideToggle()
    • 自定义：delay() / stop() / animate()
  • 事件
    • 文档加载：ready() / load()
    • 用户交互：on() / off()

AJAX - Asynchronous JavaScript and XML

让浏览器向服务器发出异步请求(非阻塞式请求)，等服务器返回了响应数据(JSON/XML)后就可以对页面进行局部刷新，这样就可以在不中断用户体验的前提下刷新页面数据

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
	url: 向服务器发送请求的url
	type: 发送请求的类型（get、post、put、patch、delete等）
	data: 发送请求时需要向服务器提交的数据，不是必填项
	datatype: 接收服务器返回数据的类型
	success: function(data){
      执行成功时，回调的函数
	},
	error: function(error){
      执行失败时，回调的函数
	}
});