jQuery应知应会

什么是jQuery？

• jquery是JavaScript的一个库，是一个封装好的特定的集合
• 主要是为了快速操作DOM，里面基本上是函数方法
• 移动端是用zepto，简化版的jquery，新增了一些移动端api
• 它的宗旨是“写的更少，做的更多”“write less, do more”

jQuery的优点是什么？

• 轻量级的库只有几十kb
• 跨浏览器兼容
• 链式编程，隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持第三方插件：如树形菜单、日期控件、轮播图
• 免费、开源

如何使用jQuery？

页面引入cdn，下载本地在页面引入
$.('.div').hide();支持css选择器还有许多自有选择器来选择dom元素

入口函数：$.(function() {});

jquery对象和dom对象的区别？

• 原生js获取的对象是dom对象
• 用jquery获取的对象是jquery对象
• jQuery对象只能使用jQuery方法，dom对象只能使用原生js方法

dom对象和jQuery对象转换

• dom对象转换成jQuery对象 $.(oDiv) 把原生js获取到的对象用$()包装一下
• jQuery对象转换成dom对象 $.('div')[index] 或 $('div').get(index)

jQuery常用API？

jQuery选择器

支持css选择器$.('选择器')

遍历dom元素的过程叫隐式迭代，相当于将匹配到的所有元素for循环遍历添加css

