JavaScript + jQuery【不完整】
一、JavaScript 行为层
- JavaScript简介
- JavaScript历史: 1995年,网景公司 凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。
- ECMAScript: 一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准,被称为ECMAScript标准。
-
JavaScript版本
- 一个完整的JavaScript包括:ECMAScript【语法 变量和数据类型 运算符 逻辑控制语句 关键字保留字 对象】+BOM【浏览器对象模型】+DOM【文档对象模型】
- 特点
- JavaScript主要用来在HTML页面中添加交互行为
- JavaScript是一种脚本语言,语法和java类似
- JavaScript一般用来编写客户端的脚本
- JavaScript是一种解释性语言,边执行边解释
- 基本语法
- JavaScript严格区分大小写,如果弄错了大小写,程序将报错或者运行不正常。
- 声明:var 合法的变量名;
- 由于JavaScript属于弱类型语言,因此允许不声明变量而直接使用,系统将会自动声明该变量 如:x=88;
- 对象
- 通过new Object()方式创建对象
- 字面量赋值方式创建对象
- 数据类型和变量
ECMAScript提供了 typeof(变量或值) 来判断一个值或变量是哪种数据类型
- Number(JavaScript不区分整数和浮点数,统一用Number表示)
- 123; // 整数123
- 0.456; // 浮点数0.456
- 1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5
- -99; // 负数
- 0xlf; // 十进制的31
- NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
- Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
- 字符串
- 以单引号'或双引号"括起来的任意文本,比如'abc',"xyz"等等。请注意,''或""本身只是一种表示方式,不是字符串的一部分,因此,字符串'abc'只有a,b,c这3个字符。
- 常用方法1:indexOf(str,index):返回指定字符首次出现的位置
- 常用方法2:charAt(index):通过索引值查找,返回指定字符
- 常用方法3: toLowerCase():字符串小写
- 常用方法4: toUpperCase():字符串大写
- 常用方法5: substring(from,to):传入两个索引值,截取两个值之间的字符串,不包括to值。返回新字符串,若start为负数,默认start为0
- 常用方法6: split(spearator,limit):分割字符串,以数组形式返回。spearator指定切割的地方,limit设置返回字符串的最大长度
- 布尔值:经常用在条件判断中,可以直接用true、false表示布尔值,也可以通过布尔运算计算出来 。
- true; // 这是一个true值
- false; // 这是一个false值
- 2 > 1; // 这是一个true值
- 2 >= 3; // 这是一个false值
- null和undefined
- null表示一个“空”的值,它和0以及空字符串''不同,0是一个数值,''表示长度为0的字符串,而null表示“空”
- 当声明的变量未初始化时,该变量的默认值是undefined,它表示“未定义”
- 在其他语言中,也有类似JavaScript的null的表示,例如Java也用null,Swift用nil,Python用None表示。
- JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义。事实证明,这并没有什么用,区分两者的意义不大。大多数情况下,我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
- undefined表示表明了变量但未对该变量赋值,null便是对该变量赋予了一个空值
- 数组: 是一组按顺序排列的集合,集合的每个值称为元素。
- JavaScript的数组可以包括任意数据类型。例如: [1, 2, 3.14, 'Hello', null, true];
- 另一种创建数组的方法是通过Array()函数实现: new Array(1, 2, 3); // 创建了数组[1, 2, 3]
-
出于代码的可读性考虑,强烈建议直接使用[]
-
数组的元素可以通过索引来访问。请注意,索引的起始值为0
- slice()
-
slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array
-
* slice()的起止参数包括开始索引,不包括结束索引。
- 如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array
-
push()和pop()
- push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉
-
unshift()和shift()
-
如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉
-
sort()和reverse()
-
sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序;
-
reverse()把整个Array的元素给掉个个,也就是反转
- splice()
-
splice()方法是修改Array的“万能方法”它从指定的索引开始删除若干元素,然后再从该位置添加若干元素
-
如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉
- concat()
-
concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array
-
注意,concat()方法并没有修改当前Array,而是返回了一个新的Array。
-
实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里
- join()
- 把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串
- join(分隔符);
- 运算符号
- 算数运算符:+ - * / % ++ --
- 比较运算符:> < >= <= == != === !==
- 逻辑运算符:&& || !
- 赋值运算符:= += -=
- 常用系统函数
- parseInt()与parseFloat()
- 这两个方法的参数数据类型都是字符串
- parseInt() 是将数字开头的整数部分取出来
- parseFloat()是将数字开头的整数或浮点数取出来
- isNaN()函数: 用于检查一个变量是否为数值,如果是,则返回false,如果不是,则返回true。
- eval()函数: 用于计算并返回字符串表达式的值
- JavaScript操作BOM对象(一)
- 常用属性
- history 有关客户访问过的URL的信息
- back()加载history对象列表中的前一个URL
- forward()加载history 对象列表中的下一个URL
- go()加载history 对象列表中的某个具体URL
- location 有关当前URL的信息
- host:设置或返回主机名和当前URL的端口号
- hostname:设置或返回当前URL的主机名
- href:设置或返回完整的URL
- reload()重新加载当前文档
- reolace()用新的文档替换当前文档
- screen只读属性,包含有关客户端显示屏的信息
- 常用方法
-
prompt()显示可提示用户输入的对话框
-
alert()显示一个带有提示信息和一个“确定”按钮的警示对话框
-
confirm()显示一个带有提示信息、“确定”和“取消”按钮的对话框
-
close()关闭浏览器窗口
-
open()打开一个新的浏览器窗口,加载给定URL所指定的文档
- setTimeout()在指定的毫秒数后调用函数或计算表达式
- setInterval()按照指定的周期(以毫秒计)来调用函数或表达式
- document对象
- 属性1: referrer:返回载入当前文档的URL
- 属性2: URL:返回当前文档的URL
- 方法1: getElementById()返回对拥有指定id的第一个对象的引用
- 方法2: getElementByName()返回带有指定名称的对象的集合
- 方法3: getElementsByTagName()返回带有指定标签名的对象的集合
- 方法4: write()向文档写文本、HTML表达式或JavaScript代码
- JavaScript操作BOM对象(二 内置对象)https://www.cnblogs.com/liuluteresa/p/6413988.html
- Date
- getDay()返回一周中的第几天(0-6)
-
getYear()返回年份.2000年以前为2位,2000(包含)以后为4位
-
getFullYear()返回完整的4位年份数
-
getMonth()返回月份数(0-11)
-
getDate()返回日(1-31)
-
getHours()返回小时数(0-23)
-
getMinutes()返回分钟(0-59)
-
getTime()返回从1970年1月1号0:0:0到现在一共花去的毫秒数
- ceil(x) 对数进行上舍入
- floor(x)对数进行下舍入
- round(x)四舍五入
- random() 返回0~1之间的随机数
- JavaScript操作DOM对象 https://www.cnblogs.com/Chenghao-He/p/7056394.html
- 操作节点属性
- attributes // 获取所有标签属性
- setAttribute("属性名","属性值") // 设置标签属性
- getAttribute("属性名") // 获取指定标签属性
- 创建和插入节点
- createElement(tagName)创建一个标签名为tagName的新元素节点
- A.appendChild(B)把B节点追加至A节点的末尾
- insertBefore(A,B)把A节点插入至B节点前
- cloneNode(deep)复制某个指定的节点
- 删除和替换节点
- removeChild(node)删除指定的子节点
- replaceChild(newnode,oldnode)用其他的节点替换指定的节点
- style属性 https://www.cnblogs.com/zhuhuibiao/p/9825334.html
- 获取元素位置
- 面向对象编程
- 构造函数 和 原型对象
- 原型继承 和 class继承
-
strict模式
- Map https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
- Set https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set
二、jQuery http://www.w3school.com.cn/jquery/index.asp
- jQuery的优势
- 轻量级
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 隐式迭代
- 丰富的插件支持
- :first 获取数组中第一个元素
- :last 获取数组中最后一个
- :eq(selector) 获取指定索引
- :gt(index) 大于指定索引
- :lt(index) 小于指定索引
- :even 偶数,从0开始计数(0、2、4即1/3/5行)
- :odd 奇数
- :not(selector) 去除所有与指定选择器匹配的元素
- :header 获得所有标题元素
- :animated 获得所有动画
- :focus 获得焦点
- 可见性过滤选择器
-
:Hidden:匹配所有不可见元素,或者type为hidden的元素
- :Visible:匹配所有的可见元素
-
:Val():获得匹配元素的当前值。Vallue的值
-
:Show();显示隐藏的匹配元素。
-
:Hide();隐藏所有的元素