javaScript笔记

2019-01-08 08:23:31来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:&quot;美女相册&quot;的 js 实现代码

下一篇:对ES6的yield示例分析