JQuery基识

以下包含

划入、划出、切换

淡入、淡出

自定义动画

动画队列与停止动画

动态创建元素

添加节点的几种方式

清空节点与移除节点

克隆节点：clone（）

获取表单/设置表单元素内容

JQuery中操作属性

尺寸和位置的操作

offset() 和 position()

scrollLeft() 和 scrollTop()

划入、划出、切换

划入：slideDown（参数1，参数2）

参数1：动画执行的时长
参数2：动画执行完成后的回调函数

划出：slideUp（参数1，参数2）

参数1：动画执行的时长
参数2：动画执行完成后的回调函数

切换：slideToggle（参数）

参数：动画执行完成后的回调函数

隐藏状态-->划入
显示状态-->划出

淡入、淡出（相对于页面）：改的是透明度

淡入：fadeIn（参数1，参数2）

参数1：动画执行的时长
参数2：动画执行完成后的回调函数

淡出：fadeOut（参数1，参数2）

参数1：动画执行的时长
参数2：动画执行完成后的回调函数

切换：fadeToggle（参数）

参数：动画执行完成后的回调函数

隐藏状态-->淡入
显示状态-->淡出

淡入到哪里：fadeTo（参数1，参数2）

参数1：时间
参数2：谈入完成时的透明度

自定义动画

animate
参数1：必选的，对象，需要做动画的属性
参数2：速度
参数3：缓动还是匀速 
	linear	匀速
	swing	缓动
参数4：回调函数
	无限套娃
	
eg：
	$('#div').animate({
		left:800,
		width:200,
		height:200,
		opacity:0.5
	},2000,'linear',function(){
		alert("动画执行了");
	});

动画队列与停止动画
stop（参数1，参数2）
默认 stop（false,false）

参数1：是否清除队列 true/false
参数2：是否跳转到最终效果 true/false

eg：
	$(this).find('ul').stop(true,false).slideUp(150);

动态创建元素

原生js创建节点

1.html（）

1.1.获取内容html（）不给参数
获取到元素的全部内容

1.2.设置内容：html（）方法给参数
会把原来的内容给覆盖
会把标签中的内容给解析出来
$('#div1').html（‘我是设置的内容<a href = "https://www.baidu.com"></a>’）

JQuery中创建节点

2.$()

能创建元素，但是创建的元素只存在于内存中，想要显示，就得追加

var $link = $(<a href = "https://www.baidu.com/">我是新闻</a>)
$('#div1').append($link)

添加节点的几种方式

1.qppend()
父元素.qppend(子元素)
作为最后一个子元素添加

2.prepend()
父元素.prepend(子元素)
作为第一个子元素添加

3.before
元素A.before(元素B)
把元素B插到元素A前面，作为兄弟元素添加

4.after
元素A.after(元素B)
把元素B插到元素A后面，作为兄弟元素添加

5.appendTo
子元素.appendTo(父元素)
把子元素作为父元素的最后一个子元素添加

清空节点与移除节点

清空节点：empty（）	清空节点之后，只是内容没有，ul还在
移除节点：remove（）	什么都没有了


1.清空ul	
$('#ul1').html("");	//不推荐使用，有可能会造成内存泄漏，不安全
$('#ul1').empty();	//推荐使用

2.移除某一个元素
$('#li3').remove();	//自杀

3.移除ul，但是只能回去li3这个标签
$('#li3').parent().remove();	//坑爹

克隆节点：clone（）

克隆的只存在与内存中，如果要在页面上显示，就应该追加到页面上

clone()方法参数不管是true还是false都会克隆到后代节的

有true和false节点的区别

参数为true 表示会把事件一起克隆
参数为false 不会把事件一起克隆

不给参数表示默认为 false


修改克隆节点的id
$cloneDiv.attr('id','div2');
 

获取表单/设置表单元素内容

原生js是通过value属性来获取或者设置的

Jquery
1.val()方法，不给参数就是获取
2.val()方法，给参数就是设置

JQuery中操作属性

attr() removeattr()
1.设置属性
attr(属性名,属性值)
设置多个属性
attr({
    key：value；
    key：value；
})
2.获取属性
attr(属性名)

