jQuery

jQuery : jquery是js代码库,简化了js对html的操作 , 是js封装好的函数 (其宗旨是写更少的代码,做更多的事)
优点 : 简化了代码,加快了代码的执行速度 , 有强大的选择器,支持几乎所有的css选择器 , 浏览器兼容性比较好
缺点 : 不能向后兼容,每一个新版本不能兼容早期的版本
1.入口函数
1) . $(function(){

	       })
	2) . $(document).ready(function(){

	       })
	3) . jQuery(function($){

	       })
	延迟加载 : $.holdReady(true)   onload  ,当等于 true 的时候不加载
2.选择器
        ##基础选择器
	1) . id选择器
		$('#div')
	2) . 类选择器
		$('.div')
	3) . 选择所有元素节点
		$('*')
	4) . 元素选择器  element
		.eq(数字)  选择第几个 
		$('div:eq(0)')==$('div').eq(0)
	5) . 属性选择器
		$('input[name]')
		$("input[name==66]")
	
	
      ##层级选择器
	1) . 父子选择器
		$('ul>li')
	2) . 祖先选择器
		$('ul li')
	3) . 兄弟选择器
		$('.aa:eq(0)~li')
	
       ##筛选
	1) . 第一个
		$('li:first')
	2) . 最后一个
		$('li:last')
	3) . 偶数
		$('li:odd')
	4) . 奇数
		$('li:even')
	5) . 等于3
		$('li:eq(3)')
	6) . 大于3
		$('li:gt(3)')
	7) . 小于3
		$('li:lt(3)')
	8) . 去除所有与给定选择器匹配的元素
		$('li:not([class])')   //选中没有class属性的li标签
	9) . 过滤
		$('li').filter([class]')  //保留li里class属性

3.匹配内容的
	1) . 匹配没有内容的
		$('li:empty')
	2) . 查找
		$('li:contains("11")')
	3) . 匹配所有含有选择器所匹配的元素
		$('ul:has(p)')


4.可见性
	1) . 获取所有隐藏div
		$('div:hidden')
	2) . 获取所有显示div
		$('div:visible')


6.表单
	1) . $('input[name]')
	2) . $('input[name=="aa"]')    //name=aa的
	3) . $('input[name!="a"]')	//name不等于		
	4) . $('input[name^="a"]')	//name以a开头的
	5) . $('input[name$="a"]')	//name以a结尾的
	6) . $('input[name*="a"]')	//name包含a的

7.属性
	1) . attr 从标签里面搜索属性(自定义和内置属性)
	    var a=('div').attr('title')  //获取属性值 
	    var a=('div').attr('title','嗯呢')  //修改属性值
	    var  a=('div').attr({'id':66,class:'zhu'})  //多个参数用对象格式
	2) . prop 从属性集合里面搜索(只能操作内置属性不能操作自定义属性),速度快
	var a=$('h1:eq(0)').prop('id')

	3) . 删除属性
		removeAttr()  删除属性节点
		removeProp() 把属性值改为undefind
		empty()  删除所有的子元素
		remove()  删除匹配到的元素(清除缓存)
		tetach()   删除匹配到的元素(不清除元素,保留之前的事件,再添加回来还能继续使用之前的事件)
		$('#div').off() 删除匹配元素的所有事件(去除绑定)
		$('#div').off('click')
		
	4) . 类样式
		addClass()  添加类样式
		removeClass() 删除类样式
		toggleClass()  切换类样式(有类名就删除,没有就添加)
8.文档类型
	$('div').get(0)(获取的是一个数组,可以使用数组的方法) = $('div')[0]
	##插入
		内部
			后  $('#box').append(a)
			      a.appendTo($('#box'))
			前  $('#box').prepend(a)
			      a.prependTo($('#box'))
		外部   
			后 $('#box').after(a)
			     a.insertAfter($('#box'))
			前 $('#box').befor(a)
			     a.insertBefore($('#box'))
	
	##    包裹$('div').wrap('<div></div>')
  	         移出父元素(同时删除父元素他的兄弟也被删除父元素)$('p').unwrap()
	
	##替换
		replaceWith   
			$('h1').replaceWith('<li>我是li</li>')

	##克隆	
		clone    $('div').clone(true,false) //第一个参数是true时 可以克隆当前元素的事件
					  //第二个参数是true时可以克隆当前元素的子元素的事件
		cloneNode   $('div').cloneNode(true)  //加true是深度克隆,会把子节点也克隆过来,但是不会吧事件也拿过来
	
	##位置
		offset()  获取当前元素距离浏览器的left和top值  返回的是一个对象
		offsetLeft()  获取的是距离父元素的left(父元素必须有定位)
		position()  类似于原生态js的offsetLeft和offsetTop
		scrollTop 有参数是设置高度 没有参数是获取滚动条距离顶部的高度
		scrollLeft 有参数是设置宽度 没有参数是获取滚动条距离左边的宽度
	
	##尺寸
		height()   有值是设置,没值是获取当前元素的高(不包括边框,内部白和外部白)
		width()  同上
		innerHeight()  获取当前元素的高度(不包括边框,包括内部白)
		innerWidth() 同上
		outerHeight()  获取高度(边框+内部白+高度) 参数为true加上外部白
		outerWidth()  同上

9. 阻止冒泡事件的方法
	e.stopPropagation()
	return  false     //阻止默认行为
	window.event.cancelBubble=true  兼容IE8以下
	e.preventDefault()	//阻止默认行为
	e.returnValue=false //IE 阻止默人认行为
	$('form').eq(0).on('submit',false)    //阻止默认行为

anmate('css样式',完成的时间(可以设置毫秒),function(){})

