2天学会jQuery(day2)

2天学会jQuery(day2)

如果你已经学习过JS，那么jQuery这个JS库十分易学，从了解到熟练使用只需要很短的时间
如果你没有学习过JS，也不重要，jQuery也能上手，因为jQuery在某些程度上可以直接替代JS了
这个内容分两次更新，如果有错误和语义不明确的地方，欢迎评论指出，你的点赞和收藏是对作者原创的最好支持
如果你没有看过2天学会jQuery(day1)，请移步文章链接

jQuery效果(动画)

jQuery给我们封装了一些动画，一些效果如淡入、淡出，滑动需要js大量代码才能实现的，在jQuery中可以很方便的调用jQuery给我们封装好的方法。
这些API不是很多，而且里面的参数都大同小异，十分易学。

显示隐藏

show([speed,[easing],[fn]])

1. 参数如果不写，无动画直接显示
2. speed：速度，一般我们写表示动画时长的毫秒数值(如：1000),或者三种预定速度之一的字符串(‘slow’,‘normal’,‘fast’)
3. easing:(Optional)用来指定切换效果，默认是"swing"，可以参数"linear"
4. fn:回调函数，在动画完成时执行的函数，每个元素执行一次
   hide()的用法一样，show是显示，hide是隐藏，就不做介绍了
   toggle()：切换，如果一个元素已经隐藏，使用这个方法就显示，已经显示，就隐藏，参数都一样就不做过多介绍

滑动

slideUp([speed,[easing],[fn]])
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动效果）
通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
滑动类动画的参数和show()，hidd()一样

淡入淡出

淡入效果(dade(逐渐) In(进来))

渐进方式调整到指定的不透明度

1. opacity：透明度必须写，取值0~1之间
2. speed：速度，一般我们写表示动画时长的毫秒数值(如：1000),或者三种预定速度之一的字符串(‘slow’,‘normal’,‘fast’)
3. easing:(Optional)用来指定切换效果，默认是"swing"，可以参数"linear"

自定义动画

参数：

当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right等等

事件切换

hover([over,]out);

1. over：鼠标移动到元素上触发的函数(相当于mouseover)
2. out：鼠标移出元素触发的函数(相当于mouseout)
   
   如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
   

动画队列及其停止排队方法

动画或效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行

停止动画

加上一个stop()后不管上一次的动画有没有走完，会把上一次的动画给停止了，然后执行下一次的动画
stop()方法必须写在动画的前面，相当于停止结束上一次动画

jQuery内容文本值

主要针对元素的内容还有表单的值操作

1. 普通元素内容html()(相当于原生innerHTML)
   获取元素内容

   //获取div元素里面的内容
   $('div').html();
   

   给元素里面添加内容

   //给div元素里面添加内容
   $('div').html('<p>123</p>')
   

2. 普通元素文本内容text()

   text()//获取元素的文本内容
   text('123')//设置元素的文本内容
   

3. 设置获取表单值val(),(相当于原生的value)
   用法一致，这里就不做过多介绍了

jQuery元素操作

遍历元素

jQuery隐式迭代是对同一类元素做了相同的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。
这个方法主要用来遍历元素

1. each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2. 里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素，不是jQuery对象
3. 所有想要使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)

这个方法还可以遍历数据，处理数据

var arr = [];
var data = {};
$.each(arr,function(i,ele){
})
$.each(data,function(i,ele){
})

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：index是每个元素的索引号；ele遍历内容
3. 如果遍历对象的话，index输出的是属性名，ele是属性值

创建对象

动态的创建一个li标签

var li =  $('<li>我是动态创建的li</li>')

添加元素

1. 内部添加

   $('ul').append(li);//内部添加并且放到内容的最后面，类似appendChild()
   $('ul').prepend(li);//内部添加并且放到内容的前面
   

2. 外部添加

   element.after('内容')//把内容放入目标元素的后面
   element.before('内容')//把内容放入目标元素的前面
   //举个栗子
   //把p元素放在class为test的DIV后面
   $('.test').after(p);
   

3. 删除元素
   删除匹配元素本身

   element.remove();
   

   删除匹配的元素集合中所有的子节点

   element.empty()
   

   清空批评的元素内容

   element.html('');
   

事件注册

1. 单个事件注册

   $('div').click(function(){
   	事件处理程序
   })
   

2. 事件处理 on() 绑定事件

   element.on(events,[selector],fn)
   

   1. events：一个或多个用空格分隔的事件类型，如“click“或”keydown“。
   2. selector：元素的子元素选择器
   3. fn：回调函数，即绑定在元素身上的侦听函数。

我们来看看看这个事件应用的各种场景