$.('div).css('background','pink')

jquery筛选选择器

$.('li:first') 获取第一个li元素
$.('li:last') 获取最后一个li元素
$.('li:eq(index)') 选中获取到的li中索引为index位的li元素
$.('li:odd') 选中获取到的li中，索引为奇数的li元素
$.('li:even') 选中获取到的li中，索引为偶数的li元素

jQuery筛选方法
$.('li').parent(); 选中li元素的父级
。。。。。

jQuery样式

jQuery可以使用css方法来简单修改元素样式
$.(this).css({width: '200px', height: '100px'})这种方式可以一起修改多个样式

通过设置类的方式修改元素样式（大量样式修改）

• 添加类名 $.('div').addClass('class')
• 删除类名 $.('div').removeClass('class')
• 切换类名 $.('div').toggleClass('class') 有就删除，没有就添加
• 原生js中className会覆盖原有类名，jQuery中这类操作不影响原类名

jQuery动画(有参数查文档）

显示和隐藏：
显示：show() 隐藏：hide() 切换显示隐藏效果：toggle()

滑动:
slideDown() slideUp() slideToggle()

淡入淡出：
fadeIn() fadeOut() fadeToggle() fadeTo()

自定义动画：animate(params,[speed],[easing],[fn])
参数：params: 想要更改的样式属性，以对象形式传递，必须写，如果是符合属性需要采用小驼峰写法，其他参数可省略
eg:

$.(function() {
	$.('button').click(function() {
	   	 $.('div').animate({
			left: 500,
			top: 500,
			opacity: 0.5
		}, 500)
	})
       })

停止动画效果：
取消上一个动画效果不影响本次动画: 相当于防抖 stop() 方法必须写到动画前面
eg: $.(this).stop().slideToggle();

jQuery属性

元素的固有属性值的设置和获取 element.prop()
获取属性值：prop(‘属性’)
设置属性值：prop(‘属性名’,‘属性值’)

元素自定义属性值的设置和获取 element.attr()
获取属性值：attr(‘属性’)
设置属性值：attr(‘属性名’,‘属性值’)

数据缓存 data() 这个里面的数据是存放在元素的内存里的
设置：$.('span').data('uname', 'parker')
获取：console.log($.('span').data('uname'))

jQuery内容文本值

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

获取普通元素内容 （相当于原生innerHTML）
$.('div').html()

设置普通元素内容
eg: $.('div').html('123') ==> div内部只有‘123’

普通文本元素文本内容 text() （相当于原生 innerText）
$.('div').text()

设置普通元素文本内容
$.('div').text(‘Parker’)

获取表单值 val()
$.('input').val()

设置表单值
$.(input').val('haha')

jQuery元素操作

主要是遍历、创建、添加、删除元素操作

jQuery隐式迭代(遍历）

是对同一元素做了同样的操作，如果想要给同一元素做不同操作，就需要遍历
语法1：$.('div').each(function (index, domEle) { xxxx; } )
eg: (div{$}*3)

$.(function() {
    var sum = 0;
    //each() 方法遍历
    var arr = ['red', 'green', 'vlue'];
    $.('div').each(functon(index, domEle) {//第二个参数是dom对象
        $.(domEle).css('color', arr[i]);
        sum += parseInt($.(domEle).text());
    })
    console.log(sum);//6
})

语法2：$.each($('div'), function(incex, ele) { }) 主要用来处理数据

jQuery创建元素

创建方法：var li = $.('<li></li>')

添加元素

内部添加：$.('ul').append(li) 类似于原生的 appendChild
外部添加：element.after('内容') //把内容放在目标元素后面
element.before('内容') //把内容放在目标元素前面

内添加生成父子结构，外部天加生成兄弟结构

jQuery删除元素

$.('ul').remove(); 删除该节点
$.('ul').empty(); 清空该节点中的子节点
$.('ul').html('空字符串') 清空该节点中的子节点

jQuery事件

常见的注册事件 on绑定事件的优势 jQuery事件委派的优点以及方式 绑定事件与解绑事件

jQuery事件注册

语法： ele.事件名(functoin() {})
常见事件：mouseover、 mouserout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等

jQuery事件处理 on()绑定事件

on{}方法在匹配元素上绑定一个或多个事件的事件处理函数
on绑定事件可以给动态创建的元素绑定事件
jQuery中绑定事件如无特殊要求，一般都用on来绑定

语法：element.on(events, [selector], fn)
events:一个或多个用空格分隔的事件类型
selector：元素的子元素选择器
fn: 回调函数

方法一：

ele.on({//多个事件绑定
		click: functon() {}, 
		mouseenter: function() {}
		})

方法二：

ele.on('mouseenter mouseleave', function() {
 	alert(123)
 })

one()方法

one()绑定事件只会触发一次
$.('div').one('click', function() {} )

事件委托

$.('ul').on('click', 'li', function() {}); //事件绑定在ul上却在它的子元素li上触发（事件冒泡）

解绑事件 off()

off()方法可以移除通过on()方法添加的事件处理程序
$.('div').off(); //解除div上所有on绑定的事件
$.('div').off('click'); //解除div上on绑定的click事件
$.('ul').off('click', 'li'); //解除事件委托

自动触发事件 trigger()

方法一：ele.click() //元素直接调用身上绑定的方法
方法二：ele.trigger('type') //自动触发模式 type是需要触发的绑定在元素上的方法
方法三：ele.triggerHandler('click') //与以上方法的区别是不会触发元素的默认行为，如input获取焦点

jQuery事件对象 e

事件被触发，就会有事件对象产生
ele.on('click', function(e) { console.log(e) })
阻止默认行为： e.preventDefault() 或者 return false
阻止冒泡：e.stopPropagation()

jQuery元素尺寸、位置

jQuery尺寸：

参数为空，就获取值类型为数字型；如果参数为数字则是修改相应值；参数不写单位；
width()/height() 获得匹配元素宽度和高度值 只算width/height
innerWidth()/innerHeight() 获得匹配元素宽度和高度值 包含 padding
outerWidth()/outerHeight() 获得匹配元素宽度和高度值 包含 padding 、border
outerWidth(true)/outerHeight(true) 获得匹配元素宽度和高度值 包含 padding 、border 、margin

jQuery位置：

主要有三个 offset() position() scrollTop()/scrollLeft()

offset() 设置或获取元素相对文档的偏移坐标，与父级无关,该方法有俩属性left、top 获取元素属性方法 offset().top/left 设置元素偏移 offset({top:10,left:10})

position() 只能获取，最近有定位的父级偏移，没有就相对于文档，不能设置

scrollTop()/scrollLeft() 获取或设置页面被滚动条隐藏的距离（获取设置滚动条位置）参数为空是获取，为数字是设置

jQuery对象的拷贝方法

jQuery对象的拷贝方法 $.extend() 相当于合并对象，浅拷贝冲突项会被拷贝来的值覆盖，深拷贝不冲突的属性不会被覆盖
语法：$.extend([deep], target, object1, [objectN])
deep:如果设置为true为深拷贝，默认为false浅拷贝
target：要拷贝的目标对象
object1：第一个要被拷贝的对象

浅拷贝，是将被拷贝对象的引用地址，拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝，参数前面加true，完全克隆对象，修改目标对象不会影响被拷贝对象

jQuery多库共存的2种方法

为了让jQuery与其他js库共存的方法

方法一： 不用$.('div')符号直接用，jQuery('div')
方法二： 自定义标识符 $.noConflict()
eg: var zdy = $.noConflict() //便可以使用 zdy 来代替 $/jQuery

jQuery插件

bootstrap是基于jQuery开发的
引入文件，复制代码，修修改改