3.移除属性
removeAttr(属性名)
removeAttr("aaa bbb ccc")

在jQuery1.6以后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法

尺寸和位置的操作

1.获取宽高
width();
height();

2.设置宽高，有参数
width();
height();

3.获取宽高+padding
innerWidth();
innerHeight();

4.获取宽高+padding+border
outerWidth();
outerHeight();

5.获取宽高+padding+border+margin
outerWidth(true);
outerHeight(true);

6.页面可视区的宽高
$(window).width();
$(window).height();

offset() 和 position()

offset()
元素距离document的位置

position()
获取距离有定位的父元素的位置

scrollLeft()  和  scrollTop()

1.获取元素被卷曲的高度

scrollLeft() 
元素内容被卷曲出去的宽度
scrollTop()
元素内容被卷曲出去的高度

2.设置元素被卷曲的高度

scrollLeft(参数值) 
scrollTop(参数值)

3.获取页面被卷曲的高度

$(window).scrollLeft()
页面被卷曲出去的宽度
$(window).scrollTop()
页面被卷曲出去的高度

4.设置页面被卷曲的高度

$(window).scrollLeft(参数值) 
$(window).scrollTop(参数值)

可以用来设置回到顶部或者底部

同时注册事件，也不支持动态注册

1.简单事件绑定

2.bind注册事件

3.delegate注册委托事件-原理：时间冒泡
	支持同时注册，也支持动态注册

4.Jquery1.7以后，用on统一了事件的注册方式
4.1 on简单注册事件 不支持动态

$('div').on('click',function(){
	console.log("我是单击时间");
});

4.2 on注册事件委托

$('body').on('click','div,span',function(){
	console.log("123...");
})

on注册事件的语法：	
	
	第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
 
	第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
 
     第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
 
     第四个参数：handler，事件处理函数
 
$(selector).on(events,[selector],[data],handler);

off 解绑事件

off()不给参数就是解绑所有的事件

off('click')解绑指定的事件 

事件触发 tigger 

用代码的方式触发事件

$('#one').on('Haoge','function(){
	console.log("");
}')
$('#one').on('click','function(){
	$('#one').tigger('Haoge');
}')

事件对象

１.注册一个事件，系统就会帮我们生成一个对象记录这个事件出发时候的一些信息

jQuery中用事件参数e来获取

是对原生JS的封装，处理了兼容性

２.事件对象常用的三个坐标

screenX	屏幕左上角
clientX	页面可视区的左上角（忽视滚动条）
pageX	页面的最顶部的左上角（计算滚动条）

3.
e.stopPropagation();阻止事件冒泡
e.preventDefault();阻止事件行为
return false;既能阻止事件冒泡，也能阻止事件行为

4.获取键盘按键

e.keyCode

 
必须是jquery才能点出jquery方法
 
end()
回到上一个状态

end()是jquery方法，得jQuery对象才能点出来，end()方法返回对象也是jQuery对象

显示迭代

each
便利jQuery对象集合，为每个匹配的元素执行一个函数

eg：
	$('.lis').each(function(index,element){
	$('.li').css('opacity','(index+1)/10');
});

多库共存

1.查看jQuery的版本

jQuery.fn.jquery
jQuery.prototype.jquery
$.fn.jquery
$.prototype.jquery

2.引入多个jQuery文件，使用的$是后引入的那个，文件覆盖

3.两库共存

$.noConflict();
把$控制权释放
还可以用jQuery
此时引入两个库
$ 和 jQuery不冲突

var _$ = $.noConflict();有返回值
_$和jQuery的作用相同


4.多库共存

连续释放，然后用值接受

颜色插件·

animate动画不会改变背景颜色，如果想改，就得使用插件

jq22.com

省市联动插件使用

1.引入jquery文件
2.引入插件文件
3.调用插件方法

使用插件十分简单，但是不能过分依赖

UI插件

开发jQuery插件

1.给jQuery的原型添加方法
	实例方法

2.给jQuery直接添加
	静态方法


一般都有返回值