JQuery 常用方法属性

JQuery 入口函数

DOM 加载完成的监听方法：
第一种：

$(function(){   })

第二种：

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

JQery顶级对象$

$类似于javascript window对象

JQuery 和DOM 转换

DOM -->JQuery

var box = document.getElementById('box')
var  jquery = $(box);

JQuery–>DOM

var dom = $('div')[0];

JQuery 选择器

id选择器

$('#id')
$('.class')
$('div')

并集选择器

 $('div,p')

交集

$('li.current')

子代

$('ul>li')

后代

$('ul li')

属性方法

$('#id').css('key','value')

筛选

parent() 父元素
children()  子元素
find()  查找
siblings() 兄弟节点
eq()		等于

JQuery 样式操作

js中设置className 覆盖原先里面的类名
JQuery里面className类操作只是对指定类进行操作，不影响原先类名

JQuery 动画效果

显示隐藏

show(speed,easing,fn())
	参数可以省略
	speed:slow normal fast，也可以输入毫秒数值1000
	easing:指定切换效果，swing linear
	fn 回调函数 ，动画完成执行的函数	
hide() 同上
toggle() 切换

滑动

slideDown() 下滑
	slideUp() 上滑
	slideToggle()

淡入淡出

fadeIn()
	fadeOut()
	fadeToggle()
	fadeTo()

自定义动画

animate()
hover(over,out)	事件切换
	over:鼠标移动到元素上要触发的函数，mouseenter
	out:鼠标移出元素要触发的函数，mouseleave
	如果只写一个函数，则鼠标经过和离开都会触发它

属性操作

设置或者获取固有属性prop()
prop('属性')
prop('属性','属性值')

设置获取自定义属性值
attr('key')
attr('key','value')

数据缓存
data('name':'value') 向元素附加数据
data('name') 获取数据

文本属性

html('内容')  相当于innerHTML
text('文本内容') 相当于innerText
val('内容') 类似于value

元素操作

遍历元素
	$('div').each(function(index,domEle){
		doSomething();
	})
	index:每个元素的索引
	domEle:DOM元素对象
创建元素
	$('<li></li>') 创建li
	
ele.remove()
ele.empty()
ele.html()

事件注册：

$('div').click(function(){
	
})

事件on,注册多个事件
$(‘div’).on(‘mouseenter mouseout’,function(){
})
多个事件同时处理
$(‘div’).on({
click:fuction(){},
mouseenter:function(){}

	})

解绑事件：
$(‘div’).off(‘click’) 解绑点击事件
$(‘div’).off(); 解绑所有事件
$(“div”).trigger(“click”); 代码触发点击事件

事件对象 event

$('div').on('click',function(event){
	//阻止冒泡
	  event.stopPropagation();
	
})

JQuery拷贝对象 extend

$.extend(deep,target,obj1, objN);
deep true 深拷贝，修改目标对象不会影响拷贝对象，默认false
target: 要拷贝的目标对象
obj1: 被克隆的对象
objN:被克隆的第N个对象

尺寸位置操作

width() height() 元素宽高
innerWidth() innerHeight() 宽高包含padding
outerWidth() outerHeight() 宽高包含padding、border
outerWidth(true) outerHeight(true) 宽高包含padding、border、margin

offset

设置或返回被选元素相对于文档的偏移坐标，和父级没有关系
	left 获取距离文档左侧的距离
	top 获取距离文档顶部的距离
设置元素的偏移：offset({top:10,left:30})	

position

被选元素相对于带有定位的父级偏移坐标，如父级都没有定位，则以文档为准
		left:距离定位父级顶部的距离
		top：

scrollTop()/scrollLeft

设置或获取元素被滑出的头部或者左侧，不加参数是获取，加参数是设置。