1、js和html的结合方式
- （1）在html文件中写js代码:
- - <script type="text/javascript"> js代码; </script>
- （2）引入外部文件
- - <script type="text/javascript" src="js文件路径"></script>
2、js的原始类型和声明变量
- js的原始类型: string, number, boolean, null, undifined
- js在定义变量时只有var
- 查看当前变量的数据类型：typeof();
2.1、比较
- ==: 会将两边转换成相同类型,然后进行比较
- ===: 不会进行类型转换,直接比较
3、js的数组
- 直接定义：
- - var arr = [1, 2, 3];
- 使用内置对象Array
- 创捷对象是可以指定大小，也可直接赋值
4、js的函数
- 定义函数(传递的参数保存到arguments数组里面,即使函数的参数列表不指定,也可在 arguments 中拿到参数)
- 使用function关键字：
- function 方法名(参数列表){方法体; [return 返回值;]}
- 匿名函数：
- var 函数名 = function(参数列表){方法体; [return 返回值;]}
- 使用Function内置对象:
- var 函数名 = new Function("参数列表", "方法体和返回值");
- 使用function关键字：
4.1、js类
定义类
function Person(name, age){ // 定义构造函数,一般构造函数首字母大写 this.name = name; this.age = age; } Person.prototype.getName = function(){ // 使用原型可以使所有对象共用一个方法,避免浪费内存 return this.name; }; var p = new Person('hujing', 20); // 创建定义的类 p.a = 10; // 给p对象添加属性 delete p.a; // 将已添加的属性删除
实现继承:
function Worker(name, age, sex){ Person.call(this, name, age); // 调用父类构造方法,就是为了继承父类的属性 this.sex = sex; } for(var i in Person.prototype){ // 通过原型继承父类方法 Worker.prototype[i] = Person.prototype[i]; } Worker.prototype.getSex = function(){ return this.sex; };
4.2、js类原型
- prototype: 每个类的这个属性为类的原型
- 添加变量/方法会影响所有创建的对象
- Array.prototype.sum = function(){};
4.3、js 实现方法分开管理
var a={}; a.abc = { // 定义方法 aa: function(){}, bb: function(){} } a.abc.aa(); // 调用方法
5、js的全局变量和局部变量
- 全局变量：在script标签里面定义一个变量，在本页面的js部分都可以使用
- 局部变量：在方法内部定义一个变量，只能在方法内部使用
6、js对象
- String:字符串
- length: 长度
- bold()：加粗
- fontcolor(): 设置字符串颜色
- fontsize(): 设置字体大小
- link(): 将字符串显示成超链接
- sub(): 下标
- sup(): 上标
- concat(): 连接字符串
- charAt(): 返回指定位置的字符
- indexOf(): 返回指定字符串值在字符串中首次出现的位置
- split(): 把一个字符串分割成字符串数组
- splice(): 删除/插入/替换元素
- replace(rep, str): 在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串
- substr(): 抽取指定位置开始的指定数量的字符串
- substring(): 用于提取字符串中介于两个指定下标之间的字符(前闭后开)
- Array:数组
- concat(): 连接数组
- sort(): 排序
- join(): 把数组元素放入一个字符串
- push(): 向数组末尾添加元素
- pop(): 删除最后一个元素
- reverse(): 颠倒数组中元素顺序
- Date:时间
- toLocaleString(): 根据本地时间格式，把 Date 对象转换为字符串
- getFullYear(): 获取年
- getMonth(): 获取月
- getDay(): 获取星期
- getDate(): 获取日
- getHours(): 获取时
- getMinutes(): 获取分
- getSeconds(): 获取秒
- getTime(): 获取1970年1月1日至今的毫秒数。
- Math:数学运算(都是静态方法)
- ceil(): 向上舍入
- floor(): 向下舍入
- round(): 四舍五入
- abs(): 返回绝对值
- max(): 返回最大值
- min(): 返回最小值
- random(): 得到随机数
- submit(): 提交表单
- bom: 浏览器对象模型
- Navigator:获取客户端信息
- appName: 浏览器名字
- userAgent: 获取发送的 user-agent
- screen:获取屏幕的信息
- 显示器屏幕的宽度
- location: 页面url地址
- href: 设置或返回完整的URL
- hostname: 设置或返回web主机域名
- pathname: 设置或返回当前URL的路径部分
- port: 设置或返回当前URL端口
- protocol: 设置或返回使用的web协议
- history: 请求的url历史记录
- back(): 加载前一个url
- forward(): 加载下一个url
- go(): 加载到某个url
- window: 窗口对象，顶层对象(这些方法可以直接使用)(js代码中的全局变量和函数也在 window 对象中保存)
- document: 标签树
- alert(): 页面弹框
- open(): 打开一个新的窗口, 返回新窗口的 window 对象
- close(): 关闭窗口(兼容性差)
- setInterval(): 每次指定时间后执行js代码
- setTimeout(): 指定时间后执行js代码（一次）
- clearInterval(): 清除 setInterval 定时器
- clearTimeout(): 清除 setTimeout 定时器
- opener: 创建此窗口的窗口引用
- innerHeight: 浏览器窗口的内部高度
- innerWidth: 浏览器窗口的内部宽度
- Navigator:获取客户端信息
- dom：文档对象模型(对标记型文档进行操作)(都是内置对象)
- Document:标签树(像是所有标签的父节点)
- documentElement: 文档对象根元素
- cookie: 设置或返回当前的cookie
- write()：可以输出变量，固定值和html代码(会清空当前页面)
- 里面是双引号，如果设置标签属性使用单引号
- getElementById("id"): 返回指定id的标签对象
- getElementsByName("name"): 返回指定名称的对象集合
- getElementsByTagName("tagName"): 返回指定标签名的对象集合
- createElement("tagName"): 为指定标签创建一个元素的实例
- createTextNode("str"): 创建一个指定值的文本字符串
- Event: 事件对象
- 事件:
- onclick: 鼠标点击
- onmouseover: 鼠标经过
- onmouseout: 鼠标移出
- onchange: 内容改变
- onfocus: 得到焦点
- onblur: 失去焦点
- onkeyup: 某个键盘按键松开
- oncopy: 复制
- onpaste: 粘贴
- onload: 页面或图像加载完成的事件
- onresize: 窗口被重新调整大小
- onunload: 关闭网页事件
- 方法属性:
- type: 事件类型
- ctrlKey: 事件发生时,Ctrl 是否被按下
- shiftKey: 事件发生时,Shift 是否被按下
- altKey: 事件发生时,Alt 是否被按下
- stopPropagation(): 阻止事件冒泡,即不再向上层传递
- preventDefault(): 阻止默认事件执行(阻止超链接跳转,表单提交等)(需要在调用时传递 event)
- 事件:
- Element: 元素对象,即通过 document.getElement*方法得到的对象(node)
- 属性:
- value: 存储的值(id等其他属性相同)
- ['value']: 像数组一样使用,也可以获取与设置属性值
- nodeName: 名称
- nodeType: 类型
- nodeValue: 值
- parentNode: 父节点
- childNodes: 子节点集合
- firstChild: 第一个子节点
- lastChild: 最后一个子节点
- nextSiBling: 下一个兄弟节点
- previousSiBing: 上一个兄弟节点
- innerHTML:获取节点的文本内容，也可以向标签里面添加内容(可以是html代码)
- offsetLeft: 返回元素的水平偏移位置(相对父元素)
- offsetTop: 返回元素垂直偏移位置(相对父元素)
- offsetHeight: 返回元素高度
- offsetWidth: 返回元素宽度
- offsetParent: 返回偏移父节点(即相对于哪个父节点定位)
- scrollTop: 元素垂直滚动的像素(document.documentElement.scrollTop: 页面向下滚动的距离)
- scrollLeft: 元素水平滚动的像素
- scrollHeight: 元素的整体高度(包括隐藏部分)
- scrollWidth: 元素整体宽度(包括隐藏部分)
- style: 设置或返回元素的 style 属性
- 方法:
- getAttribute(): 通过名称获取属性值
- setAttribute(): 设置属性的值
- removeAttribute(): 删除属性（不能删除value）
- getElementsByTagName(): 返回指定标签名的对象集合
- appendChild(): 添加子节点到末尾，类似于剪切
- insertBefore(): 在某个节点之前插入一个新节点
- removeChild(): 删除节点，只能删除子节点，不能删除自己
- replaceChild(): 替换节点，只能替换子节点，不能替换自己
- cloneNode(): 复制节点(参数为boolen，是否复制子节点)
- addEventListener('click', function, false): 添加事件绑定(绑定匿名函数会无法解除绑定)
- removeEventListener('click', function, false): 解除事件绑定
- 属性:
- Attribute: 属性对象
- Document:标签树(像是所有标签的父节点)
- 全局函数：
- Infinity: 正无穷大数
- NaN: 非数字
- eval(): 执行js代码,将字符串作为js代码执行
- encodeURI(): 对字符进行编码
- decodeURI(): 对字符进行解码
- isNaN(): 判断字符串是否为非数字
- isFinite(): 判断是否为又穷大的数
- parseInt(): 将字符串转换成整数
- parseFloat(): 将字符串转换成浮点数
- typeof(): 查看当前变量的数据类型
- Number(): 将对象转换成数字
- getComputedStyle(element): 拿到元素最终的style(不能设置)
- console: 浏览器控制台操作
- log(str): 输出普通消息
- info(str): 输出提示信息
- error(str): 输出错误信息
- warn(str): 输出警告信息
- debug(str): 输出调试信息
- count(str): 统计本行代码被执行的次数,str为要显示的信息
- time(str): 开始计时器
- timeEnd(str): 结束计时器
- clear(): 清空控制台
7、AJAX
ajax发送异步请求（四步操作）
第一步（得到XMLHttpRequest）
得到XMLHttpRequest
// 大多数浏览器都支持 var xmlHttp = new XMLHttpRequest(); // IE6.0 var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE5.5以更早版本的IE var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
第二步（打开与服务器的连接）
xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
- 请求方式：可以是GET或POST
- 请求的URL：指定服务器端资源，例如；/day23_1/AServlet
- 请求是否为异步：如果为true表示发送异步请求，否则同步请求！
例如: xmlHttp.open("GET", "/day23_1/AServlet", true);
如果是POST请求，需要设置Content-Type请求头：
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
第三步（发送请求）
xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送！
参数：就是请求体内容！如果是GET请求，必须给出null。POST请求为参数,如: "name=hu&age=2"
第四步（）
在xmlHttp对象的一个事件上注册监听器: onreadystatechange
xmlHttp对象一共有5个状态：
- 0状态：刚创建，还没有调用open()方法;
- 1状态：请求开始：调用了open()方法，但还没有调用send()方法
- 2状态：调用完了send()方法了；
- 3状态：服务器已经开始响应，但不表示响应结束了！
- 4状态：服务器响应结束！（通常我们只关心这个状态！！！）
得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4 xmlHttp.onreadystatechange // xmlHttp的状态改变事件
得到服务器响应的状态码
var status = xmlHttp.status;//例如为200、404、500
得到服务器响应的内容
var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容 var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象！
8、json
json的语法
- {}：是对象！
- 属性名必须使用双引号括起来！单引不行！！！
- 属性值：
- null
- 数值
- 字符串
- 数组：使用[]括起来
- boolean值：true和false
- 属性值：
- 属性名必须使用双引号括起来！单引不行！！！
var person = {"name":"zhangSan", "age":18, "sex":"male"}; //将字符串转换成json对象 var str = "{"name":"zhangSan", "age":18, "sex":"male"}"; var person = eval("(" + str + ")");
从json中取出属性：
person.name; person.age; person.sex;
将java对象转换成json对象
- JSONObject: 相当于Map
- toString(): 将对象转换成json串
- JSONObject.fromObject(person)：把对象转换成JSONObject对象
- put("", ): 想map中添加键值对
- toBean(JSONObject, class): 将json串转换成java对象
- JSONArray: 相当于List
- toString(): 将对象转换成json串
- JSONArray.fromObject(list)：把list转换成JSONArray对象
- add(person): 想list中添加对象
- toList(): json对象转换成list
js中将对象转换成json:
- JSON.stringify(obj[, parame]): 将obj转成json字符串
- parame: 数组, 指定将obj中的什么属性转成json字符串
- JSON.parse(str): 将str转成json对象
9、jQuery
基础语法: $(selector).action()
- selector: "查询"和"查找" HTML 元素
- "p": 所有<p>标签
- "#test": 所有id="test"的标签
- ".test": 所有class="test"的标签
- "*": 所有标签
- this: 当前标签
- "p.first": 第一个<p>标签
- "ul li:first": 选取第一个 <ul> 元素的第一个 <li> 元素
- "ul li:first-child": 选取每个 <ul> 元素的第一个 <li> 元素
- "[href]": 选取带有 href 属性的元素
- "a[target='_blank']": 选取所有 target 属性值等于 "_blank" 的 <a> 元素
- "a[target!='_blank']": 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
- ":button": 选取所有 type="button" 的 <input> 元素 和 <button> 元素
- "tr:even": 选取偶数位置的 <tr> 元素
- "tr:odd": 选取奇数位置的 <tr> 元素
- action: 执行对元素的操作
- 动作；
- hide(): 消失
- 事件：事件需要传入触发后执行的方法
- click(): 鼠标点击
- dblclick(): 鼠标双击
- focus(): 获取焦点时
- blur(): 失去焦点时
- 动作；
引用jQuery
本地导入jQuery
<head> <script type="text/javascript" src="jquery-1.10.2.min.js路径"></script> </head>
在线引用jQuery
<!-- 菜鸟教程 --> <head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> </head> <!-- 百度 --> <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head> <!-- 新浪 --> <head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> <!-- Google --> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head> <!-- Microsoft --> <head> <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> </script> </head>
保证在文档加载完成后执行JQuery代码
$(document).ready(function(){ // 开始写 jQuery 代码... });
10. 其他第三方js
- chart: 利用h5画布制作图表
- bootstrap-table: 表格, 分页、获取数据等
- bootstrapValidator: 用于表单验证