1. 三个参数
   可以实现事件委派,把原来加给子元素上的事件绑定到父元素身上，

   	$('ul').on('click','li',function(e){
   		console.log(e.target.innerHTML)
   	})
   

   事件是绑定在ul身上的，触发对象是li，触发了li以后会有事件冒泡，会冒泡到ul上，就会执行里面的代码了
2. 两个参数
   如果不同的事件，执行的操作是一样的，还可以这样写

   $('div').on('click mouseover',function(){
   	console.log(123)
   })
   

3. 一个参数
   可以绑定多个事件，多个事件处理程序

   $('div').on({
   	mouseover:function(){},
   	mouseout:function(){},
   	click:function(){}
   })
   

   优势
   on可以给动态创建的元素绑定事件
   如果元素是动态创建的，在创建之前肯定不能给这个还没有创建的元素添加事件，但是如果使用on就可以

   $('ol').on('click','li',function(){
   	alert(11)//使用on添加事件
   })
   var li = $('<li>我是后来创建的</li>');
   $('ol').append(li);
   

one()

如果有的事件只想触发一次，可以使用one()，one()方法和on()方法的使用一样，但是one()方法使用一次就自动移除了
简单来说，如果给一个元素使用on()添加一个点击事件，点击一次可以触发，但是点击第二次就没有作用了

off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

1. 事件解绑off()
   如果不带参数，将解绑div上面的所有事件
   $(‘div’).off();
   只解绑点击事件
   $(‘div’).off(‘click’);
   如果有事件委托
   $(‘ul’).off(‘click’,‘li’);

自动触发事件trigger()

如果div上绑定了事件，那么点击了才会触发这个函数

$('div').on('click',function(){
	alert('点击了div才会弹出')
})

或者还可以这样，在div上添加点击事件后，加上这个代码，会触发点击事件

$('div').click();

但是jQuery给我们提供了一种自动触发事件的方法

//会自动触发div上面的点击事件，同理，将click换成其他事件类型，也能触发相应的事件
$('div').trigger('click');
//这个方法和上一个方法都是一样的功能，但是不会触发元素的默认功能
$('div').triggerHandler('click');

事件对象

事件被触发，就会有事件对象的产生，这里的事件对象和原生JS中的是一样的

element.on(events,[selector],function(event){})

1. 阻止默认行为：event.preventDefault()或者return false
2. 阻止冒泡：event.stopPropagation()

jQuery对象拷贝

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法

$.extend([deep],target,object1,[objectN])

1. deep：如果设为true为深拷贝，默认为false，浅拷贝
2. target：要拷贝的目标对象(把别的对象的属性放在这个对象里面)
3. object1：待拷贝到第一个对象的对象
4. objectN：待拷贝到第N个对象的对象
5. 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象
   
   targetObj里面如果有相同的数据的话，会被覆盖，如果obj里面还有对象的话，也会拷贝过去
   如果有人这里不懂对象的浅拷贝(任何编程语言都是一样的)，我再仔细说一下，明白的人直接跳过
   
   obj对象里面有一个msg对象，obj对象拷贝给目标对象targetObj，这时targetObj里面也有了msg这个对象，但是，msg对象只是把地址给拷贝过去了，targetObj和Obj里面的msg对象都指向同一个内存地址，只要改变其中一个，另一个对象也会改变。深拷贝把里面的数据完全复制了一份给目标对象。

多库共存

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用会引起冲突。
让jQuery和其他其他的js库不存在冲突，可以同时存在，这就叫多库共存
jQuery解决方案：

1. 如果$符号冲突了，我们就使用jQuery，如jQuery{(}^{\prime }di{v}^{\prime })等同于$(‘div’)
2. 让jQuery释放对$的控制权，让用户自己决定
   如我们自己随便定义一个表示符aaa
   var aaa = $.noConflict();或var aaa = jQuery.noConflict();
   同样的我们选择一个div元素
   aaa(‘div’)

尺寸和位置操作

尺寸

语法	用法
width()/height()	取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHieght()	取得匹配元素宽度和高度值，包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值，包含padding，border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值，包含padding，border，margin

1. 以上参数为空，则是获取相应值，返回的是数字型
2. 如果参数为数字，则是修改相应值，如$(‘div’).width(300)
3. 参数可以不必写单位

位置

1. offset()设置或获取元素的偏移
   offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级元素没有关系
   返回一个对象，包括left和top值
   还可以offset().top单独获取元素距离文档顶部的距离
   
   设置
   
2. 就 position()获取元素的偏移
   获取距离带有定位父级位置(偏移)，如果带有定位的父级，则以文档为准
   这个方法只能获取不能设置偏移
3. scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧距离

就到这里了，欢迎各位大咖进行指点！！！