js 方法

js
变量类型   
数字 number   字符串string   数组   字典
parseInt(age)   转换为数字类型  不成功则NAN
parseFloat()age  转换成浮点数
a="liveion"
a.charAt(2)  获取元素
a.substring(起始位置，初始位置)
a.length()   获取当前长度
a.trim()   移除空白
a.trimLeft()  移除左空白   a.trimRight()  移除右空白
a.concat("b")   字符串拼接
a.indexOf(b)   获取子序列位置   没有则返回-1
a.slice()  切片
a.toLowerCase()  大写   a.toUpperCase()  小写
a.split(分割字符串，拿到几个分割后的值)
定时器   setInterval(函数，时间)

数组------
a.push(b)   尾部添加值
a.pop()   删除并返回数组的最后一个元素
a.unshift()   头部插入元素
a.shift()   头部删除元素
a.splice(起始位置，删除数据，插入一个值)
a.slice(切片)
a.reverse()  反转倒叙
a.join(符号连接)   将数组连接起来构成一个字符串
a.concat()   连接数组
a.sort()   排序

DOM--------------------
获取元素
docment.getElementById("i1")
docment.getElementsByName("name")
docment.getElementsByTagName("div")
docment.getElementsByClassName("c1")
间接找到标签
	tag=docment.getElementById("i1")
		parentElement   父标签
		 children        所有子标签
		 firstElementChild  第一个子标签元素
		 lastElementChild    最后一个子标签元素
		 nextElementSibling  下一个兄弟标签元素
		 previousElementSibling  上一个兄弟标签元素
docment.getElementById("i1").innerText="新内容"
	   1  innerText 
	   标签.innerText   获取文本内容
	   标签.innerText="xx"   对标签内文本进行重新赋值
	   2  tag.className="c1"  
		  tag.classList  样式列表
		  tag.classList.add("样式名")  添加指定样式
		  tag.classList.remove("样式名") 删除指定样式
		disabled  禁用按钮
		a阻止超链接跳转  return false
		onmouseover 鼠标放上去
		onmouseout  鼠标离开
		onfocus  获取焦点
		onblur   失去焦点
 javascript 三部分
	 1  ECMAScript 基本语法
	 2  DOM document object model 文档对象模型，操作浏览器元素
	 3  BOM browser object model  浏览器对象模型，操作浏览器的
	 window 顶级对象
		window.name
	window.onload=function(){
		页面加载完触发
	}
	window.onunload=function(){
		页面关闭完触发
	}
	 	 console.log()  打印
	 alert()   弹出框 
	 confirm()确认框
	 location.href 获取当前url
	 location.href="baidu.com" 跳转 重定向
	 location.href=location.href  刷新一下
	 location.reload()  刷新一下

	 location.href 获取url
	 location.href="baidu"  跳转 重定向
	 location.href=location.href
--------定时器
		setInterval(函数，时间毫秒)
		clearInterval() 清除定时器
		setTimeout(函数，时间毫秒) 一次性定时器
		clearTimeout()  清除一次性定时器
jQuery
	 类库 （python叫模块）
	 DOM/BOM/JavaScript
	 一 查找元素
	 二 操作元素
	 jquery.    $.
	 转换：
		 jquery对象[0]   >>>DOM对象
		 DOM对象         >>>$(DOM对象)
 选择器
	 1  id   $("#id")
	 2  class   $(".c1")
	 3  <a></a>  $("a")
	 4组合选择器
	 $("a,.c1")所有a标签和c1标签
	 $("a")
	 5 层级选择器
	 $("#i1 a") i1里面的所有a标签 子子孙孙
	 $("#i1>a")  只找儿子 
基本筛选器
	 $("a:first") 找到所有a标签里面的第一个元素
	 $("a：not（）")  不选中
	 $("a:even")  计数    odd偶数
	 $("")   eq()索引   gt() lt()大于多少 小于多少
     ：last  最后一个
	 
	  ...
属性选择器
	 $("[alex]")   具有alex属性标签
	 $("[alex="123"]")   alex属性等于123标签
表单
	 $("input[type='text']")
	 $(":text")
筛选器
	 .next()  下一个标签
	 .prev()  上一个标签
	 .parent()  找父标签
	 .children()  所有孩子标签
	 .siblings()  获取所有兄弟标签
	 .find("属性") 查找元素
	 .index()  获取索引位置
	 .eq() 遍历   加数字就是索引
		first()  last()  hasClass(class)
		nextAll() nextUntil("#i1") 向下找找到哪里停止
		parents() parentsUntil("#i1") 向上找到哪里停止
	 disabled 不可编辑的
	 enabled  可编辑的
	 $(":checkbox").prop("checked")  获取checked值
	 $(":checkbox").prop("checked",true)  全选 设置值
	 $(":checkbox").prop("checked",false) 反选 设置值
	 $(":checkbox").each() 循环元素
		 this DOM对象，代指当前循环元素
	 三元运算
	 var v = 条件？真值：假值
	 click 绑定
	 添加样式  
	 $("#i1").addClass("hidden")
	 移除样式
	 $("#i1").removeClass("hidden")
	 $("#i1").toggleClass("hide")  有就去掉，没有就加上hide
	 $("#i1").hasClass("hide")   返回true  false
	 显示 隐藏标签  display：none
	 .show() 显示   .hide()	隐藏 
	 ****文本操作
	 $().txet()   不写就是获取值  只是文本
	 $().txet(xx)   赋值
	 $().html()   
	 $().html(xx)
	 $().val()  获取value值
	 $().val(xx)  赋值
