jQuery

jQuery下载官网：https：//jquery.com/

$('')可以获取元素和选择器，以伪数组的形式储存
element.hide（）可以隐藏元素show()可以显示元素

$(function(){
	//等页面加载完之后再执行里面的动作
})

DOM对象：用原生js获取的对象	jq对象：用jq获取的对象
jq对象转化为DOM对象：$('jq对象')[index]index为索引值
DOM对象转化为jq对象：$(DOM对象)，不需要加引号

jq设置样式的方法：$('element').css('属性','值')
$('element').css('属性')可以得到当前属性的值
$(this).css({
	'color':'white',
	'width':300,
});//以对象的形式更改样式，方便设置多组样式，复合属性要采用驼峰命名法，如果值不是数字，则需要加引号
通过以上方式设置样式有隐式迭代：把匹配的所有元素内部进行遍历循环，给每个元素添加css样式

jq筛选选择器：
$('li:first'):获取第一个li元素
$('li:last'):获取最后一个li元素
$('li:eq(2)'):获取li中索引号为2的元素
$('li:odd'):获取li中索引号为奇数的元素
$('li:even'):获取li中索引号为偶数的元素

element.parent("")根据名字或者class查找父级元素
$('li').parent():查找最近一级的父级
$('ul').children('li'): 查找ul最近一级的li或者$('ul>li')
$('ul').find('li'):获取ul中全部的li
$('.first').siblings('li'):根据名字或者class查找兄弟结点，不包括自己本身
$('.first').nextAll():查找当前元素之后所有的同辈元素
$('.last').prevAll():查找当前元素之前所有的同辈元素
$('ul li').eq(index):选择索引值为index的元素

jq注册事件方法：
$("ul>li").mouseover(function(){
	$(this).show() //$(this)为获取绑定事件的元素
})

$('li').index()可以得到当前元素的索引值，可以配合eq使用
判断某个元素是否有类名：$('element').hasClass('类名')

jq排他思想：直接给li绑定点击事件，通过隐式迭代会绑定到全部的li上，然后再用$(this).index()得到当前点击的li的索引值，
使用$('li').eq(index)给当前的li添加样式，再用$('li').eq(index).siblings()给出当前li以外的兄弟添加样式

添加类：$('element').addClass('current')
删除类：$('element').removeClass('current')
切换类：$('element').toggleClass('current')

使用链式编程操作实现排他思想的tab栏切换：$(this).addClass('current').siblings.removeClass('current')
var index=$(this).index()
$('li').eq(index).show().siblings().hide()

显示隐藏切换效果：
show([speed],[easing],[fn]) 	hide([speed],[easing],[fn])  	toggle([speed],[easing],[fn]) 
滑动效果(上拉下拉)：
slideDowm([speed],[easing],[fn])		slideUp([speed],[easing],[fn])		slideToggle([speed],[easing],[fn])

淡入淡出效果：
fadeIn([speed],[easing],[fn]):
fadeOut([speed],[easing],[fn]):
fadeToggle([speed],[easing],[fn]):
fadeTo([speed],[easing],[fn]):

自定义动画：
animate(params,[speed],[easing],[fn])
(1)params:想要更改的样式属性，以对象形式传递(例如：left:500)，必须写，要采用驼峰命名法


(1):参数都可以省略，无动画直接显示
(2):speed:三种预定速度之一的字符串('show','normal','fast')或者用毫秒数值
(3):easing:用来指定切换效果，默认值是swing，可用参数linear
(4):fn:回调函数，在动画完成时执行的函数，每个元素执行一次

修改透明度大小：fadeTo(时间，透明度大小0-1)

事件切换：
hover([over(function(){})],out(function(){})),如果只写一个函数，鼠标经过和移除都会触发该函数，可以配合toggle使用
(1)over:鼠标移到元素上触发的函数
(2)out:鼠标移除触发的函数

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
停止排队：stop()
(1):stop()方法用于停止动画或者效果
(2):stop()写到动画或者效果的前面，相对于停止结束上一次的动画

获取属性：element.prop('属性')
修改属性：elementt.prop('需要修改的属性','修改的内容')
设置或者获取自定义属性：element.attr()

:checked).length可以得出被选中复选框的个数,因为jq获取的元素是伪数组形式
获取文本内容使用element.html()或者element.text()
设置文本内容使用element.html('内容')或者element.text('内容')
获取表单元素的内容用val()
设置表单元素的内容用val(值)

