javaScript笔记

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("参数列表", "方法体和返回值");　　　　

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:获取屏幕的信息　　
    • width:显示器屏幕的宽度　　　　
  • 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: 浏览器窗口的内部宽度　　　　
• 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: 属性对象　　　　
• 全局函数：
  • 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: 用于表单验证

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有