10. 焦点事件
	blur()  鼠标失去焦点事件 (失去光标)
	focus() 鼠标获取焦点事件 (获取光标)
	change()  属性值(选中项)发生改变触发的事件
	focusin()  获取焦点
	focusout()  失去焦点

	focus() 当前元素获取焦点事件
	focusin() 当前元素或其内的任意一个元素获取焦点事件时触发
11 . 事件 
	keypress()    键盘按下的第一个默认值不显示,第二次按下才显示第一次按下的默认值
	keydown()   键盘按下事件
	keyup()        键盘抬起事件
	mouseenter()  移入   事件只有在鼠标指针进入被选元素时被触发的
	mouseleave()  移出   
	mouseover()  移入   事件在鼠标指针进入任何子元素时会被触发
	mouseout()    移出
	
	select()  当文本域或input标签里面的文本被选中时会触发select事件
	
	resize()   当浏览器窗口发生改变时触发此方法
	unload()  离开页面时触发/url地址发生改变
	
	显示隐藏 : 
		显示:
		show()  显示
		slideDown() 下滑显示
		fadeIn()  淡入显示
		隐藏:
		hide()  隐藏
		slideUp()  上滑隐藏
		fadeOut()  淡出隐藏
		切换:
		toggle() 
		slideToggle() 上滑下滑切换
		fadeToggle() 淡入淡出切换
		自定义:
		animate(css所有的样式,动画时间(slow,noemal,fast),动画形式(缓冲swing,匀速linear),回调函数)
		
	error   :    当元素遇到错误（没有正确载入）时，发生 error 事件
		eg : 如果图像不存在，则用一段预定义的文本取代它
		$("img").error(function(){
				$("img").replaceWith("<p><b>图片未加载！</b></p>");
		});
	
12. on 和  bind
	on 可以多一个selector参数   ,可以给子元素添加事件 ,使用on添加的事件比如给自己子集使用类选择器添加的 ,后来创建的含有这个类名的子节点也有事件
	bind只能给自己添加事件

13 . get()和eq()
	get()返回的是DOM对象组成的数组
	eq() 返回的是jQuery对象

14 . extend() jquery扩展方法  一般在写插件时用到
	
	$.extend({
	     abc:function(a){
        		          a.css({'color','red'})
	          return  a
        		      }
	 }) 
	$.abc($('#box'))

	$.fn.extend({
	      abc:function(){  // fn.extend 这个函数里面不用写参数
	        console.log(this)
	        console.log($(this))   //这两个this都是指向的jquery对象
	         this.css({'color':'red',fontSize:'36px'})
	         return this
	     }
	})
	fn.extend 的节点可以直接 .  abc() 的方法
	$('#box').abc().click(function(){

	})
	jQuery.extend() 扩展 jQuery 类本身，为jQuery类添	加类方法（静态方法)      :    需要通过jQuery类来调用（直接使用 $.xxx 调用）；

jQuery.fn.extend() 为jQuery类添加成员函数，jQuery类的实例可以使用这个成员函数。 : 所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）

15 . ajax
	$.ajax({
	      url:"http://localhost/13/1.php",
	      data:{'aa':'天津'},      aa指的是后端的接口
	      jsonp:'ppp',      ppp指的是callback   eg: "https://query.asilu.com/weather/gaode?callback='abc'"  那后端就会根据callback这个参数的值来调用函数 abc()
	     async:true,   默认是true  异步   false  同步
	     dataType: 'jsonp'   设置返回的数据类型  eg: xml  json   text  jsonp
	     success:function(da){					状态码 statusCode:{ 404, function(){ },200:function(){ } }
		//成功进
		console.log(da)
	    },
	    error:function(da){
		//失败进
		console.log(da)
	    }
	})


	$.get('1.xml',{'name':'张三'},function(d){
		console.log(d)
	},'xml')
	参数1: url  必选参数
	参数2: 往后端携带的参数
	参数3: 回调函数 用来出来响应数据
	参数4: 用来设置数据类型 eg:xml  text  json  jsonp
	$.post('1.php',{'name':'李四'},function(d){
          			console.log(d)
            	},'text')
	
	get , post ;
		get : 从服务器上获取数据 , 传输数据量小 , 安全性低
		post : 向服务器发送数据 , 传输数据量大 , 安全性高 , 涉及到用户隐私的用post 		

	状态码 : 0 : (未初始化) send() 方法还没有调用
	             1 : (载入)  已调用send() 方法 , 正在发送请求
	             2 : (载入完成) send() 方法 调用完成
	             3 : (交互) 正在解析响应内容
	             4 : (完成) 响应内容解析完成 , 可以在客户端调用了

16 . cookie session localstorage sessionstorage : 
	cookie 是存放到客户端(浏览器中的)   存储大小是4kb 存储条数一般是20-50左右根据不同浏览器 , 每个域名存放的条数不一样
	session 是存放在服务器的 (后端的)    没有存储限制
	localstorage 是存放到客户端浏览器的 存储大小是5MB 不手动删除的话就会永久存储
	sessionstorage 是存放到客户端的 临时存储 存储大小是5MB 关闭浏览器就自动删除了 		

	设置(写法)  document.cookie='sex2=女'  没有设置过期时间 ,当关闭浏览器后悔自动删除
		
		var d=new Date()
		var b=d.getTime()+(7*60*60*24*1000) //7天后的日期
		d.getTime(b)
		设置过期时间
		document.cookie='sex2=女;expires='+d.toUTCString()  
		设置过期时间和存储位置
		document.cookie='sex1=女;expires='+d.toUTCString()+";path=/"
		
	localstorage  : 写法  localstorage.setItem('name','张三')   //添加  (如果名字一样就是修改)
			localstorage.getItem('name')   //获取(索引/键)获取对应的值
			localstorage.removeItem('name')  //根据键名删除
			localstorage.clear()  //清空