-------属性操作----
	 $().attr(属性，值) 
	 一个参数获取属性值，两个参数是设置属性值
	 $().removeAttr(属性)  删除值
	 -----专门操作--
	 $().prop("checked",true)   专门用于checkbox  radio  
--------文档处理-----
	 $().append() 添加到最后面
	 $().prepend()  添加到最前面
	 $().after()  添加到当前标签后面  同级
	 $().before() 添加到当前标签前面  同级
	 $().remove()  删除当前标签
	 $().empty()   删除当前标签值，但是标签没有删除
	 $().clone()   克隆
---------css处理----
	 $().css("color","red")
	 document.createElement("span")  创建标签
---------位置---
	 $(window).scrollTop()  获取值
	 $(window).scrollTop(参数)  设置滚轮值
	 offset     指定标签在文档中的坐标
	 $().offset()  获取指定坐标   .left   .top
---------绑定事件------
	 DOM   3种
		1标签中绑定 2js代码中绑定 3事件监听函数对dom绑定
		onclick=   click    .addEventListener("click",函数)  
	 jquery对象
		 $(".c1").click()
		
		 $(".c1").bind("click",函数）
		 $(".c1").unbind("click",函数）
	 
		 $(".c1").delegate("a","click",函数)
	     $(".c1").undelegate("a","click",函数)
		   注意：此方法委托，点击才绑定执行，添加元素具有同样功能
	 
		 $(".c1").on("click,函数")
		 $(".c1").off("click,函数")
	 --------事件执行---
		 onclick="return cli()"  dom需加return
			 return false     阻止事件发生
		 自定义属性
s-2
	 display：none  默认没有
	 全选 反选 以及取消
	 onclick="函数"
	 后台菜单
	 最小宽度
	 min-width
	 min-height
	 border-radius：50%
	 
	 for(var x in [11,22,33]){
		console.log()
	 }
	 a = [11,22,33]
	 for(var i=0;i<a.length;i++){
	 }
	 while(){
	 }
	 break continue
	 if(){}else if(){}else{}
	 ===   ==
	 switch(name){
		case  "1":
			console.log();
		case  "2":
			console.log();
		default:
			console.log();
	 }
	 函数
	普通函数
		 function fun(){
		 
		 }
	 匿名函数
		 function(){}
	 自执行函数，创建完成并且自动执行
	 (function(a){
		console.log(a);
	 })
	 (参数)
	 常用 序列化
	 li=[11,22,33]
	 JSON.stringify(li) 将对象成字符串
	 JSON.parse()将字符串转换为对象类型
	 转义
	 url  decodeurl()   encodeurl()
	 ***eval***  eval(表达式/执行代码)
	 ***时间对象***
	 Date对象
	 var d = new Date()
	    d.getxxx  获取
		d.setxxx  设置
	 **作用域***作用链
		函数内部变量  undefined 未定义
	 ***面向对象*
		this.name   this代指对象相对于python里面的self
	 创建对象
	 var a = new fun()  必须加new
	 原型
	 function Foo(){
		 this.name=n;
	 }
	 Foo.prototype = {
		 "sayName":function(){
			 console.log(this.name)
		 }
	 }
	 ***DOM***
	 直接找document.getElementById()
	 获取文本 
	 innerText  只获取文本
		 innerHTML  获取全部内容
	     value   input  获取当前标签中的值
			     select  获取选择的value值
						selectedIndex  操作
				 <textarea></textarea>  多行文本
		 onfocus="Focus"  获取光标
		 onblur="Blur"    移除光标
		 placeholder="你好啊"
	 样式操作
		 className
		 classList
			 classList.add()
			 classlist.remove()
		 obj.style.color="red"
	 属性操作
	 obj.attributes  获取所有属性
	 obj.setAttribute("key","value") 属性操作添加
	 obj.removeAttribute("value")    属性操作 删除
	 创建标签并添加到HTML中
	 1   对象的方式
		 var tag = document.createElement("input");
			tag.setAttribute("type","text");
			tag.style.color="red";
	 2   字符串方式
		 var tag ="<input type="text" />";
	   appendChild() 添加标签
	 docment.getElementById("i1").insertAdjacentHTML("beforeBegin",tag)
	 beforeBegin  beforeEnd  afterBegin afterEnd
	 提交表单
	 <a onclick="baidu.com">提交</a>
	  <script>
	  docment.getElementById("i1").submit()
	  </script>
	 ***其他***
	 console.log()  打印
	 alert()   弹出框 
	 confirm()确认框
	 location.href 获取当前url
	 location.href="baidu.com" 跳转 重定向
	 location.href=location.href  刷新一下
	 location.reload()  刷新一下
	 var obj = setInterval("函数"，时间) 多少时间执行函数
	 clearInterval(obj)  清除定时器
	 var ob = setTimeout("函数"，时间)   只执行一次
	 clearTimeout(ob)  清除定时器
	 ***事件***
	 onclick onblur onfocus
	 onmouseover   onmouseout
	 
--------offSet---获取元素样式
	     .offSetWidth
		 .offSetHeight
		 .offSetLeft
		 .offSetTop
		 没有脱离文档流
---------scroll滚轮
	 scrollWidth  内容宽
	 scrollHeight 内容高 
	  onscroll  滚动事件 
	 overflow：hidden 隐藏
	 overflow：auto 自动滚轮
	 
	 client 可视区域
--------函数-----
	     构造函数 实例对象原型
	 function Person(name,age){
		 this.name=name;
		 this.age=age;
	 }
	 Person.prototype.eat=function(){}
	 var pre = new preson()
	 constructor  构造器
	 原型：共享数据，节省空间  实现继承
	 原型中的方法是可以互相访问的
	 实例对象使用的属性或者方法先在实例中查找，
		 找不到就去构造函数的原型对象里面去找
	 实例对象中的原型，指向构造函数中的原型
     实例对象的__proto__原型。浏览器使用的
     构造函数中的prototype原型，程序员使用的	 
	 原型链：是一种关系，实例对象和原型对象之间的关系，是通过__proto__来建立关系的 
	 原型对象方法中this就是实例而对象
	 实例对象__proto__原型---构造函数的原型prototype
	 构造函数prototype的__proto__原型指向----object的prototype原型  
	 object的__proto__指向null
------面向对象的特征---
		 封装  继承  多态
	 封装：属性 方法 相同或类似的功能放在一起
	 继承：js中没有类，但是可以通过构造函数模拟类，继承为了数据共享
	 多态：一个对象有不同的行为，或者同一个行为针对不同的对象产生不同的结果
	         要想有多态，就要有继承，js中可以
	 改变原型指向继承：
	 借用构造函数继承：
	 构造函数.call（this,属性...）,属性可以继承，但是方法不能继承
	 组合继承：原型继承+借用构造函数继承
	 拷贝继承：
---------this---
	 普通函数this指向window
	 setInterval  指向window
	 对象。方法中this指向实例对象
	 原型中this'指向实例对象
	 ”use strict“   严格模式
	 
	 函数.apply（对象，数组）  函数.call（对象，参数1，参数2...）
	 运行函数，函数调用，改变this指向
	 注意参数传递的方式不一样
	 bind方法复制的意思
	 var f=f1.bind(对象，参数1，参数2.。。)
-------闭包---
	 概念：函数A中有函数B,函数B中可以访问函数A的
		 变量或数据，同时函数A中return 函数B中可以访问函数A的
------浅拷贝
	  深拷贝
-------正则表达式
	 text   判断字符串是否符合规定的正则
	 exec   获取匹配的数据
	 rep = /\d+/;
	 rep.text("字符串“）
	 /^d+$/  ^开始  $结尾
	 /.../
	 /.../g   全局匹配
	 /.../i   忽略大小写
	 /.../m   匹配多行
	 
------EasyUI  BootStrap	 
	 v-else=""
	 v-show="sex" 元素存在，只是隐藏了
	 v-for="item in list"
	 1.0版本  
		 v-for="(index,item) in list"
		 1.0对象不可用index 唯一性 track-by=“$index”
	 2.0版本 唯一性使用  :key="index"
		 v-for="(item,key) in list"
		 v-for="(item,key,index) in list"
	 v-bind:href="url"
	 v-on:click="函数"
	 v-on="{mouseenter:onenter,mouseleave:onleave}"
	 v-on="{多个事件}"
	 三元法则 条件？真：假
	 计算属性：computed  有缓存提高性能 区别methods
 var vm = new Vue({
	 el:"#app"
	 data:{
		name:"雷锋",
		sex:""
		list:["葱","酱油","大蒜"],
		url:"http://baidu.com"
		
	 }
 })
-------vue
	 vue-cloak 解决插值表达式闪烁问题 
	 v-text=""  没有闪烁问题，但会覆盖原来的内容
	 v-html=""  输出html格式
	 v-bind:title="msg"  绑定指令  简写： 冒号
	 v-on:click="xx"  绑定事件  缩写  @
	 事件修饰符
	 .stop 阻止冒泡 
	 .prevent阻止默认行为
	 .capture 捕获机制 
	 .self 只有当点击事件本身时候才出发，没有捕获和冒泡
	 .once 事件只出发一次
	 v-modle双向数据绑定，只能用于表单元素中
	 :class="['a','b']"  class类的样式
	 v-for="item in list"   {{item}}  for循环
	 注意使用for时需要加v-bind：key=“” 
	 =""  key属性只能使用数字或者字符串
	 定义过滤器
	 Vue.filter("过滤器的名称"，function（）｛｝)