element.substr(1):代表从第一个字符开始截取字符串
计算的结果如果想要保留两位小数通过element.toFix(2)
在文本框中输入内容会触发change事件

jq隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
遍历方法1：$("div").each(function(index,doEle){xxx;})
1.each()方法遍历匹配的每一个元素。主要用DOM处理
2.里面的回调函数有2个参数，index是每个元素的索引号，demEle是每个DOM元素对象
3.所以想要使用jq方法，需要给这个DOM元素转换为jq对象$(domEle)
4.设置一个数组和元素匹配对应的属性，把arr[i]的属性给i对应的元素
遍历方法2：$.each($("div"),function(index,ele){
	//$.each()方法主要用于遍历数组，处理数据
})
1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

parseInt(a):可以把a转化为整数

创建元素：
var li=$("<li></li>");
内部添加元素:
$("ul").append(创建的元素)//内部添加，放到element的最后
$("ul").prepend(li)//内部添加并且放到内容的最前面
外部添加元素:
element.after("内容")//添加到element之后
element.before("内容")//添加到element之前
内部添加元素是父子关系，外部添加元素是兄弟关系
删除元素：
element.remove()//删除匹配的元素(本身)
element.empty()//删除匹配的元素集合中的子节点
element.html("")//清空匹配的元素内容

jq单个事件注册：element.click(function(){事件处理程序})
事件处理on()绑定事件:
element.on(events,[selector],fn)
1.events:一个或者多个用空格分隔的事件类型
2.selector：元素的子元素选择器
3.fn:回调函数
例：$("div).on({
	mouseenter:function(){
		$(this).css("background","skyblue");
	},
	click:function(){
		$(this).css("background","red");
	}
})
on可以实现事件委托(委派),把事件绑定在ul上，但是点击li触发
例如：$("ul").on("click","li",function(){
	alert(11);
})
on可以给动态创建的元素绑定事件


事件解绑：element.off();//接触元素绑定的全部事件
element.off("click");//接触元素绑定的点击事件
绑定事件一次性使用版：element.one();
自动触发事件：1.element.click()
2.element.trigger("事件") 
3.element.rriggerHandler("事件")：不会触发元素的默认行为


jq事件对象：element.on("events",[selector],function(event){
	
})
阻止默认行为：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()

jq对象拷贝:
$.extend([deep],target,object1,[objectN])
1.deep:如果设为true为深拷贝，默认为false浅拷贝
2.target:要拷贝的目标对象
3.object1：待拷贝到第一个对象的对象
4.objectN:待拷贝到第N个对象的对象
5.浅拷贝是把被拷贝的对象复杂数据类型中的地址给目标对象，修改目标对象会影响被拷贝对象
6.深拷贝，前面加true完全克隆（拷贝的是对象，而不是地址），修改目标对象不会影响被拷贝对象
例：var targetobj={}
var obj={
	id:1,
	name:'andy',
}
$.extend(targetobj,obj);

jq插件：http://www.jq22.com/
http:www.htmleaf.com/

element.splice(从哪个位置开始删除，删除几个元素)：可以删除数组当中的某一个元素

jq尺寸：
width()/height():取得匹配元素宽度和高度值，只算width/height，在括号中加数值可以直接修改，不需要加单位
innerWidth()/innerHeight():取得匹配元素宽度和高度值，包含padding，在括号中加数值可以直接修改，不需要加单位
outerWidth()/outHeight():取得匹配元素宽度和高度值包含padding、border，在括号中加数值可以直接修改，不需要加单位
outerWidth(true)/outerHeight(true):取得匹配元素宽度和高度值，包含padding、border、margin，在括号中加数值可以直接修改，不需要加单位

jq位置：
1.offset()设置或获取元素偏移
offset()方法设置或返回被选元素相对于文档的偏移坐标(top或者left)，跟父级没有关系
修改偏移element.offset({
	top:200,
	left:200,
})
2.position()方法用于返回被选元素相对于带有定位的父级偏移坐标(top或者left)，如果父级都没有定位，则以文档为准，这个方法只能获取，不能设置偏移
3.$(window).scrollTop()可以获取页面被卷去的头部大小，在括号中写具体的数值可以设置页面的位置
返回顶部案例：
$("element").click(function(){
	$("body,html").stop().animate({
		scrollTop:0//返回页面顶部
	});
})