行为层JavaScript+jQuery

JavaScript + jQuery【不完整】

---

一、JavaScript 行为层

• JavaScript简介

1. JavaScript历史： 1995年，网景公司 凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。
2. ECMAScript： 一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。
3. JavaScript版本
4. 一个完整的JavaScript包括：ECMAScript【语法 变量和数据类型 运算符 逻辑控制语句 关键字保留字 对象】+BOM【浏览器对象模型】+DOM【文档对象模型】

• 特点

1. JavaScript主要用来在HTML页面中添加交互行为
2. JavaScript是一种脚本语言，语法和java类似
3. JavaScript一般用来编写客户端的脚本
4. JavaScript是一种解释性语言，边执行边解释

• 基本语法

1. JavaScript严格区分大小写，如果弄错了大小写，程序将报错或者运行不正常。
2. 声明：var 合法的变量名；
3. 由于JavaScript属于弱类型语言，因此允许不声明变量而直接使用，系统将会自动声明该变量 如：x=88；

• 对象

1. 通过new Object（）方式创建对象
2. 字面量赋值方式创建对象

• 数据类型和变量

         ECMAScript提供了 typeof(变量或值) 来判断一个值或变量是哪种数据类型

1. 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
2. 字符串
• 以单引号'或双引号"括起来的任意文本，比如'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设置返回字符串的最大长度
3. 布尔值：经常用在条件判断中，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来 。
• true; // 这是一个true值
• false; // 这是一个false值
• 2 > 1; // 这是一个true值
• 2 >= 3; // 这是一个false值
4. 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

1. slice()
• slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array
• * slice()的起止参数包括开始索引，不包括结束索引。
• 如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array
2. push()和pop()
• push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉
3. unshift()和shift()
• 如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉
4. sort()和reverse()
• sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序；
• reverse()把整个Array的元素给掉个个，也就是反转
5. splice()
• splice()方法是修改Array的“万能方法”它从指定的索引开始删除若干元素，然后再从该位置添加若干元素
• 如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉
6. concat()
• concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array
• 注意，concat()方法并没有修改当前Array，而是返回了一个新的Array。
• 实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里
7. join()
• 把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串
• join(分隔符);

• 运算符号

1. 算数运算符：+          -        *         /        %       ++        --
2. 比较运算符：>          <      >=      <=     ==       !=        ===       !==
3. 逻辑运算符：&&       ||         !
4. 赋值运算符：=          +=     -=

• 常用系统函数

1. parseInt()与parseFloat()
• 这两个方法的参数数据类型都是字符串
• parseInt() 是将数字开头的整数部分取出来
• parseFloat()是将数字开头的整数或浮点数取出来
2. isNaN()函数: 用于检查一个变量是否为数值，如果是，则返回false，如果不是，则返回true。
3. eval()函数: 用于计算并返回字符串表达式的值

• JavaScript操作BOM对象（一）

1. 常用属性
• history   有关客户访问过的URL的信息
• back（）加载history对象列表中的前一个URL
• forward（）加载history 对象列表中的下一个URL
• go（）加载history 对象列表中的某个具体URL
• location  有关当前URL的信息
• host：设置或返回主机名和当前URL的端口号
• hostname：设置或返回当前URL的主机名
• href：设置或返回完整的URL
• reload（）重新加载当前文档
• reolace（）用新的文档替换当前文档
• screen只读属性，包含有关客户端显示屏的信息
2. 常用方法
• prompt()显示可提示用户输入的对话框
• alert()显示一个带有提示信息和一个“确定”按钮的警示对话框
• confirm()显示一个带有提示信息、“确定”和“取消”按钮的对话框
• close()关闭浏览器窗口
• open()打开一个新的浏览器窗口，加载给定URL所指定的文档
• setTimeout()在指定的毫秒数后调用函数或计算表达式
• setInterval()按照指定的周期（以毫秒计）来调用函数或表达式
3. 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

1. 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到现在一共花去的毫秒数
2. Math  http://www.runoob.com/jsref/jsref-obj-math.html
• ceil(x) 对数进行上舍入
• floor(x)对数进行下舍入
• round(x)四舍五入
• random() 返回0~1之间的随机数

• JavaScript操作DOM对象  https://www.cnblogs.com/Chenghao-He/p/7056394.html

1. 操作节点属性
• attributes     // 获取所有标签属性
• setAttribute("属性名","属性值")   // 设置标签属性
• getAttribute("属性名")    // 获取指定标签属性
2. 创建和插入节点
• createElement(tagName)创建一个标签名为tagName的新元素节点
• A.appendChild(B)把B节点追加至A节点的末尾
• insertBefore(A,B)把A节点插入至B节点前
• cloneNode(deep)复制某个指定的节点
3. 删除和替换节点
• removeChild(node)删除指定的子节点
• replaceChild(newnode,oldnode)用其他的节点替换指定的节点
4. style属性  https://www.cnblogs.com/zhuhuibiao/p/9825334.html
5. 获取元素位置

• 面向对象编程

1. 构造函数 和 原型对象
2. 原型继承 和 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的优势

1. 轻量级
2. 强大的选择器
3. 出色的DOM封装
4. 可靠的事件处理机制
5. 出色的浏览器兼容性
6. 隐式迭代
7. 丰富的插件支持

• 选择器 http://phpstudy.php.cn/e/jquery/jquery_ref_selectors.html
• 基本过滤选择器

1. :first 　　 　　     获取数组中第一个元素
2. :last 　　 　　      获取数组中最后一个
3. :eq(selector)　　 获取指定索引
4. :gt(index) 　　     大于指定索引
5. :lt(index) 　　      小于指定索引
6. :even 　　           偶数，从0开始计数（0、2、4即1/3/5行）
7. :odd　　              奇数
8. :not(selector) 　  去除所有与指定选择器匹配的元素
9. :header 　　       获得所有标题元素
10. :animated 　　    获得所有动画
11. :focus 　　         获得焦点

• 可见性过滤选择器

1. :Hidden：匹配所有不可见元素，或者type为hidden的元素
2. :Visible：匹配所有的可见元素
3. :Val（）：获得匹配元素的当前值。Vallue的值
4. :Show（）；显示隐藏的匹配元素。
5. :Hide（）；隐藏所有的元素

• 事件 http://phpstudy.php.cn/e/jquery/jquery_ref_events.html